使用Express模拟接口数据

客官°小女子只卖身不卖艺 2021-11-04 15:14 407阅读 0赞

# Express简介 #

Express是一个基于 Node.js 平台，快速、开放、极简的 Web 开发框架。Express 在 node.js 基础上扩展了 Web 应用所需的功能，并提供了丰富的 HTTP 实用工具以及来自Connect框架的中间件，使得创建强健、友好的 API 变得快速而且简单。

# NodeJS下安装Express #

npm install express -g // 全局安装
    npm install express --save // 项目本地安装

# 模拟接口数据 #

## 创建本地应用 ##

打开命令行窗口，切换到要创建应用的目录下，执行如下命令完成项目创建。

// 创建项目目录
    mkdir api-server
    
    // 进入项目目录
    cd api-server
    
    // 生成项目的 package.json 文件，此命令需要输入几个参数，参见下图
    npm init
    
    // 引入依赖
    npm install express --save

![2019080808375579.gif][]

如图所示，本例中项目的入口文件名称被指定为 server.js （默认为 index.js），在项目根目录下创建 server.js ，内容如下：

然后，执行如下命令启动项目并监听 3000 端口：

node server.js

访问 [http://localhost:3000/user/18818578458][http_localhost_3000_user_18818578458] ，返回如下内容：

![2019080809082047.png][]

## 使用Express-Generator创建应用 ##

通过应用生成器工具 express-generator 可以快速创建一个应用的骨架。express-generator 包含了 express 命令行工具。通过如下命令即可安装：

npm install express-generator -g

\-h 参数可以列出所有可用的命令行参数：

> express -h
    
    Usage: express [options] [dir]
    
    Options:
    
    -h, --help // 输出使用方法
    --version // 输出版本号
    -e, --ejs // 添加对 ejs 模板引擎的支持
    --hbs // 添加对 handlebars 模板引擎的支持
    --pug // 添加对 pug 模板引擎的支持
    -H, --hogan // 添加对 hogan.js 模板引擎的支持
    --no-view // 创建不带视图引擎的项目
    -v, --view <engine> // 添加对视图引擎（view） <engine> 的支持 (ejs|hbs|hjs|jade|pug|twig|vash) （默认是 jade 模板引擎）
    -c, --css <engine> // 添加样式表引擎 <engine> 的支持 (less|stylus|compass|sass) （默认是普通的 css 文件）
    --git // 添加 .gitignore
    -f, --force // 强制在非空目录下创建

例如，如下命令创建了一个名称为 mock-server 的 Express 应用。此应用将在当前目录下的 mock-server 目录中创建，并且设置为使用 Pug 模板引擎（view engine）：

> express --view=pug mock-server
    
    create : mock-server\
    create : mock-server\public\
    create : mock-server\public\javascripts\
    create : mock-server\public\images\
    create : mock-server\public\stylesheets\
    create : mock-server\public\stylesheets\style.css
    create : mock-server\routes\
    create : mock-server\routes\index.js
    create : mock-server\routes\users.js
    create : mock-server\views\
    create : mock-server\views\error.pug
    create : mock-server\views\index.pug
    create : mock-server\views\layout.pug
    create : mock-server\app.js
    create : mock-server\package.json
    create : mock-server\bin\
    create : mock-server\bin\www
    
    change directory:
    > cd mock-server
    
    install dependencies:
    > npm install
    
    run the app:
    > SET DEBUG=mock-server:* & npm start

然后，切换到项目目录，安装所有依赖包：

> cd mock-server
    > npm install

在 MacOS 或 Linux 中，通过如下命令启动此应用：

$ DEBUG=mock-server:* npm start

在 Windows 中，通过如下命令启动此应用：

> set DEBUG=mock-server:* & npm start

然后在浏览器中打开 http://localhost:3000/ 网址就可以看到这个应用了。

![20190808093302563.png][]

通过生成器创建的 mock-server 应用目录结构如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmdqdW5sZWU_size_16_color_FFFFFF_t_70][]

## webpack项目中使用Express ##

旧版的webpack项目是在dev-server.js文件中配置的模拟数据，新版的webpack项目已经去掉了dev-server.js和dev-client.js，模拟数据改为在 webpack.dev.conf.js 中进行配置。

首先切换到项目目录，执行 npm install express --save 为项目安装 express 。然后在 webpack.dev.conf.js 的如下两处位置添加代码。

/* 。。。 */
    const portfinder = require('portfinder')
    
    /* ====== 要插入的第一段代码开始 ====== */
    
    // 引入express
    const express = require("express")
    const bodyParser = require('body-parser');
    
     
    // 创建express实例
    const app = express()
    
    // 解析application/json
    var jsonParser = bodyParser.json();
    
    // 解析application/x-www-form-urlencoded
    // var urlencodedParser = bodyParser.urlencoded({extended: false});
     
    // 读取/mock/login.json中的json数据
    var loginData = require("../src/mock/login.json")
    
    /* ====== 要插入的第一段代码结束 ====== */
    
    const HOST = process.env.HOST
    const PORT = process.env.PORT && Number(process.env.PORT)
    
    const devWebpackConfig = merge(baseWebpackConfig, {
      /* 。。。 */
      devServer: {
        /* 。。。 */
        watchOptions: {
          poll: config.dev.poll,
        },
        /* ====== 要插入的第二段代码开始 ====== */
        before(app) { // localhost:8080/api/login
          app.post("/api/login",jsonParser, (req, res) => {
            if(!req.body) return res.sendStatus(400);
            res.send(loginData[req.body.name === 'admin' ? 'admin':'other']);
            // res.json(loginData);
          })
        }
        /* ====== 要插入的第二段代码结束 ====== */
      },
      /* 。。。 */
    })

执行 **npm run dev** 命令重启应用，访问 [http://localhost:8080/api/login][http_localhost_8080_api_login] 即可获取到我们定义的Json 数据。

![20190808104803626.png][]

# 使用Express托管静态文件 #

如果需要使用Express对外提供诸如图像、CSS 和 JavaScript 之类的静态文件，可以使用 Express 中的 express.static 内置中间件函数。例如，通过如下代码就可以将 public 目录下的图片、CSS 文件、JavaScript 文件对外开放访问了：

app.use(express.static('public'))

现在，你就可以访问 public 目录中的所有文件了。

http://localhost:3000/images/logo.png

你也可以为你的资源指定一个虚拟的访问路径，例如：

app.use('/static', express.static('public'))

现在，你就可以通过带有 /static 前缀地址来访问 public 目录中的文件了。

http://localhost:3000/static/images/logo.png

Express 在静态资源文件夹中查找文件，因此，存放静态资源的文件夹的目录名不会出现在 URL 中。如果要使用多个静态资源目录，请多次调用 express.static 中间件函数：

app.use('/public', express.static('public'))
    app.use('/files', express.static('files'))

访问静态资源文件时，express.static 中间件函数会根据目录的添加顺序查找所需的文件。

需要注意的是， express.static 函数的 path 参数的路径是相对于express 实例的启动目录来说的，如果你的 express 实例是从其他目录启动的，很有可能会出现传入的path路径找不到的情况，安全一点的做法就是使用绝对路径。

app.use('/static', express.static(path.join(__dirname, 'public')))

[2019080808375579.gif]: /images/20211104/1814893a863a4bbda8b80208fc0fba93.png
[http_localhost_3000_user_18818578458]: http://localhost:3000/user/18818578458
[2019080809082047.png]: /images/20211104/6fc7822bbd2b499696559b5524c3d8db.png
[20190808093302563.png]: https://img-blog.csdnimg.cn/20190808093302563.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmdqdW5sZWU_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019080809333036.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmdqdW5sZWU=,size_16,color_FFFFFF,t_70
[http_localhost_8080_api_login]: http://localhost:8080/api/login
[20190808104803626.png]: https://img-blog.csdnimg.cn/20190808104803626.png