前端 mockjs模拟数据

mockjs文档： Mock.js

1.下载mockjs

npm install mockjs --save  //开发环境

2.在src下新建mock文件并导入index.js

import Mock from "mockjs";const { newsList } = Mock.mock({"newsList|75": [{id: "@increment",title: "@ctitle()",content: "@cparagraph(5,10)",img_url: "@image('50*50','#FF83FA','#FCFCFC','png','mono')",add_time: "@date(yyyy-MM-dd hh:mm:ss)",},],
});console.log(newsList);
var getQuery = (url, name) => {console.log(url, name);const index = url.indexOf("?");if (index !== -1) {const queryStrArr = url.substr(index + 1).split("&");for (var i = 0; i < queryStrArr.length; i++) {const itemArr = queryStrArr[i].split("=");console.log(itemArr);if (itemArr[0] === name) {return itemArr[1];}}}return null;
};// 定义获取新闻列表的数据
// /api/get/news?pageinde1&pagesize=10
Mock.mock(/\/api\/get\/news/, "get", (options) => {// 获取传递参数pageindex，pagesizeconst pageindex = getQuery(options.url, "pageindex");const pagesize = getQuery(options.url, "pagesize");console.log(pageindex);console.log(pagesize);const start = (pageindex - 1) * pagesize;const end = pagesize * pageindex;const totalPage = Math.ceil(newsList.length / pagesize);//  pageindex:1 pagesize:10 返回0-9条数据  2-10-（10-19） 3-10（20-29）// 数据的起始位置：（pageindex-1）*pagesize 结束位置：pageindex*pagesizeconst list = pageindex > totalPage ? [] : newsList.slice(start, end);return {status: 200,message: "获取新闻列表成功",list: list,total: totalPage,};
});// 定义添加新闻的数据
Mock.mock("/api/add/news", "post", (options) => {const body = JSON.parse(options.body);console.log(body);newsList.push(Mock.mock({id: "@increment",title: body.title,content: body.content,img_url: "@image('50*50','#FF83FA','#FCFCFC','png','mono')",add_time: "@date(yyyy-MM-dd hh:mm:ss)",}));return {status: 200,message: "添加成功",list: newsList,total: newsList.length,};
});// 定义删除新闻
Mock.mock("/api/delete/news", "post", (options) => {console.log(options);const body = JSON.parse(options.body);console.log(body);const index = newsList.findIndex((item) => {return item.id === body.id;});newsList.splice(index, 1);console.log(index);return {status: 200,message: "添加成功",list: newsList,total: newsList.length,};
});
console.log(Mock);

3.在main.js中new Vue实例前导入并判断开发环境下的 mockjs


if(process.env.NODE_ENV === 'development') {require('./mock/index.js')
}

4.在页面中使用mockjs数据

<template><div><!-- 搜索 --><div class="add"><input type="text" v-model="title" placeholder="输入标题" /><input type="text" v-model="content" placeholder="输入内容" /><button @click="add">添加</button></div><!--  表格--><div class="news_list"><table><tr><th>图片</th><th>标题</th><th>内容</th><th>时间</th><th>操作</th></tr><tr v-for="item in list" :key="item.id"><td><img :src="item.img_url" alt="" /></td><td>{{ item.title }}</td><td>{{ item.content }}</td><td>{{ item.add_time }}</td><td><button class="remove" @click="remove(item.id)">删除</button></td></tr></table></div><!-- 上下页 --><div class="pages"><button @click="prevPage">上一页</button><button @click="nextPage">下一页</button></div></div>
</template><script>
import axios from "axios";
export default {data() {return {title: "",content: "",list: [],pageindex: 1,title: "",content: "",};},methods: {add() {// if (this.title.trim() === "" || this.content.trim() === "")//   return alert("请添加那些新闻标题和内容");// console.log(this.title, this.content);axios.post("/api/add/news", {title: this.title,content: this.content,}).then((res) => {console.log(res);});},//获取新闻列表数据getNewsList() {axios.get("/api/get/news", {params: {pageindex: this.pageindex,pagesize: 10,},}).then((res) => {console.log(res);this.list = res.data.list;});},nextPage() {this.pageindex++;this.getNewsList();},prevPage() {this.pageindex--;this.getNewsList();},// 删除新闻remove(id) {// console.log(id);axios.post("/api/delete/news", {id,}).then((res) => {console.log(res);});},},created() {this.getNewsList();},mounted() {},
};
</script><style>
.add input {border-radius: 5px;border: none;outline: none;border: 1px solid #999;padding: 5px;margin-right: 5px;
}
button {width: 100px;height: 30px;background: #409eff;color: none;outline: none;border-radius: 5px;margin-left: 5px;cursor: pointer;border: 0;color: #fff;
}
.news_list {width: 1220px;height: 495px;overflow-y: scroll;overflow-x: hidden;margin: 10px;
}
table {border-collapse: collapse;height: 495px;overflow-y: scroll;overflow-x: hidden;margin: 10px;border: 1px solid rgb(94, 92, 92);
}
table th {font-size: 16px;height: 30px;width: 224px;font-weight: normal;border: 1px solid rgb(94, 92, 92);
}
table td {font-size: 12px;padding: 5px;border: 1px solid rgb(94, 92, 92);
}
table td:nth-child(4) {width: 150px;
}
table td:nth-child(2) {min-width: 100px;
}
table img {width: 80px;height: 80px;
}
table .remove {background: #f56c6c;
}
</style>

扩展

mockjs一些API：

mockjs
使用mockjs
项目安装mocknpm install mockjs
项目中新建mock文件//引入mock模块
import Mock from 'mockjs'
将mock文件在main.js中导入import Vue from 'vue'
import App FROM './App.vue'
import './mock/index.js'Vue.config.productionTip = falsenew Vue({render:h => h(App),
}).$mount('#app')
mock语法
生成字符串
生成指定次数字符串
import Mock from 'mockjs'
const data = Mock.mock({
"string|4":"哈哈"
})
生成指定范围长度字符串
const data = Mock.mock({
"string|1-8":"哈哈"
})
生成文本
生成一个随机字符串
const data = Mock.mock({"string":"@cword"
})
生成指定长度和范围
const data = Mock.mock({string:"@cword(1)"str :"@cword(10,15)"
})
生成标题和句子
生成标题和句子
const data = Mock.mock({title:"@ctitle(8)"sentence:"@csentence"
})
生成指定长度的标题和句子
const data = Mock.mock({title:"@ctitle(8)"sentence:"@csentence(50)"
})
生成指定范围的
const data = Mock.mock({title:"@ctitle(5,8)"sentence:"@csentence(50,100)"
})
生成段落
随机生成段落
const data = Mock.mock({content:"@cparagraph()"
})
生成数字
生成指定数字
const data = Mock.mock({"number|80":1
})
生成范围数字
const data = Mock.mock({"number|1-99":1
})
生成自增id
随机生成标识
const data = Mock.mock({id:"@increment"
})
生成姓名-地址-身份证
随机生成姓名-地址-身份证
const data = Mock.mock({name:"@cname()"idCard:"@id()"address:"@city(true)"
})
随机生成图片
生成图片：@image（“300*200”，‘#ff0000','#fff','gif','坤坤'）
参数1：图片大小
['300*250','250*250','240*400','336*280''180*150','720*300','468*60','234*60''388*31','250*250','240*400','120*40''125*125','250*250','240*400','336*280'
]
参数2：图片背景色参数3：图片前景色参数4：图片格式参数5：图片文字生成时间
@Date
生成指定格式时间：@date(yyyy-MM-dd hh:mm:ss)
指定数组返回的参数指定长度：‘date|5’
指定范围:'data|5-10'
const data = Mock.mock({
'list|50-99':[{name:'@cname'address:'@city(true)'id:'@increment()'}  ]
})
mock拦截请求
定义get请求
Mock.mock('api/get/news','get',()=>{return{status:200,message:"获取数据成功"}
})
定义post请求
Mock.mock('api/post/news','post',()=>{return{status:200,message:"获取数据成功"}
})
实现新闻管理案例
获取数据
接口地址：：/api/get/news接口参数：pageindex：页码
pagesize:每页的条数
请求类型：get返回的数据：{status:200,message:"获取新闻列表成功",list:[{"id":1,"title":"解忧杂货店","content":"《解忧杂货店》是日本作家东野圭吾写作的长篇小说。2011年《小说野性时代》连载，于2012年3月由角川书店发行单行本","img_url":"http://t15.baidu.com/it/u=2090705107,20534764&fm=224&app=112&f=JPEG?w=500&h=500&s=61D0718656561FFFE504A51703000067","add_time":"1984-04-03 11:43:37"}],total:50}
}
添加新闻
接口地址：：/api/add/news接口参数：title：'标题'
content：内容
请求类型：post返回的数据：{status:200,message:"获取新闻列表成功",list:[{"id":1,"title":"解忧杂货店","content":"《解忧杂货店》是日本作家东野圭吾写作的长篇小说。2011年《小说野性时代》连载，于2012年3月由角川书店发行单行本","img_url":"http://t15.baidu.com/it/u=2090705107,20534764&fm=224&app=112&f=JPEG?w=500&h=500&s=61D0718656561FFFE504A51703000067","add_time":"1984-04-03 11:43:37"}],total:50}
}
删除新闻
接口地址：：/api/delete/news接口参数：id；新闻id
请求类型：post返回的数据：{status:200,message:"获取新闻列表成功",list:[{"id":1,"title":"解忧杂货店","content":"《解忧杂货店》是日本作家东野圭吾写作的长篇小说。2011年《小说野性时代》连载，于2012年3月由角川书店发行单行本","img_url":"http://t15.baidu.com/it/u=2090705107,20534764&fm=224&app=112&f=JPEG?w=500&h=500&s=61D0718656561FFFE504A51703000067","add_time":"1984-04-03 11:43:37"}],total:50}
}

前端 mockjs模拟数据相关推荐

mock模拟的数据能增删改查吗_如何在Vue中使用Mockjs模拟数据的增删查改
之前一直使用json-server在前端开发时,搭建本地数据接口测试,但有时又需要将做好的项目放于 github page上做项目演示.在本地时,json server很好使用,但一旦放在github ...
前端之模拟数据 - HackerVirus - 博客园
阅读目录玩转前端之模拟数据回到目录玩转前端之模拟数据博客园主页:http://www.cnblogs.com/handoing/ 是否还在为前端模拟数据头疼? 是否还在为后端返回数据格式较多内 ...
在vue-cli项目下简单使用mockjs模拟数据
为什么要用mockjs 实际开发中,前后端分离,前端需要后端的接口去完成页面的渲染,但是并不能等到后端成员写完接口再开始进行测试.大部分情况下,前后端需要同时进行开发.因此便需要mockjs制造随机数 ...
vue尚品汇商城项目-day03【vue插件-19.mockjs模拟数据（开发Home首页当中的ListContainer组件与Floor组件）】
文章目录 19.mockjs模拟数据(开发Home首页当中的ListContainer组件与Floor组件) 本人其他相关文章链接 19.mockjs模拟数据(开发Home首页当中的ListConta ...
react使用mockjs模拟数据
react使用mockjs模拟数据废话少说,直接开始: mockjs简介生成随机数据,拦截 Ajax 请求注意:只能使用axios,fetch请求无法拦截官网:http://mockjs.co ...
【MockJS】使用MockJS模拟数据（超级详细）
[MockJS]使用MockJS模拟数据 (超级详细) 文章目录 [MockJS]使用MockJS模拟数据 (超级详细) 2. MockJS 2.1 准备工作 2.2 语法规范数据模板定义规范 DT ...
【Vue】032-尚硅谷-尚品汇-mockjs模拟数据---20230111
032-尚硅谷-尚品汇-mockjs模拟数据官网链接第一步:安装依赖包mockjs 安装mockjs `npm install --save mockjs` 第二步:在src文件夹下创建一个文件夹 ...
vue实战-mockjs模拟数据
vue实战-mockjs模拟数据 1.在src目录下创建文件夹mock 2.将模拟的json格式的数据写入到文件夹中 banner.json [{"id": "1&quo ...
前端用Mockjs模拟数据
mockjs可以模拟数据,可以使我们更快的得到较为真实的数据,且可以拦截axios的接口调用,让我们的代码实现了调用接口的逻辑且得到模拟的数据,保存业务完整度. 使用步骤: 1.安装 npm i mo ...

前端 mockjs模拟数据

扩展

前端 mockjs模拟数据相关推荐

最新文章

热门文章