10分钟让你彻底会用js搭一个自己的服务器｜青训营本次我们介绍一个js的框架express框架,使用这个框架,能让

本次我们介绍一个js的框架express框架,使用这个框架,能让我们很快创建一个自己的服务器,如果你有时间,可以依次观看,如果你很急,你可以去看最后的那个 json-server

express 介绍

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

简单来说，express 是一个封装好的工具包，封装了很多功能，便于我们开发 WEB 应用(HTTP 服务) Express是一个基于Node.js的Web开发框架，它提供了一组简洁、灵活的工具和中间件，用于构建Web应用程序和API。

Express的特点包括：

简洁而灵活：Express提供了一组简单而直观的API，使得开发人员可以快速构建Web应用程序和API。同时，它也非常灵活，允许开发人员根据自己的需求进行定制和扩展。
中间件支持：Express通过中间件机制，可以方便地处理请求和响应。开发人员可以使用现有的中间件，如日志记录、身份验证和会话管理，也可以自己编写中间件来处理特定的需求。
路由功能：Express提供了强大的路由功能，可以根据URL路径和HTTP方法来处理不同的请求。开发人员可以定义多个路由，每个路由对应不同的URL路径和处理函数，从而实现灵活的路由控制。
视图引擎支持：Express支持多种视图引擎，如EJS、Pug和Handlebars，使得开发人员可以方便地生成动态的HTML页面。
轻量级：Express是一个轻量级的框架，没有过多的抽象和封装，使得开发人员可以更加灵活地控制应用程序的细节。

express 使用

express 下载

express 本身是一个 npm 包，所以可以通过 npm 安装,如果是使用其他的包管理工具,可以参考官网,其实也是一样的,npm init是初始化记录文档,如果你在项目里面已经用过了,请直接 npm i express

npm init
npm i express

express 初体验

可以按照这个步骤进行操作：

创建一个JS 文件，输入如下代码,都写了注释的了,可以看看

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

命令行下执行该脚本

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

然后在浏览器就可以访问 http://127.0.0.1:3000/home

关于nodemon,我会再后面介绍,可以去看看

express 路由

什么是路由

官方定义：路由确定了应用程序如何响应客户端对特定端点的请求

详细解释

Express的路由是指在Express框架中定义的用于处理HTTP请求的路径和对应的处理函数。路由用于将不同的URL请求映射到不同的处理程序函数上，从而实现不同URL请求的处理和页面跳转。

在Express中，可以使用app对象来创建路由。通过app对象的get()、post()、put()、delete()等方法可以定义不同HTTP请求方法对应的路由。每个路由可以指定一个或多个处理函数，当匹配到对应的路由路径时，Express会自动调用这些处理函数来处理请求。

路由的使用

一个路由的组成有 请求方法， 路径 和 回调函数 组成

express 中提供了一系列方法，可以很方便的使用路由，使用格式如下：

app.<method>(path，callback)

代码示例：

//导入 express
const express = require('express');

//创建应用对象
const app = express();

//创建 get 路由
app.get('/home', (req, res) => {
    res.send('网站首页');
});

//首页路由
app.get('/', (req,res) => {
    res.send('我才是真正的首页');
});

//创建 post 路由
app.post('/login', (req, res) => {
    res.send('登录成功');
});

//匹配所有的请求方法
app.all('/search', (req, res) => {
    res.send('1 秒钟为您找到相关结果约 100,000,000 个');
});

//自定义 404 路由
app.all("*", (req, res) => {
    res.send('<h1>404 Not Found</h1>')
});

//监听端口 启动服务
app.listen(3000, () =>{
    console.log('服务已经启动, 端口监听为 3000');
});

获取请求参数

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

Express框架提供了多种方式来获取请求报文中的数据，包括：

req.params：用于获取路由中的参数。例如，当定义了路由/users/:id时，可以使用req.params.id来获取请求中的id参数。
req.query：用于获取URL中的查询参数。例如，当请求URL为/users?name=john&age=25时，可以使用req.query.name和req.query.age来分别获取name和age参数。
req.body：用于获取请求报文体中的数据。通常在处理POST请求时使用，需要使用中间件（如body-parser）来解析请求体。例如，当请求报文体为{ "name": "john", "age": 25 }时，可以使用req.body.name和req.body.age来分别获取name和age参数。
req.headers：用于获取请求报文头中的数据。例如，可以使用req.headers['content-type']来获取Content-Type头的值。
req.cookies：用于获取请求中的Cookie数据。需要使用中间件（如cookie-parser）来解析Cookie。例如，可以使用req.cookies['name']来获取名为name的Cookie的值。

除了以上的方式，Express框架还兼容原生HTTP模块的获取方式，可以使用req.method来获取请求方法，使用req.url来获取请求URL，使用req.protocol来获取请求协议等。

//导入 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.path)
    //获取查询字符串
    console.log(req.query); // 『相对重要』对象形式返回所有的查询字符串
    // 获取指定的请求头
    console.log(req.get('host'));
    res.send('请求报文的获取');
});
//启动服务
app.listen(3000, () => {
    console.log('启动成功....')
})

获取路由参数

路由参数指的是 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();//响应 JSON
    res.sendFile(__dirname + '/home.html') //响应文件内容
});

express 中间件

什么是中间件

中间件（Middleware）本质是一个回调函数

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

类似于vue2和vue3中的路由守卫

中间件的作用

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

中间件的类型

全局中间件路由中间件

定义全局中间件

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

声明中间件函数,其实express中的中间件真的与vue中的路由守卫很像

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

应用中间件,app直接用的话,就是全局的,访问所有前路由都要经过这个函数的判断

app.use(recordMiddleware)

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

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

多个全局中间件

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

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

定义路由中间件

如果只需要对某一些路由进行功能封装，则就需要路由中间件

调用格式如下：

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

});

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

});

静态资源中间件

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 端口启动....');
});

注意事项:

index.html 文件为默认打开的资源

如果静态资源与路由规则同时匹配，谁先匹配谁就响应

路由响应动态资源，静态资源中间件响应静态资源

获取请求体数据 body-parser

express 可以使用 body-parser 包处理请求体,这个是express框架的一个问题,后面讲另外一个东西可以很方便解决

第一步：安装

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' }

注意: 现在你已经可以抛弃 body-parser 模块，因为 Express 自从 4.16.0 版本开始，内置了 body 解析

Router

什么是 Router

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

Router 作用

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

详细解释

Router是Express框架中的一个功能强大的中间件和路由系统。它可以将中间件和路由处理程序组织成一个模块化的方式，以便更好地组织和管理代码。

使用Router可以将应用程序的路由处理程序分组，这样可以更好地组织代码。例如，可以将与用户相关的路由处理程序放在一个文件中，将与商品相关的路由处理程序放在另一个文件中。

Router的工作方式类似于应用程序对象，它可以添加中间件函数和路由处理程序，并将它们附加到特定的HTTP请求方法和路径上。

使用Router可以更好地组织和管理代码，使代码更易读和维护。它还可以帮助我们实现更高级的路由功能，如路由嵌套和路由参数。

Router 使用

//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 模板引擎(现在基本上不用ejs了,凑个字数,也可以了解一下)

什么是模板引擎

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

什么是 EJS

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

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

命令行下运行

EJS 常用语法

执行JS代码

<% code %>

输出转义的数据到模板上

<%= code %>

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

<%- code %>

在express中使用ejs

// 导入 express
const express = require('express')
const path = require('path')

// 创建应用对象
const app = express()
// 1. 设置模板引擎
app.set('view engine', 'ejs')  // pug  twing
// 2. 设置模板文件的存放位置
// 模板文件: 具有模板语法内容的文件
app.set('views', path.resolve(__dirname, './views'))

// 创建路由
app.get('/home', (req, res) => {
  // 3. render 响应
  // res.render('模板的文件名','数据')
  let title = '尚硅谷 - 让天下没有难学的技术'
  res.render('home', { title })
  // 4. 创建模板文件
  // 如下面文件 views/home.ejs
})

// 监听端口，启动服务
app.listen(3000, () => {
  console.log('服务器已启动~~~~')
})

views/home.ejs

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h2>
    <%=title %>
  </h2>
</body>

</html>

express框架的快速创建

express-generator的安装和使用

安装

npm i -g express-generator

检查是否安装成功

express -h

express是这个插件安装之后暴露出来的命令,其实所有默认全局安装的npm插件都会暴露一个命令,用来调用这个插件

使用

express -e 文件夹的名称

这个指令是添加ejs的模板支持，把生成的框架放在哪,可以很快速的创建一个express框架的服务端

nodemon

nodemon是一个用于开发环境的工具，它能够监视文件的变化并自动重新运行Node.js应用程序。它在开发过程中能够提高开发效率，无需手动重启服务器,其实就是用来替换node指令的,你应该也发现了吧,每次修改了js代码,都要重新启动这个文件,才能看到效果,如果用这个的话就很简单了

安装nodemon非常简单，只需在命令行中运行以下命令：

npm install -g nodemon

安装完成后，就可以在命令行中使用nodemon命令了。

使用nodemon非常简单，只需在要运行的Node.js应用程序的命令前加上nodemon命令即可，例如：

nodemon app.js

这样，nodemon会监视当前目录下的所有文件的变化，一旦有文件发生变化，它会自动重新运行app.js。

除了基本的使用方法外，nodemon还提供了许多有用的选项和功能，例如：

监视指定目录：可以使用nodemon [dir]命令来监视指定的目录下的文件变化。
运行指定的命令：可以使用nodemon --exec [command]命令来运行指定的命令，而不是默认的Node.js应用程序。
忽略指定的文件：可以使用nodemon --ignore [pattern]命令来忽略指定的文件或目录。
使用配置文件：可以使用nodemon.json或nodemon.config.js文件来配置nodemon，例如设置监视的文件类型、忽略的文件等。

除了上述功能外，nodemon还支持一些高级功能，如在应用程序崩溃时发送通知、自定义监视行为等。

总结来说，nodemon是一个非常实用的工具，能够提高开发效率，使开发过程更加便捷。它简单易用，支持丰富的选项和功能，非常适合用于Node.js应用程序的开发环境。

json-server的使用,2分钟创建

快速上手

json-server 本身是一个 JS 编写的工具包，可以快速搭建 RESTful API 服务

官方地址: github.com/typicode/js…

操作步骤：

全局安装 json-server
```
npm i -g json-server
```

创建 JSON 文件（db.json），编写基本结构

{
    "song": [
        { "id": 1, "name": "干杯", "singer": "五月天" },
        { "id": 2, "name": "当", "singer": "动力火车" },
        { "id": 3, "name": "不能说的秘密", "singer": "周杰伦" }
    ]
}

以 JSON 文件所在文件夹作为工作目录，执行如下命令
```
json-server --watch db.json
```

默认监听端口为 3000

详细介绍 json server

JSON Server是一个基于Node.js的开源工具，用于快速创建具有RESTful API的虚拟服务器。它可以根据提供的JSON文件自动生成路由和API，从而允许开发人员在没有真实后端服务器的情况下进行前端开发和测试。

JSON Server的原理如下：

读取JSON文件：JSON Server会读取指定的JSON文件，该文件包含了模拟的数据和API的定义。这个JSON文件可以包含多个资源，每个资源都有对应的数据和路由。
创建路由：根据JSON文件中的资源定义，JSON Server会自动创建相应的路由。每个资源对应一个路由，路由的路径与资源的名称相对应。例如，如果JSON文件中有一个名为users的资源，那么JSON Server会自动创建一个路径为/users的路由。
处理请求：当有请求到达JSON Server时，它会根据请求的方法（GET、POST、PUT、DELETE等）和路径匹配对应的路由。根据请求的方法和路径，JSON Server会执行相应的操作，如获取数据、新增数据、更新数据或删除数据。
返回响应：根据请求的方法和路径匹配到的路由会返回相应的数据或执行相应的操作。对于GET请求，JSON Server会返回匹配到的数据；对于POST请求，JSON Server会将请求的数据添加到对应的资源中，并返回新增的数据；对于PUT和DELETE请求，JSON Server会更新或删除对应的数据，并返回相应的结果。
支持查询和过滤：JSON Server还支持查询和过滤数据的功能。通过在请求的路径中添加查询参数，可以对数据进行筛选、排序和分页等操作。例如，可以使用/users?name=John来获取名字为John的用户数据。

总结来说，JSON Server利用提供的JSON文件自动生成模拟的RESTful API，使开发人员可以在前端开发和测试过程中模拟后端服务器的功能。它简单易用，方便快捷，是一个非常有用的工具。

关于vue路由守卫和express中的中间件的理解

在Express中，路由中间件是一个函数，用于处理特定路径的HTTP请求。它可以被绑定到一个或多个路由上，以便在请求到达目标路由之前执行一些操作。这些操作可以包括验证用户身份、处理请求参数、记录日志等。

在Express中，路由中间件可以通过app.use()或app.METHOD()方法来注册。当一个请求到达时，Express会按照它们被注册的顺序依次执行这些中间件函数，直到到达目标路由或出现错误为止。路由中间件可以执行一些操作，然后通过调用next()函数将控制权传递给下一个中间件或路由处理函数。

Vue中的路由守卫是一种用于控制访问和导航的机制。它们可以在路由切换之前或之后执行一些操作，例如验证用户权限、跳转到登录页面等。Vue的路由守卫包括全局前置守卫、全局后置守卫、路由独享守卫和组件内守卫。

全局前置守卫是在路由切换之前执行的函数，可以在Vue的路由实例中通过beforeEach()方法注册。它可以用于验证用户身份或权限，以决定是否允许继续导航。

全局后置守卫是在路由切换之后执行的函数，可以在Vue的路由实例中通过afterEach()方法注册。它可以用于记录页面访问日志或执行其他一些操作。

路由独享守卫是在特定路由上执行的函数，可以在路由配置中通过beforeEnter属性注册。它可以用于验证用户身份或权限，以决定是否允许访问该路由。

组件内守卫是在组件内部执行的函数，可以通过Vue组件实例的beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave属性注册。它们可以用于在组件切换之前或之后执行一些操作，例如获取数据或保存数据。

尽管Express中的路由中间件和Vue中的路由守卫在实现方式上有些不同，但它们的目的是相似的，都是为了在路由处理之前或之后执行一些操作。它们都可以用于验证用户身份、处理请求参数、记录日志等。不同之处在于Express中的路由中间件是在服务器端执行的，而Vue中的路由守卫是在客户端执行的。

注意事项

之前在技术交流群里面看到这个问题,就是用body.query,怎么获取不到post请求中,请求体中携带的数据呢?

额,其实我想说,现在你使用最新的框架的话,想要获取到请求体的携带的参数,直接req.body就行了,注意这个req参考上面的代码,就是设置路由的时候的那个函数的第一个参数,这个参数可以得到请求体里面的信息.

然后还有就是,query参数和params参数,就是基本上是get请求上的,post请求没用过,你用post请求的话,你还获取query参数,我有点不理解了,建议复习一下关于请求携参的知识

10分钟让你彻底会用js搭一个自己的服务器 ｜ 青训营

express 介绍

express 使用

express 下载

express 初体验

express 路由

什么是路由

详细解释

路由的使用

获取请求参数

获取路由参数

express 响应设置

express 中间件

什么是中间件

中间件的作用

中间件的类型

定义全局中间件

多个全局中间件

定义路由中间件

静态资源中间件

获取请求体数据 body-parser

Router

什么是 Router

Router 作用

详细解释

Router 使用

EJS 模板引擎(现在基本上不用ejs了,凑个字数,也可以了解一下)

什么是模板引擎

什么是 EJS

EJS 初体验

EJS 常用语法

在express中使用ejs

express框架的快速创建

express-generator的安装和使用

安装

使用

nodemon

json-server的使用,2分钟创建

快速上手

详细介绍 json server

关于vue路由守卫和express中的中间件的理解

注意事项

10分钟让你彻底会用js搭一个自己的服务器｜青训营