node前后端交互Express

Express 2022-09-08

1. Express框架是什么

1.1 Express是一个基于Node平台的web应用开发框架，它提供了一系列的强大特性，帮助你创建各种Web应用。我们可以使用 npm install express 命令进行下载。

1.2 Express初体验

// 引入express框架
const express = require('express');
// 创建网站服务器
const app = express();
app.get('/' , (req, res) => {
    // send()
    // 1. send方法内部会检测响应内容的类型
    // 2. send方法会自动设置http状态码
    // 3. send方法会帮我们自动设置响应的内容类型及编码
    res.send('Hello. Express');
})
app.get('/list', (req, res) => {
    res.send({name: '张三', age: 20})
})

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

2. 中间件
2.1 什么是中间件
中间件就是express框架提供的一堆方法，可以接收客户端发来的请求、可以对请求做出响应，也可以将请求继续交给下一个中间件继续处理,即接受请求,处理请求。
中间件主要由两部分构成，中间件方法以及请求处理函数。
中间件方法由Express提供，负责拦截请求，请求处理函数由开发人员提供，负责处理请求。

 //中间件示例
app.get('请求路径', '处理函数') // 接收并处理get请求
app.post('请求路径', '处理函数') // 接收并处理post请求

可以针对同一个请求设置多个中间件，对同一个请求进行多次处理。

默认情况下，请求从上到下依次匹配中间件，一旦匹配成功，终止匹配。

可以调用next方法将请求的控制权交给下一个中间件，直到遇到结束请求的中间件。

//02.中间件.js
//引入express框架
const express = require("express");
//创建网站服务器
const app = express();
//当客户端以get方式访问/request路由时
//第一个中间件
app.get('/request', (req, res, next) => {
  req.name = "张三";
  next();
});
//下一个中间件
app.get('/request', (req, res) => {
  res.send(req.name);
});
//监听端口
app.listen(3000);

2.2 app.use中间件用法

app.use 匹配所有的请求方式，可以直接传入请求处理函数，代表接收所有的请求。

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

app.use 第一个参数也可以传入请求地址，代表不论什么请求方式，只要是这个请求地址就接收这个请求。

 app.use('/request', (req, res, next) => {
     console.log(req.url);
     next();
 });
  1. 输入http://localhost:3000，控制台打印 请求走了app.use中间件
  2. 输入http://localhost:3000/request，控制台打印 请求走了app.use中间件、请求走了app.use /request中间件
//03.app.use.js
const express = require("express");
const app = express();
//接受所有请求的中间件
app.use((req, res, next) => {
  console.log('请求走了app.use中间件');
  next()
})
//当客户端访问/request请求时走当前中间件
app.use('/request', (req, res, next) => {
  console.log('请求走了app.use /request中间件');
  next();
});
app.get('/list', (req, res) => {
  res.send('/list');
});
//监听端口
app.listen(3000);

2.3 中间件应用

1.网站维护公告 ，写在最前面，直接为客户端做出响应，网站正在维护中。

// 引入express框架
const express = require('express');
// 创建网站服务器
const app = express();
 app.use((req, res, next) => {
    res.send('当前网站正在维护...')
 })

2.路由保护，客户端在访问需要登录的页面时，可以先使用中间件判断用户登录状态，用户如果未登录，则拦截请求，直接响应，禁止用户进入需要登录的页面。

app.use('/admin', (req, res, next) => {
    // 用户没有登录
    let isLogin = true;
    // 如果用户登录
    if (isLogin) {
        // 让请求继续向下执行
        next()
    }else {
        // 如果用户没有登录 直接对客户端做出响应
        res.send('您还没有登录 不能访问/admin这个页面')
    }
})
app.get('/admin', (req, res) => {
    res.send('您已经登录 可以访问当前页面')
})

3.自定义404页面

app.use((req, res, next) => {
    // 为客户端响应404状态码以及提示信息
    res.status(404).send('当前访问的页面是不存在的')
})

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

3. Express请求处理

3.1 构建模块化路由

//路由对象也会有get、post方法
// 引入express框架
const express = require('express');
// 创建网站服务器
const app = express();
// 创建路由对象
const home = express.Router();
// 为路由对象匹配请求路径
app.use('/home', home);
// 创建二级路由
home.get('/index', (req, res) => {
    res.send('欢迎来到博客首页页面')
})

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

把二级路由抽离出来模块化，然后再app.js中引入

//home.js
const express = require("express");
const home = express.Router();
home.get('/index', (req, res) => {
  res.send('欢迎来到博客首页页面')
});
module.exports = home;
//admin.js
const express = require("express");
const admin = express.Router();
admin.get('/index', (req, res) => {
  res.send('欢迎来到博客管理页面')
});
module.exports = admin;
// 引入express框架
const express = require('express');
// 创建网站服务器
const app = express();
const home = require('./route/home');
const admin = require('./route/admin');
app.use('/home', home);
app.use('/admin', admin);

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

3.2 GET参数的获取

不再引用url模块通过对请求地址进行解析来获取请求参数，直接req.query即可获取，框架内部会将GET参数转换为对象并返回

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

app.get('/index', (req, res) => {
    // 获取get请求参数
    res.send(req.query)
})

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

3.3 POST参数的获取

Express中接收post请求参数需要借助第三方包 body-parser。

//10.如何获取post请求参数.js
const express = require("express");
// 引入body-parser模块
const bodyParser = require("body-parser");
const app = express();
//拦截所有请求
//extended:false 方法内部使用querystring模板处理请求参数的格式
//extended:true 方法内部使用第三方模块qs处理请求参数的格式
// 配置body-parser模块
app.use(bodyParser.urlencoded({
  extended: false
}));
// 接收请求
app.post("/add", (req, res) => {
  //接受post请求参数
  res.send(req.body);
});
// 监听端口
app.listen(3000);
 <form action="http:localhost:3000/add" method='post'>
    <input type="text" name='username'>
    <input type="text" name='password'>
    <input type="submit" name=''>
  </form>

疑问：app.use方法需要传递一个请求处理函数进去，但是现在为什么传递了一个方法的调用呢？

实际上调用的这个方法，它的返回值也是一个函数，这个返回的函数正好作为了app.use() 的参数。
这样写的好处就是调用fn函数的同时向fn函数内部传递一些额外的参数，在请求处理函数内部可以根据参数改变请求处理函数的行为

// 引入express框架
const express = require('express');
const bodyParser = require('body-parser');
// 创建网站服务器
const app = express();
//拦截所有请求。把fn函数的调用写在use的里面，如果为1打印请求地址
app.use(fn ({a: 2}))
function fn (obj) {
    return function (req, res, next) {
        if (obj.a == 1) {
            console.log(req.url)
        }else {
            console.log(req.method)
        }
        next()
    }
}

app.get('/', (req, res) => {
    // 接收post请求参数
    res.send('ok')
})

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

3.4 Express路由参数

//传递和接受get参数还有另外一种方式，路由参数
//req.params获取请求参数

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

app.get('/index/:id/:name/:age', (req, res) => {
// 接收get请求参数
res.send(req.params)
})

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

 

3.5 静态资源的处理

内置的express.static可以方便地托管静态文件，例如img、CSS、JavaScript 文件等。

//通过express内置的express.static可以托管静态文件，例如img/css/js文件等
//方法内部会判断客户端发来的请求是否是静态资源请求，如果是直接响应给客户端，终止当前请求
const express = require('express');
const path = require('path');
const app = express();

// 实现静态资源访问功能
//app.use(express.static(path.join(__dirname, 'public')))
//为静态资源的目录文件指定一个虚拟路径
app.use('/static',express.static(path.join(__dirname, 'public')))

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

4. express-art-template模板引擎

4.1 模板引擎

为了使art-template模板引擎能够更好的和Express框架配合，模板引擎官方在原art-template模板引擎的基础上封装了express-art-template。

npm install art-template express-art-template
//14.模板引擎.js
const express = require('express');
const path = require('path');
const app = express();

// 1.告诉express框架使用什么模板引擎渲染什么后缀的模板文件 
//app.engine('模板后缀', require('使用的模板引擎'))
app.engine('art', require('express-art-template'))
// 2.设置模板存放目录
//app.set('views为固定参数,express框架的配置项名字,告诉模板存放的位置',绝对路径 views模板文件夹)
app.set('views', path.join(__dirname, 'views'))
// 3.渲染模板时不写后缀 默认拼接art后缀
app.set('view engine', 'art');

app.get('/index', (req, res) => {
  //render功能:
  // 1. 拼接模板路径
  // 2. 拼接模板后缀
  // 3. '模板名称'，{key:value}
  // 4. 将拼接结果响应给了客户端
  res.render('index.art', {
    msg: 'message page'
  })
});

app.get('/list', (req, res) => {
  res.render('list', {
    msg: 'list page'
  })
})

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

4.2 express模块中的req，res参数的常用属性方法

const express = require('express'); 
const router = express.Router()
router.get('/',(req,res)=>{
    // Request
    // req.baseUrl 基础路由地址
    // req.body post发送的数据解析出来的对象
    // req.cookies 客户端发送的cookies数据
    // req.hostname 主机地址 去掉端口号
    // req.ip 查看客户端的ip地址
    // req.ips 代理的IP地址
    // req.originalUrl 对req.url的一个备份
    // req.params 在使用/:id/:name 匹配params
    // req.path 包含请求URL的路径部分
    // req.protocol http 或https协议
    // req.query 查询字符串解析出来的对象 username=zhangsan&password=123 { username:zhangsan }
    // req.route 当前匹配的路由 正则表达式
    // req.params 获取路由匹配的参数
    // req.get 获取请求header里的参数
    // req.is 判断请求的是什么类型的文件
    // req.param(key名称) 用来获取某一个路由匹配的参数
 
 
    //Response
    // res.headersSent 查看http响应是否响应了http头
    // res.append(名称,value) 追加http响应头
    // res.attachment(文件路径) 响应文件请求 
    // res.cookie() 设置cookie
    
    //res.setHeader('Content-Type','text/html;charset=utf8')
    // res.append('Content-Type','text/html;charset=utf8')
    // res.append('hehe','1008')
    // res.append('haha','1008')
    // res.attachment('./xx.zip') //Content-Disposition: attachment; filename="xx.zip"
    // res.clearCookie(cookiename) 删除cookie
    // res.cookie('zhangsan','lisi') 设置cookie
    // res.cookie('zhangsan1','lisi2',{
    //     maxAge:900000,
    //     httpOnly:true,
    //     path: '/admin', 
    //     secure: true,
    //     signed:true
    // })
    // res.clearCookie('zhangsan')
 
    // res.download(文件的path路径) 跟attachment类似 用来处理文件下载的 参数是文件地址
    // res.end http模块自带的
    // res.format()协商请求文件类型 format匹配协商的文件类型
    // res.format({
    //     'text/plain': function(){
    //         res.send('hey');
    //     },
        
    //     'text/html': function(){
    //         res.send('<p>hey</p>');
    //     },
        
    //     'application/json': function(){
    //         res.send({ message: 'hey' });
    //     },
        
    //     'default': function() {
    //         // log the request and respond with 406
    //         res.status(406).send('Not Acceptable');
    //     }
    // });
 
    // res.get('key') 获取响应header数据
    // res.json() 返回json数据 会自动设置响应header Content-type 为json格式 application/json
 
    // res.json({
    //     xx:100
    // })
 
    // res.json({
    //     xx:100
    // })
 
    // jsonp 利用的就是浏览器加载其他服务器的文件不会存在跨域问题
    // ajax请求就会有跨域问题
 
    // res.setHeader('Content-Type','text/javascript;charsert=utf8')
    // res.end(`typeof ${req.query.callback} == 'function' ? ${req.query.callback}({aa:100}):null`)
 
    // res.jsonp({aaa:100})
 
 
    // 重定向 把访问的地址跳转到另一个地址上
    // res.redirect(301,'/api/aes')
 
    // express jade
    // res.render('index',{title:"hehe",test:"23"})
    // res.send('') 发送数据 可以是任意类型的数据
    // res.sendFile() 发送文件的 
    // res.sendStatus(200) 设置发送时的状态码
    // res.set('Content-Type', 'text/plain') //设置响应header
    // res.status(200) // 设置状态码
    // res.type('') // 直接设置响应的文件类型
 
    // res.type('pdf')
 
    // res.send({aa:100})
    // res.end('ok')
    // res.end({aa:100})
 
    // res.end('你好')
 
 
    // res.end(req.get('Accept-Language'))
    // res.json({
    //     is:req.is('text/html')
    // })
 
    // res.json({
    //     type:req.baseUrl,
    //     hostname:req.hostname,
    //     // ip:req.ip,
    //     // ips:req.ips,
    //     // route:req.route,
    //     ct:req.get('Accept'),
    //     cs:'22'
    // })
})
 
router.get('/:id/:date',(req,res)=>{
    console.log(req.params)
    // res.json(req.params)
    res.end(req.param('date'))
})
 
router.get('/aes',(req,res)=>{
    res.json({
        type:req.baseUrl
    })
})
module.exports = router

 

参考：https://blog.csdn.net/weixin_40581714/article/details/111591005

 

相关文章

Express 入门 创建一个express文件
根据官网 入门 express
Express 路由 02
java叫接口control什么的app.get.post等等都是请求方式我们可...
Express 中间件
为了前端丢进去的时候可以直接判断中间件就是经过了这个就会...
Express 04 文件的上传和下载
Express 文件的上传和下载
Express 05 使用Node链接sqlite
运行命令下载app.js 增加中间件。
Express 06 制作留言板项目 创建第一个项目
基本模板来的 后面用后就有什么加什么都行。