利用Express实现ADUS项目

利用Express实现ADUS项目

模块化思想

模块如何划分:

• 模块职责要单一

javascript模块化：

• Node 中的 CommonJS
• 浏览器中的：
  • AMD require.js
  • CMD sea.js
• es6中增加了官方支持

起步

• 初始化
• 模板处理

路由设计

请求方法	请求路径	get参数	post参数	备注
GET	/students			渲染首页
GET	/students/new			渲染添加学生页面
POST	/students/new		name,age,gender,hobbies	处理添加学生请求
GET	/students/edit	id		渲染编辑页面
POST	/students/edit		id,name,age,gender,hobbies	处理编辑请求
GET	/students/delete	id		处理删除请求

提取路由模块

router.js:

/**
 * router.js路由模块
 * 职责：
 *      处理路由
 *      根据不同的请求方法+请求路径设置具体的请求函数
 * 模块职责要单一，我们划分模块的目的就是增强代码的可维护性，提升开发效率
 */
var fs = require('fs');

// Express专门提供了一种更好的方式
// 专门用来提供路由的
var express = require('express');
// 1 创建一个路由容器
var router = express.Router();
// 2 把路由都挂载到路由容器中

router.get('/students', function(req, res) {
    // res.send('hello world');
    // readFile的第二个参数是可选的，传入utf8就是告诉他把读取到的文件直接按照utf8编码，直接转成我们认识的字符
    // 除了这样来转换，也可以通过data.toString（）来转换
    fs.readFile('./db.json', 'utf8', function(err, data) {
        if (err) {
            return res.status(500).send('Server error.')
        }
        // 读取到的文件数据是string类型的数据
        // console.log(data);
        // 从文件中读取到的数据一定是字符串，所以一定要手动转换成对象
        var students = JSON.parse(data).students;
        res.render('index.html', {
            // 读取文件数据
            students:students
        })
    })
});

router.get('/students/new',function(req,res){
    res.render('new.html')
});

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

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

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

// 3 把router导出
module.exports = router;

app.js:

/**
 * app.js 入门模块
 * 职责：
 *   创建服务
 *   做一些服务相关配置
 *     模板引擎
 *     body-parser 解析表单 post 请求体
 *     配置模板引擎和body-parser一定要在挂载路由之前
 *     提供静态资源服务
 *   挂载路由
 *   监听端口启动服务
 */

var express = require('express');
var fs = require('fs');
var bodyParser = require('body-parser');
var router = require('./router');
var app = express();

//把资源公开
app.use('/node_modules/', express.static('./node_modules/'));
app.use('/public/', express.static('./public/'));

//配置模板引擎
app.engine('html', require('express-art-template'));

// 配置模板引擎和body-parser一定要在挂载路由之前
app.use(express.urlencoded({
    extended: false
}));
app.use(express.json());

// 把路由器挂载到 app 服务中
app.use(router);

//端口监听
app.listen(3000, function () {
    console.log('running 3000...');
})

//把 app 导出
module.exports = app;

在Express获取表单POST请求体数据

在 Express 中没有内置获取表单POST 请求题的API,这里我们需要使用一个第三方包： body-parser。

npm install --save body-parser

配置

var express = require('express');
//0.引包
var bodyParser = require('body-parser');

var app = express();
// 配置 body-parser
//只要加入这个配置，则在 req 请求对象上会多出来一个属性body 
//也就是说你就可以直接通过 req.body 来获取表单 POST 请求体的数据了
//parser application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({extended: false}));
//parser aplication/json
app.use(bodyParser.json());

使用

app.use(function(req.res) {
    
})

注意 bodyParser2019年就被弃用了

• 直接用express调用bodyParser的方法就可以了

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