三十七、node（express模块，构建express脚手架）

Express简介

初体验：通过express创建web服务器
步骤：

1-创建expressDemo目录
2-进入expressDemo目录，初始化package.json
3-下载express模块，然后创建app.js练习 搞web服务器

注意：在做任何项目开发禁止模块名和目录名一样

代码：
通过express创建web服务器

步骤:
1. 创建expressDemo目录
2.进入expressDemo目录，初始化package.json (npm init -y)
3.创建app.js

4.
app.js

// 1. 引入express模块
const express = require('express')

// 2. 创建app对象
const app = express()

// 3. 返回数据   app.get(请求路径，回调函数)
app.get('/', (req, res) => {
    // 解决乱码:res.setHeader('content-type', 'text/html;charset=utf-8')
    // res.end('hello，webopenfather')

    // 注意：你现在用的是基于node中http模块封装的框架
    // 因此：上述代码麻烦
    // 解决：   
    // res.end()  http模块的
    // res.send() end+utf-8
    // res.json() 响应json数据
    // res.send('你好，我不是乱码')
    res.json({
        meta: {
            msg: "操作成功",
            status: 200
        },
        data: null
    })
})

// 4. 监听端口
app.listen(3000)


启动：  终端输命令 node app.js

小总结
什么是express：基于node http模块开发的框架

express框架好处：加快项目开发，便于协作
基础
//1. 导入express模块，语法：const express = require(“express”)
//2. 创建app对象，语法：const app = express()
//3. 定义路由, 语法：app.HTTP请求动词（请求路径，（req, res）=>{}）
res.end http express
res.send express（基于http setHeaer和end封装）
res.json express 接口响应json数据（注：接口就是一个文件但是必须响应json数据）
//4. 启动服务，语法：app.listen（端口 [, 处理函数]）

路由

路由：就是网址
路由参数：就是网址参数
在NodeJS中作用：声明响应的数据

​ 交给指定匿名函数/回调处理
语法
**明确：**HTTP请求类型/动词有get（查）、post（创建）、put（修改）、delete（删除）等
**普通语法：**app.HTTP请求类型（请求路径，回调函数）

发送GET请求： app.get（请求路径，回调函数）

发送POST请求： app.post（请求路径，回调函数）

发送任意请求： app.all（请求路径，回调函数）

特殊语法：app.use（请求路径，回调函数）
区别1：use匹配任意类型请求

区别2：use非完全匹配（ps. 只要 网址前n个参数 和 请求路径 一样即可）

**路由参数：**app.HTTP请求类型（请求路径/:参数1/…/:参数n，回调函数）
/login/张三/18

/login/李四/19

/login/:username/:age req.params是个对象 存放了参数
注意： :username, :age前面加了冒号就相当于变量

练习（普通语法）
步骤1：创建app2.js文件，输入下述代码 （ps. 直接复制关键理解作用）

//1.引入express框架模块
var express = require('express')
//2.创建框架核心app对象
var app = express()
//3.路由
app.get('/',  (req, res) => {

	//注：修改method=get 或者 method=post查看结果
	var formHtml = `
		<form action="/test" method="get">
			<input type="text" name="uname" />
			<input type="text" name="age" />
			<input type="submit"  />
		</form>
	`
	res.send(formHtml)
})

app.get('/test', function(req, res){
	res.send('this is get submit')
})

app.post('/test', (req, res) => {
	res.send('this is post submit')
})

//4.启动服务
app.listen(3000, () => {
	console.log('服务器启动成功， 请访问http://localhost:3000');
})

步骤2：测试
1、终端输入命令node app.js启动服务器
2、打开浏览器在地址栏输入http://localhost:3000便可访问

代码解析

练习（特殊语法）
步骤1：创建app3.js文件，输入下述代码 （ps. 直接复制关键理解作用）

//1.引入express框架模块
var express = require('express')
//2.创建框架核心app对象
var app = express()
//3.路由
app.get('/',  (req, res) => {

	var formHtml = `
		<form action="/test/a/b/c" method="get">
			<input type="text" name="uname" />
			<input type="text" name="age" />
			<input type="submit"  />
		</form>
	`
	res.send(formHtml)
})

app.use('/test', (req, res) => {
	res.send('this is /test')
})


//4.启动服务
app.listen(3000, () => {
	console.log('服务器启动成功， 请访问http://localhost:3000/');
})

练习（路由参数)

• 步骤1：创建app4.js文件，输入下述代码 （ps. 直接复制关键理解作用）
• req.params 是参数

//1.引入express框架模块
var express = require('express')
//2.创建框架核心app对象
var app = express()
//3.路由
app.get('/stu/:name/:age', (req, res) => {
	console.log(req.params);
	res.send('匹配成功，快去看控制台有没有获取数据..')
})
//4.启动服务 
app.listen(3000, ()=> {
	console.log('Running...')
})

代码分析：

小总结：
什么是HTTP协议：互联网数据交互的规则

HTTP默认端口：apache 80 node 3000 mysql 3306 https 443 mongodb 27017

HTTP常用动词：get（列表）post（创建）put（修改）delete（删除）

HTTP状态码

1.xx 忽略
2.xx 成功
200 成功
201 成功并且创建了新数据
3.xx 跳转/重定向
304 浏览器缓存
4.xx 客户端错误
400 请求参数有误
401 身份认证失败 密码错误
403 没有权限
404 文件不存在
405 请求方式有误 声明get请求 你是post
5.xx 服务器错误

路由：就是网址

路由参数：就是网址参数

路由参数作用：响应不同数据

普通语法：app.HTTP请求动词（请求路径，处理函数）

特殊语法：app.use（请求路径，处理函数）

1匹配所有请求
2非完全匹配（只要 网址url 前n个参数  == 请求路径  就可以）
网址/a/b/c      请求路径/a       匹配
网址/a/b/c      请求路径/a/b     匹配
网址/a          请求路径 /a/b    不匹配

路由参数：app.上面两种（‘请求路径/:参数/…’， 处理函数）

注：通过req.params来接受参数

利用 Express 托管静态文件

• 说明：在express中设置了固定语法允许指定目录下的文件被外部访问
• 好处：减少代码冗余，便于维护
• 练习：

//1.引入express框架模块
var express = require('express')
//引入fs模块
var fs = require('fs')
//2.创建框架核心app对象
var app = express()
//3.路由
// 指定文件
// app.get('/public/css/test.css', function(req, res){
//		let publicData = fs.readFileSync('./public/css/test.css', 'utf8')
//		res.end(publicData)
// })
// 多个文件
// app.use('/public', function(req, res){
// 		let publicData = fs.readFileSync('.'+req.url, 'utf8')
// 		res.end(publicData)
// })
// 在express中
// 作用：允许指定目录下的文件被外访问
// 语法：express.static('目录名')   
// 返回：一个函数，可理解为读取URL需要读取的文件
app.use('/public', express.static('public'))

//4.启动服务
app.listen(3000, () => {
	console.log('Running...')
})

搭建express脚手架

1.搭建环境
DOC 执行 npm install -g express-generator 全局安装express(只安装一次就可以)

打开终端 进入项目文件夹执行命令 ： express 项目名
自动生成项目框架目录及所需文件代码


打开package.json查看依赖 打开终端进入项目目录 安装依赖 命令: npm install


启动项目:
npm start 执行此命令, 会去package.json内寻找script 内的命令

自定义命令:

script 内添加 执行 npm run kkk

浏览器查看 (node 端口一般都是3000 端口 ，出现以下图片内容说明脚手架搭建成功)


2.创建路由

express生成的框架规定了 一个功能对应一个路由
第一步: 创建路由 routes目录中新建路由文件

第二步: 编写路由

const express = require('express');
const router = express.Router();

//框架路由固定语法
//访问app.js中引入的路径,凭借当前 路径
// router.get('./stu.js',function(req,res,next){

// });
router.get('/create',function(req,res,next){
    res.send('学生信息创建')
});
router.get('/delete',function(req,res,next){
    res.send('学生信息删除')
});

module.exports = router;

3.app.js 激活依赖

引入路由文件 固定语法

使用 app.use 语法激活

4.验证
​ 项目目录 打开DOC窗口 执行 npm start 或者自定义启动命令 加载

访问: app.js 路径 加 路由路径

express脚手架项目实战

参照以上脚手架搭建完成后
第一步：准备静态资源



创建goods.js路由代码：

//创建路由默认的三行代码
const express = require('express');
//第二行
const router = express.Router();
//引入fs模块
const fs = require('fs');

/* 创建路由 */
router.get('/', (req, res)=> {
  let html=fs.readFileSync(process.cwd()+'/views/goods.html','utf-8')
  res.send(html);
});
//第三行
module.exports = router;

第二步：项目目录下app.js文件中引入路由，激活路由

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

//引入路由
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var loginRouter = require('./routes/login');
//引入goods路由
var goodsRouter = require('./routes/goods');
var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
//激活路由
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/login', loginRouter);
//激活goods路由
app.use('/goods', goodsRouter);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

第三步：启动服务器终端输入命令npm start

第四步：浏览器地址栏输入localhost：3000/路由名，这样就能显示网页了