带你轻松掌握mockjs,结合vue-cli高效开发企业项目
2020-06-28 05:03
267 查看
为什么使用mockJs(任何框架都可使用,不仅限于vue)
在工作开发中,如果后端接口还未开发完成,难道我们就只能写静态页面了吗?所以前端为了不影响工作效率,我们自己手动模拟后端接口返回随机数据。
采用json数据模拟,生成数据比较繁琐,也比较有局限性,没办法达到增删改查
采用mockJs进行模拟数据,可以模拟各种场景(get、post)生成接口,并且随机生成所需数据,还可以对数据进行增删改查
使用mockjs
1.首先我们通过vue-cli搭建基本项目
2.在项目中安装mock
npm i mockjs
3.新建mock.js在项目中引入mock文件
import Mock from "mockjs"
4.将创建的mock.js在main.js中导入这样就能使用mockjs了
mock语法
1.生成指定次数的字符串
import Mock from "mockjs"const data = Mock.mock({ "string|4":"哎呦"//这样打印会生成四个哎呦如果要指定范围把4改成几到几即可 })
生成文本
const data=Mock.mock({ s:"@cword"//生成一个随机字符串 str:"@cword(1)"//生成一个指定长度的字符串 string:"@cword(1,15)"//生成一个指定范围的字符串 })
生成标题和句子
const data=Mock.mock({ title:"@ctitle", sentence:"@csentence" //如果要指定长度和范围可按生成文本的操作即可 })
生成段落
const data = Mock.mock({ content: '@cparagraph()' })
生成数字
const data = Mock.mock({ "number|80": 1,//生成指定数字 "number|1-999": 1//生成范围内的数字 })
生成增量id
const data = Mock.mock({ id: '@increment()' })
随机生成姓名-地址-身份证号
const data = Mock.mock({ name: '@cname()', idCard: '@id()', address: '@city(true)' })
随机生成图片
const data = Mock.mock({ image_url: '@image("300x250","#ff0000","#fff","gif","坤坤")' })
-
参数1:图片大小
[ '300x250', '250x250', '240x400', '336x280', '180x150', '720x300', '468x60', '234x60', '88x31', '120x90', '120x60', '120x240', '125x125', '728x90', '160x600', '120x600', '300x600' ]
-
参数2:图片背景色
-
参数3:图片前景色
-
参数4:图片格式
-
参数5:图片文字
生成时间
const data = Mock.mock({ date: '@date(yyyy-MM-dd hh:mm:ss)' })
生成数组
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: '添加新闻列表数据成功' } })
以上就是mockjs的基本语法,不明白的可以私信我,能带你详细解答
相关文章推荐
- 轻松上手企业开发,vue项目优化配置webpack不同的多入口文件
- 前端开发手机端调用开发者工具(控制台信息,报错,接口信息等),ios安卓通用vue-cli项目中mockjs和vConsole的使用
- Django结合vue同步开发项目配置
- vue项目使用cli手脚架搭建的时候要开发的步骤和注意事项
- vue-cli生成的项目配置开发和生产环境不同的接口
- 如何Vue-cli开始使用在Vue.js项目中启动TDD(测试驱动开发)
- vue-cli webpack模板 Vue项目本地开发 nodejs反向代理 及与nginx反向代理的区别
- vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址
- html5 localstorage结合vue开发本地记事本项目源码
- vue-cli开发(一)项目开始
- vue-cli脚手架开发项目问题——Cannot find module ‘stylus’
- 如何搭建vue-cli脚手架开发vue项目
- vue结合vue-cli项目搭建
- vue项目开发(一) 利用vue-cli+webpack构建一个vue项目
- vue实战开发002:局域网中访问vue-cli项目
- 前端开发工具、vue-cli创建项目、webpack理解
- 前端框架Vue(15)——vue-cli 仿网易云音乐 Demo,环境搭建到开发 Vue 全家桶练手项目
- spring boot + vue cli 3 整合开发(附带简单的项目实战)
- Vue项目开发前的准备工作,node的安装,vue-cli的安装
- 用vue-cli构建了项目之后在webstorm开发,用npm run dev跑本地服务,经常修改之后在浏览器刷新没反应,偶尔才会有刷新,需要重新跑一遍npm run dev才会更新,这是怎么回事呢?