手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元

web前后端交互

前后端交互可以采用混合式，比如：

<?php
  
 //首先在这里写好相关的调用代码
 function OutputTitle(){
   echo 'TestPage';
 }
 function OutputContent(){
   echo 'Hello!';
 }
  
 //然后再下面调用相关函数就可以了
 ?>
  
 <!DOCTYPE html>
 <html>
   <head>
     <title><?php OutputTitle(); ?></title>
   </head>
   <body>
     <span><?php OutputContent(); ?></span>
   </body>
 </html>
 
示例2：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图书信息显示</title>
<link rel="stylesheet" type="text/css" href="css/font.css">
</head>
<body topmargin="0" leftmargin="0" bottommargin="0">
<table width="703" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td  bgcolor="#EF5E0F" ><table width="703" border="0" align="center" cellpadding="0" cellspacing="1">
      <tr>
        <td height="25" colspan="5" bgcolor="#FFFFFF">&nbsp;</td>
      </tr>
      <tr>
        <td width="187" height="25" bgcolor="#F39A40"><div align="center">书名</div></td>
        <td width="173" bgcolor="#F39A40"><div align="center">作者</div></td>
        <td width="101" bgcolor="#F39A40"><div align="center">价格</div></td>
        <td width="131" bgcolor="#F39A40"><div align="center">出版社</div></td>
        <td width="105" bgcolor="#F39A40"><div align="center">出版时间</div></td>
      </tr>
      <?php
      $conn=mysql_connect("localhost","root","root");
      mysql_select_db("db_book",$conn);
      mysql_query("set names gb2312");
      $sql=mysql_query("select * from db_book order by id desc",$conn);
      $info=mysql_fetch_array($sql);
       if($info==false)
        {
          echo "暂无图书信息！";
        }
        else
        {   
          do
           {
      ?>
      <tr>
        <td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[bookname];?></div></td>
        <td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[author];?></div></td>
        <td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[price];?></div></td>
        <td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[bookpublic];?></div></td>
        <td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[pubtime];?></div></td>
      </tr>
      <?php
          }while($info=mysql_fetch_array($sql));  
        }
      
      ?>
    </table></td>
  </tr>
</table>
</body>
</html>
 
还可以使用模板，比如php+Smarty模板：
 
test1.html:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>smarty test1</title>
</head>
<body>
它的名字叫{$name}
</body>
</html>
 
test1.php:
<?php
require './libs/Smarty.class.php';
$smarty=new Smarty();
$name='刘二狗';
$smarty->assign( 'name' , $name );
$smarty->display('./test1.html');
 
但是现在流行的模式是前后端分离（比如web service），后台提供http api，返回json数据供前端动态解析显示
 
 
nodejs
 
nodejs是用js写服务端代码的框架（功能相当于php，jsp），与php不同，nodejs可以自己启动http服务，php要依赖apache等web服务器

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

  • 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
  • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
  • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
mac默认安装了nodejs和npm
 
一个简单的后台实例，还有配套的与后台进行交互的简单网页。
页面端使用了jQuery进行控制，
后台使用nodejs作为操控语言，使用express执行网络操作

整个工程结构如下：

  1. 根目录--------------
  2.     |-package.json
  3.     |-test.js
  4.     |-public
  5.         |-main.html
  6.         |-add.html

Nodejs端，名字为test.js

  1. // file name :test.js
  2. var express             = require('express');
  3. var app                 = express();
  4. var bodyParse           = require('body-parser')
  5. var cookieParser        = require('cookie-parser') ;
  6. app.use(cookieParser()) ;
  7. app.use(bodyParse.urlencoded({extended:false})) ;
  9. // 处理根目录的get请求
  10. app.get('/',function(req,res){
  11.     res.sendfile('public/main.html') ;
  12.     console.log('main page is required ');
  13. }) ;
  15. // 处理/login的get请求
  16. app.get('/add', function (req,res) {
  17.     res.sendfile('public/add.html') ;
  18.     console.log('add page is required ') ;
  19. }) ;
  21. // 处理/login的post请求
  22. app.post('/login',function(req,res){
  23.     name=req.body.name ;
  24.     pwd=req.body.pwd   ;
  25.     console.log(name+'--'+pwd) ;
  26.     res.status(200).send(name+'--'+pwd) ;
  27. });
  29. // 监听3000端口
  30. var server=app.listen(3000) ;

main.html的代码如下

  1. <html>
  2.  
  3.     <link rel="stylesheet" type="text/css" href="http://fonts.useso.com/css?family=Tangerine|Inconsolata|Droid+Sans">
  4.  
  5.     <style>
  6.         div#test{
  7.             font-family: 'Tangerine',serif;
  8.             font-size: 48px;
  9.         }
  10.         p#link1{
  11.             font-family: 'Tangerine',serif;
  12.         }
  13.  
  14.     </style>
  15.  
  16.     <script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
  17.  
  18. </head>
  19. <body>
  20.  
  21. <div id="test">
  22.     <h1>Main Page</h1>
  23. </div>
  24. <p>Register & Login</p>
  25. <form action="test.jsp" method="post">
  26.     账号 :
  27.     <input type="text" id="name" />
  28.     <br/><br/>
  29.     密码 :
  30.     <input type="text" id="pwd" />
  31.     <br/><br/>
  32.     &nbsp&nbsp&nbsp&nbsp&nbsp
  33.     <div><a href="/add" id="add">EXTRA</a></div>
  34.     <input type="button" value="Submit" id="x">
  35. </form>
  36.  
  37. </body>
  38.  
  39.     <script type="text/javascript">
  40.  
  41.         var after_login=function(data,status){
  42.             if (status=='success'){
  43.                 alert(data+'--'+status) ;
  44.             }
  45.             else alert('login refused') ;
  46.  
  47.         }
  48.  
  49.         $(document).ready(function(){
  50.             $("#x").click(function(){
  51.                 var name    =   $("#name").val() ;
  52.                 var pwd     =   $("#pwd").val() ;
  53.                 $.post('http://127.0.0.1:3000/login',
  54.                 {
  55.                     name    :   name ,
  56.                     pwd     :   pwd
  57.                 },
  58. //                        function(data,status){
  59. //                            alert(data+'--'+status) ;
  60. //                        }
  61.                         after_login
  62.                 );
  63. //                $.get('add',function(data,status){
  64. //                    document.write(data) ;
  65. //                }) ;
  66.             });
  67.         });
  68.     </script>
  69.  
  70. </html>

add.html的代码如下

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>嘿</title>
  6. </head>
  7. <body>
  8. <h1>This is an additional web page</h1>
  9. <p>just for test</p>
  10. </body>
  11. </html>

启动项目：
cd 到项目目录，输入 node test.js，运行服务器
打开浏览器，输入127.0.0.1:3000，可得到如下页面

输入账号和密码，能得到弹出窗口，里面是服务器的返回值

点击EXTRA页面，能得到二级页面

 
 
 
 

web前后端交互，nodejs的更多相关文章

  1. nodejs实现前后端交互

    本人nodejs入门级选手,站在巨人(文殊)的肩膀上学习了一些相关知识,有幸在项目中使用nodejs实现了前后端交互,因此,将整个交互过程记录下来,方便以后学习. 本文从宏观讲述nodejs实现前后端 ...

  2. 淘宝玉伯引发Web前后端研发模式讨论

    淘宝玉伯是是前端基础类库 Arale 的创始人,Arale 基于 SeaJS 和 jQuery.不久前,淘宝玉伯在 Github 的 Arale 讨论页面上抛出了自己对于Web 前后端研发模式的思考. ...

  3. springboot+mybatis+thymeleaf项目搭建及前后端交互

    前言 spring boot简化了spring的开发, 开发人员在开发过程中省去了大量的配置, 方便开发人员后期维护. 使用spring boot可以快速的开发出restful风格微服务架构. 本文将 ...

  4. 如何简单区分Web前后端与MVC

    MVC是开发所有软件所必须涉及的基本几个划分 M主要负责数据与模型,V主要负责显示C主要负责交互与业务所以不管是前端还是后端,都是有MVC的.MVC是一个对于软件简单的抽象,不管是M还是V,还是C都是 ...

  5. Servlet实现前后端交互的原理及过程解析

    在日常调试项目时,总是利用tomcat去启动项目,并进行前后端联调,但对于前后端的请求响应的交互原理及过程并不是特别清晰. 为什么在前端发出相应请求,就能跳转到后端通过程序得到结果再响应到前端页面呢? ...

  6. ajax学习----json，前后端交互，ajax

    json <script> var obj = {"name": "xiaopo","age": 18,"gender ...

  7. Python 利用三个简易模块熟悉前后端交互流程

    准备工作 在学习Django之前,先动手撸一个简单的WEB框架来熟悉一下前后端交互的整体流程 本次用到的模块: 1.wsgiref,这是一个Python自带的模块,用于构建路由与视图 2.pymysq ...

  8. 三、vue前后端交互（轻松入门vue）

    轻松入门vue系列 Vue前后端交互 六.Vue前后端交互 1. 前后端交互模式 2. Promise的相关概念和用法 Promise基本用法 then参数中的函数返回值 基于Promise处理多个A ...

  9. Node之简单的前后端交互

    node是前端必学的一门技能,我们都知道node是用的js做后端,在学习node之前我们有必要明白node是如何实现前后端交互的. 这里写了一个简单的通过原生ajax与node实现的一个交互,刚刚学n ...

随机推荐

  1. numpy nan和inf

    一.nan和inf的简介 nan 不是一个数字 读取本地文件为flaot的时候,有缺失 inf(infinity): 无穷尽 inf: 正无穷 -inf: 负无穷 数据类型:float # 注意: 要 ...

  2. git branch stash

    一.branch(分支) 1.创建分支 git branch dev 2.切换分支 git branch dev 3.合并分支 git merge bug 4.查看分支 git branch 5.删除 ...

  3. Promise.finally

    const Gen = (time) => { return new Promise((resolve, reject) => { setTimeout(function () { if( ...

  4. .Net core路由高级用法

    先说startup中的路由 这里是我们现在用的默认路由,但是在使用当中也有麻烦.总而言之 用的不爽. 使用属性路由:RouteAttribute特性 默认的HomeController下面的Index ...

  5. PHP——foreach

    一.foreach 在PHP中foreach循环语句,常用于遍历数组,一般有两种使用方式:不取下标.取下标 (一)只取值,不取下标 <?php foreach (数组 as 值){ //执行的任 ...

  6. 对于kvm配置ssh

    首先我们要让自己的机器开启ssh服务 首先更新源 sudo apt-get update 安装ssh服务 sudo apt-get install openssh-server 检测是否已启动 ps ...

  7. sqli_labs学习笔记（一）Less-54~Less-65

    续上,开门见山 暴库: http://43.247.91.228:84/Less-54/?id=-1' union select 1,2,database() --+ challenges 爆表: h ...

  8. SpringCloud与微服务系列专栏

    一. 前置知识 学习SpringCloud之前需要具备和掌握如下框架和工具的使用:SpringMVC,Spring,Spring Boot,Mybatis,Maven,Git. SpringCloud ...

  9. Docker 使用笔记-常用基础命令

    常用基础命令 环境:Linux Ubuntu 1.查看docker信息 docker version | docker info 2.启动docker服务 sudo systemctl start d ...

  10. linux运维基础知识-系统分区及LVM逻辑卷的创建

    系统分区及LVM逻辑卷的创建 分区 创建逻辑卷 LVM简介:逻辑卷管理器(LogicalVolumeManager)本质上是一个虚拟设备驱动,是在内核中块设备和物理设备之间添加的一个新的抽象层次,如图 ...