模拟数据之mockjs

模拟数据之mockjs

在前后端分离的今天，数据显得尤为重要，尤其在前端需要完成一个布局时，开发人员对于数据的需求就就会显得尤为重要强烈，但是现实是，前端开发人员往往没有那麽多的数据进行模拟，所以今天，我就给大家介绍一个非常有用的一个模拟数据接口之mockjs。

第一步：mockjs在项目中的安装

打开cmd 并在项目目录中输入以下代码(由于在开发时会依赖虚拟数据，所以采用开发依赖安装 -d)

npm i mockjs -d

第二步：在项目中操作

1.在mock下index.js的操作

1.1登录请求
main.js配置

import "./mock/index.js"
Vue.config.productionTip = false
import axios from "axios";
Vue.prototype.$axios=axios;
// axios.defaults.baseURL="http://dida100.com:8888";使用mock虚拟数据时需要注释掉
axios.interceptors.request.use(
function(config){
   
	config.headers.Authorization='Bearer '+localStorage.getItem("token")
	return config
})

index.js操作

Mock.mock("/api/login",{
   
	code:200,
	msg:"登录成功",
	user:{
   
		name:"tryyourbest",
		score:"1024",
		rank:10
	},
	token:"gsuaduioiaoyywqeuopchsa7er8238ehdhjkhs0"
})

1.2 App.vue 的操作如图所示

<script>
	export default{
   
		created() {
   
			this.login()
		},
		methods:{
   
			login(){
   
				this