node.js學習筆記（八）Express路由設計

原創 treble Z 2020-02-20 15:29

文章目錄


繼續設計 CRUD

路由設計

封裝函數的方法

node提供的函數封裝

在node中，因爲模塊只剩下module.exports對象可以被外部訪問，所以，函數封裝與調用就變成類似於：
app.js

var express=require('express')
var fs=require('fs')
var router=require('./router')

var app=express()//createApplication()方法
app.use('/node_modules',express.static('./node_modules'))
app.use('/public',express.static('./public'))
app.engine('html',require('express-art-template'))
router(app)
//封裝到router中
app.listen(3000,function(){
    console.log('running 3000')
})

router.js

var fs=require('fs')
//封裝路由
//在node中調用模塊函數變成了返回module.exports
module.exports=function(app){
}

這種方式。
————但是比較麻煩

express提供的函數封裝

app.js

var express=require('express')
var fs=require('fs')
var router=require('./router')

var app=express()//createApplication()方法

/**
 * app.js入門模塊
 * 指責：
 *      創建服務
 *      做一些服務器
 *      相關配置
 *      模板引擎
 *      body-parser解析表單請求體
 *      提供靜態資源服務
 *      掛載路由
 *      監聽端口啓動服務
 */



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

app.engine('html',require('express-art-template'))

//把路由容器掛載到app服務中
app.use(router)

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

index.html

var fs=require('fs')
//路由模塊
//處理路由
 
var express=require('express')
//創建一個路由容器
//然後把router都掛載到路由容器中
app.get('/students',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檢索本頁
        //必須配置模板引擎
    })
})
var router=express.Router()
router.post('/students/new',function(req,res){
    
})

router.post('/students/edit',function(req,res){
    
})

router.get('/students',function(req,res){

})
router.get('/students/new',function(req,res){
    
})
router.get('/students/edit',function(req,res){
    
})
router.get('/students/delete',function(req,res){
    
})
//把router導出
module.exports=router

//封裝路由
//在node中調用模塊函數變成了返回module.exports
// module.exports=function(app){
    
//注意使用npm i bootstrap@3 -S下載主頁模板而不是bootstrap4
// }

創建新頁面new.html

<!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">添加學生</h2>
          <form action="/students/new" method="post">
            <div class="form-group">
              <label for="exampleInputEmail1">姓名</label>
              <input type="text" class="form-control" id="" name="name" placeholder="姓名">
              
            </div>
            <div class="form-group">
              <label for="exampleInputPassword1">性別</label>
              <input type="password" class="form-control" id="exampleInputPassword1" placeholder="性別">
              <label class="radio-inline">
                <input type="radio" name="gender" id="inlineRadio1" value="0"> 男
              </label>
              <label class="radio-inline">
                <input type="radio" name="gender" id="inlineRadio2" value="1"> 女
              </label>
            </div>
            <div class="form-group">
              <label for="exampleInputFile">年齡</label>
              <input class="form-control" type="number" id="" name="age">
              <p class="help-block">請輸入正常人類的年齡哦</p>
            </div>
            <div class="form-group">
                <label for="">愛好</label>
                <input class="form-control" type="text" id="" name="hobbies">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
          </form>
        </div>
      </div>
    </div>

   
  </body>
</html>

什麼叫高內聚低耦合

從模塊粒度來看，高內聚：儘可能類的每個成員方法只完成一件事（最大限度的聚合）； 低耦合：減少類內部，一個成員方法調用另一個成員方法。從類角度來看， 高內聚低耦合：減少類內部，對其他類的調用；從功能塊來看 高內聚低耦合：減少模塊之間的交互複雜度（接口數量，參數數據）即橫向：類與類之間、模塊與模塊之間；縱向：層次之間；儘可能，內容內聚，數據耦合。
降低耦合度的方法
1、少使用類的繼承，多用接口隱藏實現的細節。 Java面向對象編程引入接口除了支持多態外， 隱藏實現細節也是其中一個目的。
2、模塊的功能化分儘可能的單一，道理也很簡單，功能單一的模塊供其它模塊調用的機會就少。（其實這是高內聚的一種說法，高內聚低耦合一般同時出現）。
3、遵循一個定義只在一個地方出現。
4、少使用全局變量。
5、類屬性和方法的聲明少用public，多用private關鍵字。
6、多用設計模式，比如採用MVC的設計模式就可以降低界面與業務邏輯的耦合度。
7、儘量不用“硬編碼”的方式寫程序，同時也儘量避免直接用SQL語句操作數據庫。
8、最後當然就是避免直接操作或調用其它模塊或類（內容耦合）；如果模塊間必須存在耦合，原則上儘量使用數據耦合，少用控制耦合，限制公共耦合的範圍，避免使用內容耦合。
增強內聚度方法
1、模塊只對外暴露最小限度的接口，形成最低的依賴關係。
2、只要對外接口不變，模塊內部的修改，就不得影響其他模塊。
3、刪除一個模塊，應當隻影響有依賴關係的其他模塊，而不應該影響其他無關部分。

處理添加頁面和parse中間件

核心代碼

var express=require('express')
var fs=require('fs')
var router=require('./router')

var app=express()//createApplication()方法

var bodyParser=require('body-parser')

/**
 * app.js入門模塊
 * 指責：
 *      創建服務
 *      做一些服務器
 *      相關配置
 *      模板引擎
 *      body-parser解析表單請求體
 *      提供靜態資源服務
 *      掛載路由
 *      監聽端口啓動服務
 */
//配置模板引擎和body-parse一定在掛載路由之前

app.use(bodyParser.urlencoded({extended:false}))
app.use(bodyParser.json())


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

app.engine('html',require('express-art-template'))

//把路由容器掛載到app服務中
app.use(router)

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

new.html

router.get('/students',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檢索本頁
        //必須配置模板引擎
    })
})

router.post('/students/new',function(req,res){
    //處理就是將提交的數據保存到db.json中
    //要將json文件讀出來，轉成對象，然後push數據
    //然後字符串再次寫入數據
   console.log(req.body)
})

router.post('/students/edit',function(req,res){
    //獲取表單數據
    //處理
    //發送響應
})

router.get('/students',function(req,res){

})
router.get('/students/new',function(req,res){
    res.render('new.html')
})
router.get('/students/edit',function(req,res){
    
})
router.get('/students/delete',function(req,res){
    
})
treble Z
發佈了136 篇原創文章 · 獲贊 14 · 訪問量 5804
私信 關注
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

nodejs安裝、npm安裝

nodejs安裝 1.下載安裝包： https://nodejs.org/en/ 2.安裝完成，輸入node，進入交互式命令窗口。   npm安裝 1.安裝完nodejs在cmd命令窗口輸入npm -v，可查看npm版本； 2.安裝npm

xgjj68163 2020-06-28 17:35:21

node.js學習筆記（五）模塊加載原則 npm和包說明文件package.json Express入門

treble Z 2020-02-20 15:29:54

node.js學習筆記（三）apach目錄實現 在node中使用模板引擎 服務端重定向

treble Z 2020-02-20 15:29:54

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

treble Z 2020-02-20 15:29:53

node.js學習筆記（二）簡單模塊化 文件編碼和響應頭和nodejs調用文件

treble Z 2020-02-20 15:29:53

node.js學習筆記（六）ES6反撇號（`）基礎知識 文件操作路徑 Express修改完代碼自動重啓 Express中app.use()用法 在express中使用art-template

treble Z 2020-02-20 15:29:52

node.js筆記（九） 避免回調地獄的辦法_Promise

treble Z 2020-02-20 15:29:51

nodejs安裝、npm安裝

nodejs安裝 1.下載安裝包： https://nodejs.org/en/ 2.安裝完成，輸入node，進入交互式命令窗口。   npm安裝 1.安裝完nodejs在cmd命令窗口輸入npm -v，可查看npm版本； 2.安裝npm

xgjj68163 2020-06-28 17:35:21

史上最短最敷衍的Nodejs教程（三）HTTP模塊

数据库爆破专家 2020-05-26 19:58:11

史上最短最敷衍的Nodejs教程（二）模塊 Modules

数据库爆破专家 2020-05-26 19:58:11

史上最短最敷衍的Nodejs教程（一）一分鐘寫出Node.js服務器

数据库爆破专家 2020-05-25 19:44:01

淺談 VueSSR 和 Express 結合的開發模式

WJCHumble 2020-03-03 04:43:13

Windows下Node.js 的安裝及環境配置

麦洛_ 2020-02-22 10:23:27

node.js全局安裝cnpm,nrm出現無法將“cnpm”項識別爲cmdlet

中森明菜 2020-02-21 06:01:10

node.js學習筆記（五）模塊加載原則 npm和包說明文件package.json Express入門

treble Z 2020-02-20 15:29:54