spring boot+iview 前后端分离架构之前端mock的实现（九）

ゝ一纸荒年。 2022-01-29 10:29 216阅读 0赞

### spring boot 与 iview 前后端分离架构之前端mock的实现（九） ###

*  公众号
 *  为什么需要mock
 *  mock的实现
 *   *  引入mock依赖
     *  配置mock环境
 *  启动服务并验证是否已经mock成功

# 公众号 #

![在这里插入图片描述][20191218155125364.jpg]  
大家可以直接微信扫描上面的二维码关注我的公众号，然后回复【bg09】 里面就会给到源代码的下载地址同时会附上相应的视频教程，并定期在我的公众号上给大家推送相应的技术文章，欢迎大家关注我的公众号。

# 为什么需要mock #

为什么我们的前端开发需要mock呢，所有的前端都是依赖于后端的接口来进行数据的展示和提交，但是在后端开发进度延后的时候，前端人员为了开发进度这时候就使用mock来进行模拟请求，等到后端开发完成以后，直接切换到生产环境就可以快速完成整合工作。

# mock的实现 #

## 引入mock依赖 ##

首先打开第八章的前端工程，然后打开package.json文件在devDependencies底下增加mock的依赖如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]  
接着进入安装我们的依赖执行以下的命令：  
![在这里插入图片描述][20190521191840895.png]

## 配置mock环境 ##

在src的config目录底下创建一个mock.js文件，主要用于mock环境的切换，当我们需要使用mock环境的时候我们可以直接修改env.js的值为mock就可以快速切换到mock环境，代码如下：

export const runMockConfig = {
      baseUrl : 'http://127.0.0.1:8080',
      imgUrl : 'http://127.0.0.1:80/vcm',
      mock: true
    };

接着我们改造我们的run.config.js文件，代码如下：

import {runDevConfig} from './dev';
    import {runProdConfig} from './prod';
    import {runMockConfig} from './mock';
    import env from './env';
    
    export default {
      /**
       * 根据启动项env来获取配置文件
       */
      runConfig: env === 'development' ? runDevConfig : (env == 'mock' ? runMockConfig : runProdConfig),
    }

接着我们修改我们的api底下的base.js，主要是为了适应mock的时候的ajax请求，此处只改造了post请求，改造以后的代码如下：

import axios from '../lib/api.request';
    import qs from 'qs';
    import config from '../config/run.config';
    let Axios
    if(config.runConfig.mock){
      Axios = require('axios');
      Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
    }
    export function fetch(url, params = {}) {
      if(config.runConfig.mock){
        return new Promise((resolve, reject) => {
          Axios.post(url, params)
            .then(response => {
              resolve(response.data);
            })
            .catch((error) => {
              reject(error);
            })
        })
      }else{
        return axios.request({
          url: url,
          data:qs.stringify(params),
          method: 'post'
        });
      }
    }

接着在config目录底下创建一个mock文件夹，同时在mock文件夹底下创建一个json文件夹，接着在json文件夹底下创建user文件夹，在user文件夹底下创建user.getUserInfo.json和user.login.json文件，代码分别如下：

{
      "code": 200,
      "msg": "登陆成功",
      "obj": {
        "token": "28a6b0bd2c3c4fa3a52335ad6d9aafb2"
      }
    }

{
      "code": 200,
      "msg": "登陆成功",
      "obj": {
        "loginAccount": "admin",
        "access": [
          "system-manage-role",
          "system-manage-dict-add",
          "system-manage-tree",
          "system-manage-dict",
          "system-manage-behavior",
          "system-manage",
          "system-manage-user"
        ],
        "headImg": null,
        "nickName": "系统管理员",
        "crtDate": 1557470735000,
        "loginPassword": null,
        "lastLoginDate": 1557470743000,
        "userId": "1",
        "token": "28a6b0bd2c3c4fa3a52335ad6d9aafb2"
      }
    }

接着我们在mock文件夹底下创建一个mock.js文件，代码如下：

// 引入mockjs
    const Mock = require('mockjs');
    import userLogin from './json/user/user.login';
    import userGetUserInfo from './json/user/user.getUserInfo';
    
    Mock.mock('/user/login', 'post', userLogin);
    Mock.mock('/user/getUserInfo', 'post', userGetUserInfo);

接着改造我们的main.js，根据我们启动的环境来决定是否加载mock，main.js改造完成以后的代码如下：

// The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    // 引入国际化包
    import i18n from './local'
    import iView from 'iview'
    import 'iview/dist/styles/iview.css'
    import runConfig from './config/run.config';
    
    /**
     * 表示当前的应用启动的时候是以mock的方式启动
     */
    if(runConfig.runConfig.mock){
      require('./config/mock/mock.js')
    }
    
    Vue.config.productionTip = false
    // 引入view的国际化
    Vue.use(iView, {
      i18n: (key, value) => i18n.t(key, value)
    })
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      // 国际化初始化
      i18n,
      components: { App },
      template: '<App/>'
    })

# 启动服务并验证是否已经mock成功 #

接着我们启动服务执行以下命令：

cnpm run dev

启动成功以后，我们访问以下的地址：http://127.0.0.1:8080/\#/login  
接着我们点击登录按钮，我们会发现我们已经正常跳转到首页，这就说明我们的mock已经成功了，要是大家这时候还不确定自己的mock是否成功，可以在login.vue中的登录方法进行改造打印登录成功的日志如下：  
![在这里插入图片描述][20190521194351415.png]  
到此处我们就完成了前端的mock的实现。  
上一篇文章地址：[spring boot+iview 前后端分离架构之接口文档的编写（八）][spring boot_iview]  
下一篇文章地址：[spring boot+iview 前后端分离架构之接口文档的编写和所有mock数据的实现（十）][spring boot_iview _mock]

[20191218155125364.jpg]: /images/20220129/739c0e4ca7ba4a939ccf257bb32788ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]: /images/20220129/9368ddc061c24e399867418a75cb18f3.png
[20190521191840895.png]: /images/20220129/a3959629d7294a3e9b4e39a1db942a8b.png
[20190521194351415.png]: /images/20220129/da391f4f12814ff78c781e2ad489e9a4.png
[spring boot_iview]: https://blog.csdn.net/linzhefeng89/article/details/90292545
[spring boot_iview _mock]: https://blog.csdn.net/linzhefeng89/article/details/90454444