Express 快速创建 Web 服务器
express 的基本使用
先安装express包
npm i express@4.17.1
1.导入 express
const express = require('express');
2.创建 web 服务器
const app = express();
3.启动 Web 服务器
app.listen(80, () => {
console.log("express server running at http://127.0.0.1");
});
4.监听客户端的 GET 和 POST 请求,并向客户端响应具体内容
app.get('/user',(req,res ) => {
// 调用 express 提供的 res.send() 方法,向客户端响应一个 JSON 对象
res.send({name: 'zs', age: 20, gender: '男'});
});
app.post('/user', (req, res) => {
// 调用 express 提供的 res.send() 方法,向客户端响应一个 文本字符串
res.send('请求成功')
});
6. req.query对象 获取 URL 携带的查询参数
通过 req.query 对象,可以访问到客户端通过查询字符串形式发送到服务器的参数
app.get('/', (req, res) => {
//通过 req.query 可以获取到客户端发送过来的 查询参数
//注意:默认情况下,req.query 是一个空对象
console.log(req.query); // 输出 : {}
res.send(req.query) // => 返回空对象 {}
})
req.params 对象,获取 URL 中的动态参数
通过 req.params 对象,可以访问到 URL 中,通过 : 匹配到的动态参数
URL 地址中,可以通过 :参数名 的形式,匹配动态参数值
app.get('/user/:id', (req, res) => {
// 这里的 id 可以任意命名
//默认情况下,req.params 是一个空对象
// 里面存放着通过 :动态匹配到的参数值
console.log(req.params);
})
// get http://127.0.0.1/user/1 ,则输出为{ "id: 1"}
// get http://127.0.0.1/user/2 ,则输出为 {"id: 2"}
总体结构
//1. 导入 express
const express = require('express');
//2. 创建 web 服务器
const app = express();
//4.监听客户端的 GET 和 POST 请求,并向客户端响应具体内容
app.get('/user',(req,res ) => {
// 调用 express 提供的 res.send() 方法,向客户端响应一个 JSON 对象
res.send({name: 'zs', age: 20, gender: '男'});
});
app.post('/user', (req, res) => {
// 调用 express 提供的 res.send() 方法,向客户端响应一个 文本字符串
res.send('请求成功')
});
// 6. req.query对象 获取 URL 携带的查询参数
// 通过 req.query 对象,可以访问到客户端通过查询字符串形式发送到服务器的参数
app.get('/', (req, res) => {
//通过 req.query 可以获取到客户端发送过来的 查询参数
//注意:默认情况下,req.query 是一个空对象
console.log(req.query); // 输出 : {}
res.send(req.query) // => 返回空对象 {}
})
// req.params 对象,获取 URL 中的动态参数
// 通过 req.params 对象,可以访问到 URL 中,通过 : 匹配到的动态参数
// URL 地址中,可以通过 :参数名 的形式,匹配动态参数值
app.get('/user/:id', (req, res) => {
// 这里的 id 可以任意命名
//默认情况下,req.params 是一个空对象
// 里面存放着通过 :动态匹配到的参数值
console.log(req.params);
})
// get http://127.0.0.1/user/1 ,则输出为{ "id: 1"}
// get http://127.0.0.1/user/2 ,则输出为 {"id: 2"}
//3. 启动 Web 服务器
app.listen(80, () => {
console.log("express server running at http://127.0.0.1");
});
Express 托管静态资源
1.express.static()
在这里,调用 express.static() 方法,快速对外提供静态资源
如下代码可以将 clock 目录下的 html 文件,css 文件 ,js 文件对外开放访问
app.use(express.static('./clock'));
//可以在浏览器中 http://127.0.0.1/index.css来访问 clock 目录下的index.css文件
2. express 托管多个静态资源目录
托管多个静态资源目录,只需要多次调用 express.static() 函数即可
express.static() 函数会根据添加顺序查找所需文件
app.use(express.static('./clock'));
app.use(express.static('./files'));
3.挂载路径前缀
在静态资源访问路径之前,挂在前缀
此时http://127.0.0.1/index.html 访问的是files目录下的 index.html 文件
http://127.0.0.1/clock/index.html 加前缀 /clock 之后,访问的才是 clock 目录下的 index.html 文件
app.use('/clock',express.static('./clock'));
app.use(express.static('./files'));
nodemon 安装
自动重启项目,代码进行修改后,不需要手动重启
npm install -g nodemon
nodemon 使用
传统方式启动项目: node 项目文件(例如 node 01.js),代码进行修改后,需要手动重启
使用 nodemon 项目文件,代码进行修改后,不需要手动重启
nodemon 01.js
npx nodemon 01.js
express 路由
1. express 中的路由
路由指的客户端的请求与服务器处理函数之间的映射关系
METHOD 请求的类型, PATH 请求的URL地址,HANDER 处理函数
app.METHOD(PATH, HANDER)
```