Express入门

• 简介
• 框架特性
• 安装
• 初体验

• 模块化路由
• 路由参数
• 请求
• GET
• POST

• 使用方法
• 自定义404页面
• 错误处理
• 异步函数错误捕获

简介

Express是一个基于Node平台的web应用开发框架，提供一系列强大特性，帮助你创建各种 Web应用。

框架特性

1. 提供了方便简洁的路由定义方式

2. 对获取HTTP请求参数进行了简化处理

3. 对模板引擎支持程度高，方便渲染动态HTML页面

4. 提供了中间件机制有效控制HTTP请求

5. 拥有大量第三方中间件对功能进行扩展

安装

npm install express

初体验

• 路由定义更简单 app.get
• app.post

// 引入Express框架
const express = require('express')
// 使用框架创建web服务器
const app = express()
// 程序监听3000端口
app.listen(3000)
// 当客户端以get方式访问/路由时
app.get('/', (req, res) => {
// 对客户端做出响应 send方法会根据内容的类型自动设置请求头
res.send('Hello Express')
})

app.get('/', (req, res) => {
// 对客户端做出响应
res.send('Hello Express')
})
// 当客户端以post方式访问/add路由时
app.post('/add', (req, res) => {
res.send('使用post方式请求了/add路由')
})

const express = require('express')
const app = express()

const { userRouter } = require('./routes/user')

// 当拦截到 /user 开头请求时，交给 userRouter 处理
app.use('/user', userRouter)

app.listen(3000)
console.log('服务启动成功')

module.exports

const express = require('express')
const userRouter = express.Router()

// /user/index
userRouter.get('/index', (req, res) => {
res.send('用户首页')
})

// /user/reg
userRouter.get('/reg', (req, res) => {
res.send('用户注册页')
})

module.exports = { userRouter }

app.get('/index/:name/:age', (req, res) => {
console.log(req.params) // { name: 'zs', age: 18 }
res.send('ok')
})

req.query

{}

null

undefined

// http://localhost:3000/index?name=zhangsan&age=18
app.get('/index', (req, res) => {
console.log(req.query) // { name: 'zhangsan', age: 18 }
res.send('ok')
})

const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: false }))

// POST http://localhost:3000/add
app.post('/add', (req, res) => {
console.log(req.body) // { name: 'zhangsan', age: 18 }
res.send('ok')
})

使用方法

调用

app.use()

• 该方法可以传递一个函数作为参数，表示任何任何请求都会经过该中间件，都会执行该参数内部的代码。

  app.use((req, res, next) => {
  next()
  })

  中间件函数有三个参数，分别为请求对象req、响应对象res、释放控制权方法next
• 中间件函数中的代码执行完成之后需要调用

  next()

  方法，才能开始执行下一个中间件，否则请求将挂起

app.use('/pathname', (req, res, next) => {
next()
})

自定义404页面

自定义404页面，可以通过

res.status(404)

// 处理用户访问路径出错的情况
app.get('*', (req, res) => res.render('error.html'));
// 此中间件一定要写在程序的最后 其他路径都匹配不成功时再匹配404页面

tip：res.send和next后，如果还有代码，是会执行的，所以我们一般都会在方法前加个return，阻止后续代码执行

错误处理

Express默认会把程序错误信息输出到页面中，在开发阶段有助于开发人员观察错误信息，但是在项目发布以后是不希望用户看到这些错误信息的，所以可以使用Express提供的错误处理中间件处理错误信息。

• 同步代码抛错：

  throw new Error(message)

• 异步代码抛错：

  next(new Error(message))

  ，异步代码只能通过这种方式抛出去错误才能被错误处理中间件捕获到
• 错误处理中间件一般定义在最后

app.use((err, req, res, next)=>{
// 在控制台中输出错误信息
console.error(err.message);
// 对客户端做出响应
res.status(500).send(err.message);
});

异步函数错误捕获

try

catch

try {
await User.find()
} catch(err) {
next(err)
}
----------------------------------------
await User.find().catch(err => next(err)) // 推荐用

tip：try … catch 只能捕获同步错误和异步函数错误，不能捕获其他异步API抛出的错误，比如：

setTimeout

、

fs.readFile('some.file', 'utf8', (err, data) => { if (err) { throw err } })

静态资源访问

通过 Express 内置的

express.static

const express = require('express')
const path = require('path')
const app = express()

// 用path.join拼接成绝对路径，指定静态资源根目录
// 所有请求都会优先走这个中间件，如果能找到匹配的静态资源，那么就返回，如果找不到，就调用next()交给下一个中间件去处理
app.use(express.static(path.join(__dirname, 'public')))

// 一般命名为public或static
app.use('/static' , express.static(path.join(__dirname, 'public'))) // 推荐用这种形式 优化性能 避免处理不必要的请求
app.listen(3000)

配置模板引擎

• Express框架没有内置模板引擎，但是对其他模板引擎提供了良好的支持，比如

  art-template

• 我在这使用了

  express-art-template

  第三方模块，实际上内部也是基于

  art-template

  来实现的，只不过为了更好的支持express框架来做了一些额外的处理，语法还是

  art-template

  的，所以安装时需要装两个
• 安装

  npm install express-art-template art-tempalte

// utils/art-template.js 封装
const path = require('path')
const artTemplate = require('express-art-template')

module.exports = {
artTemplate: (app) => {
// 指定用artTemplate模板引擎去解析.html后缀的模板
// 理论上来讲，是可以同时存在多个模板引擎的，但是一般情况下，项目里面只会用一个模板引擎
app.engine('html', artTemplate)
// 指定模板文件的根目录
app.set('views', path.join(__dirname, 'views'))
// 指定模板文件的默认后缀为html
app.set('view engine', 'html')
}
}

app.js:

const { artTemplate } = require('./utils/art-template')
artTemplate(app)

app.get('/index', (req, res) => {
res.render('index', { name: 'zs', age: 18 })
// 1. 会自动去模板文件的根目录下查找名为index的模板文件
// 2. 会自动拼接模板默认后缀名
// 3. 会自动结合模板数据解析模板
// 4. 会自动将模板引擎解析出来的最终HTML响应给客户端，所以我们不需要再调用res.send和res.end方法了
})

Locals对象

• app.locals

  对象中的键值对在所有的模板文件中都能拿到，以键值对的形式存在，一般我们用来存放公共的数据
• 语法：

  app.locals.key = value

app.use('/admin', async (req, res, next) => {
app.locals.users = await User.find()
next()
})