vue关于mock的简单使用

程序员文章站 2023-11-14 17:53:46

一、mock 1、简介 mock是一个模拟数据生成器，旨在帮助前端独立于后端进行开发，帮助编写单元测试。其可模拟 Ajax 并返回模拟数据，使前端不用去调用后端的接口，方便测试。 2、vue直接使用mock step1：安装mock step2：直接引入mock.js，并编写mock接口（Mock. ......

一、mock

1、简介

　　mock是一个模拟数据生成器，旨在帮助前端独立于后端进行开发，帮助编写单元测试。其可模拟 ajax 并返回模拟数据，使前端不用去调用后端的接口，方便测试。
　

2、vue直接使用mock

step1：安装mock

npm install mockjs

step2：直接引入mock.js，并编写mock接口（mock.mock）。

【mock.js】
//引入mock模块
import mock from 'mockjs';

mock.mock('/login', { //输出数据
    'name': '@name', //随机生成姓名
    //还可以自定义其他数据
});
mock.mock('/list', { //输出数据
    'name': '@name', //随机生成姓名
    'age|10-20': 10
    //还可以自定义其他数据
});

step3：在需要的地方引入编写后的接口js即可。

【app.vue】
<template>
    <div>
        <button @click="login">login</button>
        <button @click="list">list</button>
    </div>
    <!--app -->
</template>

<script>
    import mock from './mock.js'
    import axios from 'axios'
    export default {
        methods: {
            login() {
                axios.post("/login").then(response => {
                    if (response.data) {
                        console.log(response.data)
                        alert(response.data.name)
                    }
                })
            },
            
            list() {
                axios.post("/list").then(response => {
                    if (response.data) {
                        console.log(response.data)
                        alert(response.data.name + ',' + response.data.age)
                    }
                })
            }
        }
    }
</script>

<style>

</style>

step4：代码与截图
　　目录结构。使用vue-cli创建项目（详见https://www.cnblogs.com/l-y-h/p/11241503.html）。

vue关于mock的简单使用

完整代码

【main.js】
import vue from 'vue'
import app from './app.vue'

vue.config.productiontip = false

new vue({
  render: h => h(app),
}).$mount('#app')


【mock.js】
//引入mock模块
import mock from 'mockjs';

mock.mock('/login', { //输出数据
    'name': '@name', //随机生成姓名
    //还可以自定义其他数据
});
mock.mock('/list', { //输出数据
    'name': '@name', //随机生成姓名
    'age|10-20': 10
    //还可以自定义其他数据
});



【app.vue】
<template>
    <div>
        <button @click="login">login</button>
        <button @click="list">list</button>
    </div>
    <!--app -->
</template>

<script>
    import mock from './mock.js'
    import axios from 'axios'
    export default {
        methods: {
            login() {
                axios.post("/login").then(response => {
                    if (response.data) {
                        console.log(response.data)
                        alert(response.data.name)
                    }
                })
            },
            
            list() {
                axios.post("/list").then(response => {
                    if (response.data) {
                        console.log(response.data)
                        alert(response.data.name + ',' + response.data.age)
                    }
                })
            }
        }
    }
</script>

<style>

</style>

运行截图：
初始画面

vue关于mock的简单使用

点击login 按钮（随机产生一个人名）

vue关于mock的简单使用

点击list按钮（随机产生一个人名和年龄）

vue关于mock的简单使用

3、vue项目中使用webpack-api-mocker进行mock

step1：安装webpack-api-mocker

npm i webpack-api-mocker --save-dev

step2：编写 /mocker/index.js，用于定义mock接口

【/mocker/index.js】
// 使用 require 引入json文件，可以直接访问数据
const appdata = require('../data.json')

const proxy = {
    'get /api/login': {
        success: appdata.login.success,
        message: appdata.login.message
    },
    'get /api/list': [{
            id: 1,
            username: 'kenny',
            sex: 6
        },
        {
            id: 2,
            username: 'kenny',
            sex: 6
        }
    ],
    'post /api/post': (req, res) => {
        res.send({
            status: 'error',
            code: 403
        });
    },
    'delete /api/remove': (req, res) => {
        res.send({
            status: 'ok',
            message: '删除成功！'
        });
    }
}
module.exports = proxy

step3：修改 vue.config.js 配置文件（若不存在，在项目下新建即可）

【vue.config.js】
const path = require('path')
const apimocker = require('webpack-api-mocker')

module.exports = {
  devserver: {
    before(app) {
　　　　// 注意，此处引用的是自定义的接口文件
      apimocker(app, path.resolve('./mocker/index.js'), {
        proxy: {
          '/repos/*': 'https://api.github.com/',
        },
        changehost: true,
      })
    }
  }
}

step4：随便定义一组 json 数据（用于测试）。

{
    "login": {
      "success": "true",
      "message": "登陆成功"
    },
    "filelist": {
      "success":"true",
      "list":[
      {"fileid":"1","filename":"a1.c","content":"content-test1"
      },
      {"fileid":"2","filename":"a2.c","content":"content-test2"
      },
      {"fileid":"3","filename":"a3.c","content":"content-test2"
      },
      {"fileid":"4","filename":"a4.c","content":"content-test2"
      },
      {"fileid":"5","filename":"a5.c","content":"content-test2"
      },
      {"fileid":"6","filename":"a8.c","content":"content-test2"
      },
      {"fileid":"7","filename":"a9.c","content":"content-test2"
      }]
    }
}

step5：完整代码、截图
文件目录结构：

vue关于mock的简单使用

完整代码

【main.js】
import vue from 'vue'
import app from './app.vue'

vue.config.productiontip = false

new vue({
  render: h => h(app),
}).$mount('#app')


【app.vue】
<template>
    <div>
        <button @click="login">login</button>
        <button @click="list">list</button>
        <button @click="post">post</button>
        <button @click="remove">remove</button>
    </div>
    <!--app -->
</template>

<script>
    import axios from 'axios'
    export default {
        methods: {
            login() {
                axios.get("/api/login").then(response => {
                    if (response.data) {
                        console.log(response.data)
                        alert(response.data.success + ',' + response.data.message)
                    }
                })
            },
            
            list() {
                axios.get("/api/list").then(response => {
                    if (response.data) {
                        console.log(response.data)
                        let list1 = response.data[0].id + ',' + response.data[0].sex + ',' + response.data[0].username
                        let list2 = response.data[1].id + ',' + response.data[1].sex + ',' + response.data[1].username
                        alert(list1 + '\n' + list2)
                    }
                })
            },
            
            post() {
                axios.post("/api/post").then(response => {
                    if (response.data) {
                        console.log(response.data)
                        alert(response.data.status + ',' + response.data.code)
                    }
                })
            },
            
            remove() {
                axios.delete("/api/remove").then(response => {
                    if (response.data) {
                        console.log(response.data)
                        alert(response.data.status + ',' + response.data.message)
                    }
                })
            }
        }
    }
</script>

<style>

</style>



【data.json】
{
    "login": {
      "success": "true",
      "message": "登录成功"
    },
    "filelist": {
      "success":"true",
      "list":[
      {"fileid":"1","filename":"a1.c","content":"content-test1"
      },
      {"fileid":"2","filename":"a2.c","content":"content-test2"
      },
      {"fileid":"3","filename":"a3.c","content":"content-test2"
      },
      {"fileid":"4","filename":"a4.c","content":"content-test2"
      },
      {"fileid":"5","filename":"a5.c","content":"content-test2"
      },
      {"fileid":"6","filename":"a8.c","content":"content-test2"
      },
      {"fileid":"7","filename":"a9.c","content":"content-test2"
      }]
    }
}
  
  
  
【vue.config.js】
const path = require('path')
const apimocker = require('webpack-api-mocker')

module.exports = {
  devserver: {
    before(app) {
        // path.resolve 引入mock
      apimocker(app, path.resolve('./mocker/index.js'), {
        proxy: {
          '/repos/*': 'https://api.github.com/',
        },
        changehost: true
      })
    }
  }
}



【/mocker/index.js】
// 使用 require 引入json文件，可以直接访问数据
const appdata = require('../data.json')

const proxy = {
    'get /api/login': {
        success: appdata.login.success,
        message: appdata.login.message
    },
    'get /api/list': [{
            id: 1,
            username: 'kenny',
            sex: 6
        },
        {
            id: 2,
            username: 'kenny',
            sex: 6
        }
    ],
    'post /api/post': (req, res) => {
        res.send({
            status: 'error',
            code: 403
        });
    },
    'delete /api/remove': (req, res) => {
        res.send({
            status: 'ok',
            message: '删除成功！'
        });
    }
}
module.exports = proxy

运行截图：
点击 login 按钮

vue关于mock的简单使用

点击 list 按钮

vue关于mock的简单使用

点击 post 按钮

vue关于mock的简单使用

点击remove按钮

vue关于mock的简单使用

上一篇： python基础教程：dir()和__dict__属性的区别

下一篇： Linux 命令之 chmod

vue关于mock的简单使用

一、mock

1、简介

2、vue直接使用mock

3、vue项目中使用webpack-api-mocker进行mock

vue2使用keep-alive缓存多层列表页的方法

vue-rx的初步使用教程

简单谈谈Docker镜像的使用方法

Vue 组件封装并使用 NPM 发布的教程

vue项目中使用vue-i18n报错的解决方法

JavaScript之实现一个简单的Vue示例

C#使用Mutex简单实现程序单实例运行的方法

简单介绍Python2.x版本中的cmp()方法的使用

C#中BitConverter.ToUInt16()和BitConverter.ToString()的简单使用

灵活使用console让js调试更简单的方法步骤

vue关于mock的简单使用

一、mock

1、简介

2、vue直接使用mock

3、vue项目中使用webpack-api-mocker进行mock

vue2使用keep-alive缓存多层列表页的方法

vue-rx的初步使用教程

简单谈谈Docker镜像的使用方法

Vue 组件封装 并使用 NPM 发布的教程

vue项目中使用vue-i18n报错的解决方法

JavaScript之实现一个简单的Vue示例

C#使用Mutex简单实现程序单实例运行的方法

简单介绍Python2.x版本中的cmp()方法的使用

C#中BitConverter.ToUInt16()和BitConverter.ToString()的简单使用

灵活使用console让js调试更简单的方法步骤

Vue 组件封装并使用 NPM 发布的教程