zoukankan      html  css  js  c++  java
  • 在vue-cli中使用mock.js详解

     引包
    1.  npm install mockjs --save-dev
    2. npm install axios --save(axios使用不再讲)

     修改配置
    3.  在config文件夹下的dev.env.js修改如下

    'use strict'
    const merge = require('webpack-merge')
    const prodEnv = require('./prod.env')
    
    module.exports = merge(prodEnv, {
      NODE_ENV: '"development"',
      MOCK: 'true'
    })

    4.  在config文件夹下的prod.env.js修改如下

    'use strict'
    module.exports = {
      NODE_ENV: '"production"',
      MOCK: 'false'
    }
    

    5. 在main.js里面做如下配置

    process.env.MOCK && require('@/mock')
    

    6.  在src目录下创建mock目录index.js,代码如下:

    require('./user')
    const Mock = require('mockjs')
    
    Mock.setup({
      timeout: 200
    })
    

      同级创建user.js,代码如下

    Mock.mock('/api/v1/getUserInfo', 'get', {
      code: 200,
      data: {
        fullName: '@CNAME', 
        email: '@EMAIL', 
        user_id: 10001213213,
        username: 'william',
        date: '@date',
        "array|1-10": [
          {
            "city|+1": [
              "北京",
              "上海",
              "天津"
            ]
          }
        ]
      },
    
      message: 'success'
    })
    

      说明: /api/v1/getUserInfo是自定义的path,可以单独放一个文件然后引入,data里面详细配置见:http://mockjs.com/examples.html

     在任意component里面请求

    this.$http.get('/api/v1/getUserInfo').then(res => {
    console.log(res)
    })

    #### ==注意==
    ##### 10、mock只是对项目内部的ajax请求进行拦截,并不对外提供接口服务。在外部进行接口调用是无效的。
    ##### 11、mock会拦截定义的URL,未定义的url, mock是不会拦截的。

  • 相关阅读:
    bzoj4407 于神之怒加强版
    bzoj4600 [Sdoi2016]硬币游戏
    javascript 笔记(1)
    thinkphp 杂乱笔记(1)
    think ajax 应用
    jquery ajax post, get, javascript ajax post, get 处理
    文件操作 系统备份和还原,压缩,解压 tar dump/restore
    查看系统信息
    进程显示,删除,调度 ps, top kill
    相看系统中用户的信息 passwd, shadow
  • 原文地址:https://www.cnblogs.com/JeneryYang/p/9415680.html
Copyright © 2011-2022 走看看