express框架

目录

  • 一、express介绍
  • 二、express 使用
    • 2.1 express下载
    • 2.2 express初体验
  • 三、express 路由
    • 3.1 路由的使用
    • 3.2 获取参数
    • 3.3 获取路由参数
  • 四、express响应设置
  • 五、express中间件
    • 5.1 什么是中间件
    • 5.2 中间件的作用
    • 5.3 中间件的类型
      • 5.3.1 定义全局中间件
      • 5.3.2 多个全局中间件
      • 5.3.3 定义路由中间件
    • 5.4 静态资源中间件
    • 5.5 获取请求体数据 body-parser
  • 六、Router
    • 6.1 什么是Router
    • 6.2 Router 作用
    • 6.3 Router使用
  • 七、EJS 模板引擎
    • 7.1 什么是模板引擎
    • 7.2 什么是 EJS
    • 7.3 EJS 初体验
    • 7.4 EJS 常用语法

一、express介绍

express 是一个基于 Node.js 平台的极简、灵活的 WEB 应用开发框架，官方网址：https://www.expressjs.com.cn/

简单来说，express 是一个封装好的工具包，封装了很多功能，便于我们开发 WEB 应用（HTTP 服务）

二、express 使用

2.1 express下载

express 本身是一个 npm 包，所以可以通过 npm 安装

npm init
npm i express

2.2 express初体验

1.创建 JS 文件，如下代码：

//1.导入 express
const express = require('express');//2.创建对象
const app = express();//3.创建路由
app.get('/home',(req,res)=>{res.end('hello express');
})//4.监听端口，启动服务
app.listen(9000,()=>{console.log("服务已启动")
})

2.命令行下执行该脚本

node <文件名>
# 或者
nodemon <文件名>

3.访问ip:9000

三、express 路由

3.1 路由的使用

一个路由的组成有 请求方法 ， 路径 和 回调函数 组成
express 中提供了一系列方法，可以很方便的使用路由，使用格式如下：

app.<method>(path，callback)

代码示例：

//1.导入 express
const express = require('express');//2.创建对象
const app = express();//3.创建路由
app.get('/home',(req,res)=>{res.end('hello express');
})
//匹配get
app.get('/',(req,res)=>{res.end('home');
})
//post请求
app.post('/login',(req,res)=>{res.end('login');
})
//匹配所有请求
app.all('/test',(req,res)=>{res.end('test');
})
//404响应
app.all('*',(req,res)=>{res.end('404 not found');
})
//4.监听端口，启动服务
app.listen(9000,()=>{console.log("服务已启动")
})

3.2 获取参数

express 框架封装了一些 API 来方便获取请求报文中的数据，并且兼容原生 HTTP 模块的获取方式

//导入 express
const express = require('express');
//创建应用对象
const app = express();
//获取请求的路由规则
app.get('/request', (req, res) => {//1. 获取报文的方式与原生 HTTP 获取方式是兼容的console.log(req.method);console.log(req.url);console.log(req.httpVersion);console.log(req.headers);//2. express 独有的获取报文的方式//获取查询字符串console.log(req.query); // 『相对重要』// 获取指定的请求头console.log(req.get('host'));res.send('请求报文的获取');
});
//启动服务
app.listen(3000, () => {console.log('启动成功....')
})

3.3 获取路由参数

路由参数指的是 URL 路径中的参数（数据）

app.get('/:id.html', (req, res) => {res.send('商品详情, 商品 id 为' + req.params.id);
});

四、express响应设置

express 框架封装了一些 API 来方便给客户端响应数据，并且兼容原生 HTTP 模块的获取方式

//获取请求的路由规则
app.get("/response", (req, res) => {//1. express 中设置响应的方式兼容 HTTP 模块的方式res.statusCode = 404;res.statusMessage = 'xxx';res.setHeader('abc','xyz');res.write('响应体');res.end('xxx');//2. express 的响应方法res.status(500); //设置响应状态码res.set('xxx','yyy');//设置响应头res.send('中文响应不乱码');//设置响应体//连贯操作res.status(404).set('xxx','yyy').send('你好朋友')//3. 其他响应res.redirect('http://atguigu.com')//重定向res.download('./package.json');//下载响应res.json();//响应 JSONres.sendFile(__dirname + '/home.html') //响应文件内容
});

五、express中间件

5.1 什么是中间件

中间件（Middleware）本质是一个回调函数
中间件函数 可以像路由回调一样访问 请求对象（request） ， 响应对象（response）

相当于vue中的路由守卫

5.2 中间件的作用

中间件的作用 就是 使用函数封装公共操作，简化代码

5.3 中间件的类型

  • 全局中间件
  • 路由中间件

5.3.1 定义全局中间件

每一个请求 到达服务端之后 都会执行全局中间件函数
声明中间件函数

let recordMiddleware = function(request,response,next){//实现功能代码//.....//执行next函数(当如果希望执行完中间件函数之后，仍然继续执行路由中的回调函数，必须调用next)next();
}

在这里插入图片描述
应用中间件

app.use(recordMiddleware);

声明时可以直接将匿名函数传递给 use

app.use(function (request, response, next) {console.log('定义第一个中间件');next();
})

5.3.2 多个全局中间件

express 允许使用 app.use() 定义多个全局中间件

app.use(function (request, response, next) {console.log('定义第一个中间件');next();
})
app.use(function (request, response, next) {console.log('定义第二个中间件');next();
})

5.3.3 定义路由中间件

如果 只需要对某一些路由进行功能封装 ，则就需要路由中间件
调用格式如下：

app.get('/路径',`中间件函数`,(request,response)=>{
});
app.get('/路径',`中间件函数1`,`中间件函数2`,(request,response)=>{
});

5.4 静态资源中间件

express 内置处理静态资源的中间件

//引入express框架
const express = require('express');
//创建服务对象
const app = express();
//静态资源中间件的设置，将当前文件夹下的public目录作为网站的根目录
app.use(express.static('./public')); //当然这个目录中都是一些静态资源
//如果访问的内容经常变化，还是需要设置路由
//但是，在这里有一个问题，如果public目录下有index.html文件，单独也有index.html的路由，
//则谁书写在前，优先执行谁
app.get('/index.html',(request,response)=>{respsonse.send('首页');
});
//监听端口
app.listen(3000,()=>{console.log('3000 端口启动....');
});

注意事项:

  1. index.html 文件为默认打开的资源
  2. 如果静态资源与路由规则同时匹配，谁先匹配谁就响应
  3. 路由响应动态资源，静态资源中间件响应静态资源

5.5 获取请求体数据 body-parser

express 可以使用 body-parser 包处理请求体

第一步：安装

npm i body-parser

第二步：导入 body-parser 包

const bodyParser = require('body-parser');

第三步：获取中间件函数

//处理 querystring 格式的请求体
let urlParser = bodyParser.urlencoded({extended:false}));
//处理 JSON 格式的请求体
let jsonParser = bodyParser.json();

第四步：设置路由中间件，然后使用 request.body 来获取请求体数据

app.post('/login', urlParser, (request,response)=>{//获取请求体数据//console.log(request.body);//用户名console.log(request.body.username);//密码console.log(request.body.userpass);response.send('获取请求体数据');
});

获取到的请求体数据：

[Object: null prototype] { username: 'admin', userpass: '123456' }

六、Router

6.1 什么是Router

express 中的 Router 是一个完整的中间件和路由系统，可以看做是一个小型的 app 对象。

6.2 Router 作用

对路由进行模块化，更好的管理路由

6.3 Router使用

创建独立的 JS 文件（homeRouter.js）

//1. 导入 express
const express = require('express');
//2. 创建路由器对象
const router = express.Router();
//3. 在 router 对象身上添加路由
router.get('/', (req, res) => {res.send('首页');
})
router.get('/cart', (req, res) => {res.send('购物车');
});
//4. 暴露
module.exports = router;

主文件

const express = require('express');
const app = express();
//5.引入子路由文件
const homeRouter = require('./routes/homeRouter');
//6.设置和使用中间件
app.use(homeRouter);
app.listen(3000,()=>{console.log('3000 端口启动....');
})

七、EJS 模板引擎

7.1 什么是模板引擎

模板引擎是分离 用户界面和业务数据 的一种技术

7.2 什么是 EJS

EJS 是一个高效的 Javascript 的模板引擎
官网: https://ejs.co/
中文站：https://ejs.bootcss.com/

7.3 EJS 初体验

下载安装EJS

npm i ejs --save

代码示例

//1.引入ejs
const ejs = require('ejs');
//2.定义数据
let person = ['张三','李四','王二麻子'];
//3.ejs解析模板返回结构
//<%= %> 是ejs解析内容的标记，作用是输出当前表达式的执行结构
let html = ejs.render(‘<%= person.join(",") %>’, {person:person});
//4.输出结果
console.log(html);

7.4 EJS 常用语法

执行JS代码

<% code %>

输出转义的数据到模板上

<%= code %>

输出非转义的数据到模板上

<%- code %>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/336482.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

springBoot-自动配置原理

springBoot-自动配置原理

以下笔记内容&#xff0c; 整理自B站黑马springBoot视频&#xff0c;抖音Holis 1、自动配置原理 1.收集Spring开发者的编程习惯&#xff0c;整理开发过程使用的常用技术列表一>(技术集A) 2.收集常用技术(技术集A)的使用参数&#xff0c;整理开发过程中每个技术的常用设置列表…
阅读更多...
Linux前后端项目部署

Linux前后端项目部署

目录 1.jdk&tomcat安装 配置并且测试jdk安装 修改tomcat 配置文件 登入tomcat 发布 安装mysql 导入sql数据 发布项目war包 redis安装 nginx安装 配置nginx域名映射 部署前端项目 centos 7的服务安装 安装jdk 安装tomcat 安装Mysql 安装redis 安装nginx 前后…
阅读更多...
放大图片应该怎么样才能保证画质不变呢

放大图片应该怎么样才能保证画质不变呢

图片的放大和调整是常见的需求。然而&#xff0c;许多图片编辑软件在放大图片时&#xff0c;往往会损失清晰度和质量。这使得许多用户在处理图片时感到困扰。此时&#xff0c;一款能够实现图片无损放大的工具就显得尤为重要。是一款备受用户喜爱的在线图片处理工具&#xff0c;…
阅读更多...
基于SpringBoot的精品在线试题库系统(系统+数据库+文档)

基于SpringBoot的精品在线试题库系统(系统+数据库+文档)

&#x1f345;点赞收藏关注 → 私信领取本源代码、数据库&#x1f345; 本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目 希望你能有所收获&#xff0c;少走一些弯路。&#x1f345;关注我不迷路&#x1f345;一、绪论 1. 研究背景 现在大家…
阅读更多...
游泳耳机排行榜前四名，分享几款值得推荐的游泳耳机

游泳耳机排行榜前四名，分享几款值得推荐的游泳耳机

游泳是一项全面锻炼身体的运动&#xff0c;然而&#xff0c;水的阻力有时让人感到运动的笨拙和单调。为了让游泳更具趣味性和挑战性&#xff0c;选择一款高品质的游泳耳机至关重要。以下是游泳耳机排行榜前四名&#xff0c;以及几款强烈推荐的游泳耳机&#xff0c;它们结合防水…
阅读更多...
【Cadence】sprobe的使用

【Cadence】sprobe的使用

实验目的&#xff1a;通过sprobe测试电路中某个节点的阻抗 这里通过sprobe测试输入阻抗&#xff0c;可以通过port来验证 设置如下&#xff1a; 说明&#xff1a;Z1代表sprobe往left看&#xff0c;Z2代表sprobe往right看 结果如下&#xff1a; 可以看到ZM1I0.Z2 顺便给出了I…
阅读更多...
JKD的组成、Java跨平台、Path环境变量设置

JKD的组成、Java跨平台、Path环境变量设置

一、JDK的组成 JVM&#xff1a;Java虚拟机&#xff0c;真正运行Java的地方 核心类库&#xff1a;Java自己写好的程序&#xff0c;给程序员自己调用 JRE&#xff1a;Java的运行环境&#xff0c;包含JVM和核心类库 JDK也就是Java开发工具&#xff0c;包含以上所有 二、Java的…
阅读更多...
虾皮shopee根据ID取商品详情 API (shopee.item_get)

虾皮shopee根据ID取商品详情 API (shopee.item_get)

Shopee 是一个流行的电商平台&#xff0c;提供了 API 来允许开发者与平台进行交互。如果你想通过 API 根据商品 ID 获取商品详情&#xff0c;你可以使用 Shopee 的 item_get API。 以下是使用 Shopee 的 item_get API 根据商品 ID 获取商品详情的步骤&#xff1a; 获取 API 密…
阅读更多...
Selenium 学习（0.18）——软件测试之基本路径测试

Selenium 学习（0.18）——软件测试之基本路径测试

1、基本路径法测试的概念 是一种白盒测试方法&#xff0c;它在程序控制流图的基础上&#xff0c;通过分析控制构造的环行复杂性&#xff0c;导出基本可执行路径集合&#xff0c;从而设计测试用例的方法。 要保证在测试中程序的每一个可执行语句至少执行一次 【这和语句…
阅读更多...
智能时代：自然语言生成SQL与知识图谱问答实战

智能时代：自然语言生成SQL与知识图谱问答实战

语义解析 前言语义解析的应用场景总结概论语义解析和大模型的关系延伸阅读 前言 语义解析技术可以提高人机交互的效率和准确性&#xff0c;在自然语言处理、数据分析、智能客服、智能家居等领域都有广泛的应用前景。特别是在大数据时代&#xff0c;语义解析能够帮助企业更快速…
阅读更多...
Backtrader 文档学习-Strategy（下）

Backtrader 文档学习-Strategy（下）

Backtrader 文档学习-Strategy&#xff08;下&#xff09; 1. notify_cashvalue # 测试 #notify_cashvalue 方法特点 class Test_Strategy(bt.Strategy): # 策略通用初始参数params ((maperiod1, 5),(maperiod2, 20),(printlog, True), # 写入日志标志(logfilename, Test_…
阅读更多...
Vue3：Axios配置及使用

Vue3：Axios配置及使用

Axios官方 一、安装&#xff1a; //使用 npm: $ npm install axios//使用 bower: $ bower install axios//使用 yarn: $ yarn add axios 在package-lock.json文件可以查看axios版本 二、配置&#xff1a; milliaAxios.js 配置axios import axios from axios // 创建一个 ax…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023