Express框架简介:
在之前,我们要写一个web服务器程序的话,要使用node内置的http模块。而前面几篇文章也说过了,那样比较复杂,我们不要重复造轮子,Express就是这样一个web开发框架,它能够实现很多功能,包括:
1、静态文件服务
2、路由控制
3、模板解析支持
4、动态视图
5、用户会话
6、CSRF保护
7、错误控制器
8、访问日志
9、缓存
10、插件
express就是一个基于内置核心http模块的一个第三方包
使用Express简单搭建一个服务器程序
步骤:
1、创建一个文件夹
2、进入该文件夹
3、终端命令行输入:yarn init -y(或者 npm init -y)
4、终端命令行输入:yarn add express --save,以安装express包
5、在文件夹中创建一个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!')
});
在入口文件app.js里面run code,访问接口3000就可以看到效果了
使用Express对get请求进行处理
已知,在这个文件夹里面有一个html文件放在了view文件夹中。
在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!')
});
解释一下:path.join将html文件路径拼接在了一起,regPage这是读取了的这个文件内容。
那么在接口3000就可以看见这个register.html文件了
app.get('/index', (req, res) => {
let ret = req.query // 获取到一个对象
res.send(ret.curPage);
//可以在请求的时候传入查询参数:
//http://localhost:3000/index?curPage=3&perPage=10
});
req.query是客户端请求的一个总对象,在里面可以找到你想要找到的数据
使用Express对post请求进行处理
app.post('/register', (req, res) => {
//可以在回调函数中,获取请求参数(用户在页面填写的信息),并进行处理
res.send("post---");
});
获取请求参数的时候,我们一般使用第三方的包body-parser,能更好的处理请求参数
yarn add body-parser 或者 npm install 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('/');
// 添加登录页面的接口
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()方法合并同个请求路径的不同请求方式
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');
}
})
就是使用method =req.method,获取请求的方式
使用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模板引擎。
首先先要安装art-templates和express-art-template
yarn add art-template 或者 npm install art-template
yarn add express-art-template 或者 npm install express-art-template
在view文件夹里面新建index.html
然后在app.js里面如下写:
// 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模板引擎的使用
之所以要使用模板引擎,我们可以将数据从后端接口传到前端页面中
app.js中:
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页面中。
});
在view文件下的index.html中:
<body>
<h1>这是首页</h1>
<hr>
<div>{
{ user.id }}</div>
<div>{
{ user.name }}</div>
<div>{
{ user.age }}</div>
<div>{
{ user['age'] }}</div>
<ul>
{
{each books}}
<li>{
{$index}}、{
{$value}}</li>
{
{/each}}
</ul>
<p>num1和num2中比较大的那个数是: {
{num1>num2?num1:num2}}</p>
{
{ if user.name === "Jacka"}}
<p>{
{ user.name }}的年龄是{
{ user.age }}</p>
{
{/if}}
</body>
在项目中使用路由
在项目中,我们不会把路由接口直接写在项目的入口文件app.js,我们把路由抽取出来,项目文件夹新建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函数里面的代码。
Express的基本用法大概就是这么多,明天再写。