node.js学习笔记(八)Express路由设计

文章目录

  • 路由设计
    • 封装函数的方法
        • node提供的函数封装
        • express提供的函数封装
    • 创建新页面new.html
  • 什么叫高内聚低耦合
  • 处理添加页面和parse中间件

继续设计 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


<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">
    
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Dashboard Template for Bootstraptitle>

    
    <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

   
    
    <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 navigationspan>
            <span class="icon-bar">span>
            <span class="icon-bar">span>
            <span class="icon-bar">span>
          button>
          <a class="navbar-brand" href="#">Project namea>
        div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Dashboarda>li>
            <li><a href="#">Settingsa>li>
            <li><a href="#">Profilea>li>
            <li><a href="#">Helpa>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="#">Reportsa>li>
            <li><a href="#">Analyticsa>li>
            <li><a href="#">Exporta>li>
          ul>
          <ul class="nav nav-sidebar">
            <li><a href="">Nav itema>li>
            <li><a href="">Nav item againa>li>
            <li><a href="">One more nava>li>
            <li><a href="">Another nav itema>li>
            <li><a href="">More navigationa>li>
          ul>
          <ul class="nav nav-sidebar">
            <li><a href="">Nav item againa>li>
            <li><a href="">One more nava>li>
            <li><a href="">Another nav itema>li>
          ul>
        div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          <h1 class="page-header">Dashboardh1>

          <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 elsespan>
            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">Submitbutton>
          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){
     
    
})

你可能感兴趣的:(#,node.js)