1、vue直接使用mock
step1 : 安装 mockjs
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>
这是目录
image.png
完整代码
//【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>
image.png
