路由设计

封装函数的方法

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

发布了165 篇原创文章 · 获赞 24 · 访问量 1万+

私信关注

node.js学习笔记（八）Express路由设计

文章目录