【node】Express框架

缺乏、安全感 2023-07-24 08:52 200阅读 0赞

Express

  • Express框架是什么
    Express是基于Node平台的web应用开发框架,他提供了一系列强大特性,帮助你创建各种web应用(可通过npm install express命令进行下载)
  • Express框架特性
    (1)提供方便简洁的路由定义方式
    (2)对获取的HTTP请求参数进行简化处理
    (3)对模板引擎支持程度高,方便渲染动态HTML页面
    (4)提供中间件有效机制控制HTTP请求
    (5)拥有大量第三方中间件对功能进行扩展
    (6)封装了方法(访问不到时有页面提示)
  • 初识Express框架

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

    app.get(‘/‘, (req, res) => {

    1. //cwen send()
    2. //1,send方法内部会检测相应内容类型
    3. //2,send方法会自动设置http状态码
    4. //3,send方法帮我们自动设置响应的内容类型及编码
    5. res.send('hello express');

    });
    app.get(‘/list’, (req, res) => {

    1. res.send({ name: '张三', age: 20 });

    })

    //监听端口
    app.listen(3000);
    console.log(‘服务器启动成功,端口3000’);

  • Express中间件
    (1)中间件概念

    const express = require(‘express’);
    const app = express();

    //中间件
    app.get(‘/request’, (req, res, next) => {

    1. req.name = '张三';
    2. next();

    });
    app.get(‘/request’, (req, res) => {

    1. res.send(req.name);

    });

    app.listen(3000);
    console.log(‘服务器启动成功,端口3000’);

(2)中间件app.use用法

  1. const express = require('express');
  2. const app = express();
  3. // cwen app.use中间件接收所有请求方式
  4. app.use((req, res, next) => {
  5. console.log('经过中间件app.use');
  6. next();
  7. });
  8. //cwen第一个参数可以传入地址,代表不论是什么请求方式,只要是这个地址就接受这个请求
  9. app.use('/index', (req, res, next) => {
  10. console.log('经过index中间件');
  11. next();
  12. })
  13. app.get('/index', (req, res) => {
  14. res.send('index')
  15. });
  16. app.get('/request', (req, res, next) => {
  17. req.name = '张三';
  18. next();
  19. });
  20. app.get('/request', (req, res) => {
  21. res.send(req.name)
  22. });
  23. app.listen(3000);
  24. console.log('服务器启动成功,端口号3000');

(3)中间件app.use应用

  1. const express = require('express');
  2. const app = express();
  3. //cwen网站维护公告
  4. // app.use((req, res, next) => {
  5. // console.log('本网站正在维修,已经停运');
  6. // });
  7. //cwen应用路由保护
  8. app.use('/cwen', (req, res, next) => {
  9. let itis = true;
  10. if (itis) {
  11. next();
  12. } else {
  13. console.log('无法访问cwen');
  14. }
  15. });
  16. app.get('/cwen', (req, res) => {
  17. res.send('cwen');
  18. });
  19. //cwen定义404
  20. app.use((req, res, next) => {
  21. res.status(404).send('当前访问不存在');
  22. });
  23. app.listen(3000);
  24. console.log('服务器搭建成功,端口3000');

(4)错误处理中间件

  1. const express = require('express');
  2. const fs = require('fs');
  3. const app = express();
  4. app.get('/index', (req, res, next) => {
  5. //cwen同步代码捕获错误
  6. // throw new Error('服务器出现未知错误');
  7. //cwen异步api错误处理(手动触发错误中间件)
  8. fs.readFile('./文件清单.js', 'utf8', (err, doc) => {
  9. if (err != null) {
  10. res.send(err);
  11. next();
  12. } else {
  13. res.send(doc);
  14. }
  15. });
  16. });
  17. //cwen错误处理中间件
  18. app.use((err, req, res, next) => {
  19. //错误对象后面加message
  20. res.status(500).send(err.message);
  21. });
  22. app.listen(3000);
  23. console.log('服务器启动成功端口3000');

(5)异步函数错误捕获中间件(系统自动提示无法找到要读取文件)

  1. const express = require('express');
  2. const fs = require('fs');
  3. // cwen读取文件api默认不支持异步函数,调用方法包装支持
  4. const promisify = require('util').promisify;
  5. const readFile = promisify(fs.readFile);
  6. const app = express();
  7. app.get('/cwen', async(req, res, next) => {
  8. //try{}catch(){}可以捕获同步代码错误,异步函数的错误,无法捕获其他类型的错误(回调函数等)。
  9. try {
  10. await readFile('aaa.js');
  11. } catch (ex) {
  12. next(ex);
  13. }
  14. });
  15. //错误处理中间件
  16. app.use((err, req, res, next) => {
  17. res.status(500).send(err.message);
  18. });
  19. //cwen错误抛出且不影响其他部分执行
  20. app.listen(3000);
  21. console.log('服务器启动成功端口3000');
  • Express请求处理
    (1)构建模块化路由基础

    //cwen构建模块化路由
    //引入express框架
    const express = require(‘express’);
    const app = express();
    //创建路由对象
    const home = express.Router();
    //将路由与请求对象进行匹配
    app.use(‘/home’, home);
    //在home路由下创建二级路由
    //cwen客户访问时需要加上一级路由地址及二级路由地址
    home.get(‘/index’, (req, res) => {

    1. res.send('欢迎进入');

    });

    app.listen(3000);

(2)构建模块化路由
1)启动服务器代码

  1. const express = require('express');
  2. const app = express();
  3. const home = require('./router/home.js');
  4. const admin = require('./router/admin.js');
  5. app.use('/home', home);
  6. app.use('/admin', admin);
  7. app.listen(3000);

2)新建同级目录下文件夹,命名为router(路由)
home.js

  1. const express = require('express');
  2. const home = express.Router();
  3. home.get('/home', (req, res) => {
  4. res.send('欢迎进入home');
  5. });
  6. module.exports = home;

admin.js

  1. const express = require('express');
  2. const admin = express.Router();
  3. admin.get('/admin', (req, res) => {
  4. res.send('欢迎进入admin');
  5. });
  6. module.exports = admin;

(3)express框架获取get请求方式

  1. const express = require('express');
  2. const app = express();
  3. app.get('/index', (req, res) => {
  4. //获取get请求参数
  5. res.send(req.query);
  6. });
  7. app.listen(3000);

(4)express第三方模块body-parser获取post请求参数
1)服务器端

  1. //获取post请求参数
  2. const express = require('express');
  3. const bodyParser = require('body-parser');
  4. //搭建服务器
  5. const app = express();
  6. //中间件拦截请求信息
  7. //extended:false 方法内部使用querystring模块处理请求参数格式(推荐)
  8. //extended:true 方法内部使用第三方模块qs处理请求参数格式
  9. //此处中间件解释见下一个js
  10. app.use(bodyParser.urlencoded({ extended: false }));
  11. app.post('/index', (req, res) => {
  12. //返回post请求参数
  13. res.send(req.body);
  14. });
  15. app.listen(3000);

2)HTML端(form)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <form action="http://localhost:3000/index" method="POST">
  10. <input type="text" name="name"><br>
  11. <input type="text" name="password"><br>
  12. <input type="submit" value="提交">
  13. </form>
  14. </body>
  15. </html>

(5)app.use方法(中间件)

  1. const express = require('express');
  2. const app = express();
  3. //app.use传递方法的调用
  4. app.use(fn({ a: 1 }));
  5. function fn(obj) {
  6. return function(req, res, next) {
  7. if (obj.a == 1) {
  8. console.log(req.url);
  9. } else {
  10. console.log(req.method);
  11. }
  12. //交出控制权
  13. next();
  14. }
  15. }
  16. app.get('/index', (req, res) => {
  17. res.send('ok');
  18. });
  19. app.listen(3000);

(6)Express框架传递及获取get参数的另一种方式

  1. const express = require('express');
  2. const app = express();
  3. app.get('/index/:id/:name/:password', (req, res) => {
  4. res.send(req.params);
  5. });
  6. app.listen(3000);

(7)Express框架提供静态资源访问(public文件夹)

  1. const express = require('express');
  2. const path = require('path');
  3. const app = express();
  4. //建议写绝对路径
  5. //express静态资源访问
  6. app.use(express.static(path.join(__dirname, 'public')));
  7. app.listen(3000);

(8)Express框架模板引擎
1)服务器端:

  1. const express = require('express');
  2. const path = require('path');
  3. const app = express();
  4. //1,告诉express框架使用什么模板引擎渲染什么后缀的模板文档
  5. //(1)模板后缀
  6. //(2)适应的模板引擎
  7. app.engine('art', require('express-art-template'));
  8. //2,告诉express框架模板存放的位置
  9. //第一个views是固定的(告诉express框架模板存放的位置),第二个views是文件夹名称
  10. app.set('views', path.join(__dirname, 'views'));
  11. //3,告诉express框架模板默认后缀是什么
  12. app.set('view engine', 'art');
  13. app.get('/index', (req, res) => {
  14. //express框架提供了render()方法,用于渲染
  15. //render所做的事(1),拼接末班路径(2)拼接模板后缀(3)哪一个模板和哪一个数据进行拼接(4)拼接结果响应给客户端
  16. res.render('index.art', {
  17. msg: 'message'
  18. });
  19. });
  20. app.get('/list', (req, res) => {
  21. res.render('list', {
  22. msg: 'hello word'
  23. });
  24. });
  25. app.listen(3000);

2)模板代码(location:同级目录views下)
index.art

  1. { { msg }}
  2. <ul>
  3. { { each users}}
  4. <li>
  5. { { $value.name}}
  6. { { $value.age}}
  7. </li>
  8. { { /each}}
  9. </ul>

list.art

  1. { { msg}}
  2. <ul>
  3. { { each users}}
  4. <li>
  5. { { $value.name}}
  6. { { $value.age}}
  7. </li>
  8. { { /each}}
  9. </ul>

(9)Express框架中将变量设置到app.locals对象下面,这个数据在所有模板中都可以获取到(结合第8点)

  1. const express = require('express');
  2. const app = express();
  3. const path = require('path');
  4. app.engine('art', require('express-art-template'));
  5. app.set('views', path.join(__dirname, 'views'));
  6. app.set('view engine', 'art');
  7. //cwen这个数据在所有的模板中都可以获得
  8. app.locals.users = [{
  9. name: '张三',
  10. age: 4
  11. }, {
  12. name: '李四',
  13. age: 45
  14. }]
  15. app.get('/index', (req, res) => {
  16. res.render('index', {
  17. msg: '首页'
  18. });
  19. });
  20. app.get('/list', (req, res) => {
  21. res.render('list', {
  22. msg: '列表页'
  23. });
  24. });
  25. app.listen(3000);

OVER:奥利给

发表评论

表情:
评论列表 (有 0 条评论,200人围观)

还没有评论,来说两句吧...

相关阅读

    相关 框架

    框架 多个网页组合成一个页面显示在浏览器中 框架主要有两个部分: 1、框架集:设定视窗如何分割的文件 2、 具体的框架文件:每个窗口就是一个框架

    相关 开源框架:JFinal框架

    JFinal  是基于 Java  语言的极速  WEB  + ORM  开发框架,其核心设计目标是开发迅速、代码量少、学习简单、功能强大、轻量级、易扩展、Restful。在拥