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){
})