ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

Express框架学习总结

2021-03-18 11:06:07  阅读：117  来源： 互联网

标签：总结 express const req 框架 res app Express send


  • 属于node的第三方模块，在与代码同级的文件夹下，按住shift，鼠标右键打开power shell窗口，使用 npm install express 命令，进行下载
  • 基于Node平台的web应用开发框架
// 引入express框架
const express = require('express');
// 创建网站服务器
const app = express();

// 当客户端以get方式访问/路由时
app.get('/', (req, res) => {
    // send()
    // 1. send方法内部会检测响应内容的类型
    // 2. send方法会自动设置http状态码
    // 3. send方法会帮我们自动设置响应的内容类型及编码
    res.send('hello express');
})

app.get('/html', (req, res) => {
    res.send('<h2>Hello Express</h2>');
})

app.get('/json', (req, res) => {
    res.send({ name: '张三', age: 20 })
})

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

结果：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

中间件

  • 一堆方法
    • 接收客户端发来的请求
    • 对请求做出响应
    • 将请求继续交给下一个中间件继续处理
  • 由两部分构成， 中间件方法以及请求处理函数
  • 中间件方法：由Express提供，负责拦截请求
  • 请求处理函数：由开发人员提供，负责处理请求
app.get('请求路径', '处理函数') // 接收并处理get请求
app.post('请求路径', '处理函数') // 接收并处理post请求

对同一个请求设置多个中间件

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

调用next()将请求的控制权交给下一个中间件，直到遇到结束请求的中间件

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

//针对同一个请求/request设置多个中间件
app.get('/request', (req, res, next) => {
    req.name = "张三";
    next(); //若这里无此方法，则页面就会卡在这里，不会显示req.name
})

app.get('/request', (req, res) => {
    res.send(req.name)
})

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

app.use中间件

匹配所有的请求方式

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

// 接收所有请求的中间件
app.use((req, res, next) => {
    console.log('请求走了app.use中间件');
    next()
})

app.get('/list', (req, res) => {
    res.send('/list')
})

app.get('/request', (req, res, next) => {
    req.name = "张三";
    next();
})

app.get('/request', (req, res) => {
    res.send(req.name)
})

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

分析：上述代码中有两个请求（/list和/request），当用户进行这两个请求（http://localhost:3000/list和 http://localhost:3000/request）时，都会调用app.use()方法。
在这里插入图片描述

匹配某个传入地址的请求

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.get('/request', (req, res, next) => {
    req.name = "张三";
    next();
})

app.get('/request', (req, res) => {
    res.send(req.name)
})

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

分析：上述代码中有两个请求（/list和/request），当用户进行请求（http://localhost:3000/list时，调用app.use()方法；当用户进行请求（http://localhost:3000/request时，调用app.use()和app.use(’/request’, (req, res, next) )
在这里插入图片描述

中间件应用

路由保护，如判断用户登录

使用中间件判断用户登录状态，用户如果未登录，则拦截请求，直接响应，禁止用户进入需要登录的页面

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

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

app.get('/admin', (req, res) => {
    res.send('您已经登录 可以访问当前页面')
})

app.listen(3000);
console.log('网站服务器启动成功');

网站维护公告

在所有路由的最上面定义接收所有请求的中间件，直接为客户端做出响应

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

// 网站公告
app.use((req, res, next) => {
    res.send('当前网站正在维护...')
})

app.listen(3000);
console.log('网站服务器启动成功');

在这里插入图片描述

自定义404页面

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


app.get('/list', (req, res) => {
    res.send('当前list页面')
})

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

app.listen(3000);
console.log('网站服务器启动成功');

在这里插入图片描述
在这里插入图片描述

错误处理中间件

// 引入express框架
const express = require('express');
//引入fs模块，读取文件
const fs = require('fs');
// 创建网站服务器
const app = express();

app.get('/index', (req, res, next) => {
    // throw new Error('程序发生了未知错误')
    fs.readFile('./nofile.js', 'utf8', (err, result) => {
        //err为null时，表示读取文件成功
        if (err != null) { //err不为null时，此时读取文件失败
            next(err) //调用next()方法，将错误信息通过参数的形式传递给next()方法，即可触发错误处理中间件
        } else {
            res.send(result)
        }
    })

    // res.send('程序正常执行')
})

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

重新启动js文件：
在这里插入图片描述
页面显示：
在这里插入图片描述

try catch捕获异步函数和同步代码执行中的错误

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

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

// 错误处理中间
app.use((err, req, res, next) => {
    res.status(500).send(err.message);
})

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

重新启动js文件：
在这里插入图片描述
页面显示：
在这里插入图片描述

请求处理

模块路由基础

// 引入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);
console.log('网站服务器启动成功');

在这里插入图片描述
在这里插入图片描述

模块化路由

route文件夹下存储home.js和admin.js，其中
home.js：

const express = require('express');
// 创建路由对象home
const home = express.Router();
// 为路由对象home匹配请求路径
home.get('/index', (req, res) => {
	res.send('欢迎来到博客首页页面')
});
//将路由对象home导出
module.exports = home;

admin.js：

const express = require('express');

const admin = express.Router();

admin.get('/index', (req, res) => {
	res.send('欢迎来到博客管理页面')
});

module.exports = admin;

app.js

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

//将route文件夹下的home.js导入
const home = require('./route/home');//这里省略了文件名后缀
const admin = require('./route/admin');

app.use('/home', home);
app.use('/admin', admin);


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

启动app.js后，页面显示：
在这里插入图片描述
在这里插入图片描述

获取get参数

req.query

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

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

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

运行js，页面显示：
在这里插入图片描述
当在地址栏输入参数时：
在这里插入图片描述

获取post参数

借助第三方包：body-parser
在这里插入图片描述
新建表单post.html ：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <form action="http://localhost:3000/add" method="post">
        <input type="text" name="username">
        <input type="password" name="pwd">
        <input type="submit" name="">
    </form>
</body>

</html>

js处理：

// 引入express框架
const express = require('express');
const bodyParser = require('body-parser');
// 创建网站服务器
const app = express();
// 拦截所有请求
// extended: false 方法内部使用querystring模块处理请求参数的格式
// extended: true 方法内部使用第三方模块qs处理请求参数的格式
app.use(bodyParser.urlencoded({ extended: false }))

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

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

使用node命令启动js，在post.html表单中填入数据：
在这里插入图片描述

路由参数

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

//:id与:name是占位符
app.get('/index/:id/:name', (req, res) => {
    res.send(req.params)
})

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

启动js后，输入地址的页面情况：
在这里插入图片描述
在这里插入图片描述

静态资源处理

通过express.static

//express.static(arg)  参数arg表示路径
app.use(express.static(arg));

例如：express文件夹下存储所有的js代码，在这个文件夹下建立static文件夹，存储静态页面index.html.其中，只写<p>欢迎光临！</p>
js代码：

const express = require('express');
const path = require('path');
const app = express();
//path.join()拼接路径
console.log(path.join(__dirname, 'static'));

// 实现静态资源访问功能
app.use(express.static(path.join(__dirname, 'static')))

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

启动js：
在这里插入图片描述
页面访问：
在这里插入图片描述
模板引擎小尾巴待写。。。

标签：总结,express,const,req,框架,res,app,Express,send
来源： https://blog.csdn.net/pilgrim_121/article/details/114655046

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有