nodejs之Express框架初体验
目录
一、Express框架简介
二、使用Express搭建服务器的Hello world程序
三、使用Express对get请求方式的处理
3.1、返回页面
3.2、获取查询参数
四、使用Express对post请求方式的处理
4.1、post请求处理格式
4.2、获取请求参数
五、重定向到其他接口
六、all() 方法合并同个请求路径的不同方式
七、使用Express获取静态资源
八、使用Express渲染模板页面
九、art-templates模板引擎的使用
十、在项目中使用路由
十一、处理请求之前的勾子函数
一、Express框架简介
在前面Node基础中我们学习了 Node.js 中的 http 模块，虽然知道使用 Node.js 中的 http 模块是可以开发 Web 应用的，处理静态资源，处理动态资源，请求分发（路由）等等，也可以让开发者对 HTTP 协议的理解更加清晰，但是使用起来比较复杂，开发效率低。
npm 提供了大量的第三方模包，其中不乏许多 Web 框架，我们没有必要重复发明轮子，因而选择使用 Express 作为开发框架，因为它是目前最稳定、使用最广泛，而且 Node.js 官方推荐的唯一一个 Web 开发框架。除了为 http 模块提供了更高层的接口外，还实现了许多功能，其中包括：
-
静态文件服务；
-
路由控制；
-
模板解析支持；
-
动态视图；
-
用户会话；
-
CSRF 保护；
-
错误控制器；
-
访问日志；
-
缓存；
-
插件支持。
官网：Express - 基于 Node.js 平台的 web 应用开发框架 - Express 中文文档 | Express 中文网
express 是一个基于内置核心 http 模块的，一个第三方的包，专注于 web 服务器的构建。
二、使用Express搭建服务器的Hello world程序
-
首先创建一个名为 myapp 的目录，在命令行输入并运行 yarn init -y （或者 npm init -y）。
-
使用 yarn add express --save （或者 npm install express --save）安装 Express 包；
-
其次在 myapp 目录中，创建一个名为 app.js 的文件，并复制下面示例中的代码。
// 1、引入express模块并创建express对象
const express = require('express');
const app = express();
// 2、书写处理请求的方法，来响应请求
app.get('/', (req, res) => {
// 这里的代码在浏览器以get请求/的时候执行，
// 这个函数就是用来处理浏览器的 对于/的get请求 的
// 第一个参数req是请求头对象，里面包含请求头信息
// 第二个参数res用来做响应
console.log(req);
res.send('Hello World!222');
});
// 3、监听端口
app.listen(3000, () => {
//这里的代码服务器刚启动的时候执行1次
console.log('Example app listening on port 3000!')
});使用 node app.js 启动应用，访问 http://localhost:3000/ 就可以看到效果。
三、使用Express对get请求方式的处理
3.1、返回页面
myapp 目录下新建views文件夹放入register.html页面。
register.html中：
注册页面11
在app.js 中:
const express = require('express');
const app = express();
// 1、引入fs和path模块
const fs = require("fs");
const path = require("path");
// 2、处理/register的get请求
app.get('/register', (req, res) => {
//读取页面内容，并返回这个页面
let pathName = path.join(__dirname, 'views', "register.html");
const regPage = fs.readFileSync(pathName, "utf-8");
res.send(regPage);
});
app.listen(3000, () => {
console.log('Example app listening on port 3000!')
});3.2、获取查询参数
app.get('/index', (req, res) => {
let ret = req.query // 获取到一个对象
res.send(ret.curPage);
//可以在请求的时候传入查询参数：
//http://localhost:3000/index?curPage=3&perPage=10
});四、使用Express对post请求方式的处理
4.1、post请求处理格式
app.post('/register', (req, res) => {
//可以在回调函数中，获取请求参数(用户在页面填写的信息)，并进行处理
res.send("post---");
});4.2、获取请求参数
我们使用第三方的包body-parser ，更加简便专业地处理请求参数
首先，项目目录下安装body-parser:
yarn add body-parser 或者 npm install body-parser
使用body-parser获取请求参数：
// 1、引入body-parser
const bodyParser = require('body-parser')
// 2、bodyParser功能添加到项目app中
// parse application/x-www-form-urlencoded 针对普通页面提交功能
app.use(bodyParser.urlencoded({ extended: false })) //false接收的值为字符串或者数组，true则为任意类型
// parse application/json
app.use(bodyParser.json()) // 解析json格式
// 3、在接口中获取请求参数 req.body
app.post('/register', (req, res) => {
// 可以在回调函数中，获取请求参数(用户在页面填写的信息)
// 获取请求参数
console.log(req.body);
// 获取到请求参数之后就可以在这里处理这些请求参数，比如保存到数据库中(后面我们学习数据库知识)
res.send("post ok");
});五、重定向到其他接口
一般注册成功之后可以跳转到登录页面，这就是重定向
我们使用 res.redirect('/login'); 来实现跳转到另外一个接口进行处理
// 添加登录页面的接口
app.get('/login', (req, res) => {
//读取页面内容，并返回这个页面
let pathName = path.join(__dirname, 'views', "login.html");
const loginPage = fs.readFileSync(pathName, "utf-8");
res.send(loginPage);
});
app.post('/register', (req, res) => {
// 可以在回调函数中，获取请求参数(用户在页面填写的信息)
// 获取请求参数
console.log(req.body.username);
// 一般注册成功之后可以跳转到登录页面，这就是重定向
res.redirect('/login'); // 重定向到'/login'接口，对应的接口函数会执行
});六、all() 方法合并同个请求路径的不同方式
针对上面案例 /register 请求的方式可以有两种GET和POST，Express提供了合并书写接口的all()方法：
app.all('/register',(req, res) => {
let method = req.method
if(method==='GET'){
//读取页面内容，并返回这个页面
let pathName = path.join(__dirname, 'views', "register.html");
const regPage = fs.readFileSync(pathName, "utf-8");
res.send(regPage);
}else if(method==='POST'){
console.log(req.body.username);
// 一般注册成功之后可以跳转到登录页面，这就是重定向
res.redirect('/login');
}
})七、使用Express获取静态资源
const express = require('express');
const app = express();
// 获取静态资源
// app.use(express.static("public"))
// "public"表示指定在本地public下找静态资源
// 请求： localhost:3000/images/01.jpg
// 如果想要在请求的路径里面添加前缀
app.use("/static", express.static("public"))
// localhost:3000/static/images/01.jpg // 可能有延迟，如果延迟尝试重启服务器或者浏览器
app.listen(3000, () => {
console.log('Example app listening on port 3000!')
});八、使用Express渲染模板页面
我们采用的是art-templates模板引擎
文档网址：Express - art-template
使用之前需要安装 art-template和express-art-template
yarn add art-template 或者 npm install art-template
yarn add express-art-template 或者 npm install express-art-template
在views目录下新建index.html
// 1、修改模板引擎为html，导入express-art-template
app.engine('html', require('express-art-template'));
// 2、设置运行的模式为生产模式
// production 生产模式，线上模式
// development 开发模式
app.set('view options', {
debug: process.env.NODE_ENV !== 'production'
});
// 3、设置模板存放目录为views文件夹
app.set('views', path.join(__dirname, 'views'));
// 4、设置引擎后缀为html
app.set('view engine', 'html');
app.get('/', (req, res) => {
res.render('index') //通过render返回该模板
});九、art-templates模板引擎的使用
使用语法： 语法 - art-template
我们可以把数据从后端接口传入到前端页面中，这也是我们为什么用模板引擎的原因。
app.engine('html', require('express-art-template'));
app.set('view options', {
debug: process.env.NODE_ENV !== 'production'
});
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');
app.get('/', (req, res) => {
let data = {
user:{
id:1,
name: "Jack",
age:18,
job: "coder"
},
books:["《西游记》", "《三国演义》","《红楼梦》", "《水浒传》"],
num1:20,
num2:30
}
res.render('index', data); // 把data数据传入到index.html页面中。
});在views下的index.html中：
这是首页
{{ user.id }}
{{ user.name }}
{{ user.age }}
{{ user['age'] }}
{{each books}}
- {{$index}}、{{$value}}
{{/each}}
num1和num2中比较大的那个数是： {{num1>num2?num1:num2}}
{{ if user.name === "Jacka"}}
{{ user.name }}的年龄是{{ user.age }}
{{/if}}
类似的模板引擎还有 ejs 模板引擎 EJS -- 嵌入式 JavaScript 模板引擎 | EJS 中文文档
十、在项目中使用路由
在项目中，我们不会把路由接口直接书写在项目入口文件中。
项目文件夹下新建routes文件夹，新建passport.js:
// 抽取路由
const express = require('express');
const router = express.Router();
const fs = require("fs");
const path = require("path");
router.get('/login', (req, res) => {
//读取页面内容，并返回这个页面
let pathName = path.join(__dirname, '../views', "login.html");
const loginPage = fs.readFileSync(pathName, "utf-8");
res.send(loginPage);
});
router.all('/register',(req, res) => {
let method = req.method
if(method==='GET'){
//读取页面内容，并返回这个页面
let pathName = path.join(__dirname, '../views', "register.html");
const regPage = fs.readFileSync(pathName, "utf-8");
res.send(regPage);
}else if(method==='POST'){
console.log(req.body.username);
// 一般注册成功之后可以跳转到登录页面，这就是重定向
res.redirect('/login');
}
})
module.exports = router在项目入口文件app.js中：
const express = require('express');
const app = express();
// 1、引入对应的路由模块
const passportRouters = require('./routes/passport');
var bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
// 2、书写的路由添加到app上
app.use(passportRouters)
app.listen(3000, () => {
console.log('Example app listening on port 3000!')
});十一、处理请求之前的勾子函数
这个功能在此先做了解，后面在项目中再去用。
如果在执行处理请求的函数之前想执行一些代码，例如验证是否已经登录的工作。
可以在app.use(utils.checkLogin, routers); 前面添加一个函数
新建utils文件夹，新建index.js文件：
function checkLogin(req, res, next){
console.log("执行接口代码之前会执行这里的代码");
next(); //直接跳入请求的接口执行代码
}
module.exports = {
checkLogin
}在项目入口函数app.js中：
// 项目中使用路由
const express = require('express');
const app = express();
// 1、引入对应工具模块
const utils = require('./utils/index.js');
const passportRouters = require('./routes/passport');
var bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
// 2、补上执行接口函数之前所执行的函数
app.use(utils.checkLogin, passportRouters)
app.listen(3000, () => {
console.log('Example app listening on port 3000!')
});效果：在执行routers下面每一个接口之前，都会执行checkLogin函数里面的代码。
应用：这可以用来我们后面在项目中做验证登录工作。