[JavaScript知识库]用vue-cli开发项目时进行后台数据模拟

前言

在我们进行前后端分离的项目开发的时候，总会遇到数据交互问题，但是我们也没法保证前后端项目进度一致，如果前端需要后端传来的数据怎么办呢？这个时候我们可以进行后端数据接口模拟，下面就给大家介绍一下到底该怎么进行后台数据模拟。

使用mock.js

1.首先，安装模块mockjs、axios(http请求库)

npm install mockjs axios --save

2.在src目录下创建一个mock文件夹，mock文件夹里面的文件结构如下：

其中，data文件夹里面放的是我们要从后端传向前端的数据，我把数据对象放在一个json文件中，userJson.json里面内容如下：

{
  "username": "admin",
  "password": "123"
}

mock.js中的代码如下：

const Mock = require('mockjs');
//格式： Mock.mock( url, post/get , 返回的数据)；
//./data/userJson就是我们上面定义的数据文件
Mock.mock('/user/userInfo', 'get', require('./data/userJson'));

3…在需要数据的页面中引入并访问

<script>
  import axios from 'axios'  //引入axios
  import mock from '../mock/mock.js'  //引入mock
    export default {
        name: "Login",
        data(){
          return {
          }
        },
      methods:{
      },
      mounted() {
      //向后端接口请求数据，也可以写在其他函数或方法里
        axios.get('/user/userInfo').then(res=>{
          console.log(res);
        })
      }
    }
</script>

4.查看控制台，数据是否请求成功

本博文来自对前辈文章的学习：
附原文章链接：https://blog.csdn.net/bocongbo/article/details/81700843