[NodeJs] 用Nodejs+Express搭建web，nodejs路由和Ajax傳數據並返回狀態，nodejs+mysql通過ajax獲取數據並寫入數據庫

小編自學Nodejs，看了好多文章發現都不全，而且好多都是一模一樣的

當然了，這只是基礎的demo，經供參考，但是相信也會有收獲

今天的內容是用Nodejs+Express搭建基本的web，然后呢nodejs路由和Ajax之間的數據傳輸，也就是表單提交，然后在用nodejs把數據寫入mysql數據庫

用到的東西比較多，但是還是很有趣的

1.安裝node.js

安裝node.js，直接去官網下載然后根據需求點擊下一步就好了

Node.js安裝包及源碼下載地址為：https://nodejs.org/en/download/ （英文官網）

http://nodejs.cn/download/（中文官網），可以下載 LTS(長期支持版本)

2.安裝npm

node.js總，npm可是很重要的，NPM是隨同NodeJS一起安裝的包管理工具，能解決NodeJS代碼部署上的很多問題，而且很多模板都是需要用這個來安裝的

現在的版本都是已經知道npm，下面說一下需要的命令行（node.js都是用命令行來執行的--CMD）

$ npm -v  //測試是否安裝成功
2.3.0

cnpm install npm -g  //安裝淘寶鏡像，即使用cnpm代替npm，都是一樣的
　　　　　　　　　　　　　　只是淘寶鏡像安裝會快一些，其實感覺都差不多

node.js很多的模塊， 需要什么模塊加加載對應的模塊，但是模塊有一些是需要自己安裝的

$ npm install <Module Name>  //通用安裝模板，Module Name是模板的名稱

$ npm install express  //使用 npm 命令安裝express(web框架)

模塊的調用，在js里面使用

var express = require('express');   //調用express模塊

模塊的安裝有兩種形式，一種時本地一種時全局（-g） ，require是調用本地的

npm install express         // 本地安裝
npm install express -g   //全局安裝

我這里就不做多解釋， 大家可以去網上看看，node.js的東西還是不少的，需要時間去學習

3.Express 搭建簡單web

什么是Express呢？

Express 是一個簡潔而靈活的 node.js Web應用框架
提供了一系列強大特性幫助你創建各種 Web 應用，和豐富的 HTTP 工具。
使用 Express 可以快速地搭建一個完整功能的網站。
Express 框架核心特性：
1.可以設置中間件來響應 HTTP 請求。
2.定義了路由表用於執行不同的 HTTP 請求動作。
3.可以通過向模板傳遞參數來動態渲染 HTML 頁面。   ----引用互聯網

之前說到，需要的模塊要安裝，所以這里我們要先安裝這個模塊

$ cnpm install express --save  //安裝express並保存在依賴列表，可以理解為安裝在本地，這樣方便調用

當然我們還需要其他的框架，當然是否需要根據需求來

$ cnpm install body-parser --save   //處理 JSON, Raw, Text 和 URL 編碼的數據。
$ cnpm install cookie-parser --save  //解析Cookie工具,通過req.cookies取到cookie並轉成對象
$ cnpm install multer --save   //用於處理 enctype="multipart/form-data"（設置表單的MIME編碼）的表單數據

$ cnpm list express  //查詢版本號，也是看是否安裝成功

不多說直接上代碼創建一個js文件，我這里是取名server.js

var express = require('express');  //調用模塊
var app = express();
app.get('/', function (req, res) {  //get請求
   res.send('Hello World');
})
var server = app.listen(8888, function () {   //監聽端口
  var host = server.address().address
  var port = server.address().port
  console.log("應用實例，訪問地址為 http://%s:%s", host, port)
})

當然還可以這樣寫

　　　 var express=require('express');
      var jqery=require('jquery');
      var app=express();
      
      //主頁 get   用來處理get數據提交的路由，后門我們會說路由
      app.get('/',function(req,res){
          console.log("主頁GET請求");
          res.send("hello get");
      })var server=app.listen(8081,function(){
          var host=server.address().address
          var port=server.address().port
          console.log("應用實例，訪問地址為 http://%s:%s", host, port);
      })

那么問題來了，怎么運行才是一個node.js程序呢，畢竟我們好像什么都沒聲明

直接用cmd命令行運行這個文件  node server.js

首先我們的路徑要是根目錄，可以直接文件夾找到然后在路徑欄直接寫cmd，cmd將自動以當前路徑開始

 

這樣就運行成功了，下面這句話是我寫的，成功打印出來了，然后用瀏覽器打開頁面，頁面路徑是127.0.0.1:8888

 這樣一個基礎的web就好了

 4.什么是Node.js的路由 

 由於我們之后和ajax數據傳遞的時候需要用到路由，所以我們還是了解一下， 而且路由的確是很重要的，我這里簡單的介紹一下

路由決定了由誰(指定腳本)去響應客戶端請求。
在HTTP請求中，我們可以通過路由提取出請求的URL以及GET/POST參數。

//路由演示
  function route_express(){
      var express=require('express');
      var jqery=require('jquery');
      var app=express();
      
      //主頁 get
      app.get('/',function(req,res){
          console.log("主頁GET請求");
          res.send("hello get");
      })
      
      //主頁 post請求
      app.post('/',function(req,res){
          console.log("主頁post請求");
          res.send("hello post");
      })
      
      //刪除頁面
      app.get('/del_user',function(req,res){
          console.log("del_user get 響應要求");
          res.send("刪除頁面");
      })
      
      //用戶頁面請求
      app.get('/list_user',function(req,res){
          console.log("list_user get 響應要求");
          res.send("用戶頁面請求");
      })
      
      var server=app.listen(8081,function(){
          var host=server.address().address
          var port=server.address().port
          console.log("應用實例，訪問地址為 http://%s:%s", host, port);
      })
      
  }

然后運行js文件，可以用過訪問不同的地址得到不同的效果

http://127.0.0.1:8081/list_user

http://127.0.0.1:8081

http://127.0.0.1:8081/del_user

會分別打印不同路由配置的文字

 4.Node.js+Express+路由+ajax 數據交互

上面說了那么多，現在直接上代碼，關於nodejs和ajax前后台數據的交互

當然文件路徑也很重要

  //表單提價 
  from_submit();  //為了方便管理我用函數包起來調用
  //表單提價 
  function from_submit(){
    var express = require('express');  //調用模板
    var app = express();  //不污染本來，用變量來表示
    var bodyParser = require('body-parser');  //調用模板

    //創建編碼解析
    var urlencodedParser = bodyParser.urlencoded({ extended: false })
    
    app.use(express.static('public'));  //設置今天文件目錄
    
    app.get('/form_index.html',function(req,res){
        res.sendFile(__dirname+"/"+form_index.html); //提供靜態文件
    })
    
    app.post('/process_post', urlencodedParser, function (req, res) {  //post處理方法
 
           // 輸出 JSON 格式
       var response = {
           "names":req.body.names,   //得到頁面提交的數據
           "passwords":req.body.passwords
       };
        //加入數據庫
       mysql_connec(req.body.names,req.body.passwords);  //數據庫方法，加入了兩個參數，是提交的數據
       console.log(response);
          res.send("1"); //返回的數據，這里根據情況寫
       res.end();
       
    })
    
    var server = app.listen(8888, function () {  //監聽
    var host = server.address().address
    var port = server.address().port
    console.log("應用實例，訪問地址為 http://%s:%s", host, port)
    })
    
  }

下面是html頁面

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
<form <!--action="http://127.0.0.1:8888/process_post" method="post" --> > //這里我隱藏了表單提交的兩個參數，
　　　　　　　　　　　　　　　　　　        我用了ajax，如果不用ajax直接就填寫路徑參數和請求方式就可以了
       name: <input type="text" name="names" />
       password: <input type="password" name="passwords" />
       <input class="myForm" type="button" value="submit" />
</form>

        <script type="text/javascript">
            $(function() {
                $(".myForm").on('click', function() {  //添加點擊事件
                    var names = $("input:nth-of-type(1)").val();   //獲取兩個的參數
                    var passwords = $("input:nth-of-type(2)").val();
                    $.post("http://127.0.0.1:8888/process_post", { //jq的post方法
                        names: names,
                        passwords: passwords
                    }, function(res) {
                        alert("提交成功");
                    })
                })
            })
        </script>
    </body>

</html>

提交成功並且數據庫有內容

 這是cmd的提交打印的方法，這里是數據庫連接方法打印的，等下后面說

 

上圖是數據庫剛添加的

 

 4.Node.js+MySql 獲得數據寫入數據庫

后台沒有數據庫怎么算是后台呢，獲取了數據存入數據庫才算完整，說起來之前我是完全沒玩過數據庫

為了nodejs才學的，其實也不難，首先安裝MySql，直接百度下載然后安裝就好了

安裝之后首先要打開數據庫服務，然后cmd打開，我們小測試一下

打開安裝好的數據庫命令行文件，然后輸入密碼，安裝時輸入的root密碼，看到下面這些就代表可以使用了

但是有個問題，用cmd寫數據庫還是很麻煩的，所以我們需要一個可視化軟件，當然小編比較懶才用的

下載數據庫可視化軟件

頁面是這樣的，這里已經建好了一張表，當然首先要連接數據庫，數據庫教程大家可以去網上看看，也是狠多的

下面開始寫

當然我們還是需要引入模塊，首先安裝

$ cnpm install mysql

這里因為只需要添加數據於是我就注釋了其他方法，這個方法就加載剛才的js里面，這里也是一個方法，添加參數


 //數據庫鏈接方法
//mysql_connec();
  
  //數據庫鏈接方法
  function mysql_connec(name,pas) {

    //鏈接數據庫
    var mysql = require("mysql");
    var connection = mysql.createConnection({  //配置參數，然后添加你的數據庫里面的表
        host: 'localhost',
        user: 'root',
        password: '*********',
        database: 'xmibear'
    })

    connection.connect();  //連接

    //查詢語句
//    var selectSql = "select * from formtable";
//    connection.query(selectSql, function(err, res) {
//        if(err) {
//            console.log('[select error]-', err.message);
//            return;
//        }
//        console.log("\n\n----------查詢語句-----------------------\n");
//        console.log(res);
//        console.log("\n----------查詢語句ENDENDNEDNED-----------");
//
//    })

    //插入數據
    var addSql = "insert into formtable(name,password) values(?,?)"; //存放數據庫語言的，這里是添加
    var addParmas = [name, pas];
    connection.query(addSql, addParmas, function(err, res) {
        if(err) {
            console.log("[insert error]-", err.message);
            return;
        }
//cmd打印內容
        console.log("\n\n----------插入數據-----------------------\n");
        console.log(res);
        console.log("\n----------插入數據ENDENDNEDNED-----------");

    })

    //更新數據
//    var upSql = "update formtable set name=?,password=? where id=?";
//    var upParmas = ["劉王婆", "55555", 1];
//    connection.query(upSql, upParmas, function(err, res) {
//        if(err) {
//            console.log("[updata error]-", err.message);
//            return;
//        }
//        console.log("\n\n----------更新數據-----------------------\n");
//        console.log(res);
//        console.log("\n----------更新數據ENDENDNEDNED-----------");
//    })

然后運行文件

在前台html提交的時候cmd就會打印，這時候數據已經存進數據庫了，刷新就看到了

 

 

到這里及說完了，但是很多東西還是要自己試試才知道，當然我覺得不是很難，入門還是可以的