web前后端交互，nodejs

本文轉載自查看原文 2018-05-28 21:09 2885
手機賺錢怎么賺,給大家推薦一個手機賺錢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執行網絡操作 
          整個工程結構如下：
根目錄--------------
    |-package.json |-test.js |-public |-main.html |-add.html
Nodejs端，名字為test.js
// file name :test.js var express = require('express'); var app = express(); var bodyParse = require('body-parser') var cookieParser = require('cookie-parser') ; app.use(cookieParser()) ; app.use(bodyParse.urlencoded({extended:false})) ; // 處理根目錄的get請求 app.get('/',function(req,res){ res.sendfile('public/main.html') ; console.log('main page is required '); }) ; // 處理/login的get請求 app.get('/add', function (req,res) { res.sendfile('public/add.html') ; console.log('add page is required ') ; }) ; // 處理/login的post請求 app.post('/login',function(req,res){ name=req.body.name ; pwd=req.body.pwd ; console.log(name+'--'+pwd) ; res.status(200).send(name+'--'+pwd) ; }); // 監聽3000端口 var server=app.listen(3000) ;
main.html的代碼如下
 
           <html>

    <link rel="stylesheet" type="text/css" href="http://fonts.useso.com/css?family=Tangerine|Inconsolata|Droid+Sans">

    <style>
        div#test{
            font-family: 'Tangerine',serif;
            font-size: 48px;
        }
        p#link1{
            font-family: 'Tangerine',serif;
        }

    </style>

    <script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>

</head>
<body>

<div id="test">
    <h1>Main Page</h1>
</div>
<p>Register & Login</p>
<form action="test.jsp" method="post">
    賬號 :
    <input type="text" id="name" />
    <br/><br/>
    密碼 :
    <input type="text" id="pwd" />
    <br/><br/>
    &nbsp&nbsp&nbsp&nbsp&nbsp
    <div><a href="/add" id="add">EXTRA</a></div>
    <input type="button" value="Submit" id="x">
</form>

</body>

    <script type="text/javascript">

        var after_login=function(data,status){
            if (status=='success'){
                alert(data+'--'+status) ;
            }
            else alert('login refused') ;

        }

        $(document).ready(function(){
            $("#x").click(function(){
                var name    =   $("#name").val() ;
                var pwd     =   $("#pwd").val() ;
                $.post('http://127.0.0.1:3000/login',
                {
                    name    :   name ,
                    pwd     :   pwd
                },
//                        function(data,status){
//                            alert(data+'--'+status) ;
//                        }
                        after_login
                );
//                $.get('add',function(data,status){
//                    document.write(data) ;
//                }) ;
            });
        });
    </script>

</html> 
          
add.html的代碼如下
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>嘿</title> </head> <body> <h1>This is an additional web page</h1> <p>just for test</p> </body> </html>
啟動項目： 
 cd 到項目目錄，輸入 node test.js，運行服務器 
 打開瀏覽器，輸入127.0.0.1:3000，可得到如下頁面 
 
輸入賬號和密碼，能得到彈出窗口，里面是服務器的返回值 
 
點擊EXTRA頁面，能得到二級頁面
免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。
猜您在找 nodejs實現前后端交互 nodejs實現前后端交互 web前后端數據交互前后端交互&交互接口 Web前端開發常用的前后端交互技術（webSocket） nodejs開發 express web后端(1-從零開始搭建WEB后端項目,集成express) 前后端交互，后端與后端交互中文亂碼 websocket前后端交互 Django（Python）前后端交互前后端數據交互，跳轉