Vue开发时配置使用mock数据

使用vue-cli3构建vue项目,并配置使用本地开发时的mock数据。请求本地静态文件或使用json-server搭建一台json服务器。
(PS:本文代码在vue-cli3构建的基础vue项目之上进行编写:vue create my-project

  在日常前后端分离的开发模式中,前端开发者时常需要等待后台接口的确定和完成,这样会处于一个被动的状态,工作效率也不高。

  因此,我们一般采用模拟数据(mock)的方式去开发项目,这样会使我们的前后端同时进行,提高团队开发效率。同时,如果有了自主mock的能力,我们甚至可以拿着自己推测的数据结构,找后台同学对接,最起码,这个时候,我们有主动推进的资本,而不是完全被动等待。

  下面我整理几种自己在vue中常用的mock方式,根据自己情况选择其中的一种即可。
  当然在最之前,我们需要安装axios,使用命令 npm install axios --save 即可。

  PS:这篇博客我使用的是 vue-cli3 构建的vue项目,使用 vue-cli2 的网上有很多人整理了,需要的话Google一下即可。

一、请求本地静态mock数据

1. 构造数据

  在 3.x 版本中,因为static目录被移除,新增了public目录,且这个目录下的静态资源不会经过webpack的处理,会被直接拷贝,所以我们能够直接访问到该目录下的资源。
  因此,我们在 public目录 下创建一个 mock目录,然后在其中放置 .json格式的模拟数据文件
  一般建议本地mock数据的文件夹层级,与接口url相对应。这样可以通过文件夹名称,快速定位到指定接口返回的mock数据。
  这里简单处理,在 public/mock/users.js 中写入以下内容:

{
  "users": [
    {
      "id": 1,
      "name": "tom",
      "age": "13",
      "email": "tom@qq.com"
    },
    {
      "id": 2,
      "name": "andy",
      "age": "18",
      "email": "andy@qq.com"
    },
    {
      "id": 3,
      "name": "rose",
      "age": "26",
      "email": "rose@qq.com"
    }
  ]
}

2. 配置文件

  另外由于 3.x 版本移除了 config、build 等配置目录,如果需要进行相关配置我们需要在根目录下创建 vue.config.js 进行配置。
  因此,我们在根目录下新建一个 vue.config.js 文件,该文件是调整 webpack 配置最简单的方式,将会被 webpack-merge 合并入最终的 webpack 配置中。
  在 vue.config.js 中编写以下内容:

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8080",
        changeOrigin: true, // 设置这个参数可以避免跨域
        pathRewrite: {
          "^/api": "/mock"
        }
      }
    }
  }
};

3. 组件引用

  最后在组件 Home.vue 中调用这个API,JavaScript代码如下:

<script>
import axios from "axios";

export default {
  name: "home",
  components: {},
  created() {
    axios.get("/api/users.json").then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err);
    });
  }
};
</script>

4. 运行项目

  执行命令 npm run serve 启动项目,打开页面观察结果。

二、使用json-server实现mock数据

  json-server主要的作用是搭建一台json服务器,从而能够测试一些业务逻辑。

1. 安装

  首先安装 json-server,由于只用于开发环境使用,所以执行如下命令安装:

npm install json-server --save-dev

2. 构造数据

  在 public/mock/ 目录下创建一个 db.json 文件,然后写入数据(每一个key对应一个api):

{
  "users": [
    {
      "id": 1,
      "name": "tom",
      "age": "13",
      "email": "tom@qq.com"
    },
    {
      "id": 2,
      "name": "andy",
      "age": "18",
      "email": "andy@qq.com"
    },
    {
      "id": 3,
      "name": "rose",
      "age": "26",
      "email": "rose@qq.com"
    }
  ],
  "create": {
    "code": 200,
    "message": "succeed",
    "data": true
  },
  "update": {
    "code": 200,
    "message": "succeed",
    "data": true
  },
  "delete": {
    "code": 200,
    "message": "succeed",
    "data": true
  },
  "retrieve": {
    "code": 200,
    "message": "succeed",
    "data": true
  }
}

3. 配置文件

  同样在 public/mock/ 目录下创建一个 server.js 文件,然后编辑如下:

const jsonServer = require("json-server");
const server = jsonServer.create();
const router = jsonServer.router("./db.json");
const middlewares = jsonServer.defaults();

// Set default middlewares (logger, static, cors and no-cache)
server.use(middlewares);

// Add custom routes before JSON Server router
server.get("/echo", (req, res) => {
  res.jsonp(req.query);
});

// To handle POST, PUT and PATCH you need to use a body-parser
// You can use the one used by JSON Server
server.use(jsonServer.bodyParser);
server.use((req, res, next) => {
  if (req.method === "POST") {
    req.body.createdAt = Date.now();
  }
  // Continue to JSON Server router
  next();
});

// Use default router
server.use(router);
server.listen(3000, () => {
  console.log("JSON Server is running at http://localhost:3000/");
});

  设置请求接口代理,在根目录下新建一个 vue.config.js 文件,并编写以下内容(注意和上面请求本地静态mock数据时的配置略有不同):

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:3000", // 通过本地服务器将你的请求转发到3000端口(json-server的端口)
        changeOrigin: true, // 设置这个参数可以避免跨域
        pathRewrite: {
          "^/api": "/"
        }
      }
    }
  }
};

4. 组件引用

  最后在组件 Home.vue 中调用这些API,JavaScript代码如下:

<script>
import axios from "axios";

export default {
  name: "home",
  components: {},
  created() {
    axios.get("/api/users").then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err);
    });

    axios.get("/api/create").then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err);
    });
  }
};
</script>

5. 启动项目和服务器

  执行命令 npm run serve 启动项目,同时在 public/mock/ 目录下执行命令 node server.js 启动 api 服务器。
  此时访问3000端口可以查看api服务器页面,点击api名称可以直接查看返回数据;
  访问8080端口可以进入项目页面,观察结果。

三、使用mock.js实现mock数据

  mock.js是一个模拟后台接口的JS库。它可以在接口没出来时非常方便的模拟数据,用法简单,方便扩展,支持种类丰富的随机数据,并且它易于扩展,可接受请求参数,根据参数定制数据,足以满足日常开发需求。

  该库对开发无侵入,不需要对系统代码进行修改,即可通过拦截Ajax请求,返回模拟数据以供开发测试使用,当项目上线之后只需取消引用它即可。

  接下来演示一下如何在Vue项目中组织和使用mock.js进行数据模拟。

1. 安装

  首先安装 mock.js,由于只用于开发环境使用,所以执行如下命令安装:

npm install mockjs --save-dev

2. 编写模拟数据接口

  在 src目录 下创建一个 mock目录 ,然后在里面创建一个 index.js 文件,作为mock各个模块的导出点,供 src/main.js 使用。
  在 src/mock/modules 目录下,创建 xxx.js 规则,模拟各个模块数据,供 mock 使用。
  这样按模块划分后的目录结构大致如下所示:

.
├── src
|   ├── mock
|       ├── index.js
|       └── modules  // 各个模块的mock数据
|           ├── user.js
|           ├── article.js
|           └── category.js
|

index.js代码如下:

/**
 * 定义本地测试接口,最好与正式接口一致,尽可能减少联调阶段修改的工作量
 */
// 引入mockjs
import Mock from "mockjs";
// 引入模板函数类
import user from "./modules/user";
import article from "./modules/article";
import category from "./modules/category";

const { mock } = Mock; // Mock函数

// 使用拦截规则拦截命中的请求
// mock( url, post/get, 返回的数据);
mock(/\/api\/users\/login/, "post", user.login);
mock(/\/api\/users\/profile/, "get", user.profile);
mock(/\/api\/users\/logout/, "post", user.logout);

user.js代码如下:

import { Random } from "mockjs"; // 导出随机函数

function login(req) {
  // req是一个请求对象,包含: url,type和body属性
  return {
    code: 200,
    data: {
      username: Random.cname(),
      token: Random.guid(),
      message: "Login successfully."
    }
  };
}

function profile(req) {
  return {
    code: 200,
    data: {
      username: Random.cname(),
      age: Random.integer(10, 30),
      date: Random.date(),
      message: ""
    }
  };
}

function logout(req) {
  return {
    code: 200,
    data: {
      message: "Logout successfully."
    }
  };
}

export default {
  login,
  profile,
  logout
};

article.jscategory.js代码省略。

3. 导入模拟数据接口

  模拟好假数据接口之后,我们还要在 main.js 中将接口导入,这样在项目中任意组件内都可以请求这些接口了。
main.js编辑如下:

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

// 引入mock文件
import "./mock"; // mock 方式,正式发布时,注释掉该处即可

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

4. 组件引用

  最后在组件 Home.vue 中调用这些API,以Home.vue这个组件为例,代码如下:

<template>
  <div class="home">
    <button @click="profile">信息</button>&#8195;
    <button @click="logout">注销</button>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "home",
  components: {},
  data() {
    return {
      username: "admin",
      password: "password"
    };
  },
  created() {
    let params = { username: this.username, password: this.password };
    axios.post("/api/users/login", params).then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err);
    });
  },
  methods: {
    profile() {
      axios.get("/api/users/profile").then(res => {
        console.log(res);
      }).catch(err => {
        console.log(err);
      });
    },
    logout() {
      axios.post("/api/users/logout").then(res => {
        console.log(res);
      }).catch(err => {
        console.log(err);
      });
    }
  }
};
</script>

5. 启动项目

  执行命令 npm run serve 启动项目,打开调试窗口,观察打印结果。

6. 注意事项

  ● mock.js依赖中保存着大量用于伪造假数据的静态数据,引入的时候打包得到的文件体积会明显增大,这是正常的。

  ● mock.js模拟数据后,会将命中配置规则(正则表达式)的请求拦截,这时候在浏览器的network面板是无法看到数据返回的,可以通过打印数据的方式观察。

  ● 当后端写好真实接口以后,不要忘记注释掉在 main.js 中引入mock文件的那行代码。你也可以选择删掉创建的 mock目录main.js 中的那行代码。

7. mock.js补充知识点

  mock.js内含各种内置的API,以及使用方法示例。主要包括以下几类:

  ● 基础数据类型 (Basic)
  ● 日期时间 (Date)
  ● 占位图片 (Image)
  ● 颜色 (Color)
  ● 文本 (Text)
  ● 姓名 (Name)
  ● 网络相关 (Web)
  ● 地址 (Address)
  ● 工具函数 (Helper)
  ● 等等

  具体可以查阅Mockjs API 文档


参考
http://mockjs.com/
https://segmentfault.com/a/1190000014844604


  目录