模拟数据之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.$axios.post("/api/login",{
    
					name:"tryyourbest",
					password:"try123"
				}).then(res=>{
    
					console.log(res)
				}).catch(err=>{
    
					console.log(err)
				})
			}
		}
	}
</script>

1.3 模拟数据如图所示

由此可知，模拟的数据完全可用，下面将进行更加详细的数据模拟。
1.3获取评论接口数据
index文件操作

Mock.mock(/\/api\/feed/,"get",function(config){
    
	var po=config.url.indexOf("?");
	if(po!=-1){
    
		var query=config.url.slice(po+1);
		var arr=query.split("&");
		var search={
    };
		arr.forEach(item=>{
    
			var temp=item.split("=");
			search[temp[0]]=temp[1]
		})
	}
	return Mock.mock({
    
		"code":0,
		"data|4":[{
    
			msg:"@cparagraph(2,3)",//段落2到3行
			name:"@cname",
			date:"@dateTime",
			id:"@id"
		}],
		"pagnation":{
    
			"total|10-25":1,
			"size":4,
			"pageTotal|4-10":1,
			"current":search.current
		}
	})
})

App.vue操作

getfeed(){
    
		this.$axios.get("/api/feed?current=" +this.current)
		.then(res=>{
    
			this.feedlist=res.data.data;
			this.pagnation=res.data.pagnation;
			console.log(res)
		}).catch(err=>{
    
			console.log(err)
		})
	}

模拟数据展示

常用的mock语法与测试函数以及效果图如下所示

Mock.mock("/api/test", Mock.mock({
    
	"age|100-200": 1, //100-200的随机数
	"parice|10-50.2-5": 1, //10-50随机数 小数点2-5位
	"live|1": true, //随机true/false
	"start|1-5": "", //把字符串重复1-5次
	"friend|1": ["小红", "小兰", "小绿", "小明", "小白"], //1是挑一个大于1是重复次数
	"props|1-3": {
    
		name: "mumu",
		age: "12",
		leg: 2,
		job: "要饭的",
		eye: 2
	},
	"tel": /13\d{9}/,
	"name": "@cname",
	"des": function() {
    
		return `大家好,我的名字是${
      this.name},今年${
      this.age}`
	},
	"data|10": [{
    
		"ID": "@id", //id
		"id|+1": 1024,
		date: "@date",
		time: "@time",
		name: "@cname",
		dateTime: "@dateTime",
		pic: "@dataImage('200x100','图示')",
		description: "@cparagraph(1,3)", //中文段落1-3行
		title: "@ctitle(8,12)", //中文标题8-12字
		url: /http:\/\/www\.[a-z]{2,8}\.(com|cn|org)/,
		id: "@ip", //ip
		address: "@county(true)", //省市区地址
		email: /[a-z]{3,8}@(126|qq|1630)\.(com|cn|org)/
	}]
}))

测试函数

test() {
    
		this.$axios.get("/api/test").then(res => {
    
			console.log(res.data)
			this.list = res.data.data
		})
	}

效果图：