在做前后分离的项目时候，比如制作VUE项目，很多时候后端没有提供接口，前端人员可以自己通过mock来造一个接口，返回数据。
安装mockjs和axios：
npm install mockjs -S
npm install axios -S （用于页面调用接口数据）
在src路径下创建mock文件夹，在里边创建MockServer.js
import Mock from 'mockjs'
Mock.mock('/login',"post",(req)=>{
console.log(JSON.parse(req.body));
if(JSON.parse(req.body).username == "admin"){
console.log("登录用户名正确");
}
return{
isLogin:true
}
})
main.js中引用mock.js
import { createApp } from 'vue'
// import './style.css'
import App from './components/Login.vue'
import axios from 'axios'
import './mock/mockServer.js'
const app=createApp(App)
app.config.globalProperties.$axios=axios
app.mount('#app')
在src/components路径下创建Login.vue文件
<template>
<div>
用户名:<input type="text" v-model="username">
密码:<input type="text" v-model="password">
<button @click="login">登录</button>
</div>
</template>
<script>
import request from '../axios/request.js'
export default {
data(){
return{
username:'admin',
password:123
}
},
methods:{
login(){
request({url:"/login",method:"post",data:{username:this.username,password:this.password}})
.then((resp)=>{
console.log(resp.data.isLogin);
})
}
}
}
</script>
<style lang="scss" scoped>
</style>
使用新建终端运行 npm run dev
实现效果图：
