node Express

weiweiweb888

已于 2022-12-15 12:01:46 修改

阅读量284

点赞数

CC 4.0 BY-SA版权

文章标签： vscode ide visual studio code

于 2021-10-29 19:02:05 首次发布

本文链接：https://blog.youkuaiyun.com/weiweiweb888/article/details/121040919

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);