Vue项目配置(解决先后端接口联调一系列问题)

在前端开发过程当中，先后端联调的时候，总会遇到各类问题，今天我简单作一个各个状况的总结，以便记录和分享给你们！

1、当项目启动时，若api接口已经开发完毕

若api接口已经开发完毕，这不存在这个问题，前端直接调接口便可，基本废话😁

2、当api接口和前端同时开发，前端如何自测，模拟接口联调，同时避免跨域问题

咱们都知道，跨域问题是浏览器端和服务器端才会有的，服务端和服务端是不存在跨域问题的。
那么前端在自测时，如何避免跨域呢？
浏览器---》服务器(走到这个服务器的时候，咱们可使用devServer或者nginx处理)---》API

+1）前端能够在vue.config.js配置文件自定义接口，配置devServer(说实话，这个方法须要前端懂点node，也有点费精力)

const bodyParser = require("body-parser");
module.exports = {
    devServer: {
         before: app => {
      // 设置参数处理中间件
      app.use(bodyParser.json()); // post参数
      // url参数
      app.use(
        bodyParser.urlencoded({
          extended: true,
        }),
      );

      app.post("/dev-api/user/login", (req, res) => {
        const { username } = req.body;

        if (username === "admin" || username === "jerry") {
          res.json({
            code: 1,
            data: username,
          });
        } else {
          res.json({
            code: 10204,
            message: "用户名或密码错误",
          });
        }
      });

      app.get("/dev-api/user/info", (req, res) => {
        //   请求头获取token
        const auth = req.headers["authorization"];
        // 转换为响应的roles
        const roles = auth.split(" ")[1] === "admin" ? ["admin"] : ["editor"];
        res.json({
          code: 1,
          data: roles,
        });
      });
    },
    }
}

+2）先后端代码分离的状况，假如node端写api。须要前端配置一下proxy。

1)在项目中建立server目录，建立index.js

const express = require("express");
const app = express();
const bodyParser = require("body-parser");

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

app.post("/user/login", (req, res) => {
  const { username } = req.body;

  if (username === "admin" || username === "jerry") {
    res.json({
      code: 1,
      data: username
    });
  } else {
    res.json({
      code: 10204,
      message: "用户名或密码错误"
    });
  }
});

app.get("/user/info", (req, res) => {
  const roles = req.headers['authorization'].split(' ')[1] ? ["admin"] : ["editor"];
  res.json({
    code: 1,
    data: roles
  });
});

app.listen(3000);

2）在vue.config.js的devServer中配置代理

proxy: {
        // 代理 /dev-api/user/login 到 http://127.0.0.1:3000/user/login
        [process.env.VUE_APP_BASE_API]: {
          target: `http://127.0.0.1:3000/`,
          changeOrigin: true,
          pathRewrite: {//看后台是否有，决定是否重写
            ["^" + process.env.VUE_APP_BASE_API]: ""
          }
        }
      },

3）启动server下的index，监听3000端口，一样能够处理跨域

node index.js

4）启动前端项目

npm run serve

+3）使用easy-mock模拟

注意：easy-mock网站常常挂掉，须要咱们本身在本地搭建一下本地项目，详细步骤以下：

1）安装工具

• nvm
  windows
  mac
• 使用nvm安装node 8.x
  nvm install 8.16.0
• mongodb
  windows
  mac
• redis
  windows
  mac
• 克隆esay-mock项目
  git clone https://github.com/easy-mock/...

2）起服务

• mongodb
  mongod
• redis
  redis-server
• esay-mocknpm inpm run dev