node中express框架基础

express框架学习

express框架怎么创建

前提：创建文件夹，下载express（npm i express），创建js文件，在js文件中写入下面代码

1.引入express框架

const express = require('express')

2.创建网络服务器

const app = express()

3.get，post请求

app.get('/', (req, res) => {
    // send()
    // 1.send方法内部会检测响应内容的类型
    // 2.send方法会自动设置http状态码
    // 3.send方法会帮我们自动设置响应内容类型和编码
    res.send('Hello world')
})

4.监听端口

app.listen(3000)

express中间件

注：可以使用app.use()，也可以使用app.get('路径')

app.use匹配所有的请求方式，代表接收所有的请求，必须使用next(); 不然会卡到这一步

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

app.use第一个参数也可以传入请求地址，表示只要是这个请求地址的，不管什么请求方式都可以接受

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

express中间件应用

1.路由保护，客户端在访问需要登录的页面时，可以先使用中间件判断用户的登录状态，从而判断是否禁止用户进入页面

app.get('/list', (req, res, next) => {
    let isLogin = false
    if (isLogin) {
        // 如果isLogin为true，则证明用户登录了
        next();
    } else {
        res.send('您没有登录，没有权利访问这个站点')
    }
})

app.get('/list', (req, res) => {
    res.send('这是list页面的内容')
})

2.网页维护公告，在所有路由的最上面定义接收所有请求的中间件，直接为客户端做出响应，网站正在维护中

app.use((req, res, next) => {
    res.send('网页正在维护中')
    // 页面维护，只需要把next去掉，不让他接着走就可以了
    // next();
})

3.自定义404页面，并改变请求状态为404，没改变之前为200，这是express框架自己定义的

app.use((req,res)=>{
    // 改变请求状态
    res.status(404)
    res.send('没有这个页面')
})  // 写在所有请求后

错误处理中间件

注: next()如果没有参数，就执行下一个处理函数，如果有参数，就执行错误处理函数

同步方法，遇到throw new Error会执行错误处理中间件

app.get('/', (req, res)=>{
    // 只要走到了throw new Error这一步，就证明出现了错误，直接调用错误处理中间件
    throw new Error('程序发生率未知错误')
})

// 错误处理中间件
app.use((err,req,res,next)=>{
    // err.message就是错误信息，也就是throw new Error中的内容
    res.status(500).send(err.message)
})

异步方法，是通过next(err)来触发错误处理中间件的

// 引入文件读取模块
const fs = require('fs')

app.get('/list', (req, res, next) => {
    fs.readFile('./demo.txt', 'utf8', (err, result) => {
        // err为错误内容，result为读取文件的内容
        if (err) {
            // 如果有错误内容，通过next(err)触发错误处理中间件
            next(err)
        } else {
            res.send(result)
        }
    })
})

// 错误处理中间件
app.use((err, req, res, next) => {
    // err.message就是错误信息，也就是throw new Error中的内容
    res.status(500).send(err.message)
})

捕获异常/错误

不管是异步还是同步，都可以通过try{}catch(err){}

// 引入fs文件读取模块
const fs = require('fs')
// 引入promise异步处理
const promisify = require('util').promisify
const readFile = promisify(fs.readFile)

app.get('/index', async (req, res, next) => {
    try {
        await readFile('./aaa.json')
    } catch (ex) {
        next(ex)
    }
})

// 错误处理中间件
app.use((err, req, res, next) => {
    // err.message就是错误信息，也就是throw new Error中的内容
    res.status(500).send(err.message)
})

构建模块化路由

// 创建路由对象
const home = express.Router()
// 将路由和请求路径进行匹配
app.use('/home', home)
// 在home路由下继续创建路由
home.get('/index', (req, res) => {
    res.send('欢迎来到展示页面')
})
// 访问/home/index

实际运用中

home.js

const express = require('express')
const home = express.Router()
home.get('/index', (req, res) => {
    res.send('这是home下的index')
})
// 导出home
module.exports = home

express.js

// 引入express框架
const express = require('express')
// 创建网站服务器
const app = express()

// 在express.js中引入home.js
const home = require('./router/home')
// 使用app.use来将路由和请求路径进行匹配
app.use('/home', home)


// 监听端口
app.listen(3000)
console.log('网站服务器启动成功');

GET参数的获取

express框架使用req.query即可获取GET参数，框架内部会将GET参数转换为对象并返回

// 例如: http://localhost:3000?name=zhangsan&age=30
app.get('/', (req, res) => {
    console.log(req.query); // {"name": "zhangsan","age": "30"}
})

POST参数的获取

express获取post请求，需要解析post数据

// 解析post数据
app.use(express.urlencoded())
//接受请求
app.post('/add',(req,res)=>{
	// 接受请求参数
	console.log(req.body);
})

express路由传参

注：这也叫做RESTful API 路由

// 例子:localhost:3000/10
app.get('/index/:id',(req,res)=>{
    // 通过req.params来接受参数
    res.send(req.params) // 结果 {"id": "10"}
})

静态资源的访问处理

在请求路径的同级目录下，新建public文件夹，下面放一些静态资源，如：images图片等

// 引入express框架
const express = require('express')
// 引入path  
// path.join(__dirname, "public")   这是连接路径的，__dirname是域名端口 
// 如：http://localhost:3000  加上public 就成了 http://localhost:3000/public
const path = require('path')
// 创建网站服务器
const app = express()

// 实现静态资源的访问
app.use(express.static(path.join(__dirname, "public")))

// 例子: http://localhost:3000/images/4.9-1.jpg


// 监听端口
app.listen(3000)
console.log('网站服务器启动成功');

模板引擎

注：需要下载npm i art-template express-art-template

// 1.告诉express框架使用什么模板引擎，渲染什么后缀的模板文件
    // 01.模板后缀
    // 02.使用的模板引擎
app.engine('art', require('express-art-template'))
// 2.告诉express框架模板存放的位置是什么
app.set('views', path.join(__dirname, 'views'))
// 3.告诉express框架模板的默认后缀是什么
app.set('view engine', 'art')

app.get('/index', (req, res) => {
    // res.render都干了什么事
    // 1.拼接模板路径
    // 2.拼接模板后缀
    // 3.哪一个模板和哪一个数据进行拼接
    // 4.将拼接结果响应给了客户端
    res.render('index', {
        msg: "message"
    })
})

app.locals对象

将变量设置到app.locals对象下面,这个数据在所有的模板(art)中都可以获取到.

express.js中

// app.locals对象可以在所有的模板中访问
app.locals.users = [{
    name: "张三",
    age: 20
},{
    name: "李四",
    age: 20
}]

index.art模板中

<ul>
	// 循环开始
    {{each users}}
    <li>
        {{$value.name}}
        {{$value.age}}
    </li>
    // 循环结束
    {{/each}}
</ul>