Express

web前端

发布日期: 2021-11-19

更新日期: 2021-11-20

文章字数: 1.1k

阅读时长: 4 分

阅读次数:

概念

Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架，为 Web 和移动应用程序提供一组强大的功能。

安装使用

使用npm下载

npm install express-generator -g     / /-g 全局安装

利用express完成创建项目并完成初始化

创建express项目
```
express 项目名称
```

项目文件架构

.
├── app.js ---整个项目的入口文件，核心文件，该文件负责项目的架构以及项目的配置
├── bin   ---- 项目配置信息
│   └── www -----项目入口文件，内部用于搭建基于node.js的服务器
├── package.json   ---第三方包目录，显示该项目使用了哪些第三方包
├── public  ---用于存放前端的静态资源。
│   ├── images ---图片
│   ├── javascripts  ---js
│   └── stylesheets   ---css
│       └── style.css
├── routes    ---- 负责请求的获取和处理
│   ├── index.js
│   └── users.js
└── views     ----放置HTML页面，一般会放在public中
    ├── error.html

运行初始项目

在app.js中最后一行改为,配置端口信息

app.listen(3000,function(){
    console.log('服务器已启动，使用了系统的3000端口');
});

安装第三方依赖包
```
npm install
简写： npm i
```
- 该命令会找到该目录下的package.json并自动安装所需要的第三方库
运行项目
```
node app.js
```
终端必须为项目文件目录下启动
查看运行效果

打开浏览器，输入localhost:3000 查看项目的初始页面
注 :当修改了app.js或route中的内容，都需要重新启动服务
- 使用ctrl+c停止当前服务器的运行
- 使用node app.js重新运行
插件：自动更新启动服务器的插件：nodemon
- 安装：npm i nodemon
- 启动：nodemon app.js

基本路由

路由是指确定应用程序如何响应客户端对特定端点的请求，即 URI（或路径）和特定的 HTTP 请求方法（GET、POST 等）。每个路由可以有一个或多个处理函数，当路由匹配时执行。

格式

app.METHOD(PATH, HANDLER)

app是的一个实例express。
METHOD是一个HTTP 请求方法，小写。
PATH 是服务器上的路径。

HANDLER 是路由匹配时执行的函数。

app.get('/', function (req, res) {
  res.send('Hello World!')
})

完整的交互

流程：前端发送ajax请求到服务器，服务器通过对应路由(route)来获取请求并根据地址分发到对应的请求处理代码中进行操作。操作后也可以返回数据到前端。

前端发送请求

在/public/html中新建一个HTML页面(使用时需要用到ajax，需要引入jquery)

 $.ajax({
            url:"/users/login",  //请求路径
            success:function(data){
                console.log(data);
            },
            //表示该请求用于提交数据
            type:"post"
        })
如果不发送数据，那么建议使用get
如果要发送数据，那么建议用post

其中users/login就是发送到后端的地址。后端会通过该地址分发到不同文件中去处理

app.js文件中可以进行一级路由的配置,其中 app.use('/users', usersRouter)：指定所有以/users开头的路径都交给userRouter去处理。userRouter由该指令var usersRouter = require('./routes/users.js');指向 users.js文件，该文件需要进行对/login路径的处理
```
文件route/users.js:
var express = require('express');
var router = express.Router();
//   /users/login
router.post('/login', function(req, res, next) {
    res.send('这个请求负责登录');
});
module.exports = router;
```
- req:一个对象，包含了请求的基本信息。req有一个属性req.body可以获取post请求传递过来的数据
- res:一个对象，负责服务器的发送数据的信息。 res有一个函数res.send(数据)将数据发送到浏览器。针对ajax请求，那么send里的数据发送到ajax里的success(data)的data中
修改之后重启服务器，查看控制台输出内容,若输出为这个请求负责登录则成功实现

服务器上的app.js内书写一级路由.比如前端请求路径为/users/info.其中/users是一级路由，/login为二级路由

每个一级路由需要再routes文件夹下创建一个js文件，一般同名(比如users.js)，该文件就负责该一级路由下的所有请求处理

该文件里除了基本代码以外，针对每个二级路由，会专门书写一段代码来处理。比如(/users/login的get请求处理)