Vue&Mock设置

刺骨的言语ヽ痛彻心扉 2022-12-12 15:11 159阅读 0赞

> 前端跨域解决方案：[https://yuanyu.blog.csdn.net/article/details/108948464][https_yuanyu.blog.csdn.net_article_details_108948464]

> 1.  开发阶段，为了高效率，需要提前Mock
> 2.  减少代码冗余、灵活插拔
> 3.  减少沟通、减少接口联调时间

npm i axios --save

# 1 本地创建json #

本地创建json文件无法无缝切换到开发环境，应为json文件是写死了的

public/mock/user/userInfo.json

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTcz_size_16_color_FFFFFF_t_70][]

测试

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTcz_size_16_color_FFFFFF_t_70 1][]

--------------------

# 2 easy-mock平台 #

easy-mock不稳定，如果能自己搭建使用这种方式时最好的，不建议使用线上的这个

>  *  [https://easy-mock.com/][https_easy-mock.com]
>  *  [https://github.com/easy-mock/easy-mock][https_github.com_easy-mock_easy-mock]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTcz_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTcz_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTcz_size_16_color_FFFFFF_t_70 4][]

// src/util/httpRequest.js
    import axios from 'axios'
    const http = axios.create({
        timeout: 8000,
    })
    // 后期只需要该这里就可以无缝切换到线上地址了
    http.defaults.baseURL = 'https://easy-mock.com/mock/5f7e075546477f19b2848a6d/api';
    http.defaults.timeout = 8000
    export default http

<template>
      <div id="app">
        {
       {userInfo}}
      </div>
    </template>
    <script>
    import http from "./util/httpRequest";
    export default {
      name: 'App',
      data() {
        return {
          userInfo: {}
        }
      },
      mounted() {
        // 通过easy-mock平台实现数据mock
        http.get('/user/details').then(({data}) => {
          this.userInfo = data.data
        })
      }
    }
    </script>
    <style>
    </style>

![20201008023136113.png][]

--------------------

# 3 集成Mock API #

Mock API有个特点，控制台是查看不到请求的，应为在请求在发出去之前就被拦截了

> 1.  [https://www.npmjs.com/package/mockjs][https_www.npmjs.com_package_mockjs]
> 2.  [http://mockjs.com/][http_mockjs.com]
> 3.  [https://github.com/nuysoft/Mock/wiki][https_github.com_nuysoft_Mock_wiki]

npm install mockjs --save

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTcz_size_16_color_FFFFFF_t_70 5][]

// src/mock/api.js
    import Mock from 'mockjs'
    Mock.mock('/api/user/details',{
        "status": 0,
        "data": {
            "id|1001-11000": 0,
            "username": "@cname",
            "email": "admin@51purse.com",
            "phone": null,
            "role": 0,
            "createTime": 1479048325000,
            "updateTime": 1479048325000
        }
    })

// src/util/httpRequest.js
    import axios from 'axios'
    // mock开关
    const mock = true
    if (mock) {
        // 记得不要用import，import是预编译，require是需要执行到这里才会加载，不然永远都会拦截
        require('../mock/api')
    }
    const http = axios.create({
        timeout: 8000,
    })
    http.defaults.baseURL = '/api';
    http.defaults.timeout = 8000
    export default http

<template>
      <div id="app">
        {
       {userInfo}}
      </div>
    </template>
    <script>
    import http from "./util/httpRequest";
    export default {
      name: 'App',
      data() {
        return {
          userInfo: {}
        }
      },
      mounted() {
        // 本地集成mockjs实现数据mock
        // 注意控制台看不到发送请求，发请求前就被拦截了
        http.get('/user/details').then(({data}) => {
          this.userInfo = data.data
        })
      }
    }
    </script>

![20201008023745742.png][]

[https_yuanyu.blog.csdn.net_article_details_108948464]: https://yuanyu.blog.csdn.net/article/details/108948464
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTcz_size_16_color_FFFFFF_t_70]: /images/20221123/3c549a566edd453e916ff02e3a9f3afe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTcz_size_16_color_FFFFFF_t_70 1]: /images/20221123/2f15951c74844936aba4d734e133b8e7.png
[https_easy-mock.com]: https://easy-mock.com/
[https_github.com_easy-mock_easy-mock]: https://github.com/easy-mock/easy-mock
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTcz_size_16_color_FFFFFF_t_70 2]: /images/20221123/1f900a3c07fb48039cf9247a6c1b576b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTcz_size_16_color_FFFFFF_t_70 3]: /images/20221123/b3b4b1956010454ea941ab34b0d10fe3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTcz_size_16_color_FFFFFF_t_70 4]: /images/20221123/f86a636d19ae40eb99641361c5454aaf.png
[20201008023136113.png]: /images/20221123/2e8a9a4c05c44a8dbe7ad03f4f4ca2e4.png
[https_www.npmjs.com_package_mockjs]: https://www.npmjs.com/package/mockjs
[http_mockjs.com]: http://mockjs.com/
[https_github.com_nuysoft_Mock_wiki]: https://github.com/nuysoft/Mock/wiki
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTcz_size_16_color_FFFFFF_t_70 5]: /images/20221123/9ac6b0cd2c6c4fd882b4b95c148c875d.png
[20201008023745742.png]: /images/20221123/bbd366a98eff4d099bcf261e6e76d26d.png