Express简介
Express是基于基于 Nodejs平台,快速、开放、极简的 Web 开发框架
官网地址:https://www.expressjs.com.cn/
作用:使用 Express,我们可以方便、快速的创建 Web 网站的服务器或 API 接口(纯json数据)的服务器。
本质上:express是一个第三方包存在于npm社区中。
Express安装及基本使用
初始化项目并安装express
//express 能够代替http模块去创建web服务
//1. 下载 npm i express
//2. 引入
const express = require('express')
// console.log( typeof express )
//3. 创建一个服务( 这是一个网站应用 )
const app = express()
//4. 兼听端口
app.listen( 3000 ,()=>{
console.log('http://localhost:3000 已启动')
})
工具的使用
nodemon
作用:方便我们开发者测试http相关的代码 。无需重复node
它是个全局包
npm i nodemon -g
使用nodemon运行你的js代码 。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MnUFpxzw-1635505421980)(C:/Users/Administrator/Desktop/%E8%AF%BE%E5%A0%82%E7%AC%94%E8%AE%B0/%E7%AC%AC%E4%B8%89%E9%98%B6%E6%AE%B5/note/assets/1634262533057.png)]
Rest Client
这是基于vscode的一个工具插件,方便我们做测试请求的 。
- 安装
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7vvcbBc0-1635505421983)(C:/Users/Administrator/Desktop/%E8%AF%BE%E5%A0%82%E7%AC%94%E8%AE%B0/%E7%AC%AC%E4%B8%89%E9%98%B6%E6%AE%B5/note/assets/1634281488385.png)]
-
在项目目录下创建一个 .http 后缀的文件 。
这些都是开发者 在开发的时候用的。
# @开头取变量 @url2 = http://localhost:4000 # 我就是注释 # 能深刻理解http的请求头的格式 。 GET http://localhost:3000/demo1 ### 3个#号是区分请求规则的。 POST {{url2}}/demo2 ### delete。 delete {{url2}}/demo4 ### put。 put {{url2}}/demo3
express创建web服务器
//express 能够代替http模块去创建web服务
//1. 下载 npm i express
//2. 引入
const express = require('express')
// console.log( typeof express )
//3. 创建一个服务( 这是一个网站应用 )
const app = express()
//4. 兼听端口
app.listen(3000, () => {
console.log('http://localhost:3000 已启动')
})
//4. 其它:定义一些路径
// console.log(typeof app.get )
//app.get( 路径,函数 ) //路径必须以 /开头
app.get('/login', (req, res) => {
//res.end('login page')
//res.end('我是中文')
let obj = { username: 'zs',fn:function(){} } //给前端数据中不应该有函数的。
//res.end(obj)
res.send(obj)
//res.send('我是中文') //send 可以发送字符串、对象
})
app.get('/register', (req, res) => {
res.end('register page')
})
app对象
路由
app.method( 路径,兼听函数 )//请求事件并且对应方法都符合才会触发即路由。
app.get( )
除了表单的post提交,其它的请求一律都是get。
可以发送请求方式:表单提交、( 浏览器地址栏 、script的src、link的href、img的src、a的href )通通都是get。
app.get( 路径,(req,res)=>{ } ) //兼听|匹配 用户发送的get请求。如果匹配上则执行回调函数
app.post()
app.post(路径,(req,res)=>{ } )
案例express的js
const express = require('express')
const app = express()
app.listen(3000, function () {
console.log('3000端口开启了,可以访问: http://localhost:3000')
})
//app对象是 express 函数返回的。
// 当用户访问 :http://localhost:3000/a?username=zs&password=123 也可以匹配上
app.get('/a',(req,res)=>{
res.send('我是a页面')
})
app.post('/login',(req,res)=>{
res.send('我是登录post')
})
post表单
<form action="http://localhost:3000/login" method="post">
<input type="submit" value="去登录" >
</form>
response对象
- response对象是回调函数的第2个参数
res.send()
- 参数可以是字符串或对象
- 响应出去的永远是一个字符串,如果放对象则返回json字符串。
res.send( 字符串|对象 )//可以放字符串或对象
//1. res.send() //返回的永远是一个字符串
//自动会设置utf8
res.sendFile( )
- 参数为绝对路径
- 响应出去一个文件给前端 。
res.sendFile( absolute filepath )//发送一个文件给前端
//要求:定义一个 /a路径,当用户访问则返回 views/01.html文件
app.get('/a',(req,res)=>{
// let result = fs.readFileSync('views/01.html','utf8')
// res.send( result )
let filepath = path.join( __dirname,'views/01.html' )
res.sendFile( filepath )
})
res.status()
- 设置状态码。
res.status(404) //设置状态码的方法,除了200以外的状态码需要手动设置
request对象
- request对象是回调函数的第1个参数
- 用户发送内容都在request对象当中 。
- 保留req.url 、req.method等原生方法。
req.query
接收get参数的,或者说是接收 url地址?后面参数的。
-
接收查询字符串参数。
-
返回一个对象
app.get('/login',(req,res)=>{
console.log( req.query ) // 返回一个对象
})
//req.url req.method
app.get('/aa',(req,res)=>{
res.send(`请求的地址为:${req.url},请求的方式为:${req.method}`)
})
req.body
接收post参数的。需配合请求头。
- 接收查询字符串参数或json字符串。
- 返回一个对象
app.post('/login',(req,res)=>{
console.log( req.body ) // 返回一个对象
})
req.params
专业名称:动态路径(路由)
- 路径设置为动态路径 ,配合冒号+变量
app.get( '/subject/:canshu',(req,res)=>{
// req.params.canshu
res.send('匹配到了动态路径: ' + req.params.canshu)
} )
路由
路由概述
什么是路由?
广义上来讲,路由就是映射关系。对于我们网络请求中的路由是:每一次请求对应每一个请求处理的函数( 就是服务 )。
现实中的路由
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TgT8zTFi-1635505421985)(img\3-3现实中的路由.png)]
路由的作用
每一次请求对应每一个请求处理的函数( 就是服务 )。
Express中的路由
语法:
app.method( path,callback )
参数说明:
-
method:代表请求方式,比如get,post ,delete,put
-
path:代表请求路径 ,必须以 / 开头
-
callback:代表回调函数,用户请求匹配到路由以后要做的事情。
app.get()
app.post()
app.delete()
app.put()
匹配流程
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mZ6EavR8-1635505421988)(img\3-4路由匹配流程.png)]
- 路由包含3大要素:method path callback( req,res )
- 一个项目中 是不可能有两个相同的路由( 指的是路径和方法一致 )所以路由有顺序这一说
- (当有相同的路由时:只有第1个生效)
app.get('/login',(req,res)=>{
res.send('我是login页面:get1')
})
//get2永远也不会生效
app.get('/login',(req,res)=>{
res.send('我是login页面:get2')
})
app.post('/login',(req,res)=>{
res.send('我是login页面:post')
})
express.Router 模块化路由(配合中间件)
在项目中一定是按照对象进行模块化拆分 。
-
创建要模块化的 路由.js 文件
router/student.js
//1. 先引入express const express = require('express') //2. 实例化路由对象 const router = express.Router() //返回一个 路由对象 //第一种方式 router.method( '/path',(req,res)=>{ } ) //第二种方式,注意这里有访问需/path1/path2 router.method( '/path2',(req,res)=>{ } ) //3. 暴露路由对象 module.exports = router
-
在app.js中引入路由并使用
const express = require('express') const app = express(); app.listen(3000); //引入对应的学生路由模块 const studentRouter = require('./router/student.js') //使用学生路由中间件 //第一种方式 app.use( studentRouter ) //第二种方式,这里加前缀是整个模块全部加前缀。 app.use('/path1', usersRouter);
s)=>{
} )
//3. 暴露路由对象
module.exports = router
2. 在app.js中引入路由并使用
```js
const express = require('express')
const app = express();
app.listen(3000);
//引入对应的学生路由模块
const studentRouter = require('./router/student.js')
//使用学生路由中间件
//第一种方式
app.use( studentRouter )
//第二种方式,这里加前缀是整个模块全部加前缀。
app.use('/path1', usersRouter);