文章目录
- 1、Express 简介
- 2、Express 安装及使用
- 1.Express 安装
- 2.Nodemon的使用
- 3.Express 的使用
1、Express 简介
Express是基于Node.js平台,快速、开发、极简的Web开发框架。
在express中路由指的是客户端请求和服务器处理函数的映射关系,
路由有三部分组成:请求类型、请求url和处理函数。
Express的作用和Node.js内置的http内置模块类似,专门用来创建Web服务器的。
Express的本质:是一个npm上的第三方包,可以快速创建Web服务器的便捷方法。
Express的中文官网:http://www.expressjs.com.cn/
- Express 框架核心
- 可以设置中间件来响应 HTTP 请求。
- 定义了路由表用于执行不同的 HTTP 请求动作。
- 可以通过向模板传递参数来动态渲染 HTML 页面。
- Express 能做什么
于前端程序员来说,最常见的两种服务器
,分别是:Web网站服务器
:专门对外提供Web网页资源的服务器。
API接口服务器
:专门对外提供API接口的服务器。
使用Express,可以方便、快速的创建Web网站的服务器或API接口的服务器。
2、Express 安装及使用
1.Express 安装
安装了 Node.js
通过 npm init 命令为你的应用创建一个 package.json 文件。
此命令将要求你输入几个参数,例如此应用的名称和版本。 你可以直接按“回车”键接受大部分默认设置即可,
npm init
在项目的目录下安装 Express 并将其保存到依赖列表中
npm install express --save
如果只是临时安装Express,不想将它添加到依赖列表中,
npm install express --no-save
可以一起安装一下重要的模块
- body-parser - node.js 中间件,用于处理 JSON, Raw, Text 和 URL 编码的数据,用于解析客户端发送的 POST 请求体,并将其存储在 req.body 对象中。。
- cookie-parser - 这就是一个解析Cookie的工具。通过req.cookies可以取到传过来的cookie,并把它们转成对象。
- multer - node.js 中间件,用于处理 enctype=“multipart/form-data”(设置表单的MIME编码)的表单数据。
npm install body-parser --save
npm install cookie-parser --save
npm install multer --save
查看Express 的版本号
npm list express
2.Nodemon的使用
- Nodemon是一个基于Node.js构建的开发工具,主要用于自动监控项目文件的更改,并在检测到变化时自动重启Node.js服务器,从而提升开发效率。
Nodemon特别适合用于开发环境中,因为它可以减少手动重启服务器的繁琐操作,使开发者能够专注于代码编写
- Nodemon的工作原理
通过监听项目目录中的文件变化来实现自动重启。它会监听指定类型的文件(如.js、.json等)的更改,并在检测到变化时自动执行指定的启动命令(通常是node app.js)。Nodemon支持通过命令行参数或配置文件的方式定制监听规则、忽略特定目录或文件等操作 - 安装
// 全局安装
npm install -g nodemon
// 局部安装
npm install --save-dev nodemon
// 启动应用 server.js为应用文件
nodemon ./server.js
3.Express 的使用
- 创建服务器实例
使用express()方法创建一个服务器实例// 导入express var express = require('express'); // 创建web服务器 var app = express(); // 启动服务,端口号8081 app.listen(8081, function () {console.log('server启动') })
- 监听GET请求
app.get() 函数是 Express 框架中用于定义 GET 请求路由的方法。当客户端向服务器发送 GET 请求,并且请求的路径与 app.get() 中定义的路径匹配时,就会执行该函数中指定的回调函数。// 第一个参数是路径字符串 第二个参数是一个回调函数,该函数接收两个参数req, res app.get('/start', function (req, res) {/* 处理函数 */// 当客户端发送GET请求到/start时,执行此回调函数// req(请求对象)和 res(响应对象)// 在回调函数中,你可以使用 req 对象来获取客户端发送的请求数据,// 可以使用 res 对象来向客户端发送响应数据 })
- 监听POST请求
app.post() 函数是 Express 框架中用于定义 POST 请求路由的方法。当客户端向服务器发送 POST 请求,并且请求的路径与 app.post() 中定义的路径匹配时,就会执行该函数中指定的回调函数。// 定义一个POST请求路由 var bodyParser = require('body-parser'); // 创建 application/x-www-form-urlencoded 编码解析 var urlencodedParser = bodyParser.urlencoded({ extended: false }) app.post('/submit', urlencodedParser, (req, res) => {// 当客户端发送POST请求到/submit时,执行此回调函数const data = req.body; // 获取请求体中的数据console.log(data); // 在控制台打印数据 });
- 响应请求
res.send() 函数是 Express 框架中用于向客户端发送 HTTP 响应的方法。若要向客户端发送一些数据作为响应时,你可以使用这个函数
- 发送字符串作为响应
app.get('/hello', (req, res) => {res.send('hello'); // 发送一个字符串作为响应 });
- 发送JSON对象作为响应
app.get('/hello', (req, res) => {const obj = {id: 1,name: 'John Doe',email: 'johndoe@example.com'};res.send(obj); // 发送一个JSON对象作为响应 });
当发送 JSON 对象时,Express 会自动将对象转换为 JSON 字符串,并设置正确的 Content-Type 响应头为 application/json。
- 发送状态码和响应内容
app.get('/error', (req, res) => {res.status(404).send('Page not found'); // 设置状态码为 404,并发送响应内容 });
- 发送文件作为响应
res.send() 本身不直接用于发送文件,但你可以使用 res.sendFile() 方法来发送文件app.get('/file', (req, res) => {res.sendFile('/path/to/file'); // 发送指定路径的文件作为响应 });
res.send() 是 res.end() 的一个更高层次的封装,它提供了一些额外的功能和便利性。
如果只需要简单地结束响应而不发送任何内容,你=可以使用 res.end()。
在大多数情况下,需要使用 res.send() 或其他更具体的响应方法(如 res.json()、res.jsonp()、res.sendFile() 等)来发送响应内容。
- 获取URL中携带的查询参数
// 通过res.query对象,可以访问到客户端通过查询字符串的形式,发送到服务器的参数 app.get('/', (req, res) => {// req.query默认是一个空对象// 客户端使用 ?name=zs&age=100这种查询字符串形式,发送到服务器的参数// 可以通过req.query对象访问到console.log(req.query); })
- 获取URL中的动态参数
需要根据不同的参数来执行不同的逻辑。Express 提供了路由参数功能,可以方便地获取 URL 中的参数。// 通过res.params对象,可以访问到URL中,通过 : 匹配到的动态参数 // URL地址中,可以通过 : 参数名的形式,匹配动态参数值 app.get('/user/:id', (req, res) => {// req.params默认是一个空对象// 里面存放着通过 : 动态匹配到的参数值console.log(req.params); })
<html><body>GET <br><form action="http://127.0.0.1:8081/login" method="GET">Name: <input type="text" name="name"> <br>Password: <input type="password" name="password"><input type="submit" value="Submit"></form><br>POST <br><form action="http://127.0.0.1:8081/login_POST" method="post">Name: <input type="text" name="name"> <br>Password: <input type="password" name="password"><input type="submit" value="Submit"></form>get携带参数 <br><form action="http://127.0.0.1:8081/login_get/3" method="get">Name: <input type="text" name="name"> <br>Password: <input type="password" name="password"><input type="submit" value="Submit"></form> </body> </html>
var express = require('express'); var app = express(); var bodyParser = require('body-parser'); const multer = require('multer'); // 创建 application/x-www-form-urlencoded 编码解析 var urlencodedParser = bodyParser.urlencoded({ extended: false }) // get请求 app.get('/login', function (req, res) {const {query} = req// 输出 JSON 格式var response = {"name": query.name,"password": query.password};console.log(response);res.end(JSON.stringify(response)); }) // post请求 app.post('/login_POST', urlencodedParser, function (req, res) {const {body} = req// 输出 JSON 格式var response = {"name":body.name,"password":body.password};res.end(JSON.stringify(response)); }) // get请求 app.get('/login_get/:id', function (req, res) {const {query, params} = req// 输出 JSON 格式var response = {"name": query.name,"password": query.password,"id": params.id};res.end(JSON.stringify(response)); })app.listen(8081, function () {console.log("服务启动") })
- Cookie 管理
可以使用中间件向 Node.js 服务器发送 cookie-parser信息var express = require('express');var app = express();var bodyParser = require('body-parser');const cookieParser = require('cookie-parser');var util = require('util');// 使用中间件app.use(cookieParser());app.get('/set-cookie', (req, res) => {// 设置cookieres.cookie('token', 'werwewwej3457347593jsdsjkjsjkfsf');res.cookie('sex', '1');res.send('Cookie is set!');});// get请求app.get('/login', function (req, res) {const {query, cookies} = reqlet cookie = util.inspect(cookies)// 输出 JSON 格式var response = {"name": query.name,"password": query.password,"cookie": JSON.stringify(cookie)};console.log(response);res.end(JSON.stringify(response));})app.listen(8081, function () {console.log("服务启动")})