详解express + mock让前后台并行开发

让我来详细讲解一下"详解express + mock让前后台并行开发"的完整攻略。

概述

前后端分离已经成为现代web开发的重要方式，前后端并行开发加快了开发效率。其中，利用mock数据代替后端接口对于前端开发人员是非常有利的。Express是一个流行的Node.js web框架，可以方便的搭建Web应用程序。下面我们将详细介绍如何使用Express + mock实现前后台并行开发。

步骤

第一步：安装Express

首先，在命令行中输入以下命令进行全局安装：

npm install -g express

第二步：初始化Express项目

在项目的根目录下执行以下命令进行初始化：

express --view=ejs mock-demo

上述命令生成了一个名为mock-demo的Express项目，使用的是ejs模板引擎。

第三步：安装依赖

进入项目根目录，执行以下命令安装所需依赖：

npm install --save express body-parser

其中，body-parser 是一个Node.js中间件，用于处理POST请求。

第四步：搭建后端路由

在根目录下创建一个server目录，在server目录下新建一个index.js文件。在该文件中编写后端API的路由代码，如下所示：

const express = require('express');
const bodyParser = require('body-parser');

const app = express();
const router = express.Router();

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

router.get('/api/user', (req, res) => {
  const data = {
    id: 1,
    name: 'Alex',
    age: 28,
  };
  res.json(data);
});

app.use(router);

const port = process.env.PORT || '3000';
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

在上述代码中，我们使用Express.Router()来定义我们的后端路由，并使用app.use()来加载这些路由。同时，我们模拟了一个’/api/user’接口，返回了一个json数据。

第五步：编写前端代码

在public目录下新建一个index.html文件，用于编写前端页面的代码。同时，在public目录下新建一个index.js文件，用于调用后端API接口获取数据。代码如下所示：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Express Mock Demo</title>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="index.js"></script>
</head>

<body>
  <div id="container">
    <h2>Express Mock Demo</h2>
    <div id="content"></div>
  </div>
</body>

</html>

$(function () {
  $.get('/api/user', function (data) {
    var html = 'ID：' + data.id + '<br/>name：' + data.name + '<br/>age：' + data.age;
    $('#content').html(html);
  });
});

在上述代码中，我们使用 jQuery 的 $.get() 方法来调用后端API接口，并将返回的数据展示在页面上。

第六步：启动应用程序

进入项目根目录，执行以下命令启动应用程序：

npm start

在浏览器中输入 http://localhost:3000/，即可看到前端页面已经成功展示后端数据。

示例说明

下面我们通过两个简单的示例来详细讲解Express与Mock的使用。

示例一：模拟登录API

在server目录下新建一个login.js文件，用于编写模拟登录API的逻辑代码：

const express = require('express');

const router = express.Router();

router.get('/api/login', (req, res) => {
  const { username, password } = req.query;
  if (username === 'admin' && password === '123456') {
    const data = {
      code: 0,
      msg: '登录成功。',
    };
    res.json(data);
  } else {
    const data = {
      code: -1,
      msg: '用户名或密码错误。',
    };
    res.json(data);
  }
});

module.exports = router;

在上述代码中，我们首先解构出请求中的 username 和 password 参数，然后进行判断，模拟了一个登录API，并返回相应的JSON数据。

我们在index.js中使用该API：

$(function () {
  $('#login').click(function () {
    const username = $('#username').val();
    const password = $('#password').val();
    $.get('/api/login', { username, password }, function (data) {
      console.log(data);
      if (data.code === 0) {
        alert(data.msg);
      } else {
        alert(data.msg);
      }
    });
  });
});

在上述代码中，我们使用 $.get() 方法来调用后端模拟的登录API，并将返回的数据展示在弹出框中，用于模拟用户登录的效果。同时，我们也展示了如何使用 jQuery 来获取前端表单数据。

示例二：模拟商品列表API

在server目录下新建一个product.js文件，用于编写模拟商品列表API的逻辑代码：

const express = require('express');

const router = express.Router();

router.get('/api/products', (req, res) => {
  const productList = [
    {
      id: 1,
      name: 'product1',
      price: 100,
    },
    {
      id: 2,
      name: 'product2',
      price: 200,
    },
    {
      id: 3,
      name: 'product3',
      price: 300,
    },
  ];
  res.json(productList);
});

module.exports = router;

在上述代码中，我们定义了一个 productList 数据，模拟商品列表数据，并将其返回。