node.js學習筆記（七）留言本實現 關鍵代碼 nodeJS 取參 app.use，app.get和app.post方法 CRUD 起步

留言本實現

關鍵代碼

//這兩句在下載中間插件body-parser後獲取表單post請求體
//配置body-parser插件，別忘了先引包
app.use(bodyParser.urlencoded({extended:false}))
app.user(bodyParse.json())

var comments=[
    {
        留言板數組內容
    }
]

app.get('/',function(req,res){
    res.render('index.html',{
        comments:comments
    })
})
app.get('/post',function(req,res){
    res.render('post.html')//渲染
})

//app.post必須結合中間插件body-parser才能獲取表單post請求體
//用於解析表單內容
app.post('/post',function(req,res){
    var comment=req.body
    comment.dataTime='2017-11-5'
    comments.unshift(comment)
    res.redirect('/')
})

//見下文app.use和app.get，app.post區別
app.get('/pinglun',function(req,res){
    var comment=req.query
    //nodejs取參，詳情如下
    comment.dataTime='2017-11-5'
    comments.unshift(comment)
    //unshift() 方法可向數組的開頭添加一個或更多元素，並返回新的長度。
    //res.statusCode=302
    //res.setHeader('Location','/')
    res.redirect('/')
    //res.send和res.redirect會自動結束相應
})

有幾個要注意的地方：

nodeJS 取參 – req.body & req.query & req.params

來源：https://my.oschina.net/u/2519530/blog/535309 對翻譯做了改進
req.body
官方文檔解釋：

Contains key-value pairs of data submitted in the request body. By default, it is undefined,
and is populated when you use body-parsing middleware such as body-parser and multer.
稍微翻譯一下：包含在請求體中提交的數據的鍵值對。默認情況下，它是未定義的，
並且在使用body解析中間件(如body解析器和multer)時填充。

解析body不是nodejs默認提供的，你需要載入body-parser中間件纔可以使用req.body
此方法通常用來解析POST請求中的數據
req.query
官方文檔解釋：

An object containing a property for each query string parameter in the route.
If there is no query string, it is the empty object, {}.
翻譯一下:包含在路由中每個查詢字符串參數屬性的對象。如果沒有，默認爲{}

nodejs默認提供，無需載入中間件
舉例說明(官方摘抄)：
// GET /search?q=tobi+ferret
req.query.q
// => “tobi ferret”
// GET /shoes?order=desc&shoe[color]=blue&shoe[type]=converse
req.query.order
// => “desc”
req.query.shoe.color
// => “blue”
req.query.shoe.type
// => “converse”
此方法多適用於GET請求，解析GET裏的參數
req.params
官方文檔：
An object containing properties mapped to the named route “parameters”.
For example, if you have the route /user/:name,
then the “name” property is available as req.params.name. This object defaults to {}.

翻譯：包含映射到指定的路線“參數”屬性的對象。
例如，如果你有route/user/：name，那麼“name”屬性可作爲req.params.name。
該對象默認爲{}。
nodejs默認提供，無需載入其他中間件

舉例說明

// GET /user/tj
req.params.name
// => “tj”
多適用於restful風格url中的參數的解析

req.query與req.params的區別

req.params包含路由參數（在URL的路徑部分），而req.query包含URL的查詢參數（在URL的？後的參數）。

app.use和app.get，app.post區別

當一個路徑有多個匹配規則時，使用app.use，否則使用相應的app.method(get、post)
app.post不能通過req.query獲取表單字符串，app.get會在url中加入字符串，可以獲取
如何獲取
表單或者ajex是post請求，輸入鏈接是get請求

CRUD 起步

注：從現在開始做一個實現CRUD（增刪改查）功能的信息管理系統，做完以後會在github發佈源碼

demo介紹

項目主要聚焦於node實現增刪改查
因此前端頁面直接使用https://v3.bootcss.com/examples/dashboard/
模板實現

關鍵代碼

var express=require('express')
var fs=require('fs')
var app=express()

app.use('/node_modules',express.static('./node_modules'))
app.use('/public',express.static('./public'))

app.engine('html',require('express-art-template'))
//注意使用npm i bootstrap@3 -S下載主頁模板而不是bootstrap4
app.get('/',function(req,res){
    //讀入時直接轉換成字符


    fs.readFile('./db.json','utf8',function(err,data){
        
        if(err){
            return res.status(500).send('Server error')
        }
        res.render('index.html',{
            fruits:[
                '蘋果',
                '香蕉',
                '橘子'
            ],

            //解析字符串，轉換變成對象，引用 裏面的students數組元素
            students:JSON.parse(data).students
    
            // [
            //     {"id":1,"name":"張三","gender":0,"age":18,"habbies":"吃飯、睡覺、打豆豆"},
            //     {"id":2,"name":"張三","gender":0,"age":18,"habbies":"吃飯、睡覺、打豆豆"},
            //     {"id":3,"name":"張三","gender":0,"age":18,"habbies":"吃飯、睡覺、打豆豆"},
            //     {"id":4,"name":"張三","gender":0,"age":18,"habbies":"吃飯、睡覺、打豆豆"},
            //     {"id":5,"name":"張三","gender":0,"age":18,"habbies":"吃飯、睡覺、打豆豆"},
            //     {"id":6,"name":"張三","gender":0,"age":18,"habbies":"吃飯、睡覺、打豆豆"}
            // ]
        })
        //vscode可以ctrl+f檢索本頁
        //必須配置模板引擎
    })
})

app.listen(3000,function(){
    console.log('running 3000')
})

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Dashboard Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

   
    <!-- Custom styles for this template -->
    <link href="/public/main.css/main.css" rel="stylesheet">

  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Dashboard</a></li>
            <li><a href="#">Settings</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Help</a></li>
          </ul>
          <form class="navbar-form navbar-right">
            <input type="text" class="form-control" placeholder="Search...">
          </form>
        </div>
      </div>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Reports</a></li>
            <li><a href="#">Analytics</a></li>
            <li><a href="#">Export</a></li>
          </ul>
          <ul class="nav nav-sidebar">
            <li><a href="">Nav item</a></li>
            <li><a href="">Nav item again</a></li>
            <li><a href="">One more nav</a></li>
            <li><a href="">Another nav item</a></li>
            <li><a href="">More navigation</a></li>
          </ul>
          <ul class="nav nav-sidebar">
            <li><a href="">Nav item again</a></li>
            <li><a href="">One more nav</a></li>
            <li><a href="">Another nav item</a></li>
          </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          <h1 class="page-header">Dashboard</h1>

          <div class="row placeholders">
            {{each fruits}}
            <div class="col-xs-6 col-sm-3 placeholder">
              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
              <h4>{{ $value }}</h4>
              <span class="text-muted">Something else</span>
            </div>
            {{/each}}
            
          </div>

          <h2 class="sub-header">Section title</h2>
          <a class="btn btn-success" herf="">添加學生</a>
          <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>#</th>
                  <th>姓名</th>
                  <th>性別</th>
                  <th>年齡</th>
                  <th>愛好</th>
                </tr>
              </thead>
              <tbody>
                {{each students}}
                <tr>
                  <td>{{$value.id}}</td>
                  <td>{{$value.name}}</td>
                  <td>{{$value.gender}}</td>
                  <td>{{$value.age}}</td>
                  <td>{{$value.habbies}}</td>
                </tr>
                {{/each}}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

   
  </body>
</html>

{
    "students":[
        {"id":1,"name":"張三","gender":0,"age":18,"hobbies":"吃飯、睡覺、打豆豆"},
        {"id":2,"name":"張三","gender":0,"age":18,"hobbies":"吃飯、睡覺、打豆豆"},
        {"id":3,"name":"張三","gender":0,"age":18,"hobbies":"吃飯、睡覺、打豆豆"},
        {"id":4,"name":"張三","gender":0,"age":18,"hobbies":"吃飯、睡覺、打豆豆"},
        {"id":5,"name":"張三","gender":0,"age":18,"hobbies":"吃飯、睡覺、打豆豆"},
        {"id":6,"name":"張三","gender":0,"age":18,"hobbies":"吃飯、睡覺、打豆豆"}
    ]
}