vue@3-cli使用mock.js模拟数据.........

第一步：项目路径下执行命令： npm install --save mockjs第二步：main.js统计目录简历mock文件夹 mock.jsconst Mock = require('mockjs')   //随机获取数据
Mock.mock('/api/users', (req, res) =>{ {return Mock.mock({"user|1-10": [{'name': '@cname','id|+1': 1, 'age|10-60': 0,    //10-60以内的随机数，0用来确定类型 'birthday': '@date("yyyy-MM-dd")',    //年月日'city': '@city(true)'    //中国城市}]})}})第三步：main.js引入import Vue from 'vue'
import App from '@/App.vue'
import router from '@/router/index.js'
import store from '@/store/store.js'
import "./static/bootstrap/dist/css/bootstrap.css";
// 引入Echarts
import echarts from 'echarts' //引入echarts
import iView from 'iview';
import axios from 'axios'
import 'iview/dist/styles/iview.css';    // 使用 CSS
import './plugins/iview.js'
require('./mock/mock.js')
Vue.use(iView);
Vue.prototype.$echarts = echarts //引入组件
Vue.prototype.$axios = axios
Vue.config.productionTip = false
new Vue({router,store,render: h => h(App)
}).$mount('#app')第四步： vue文件中调用
mounted(){this.$axios.get('/api/users').then(res=>{console.log(res)})},附上效果
0: {name: "何强", id: 1, age: 15, birthday: "2013-04-09", city: "四川省 资阳市"}
1: {name: "汤军", id: 2, age: 36, birthday: "1988-01-26", city: "海南省 三亚市"}
2: {name: "谭娟", id: 3, age: 22, birthday: "2013-10-25", city: "吉林省 白山市"}
3: {name: "杜秀英", id: 4, age: 55, birthday: "1973-06-16", city: "青海省 海北藏族自治州"}
4: {name: "黎霞", id: 5, age: 35, birthday: "2008-03-23", city: "海外 海外"}
5: {name: "金磊", id: 6, age: 35, birthday: "1971-12-05", city: "四川省 阿坝藏族羌族自治州"}

vue@3-cli使用mock.js模拟数据.........相关推荐

mock模拟接口测试 vue_Easy Mock以及Vue+Mock.js模拟数据
Easy Mock以及Vue+Mock.js模拟数据一.Mock.js简介 Mock.js是一个可以模拟后端数据,也可以模拟增删改查操作的js库基础语法规范数据模板中的每个属性由 3 部分构成: ...
dva ajax请求,dva框架使用mock.js模拟数据 + fetch请求数据
what DVA? Dva是基于Redux做了一层封装,对于React的state管理,有很多方案,我选择了轻量.简单的Dva. dva 可以很方便就使用mock.js进行数据的模拟. 只需要三步,即 ...
Vue Element Admin 使用mock模块模拟数据
Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发更加独立自主,不会被服务端的开发所阻塞. vue-elem ...
微信小程序——使用mock.js模拟数据
一,创建目录再根目录utils目录下面创建 WxMock.js文件和api.js文件二,WxMock.js WxMock.js下载地址:https://github.com/webx32/WxMo ...
Vue Element Admin 用mock模块模拟数据
步骤简单一在 src/api/charts 中添加接口 , 方法名为 getindexMock import request from '@/utils/request'export func ...
Vue+Mock.js模拟登录和表格的增删改查
有三类人不适合此篇文章: "喜欢站在道德制高点的圣母婊" -- 适合去教堂 "无理取闹的键盘侠" -- 国际新闻版块欢迎你去 "有一定基础但又喜欢逼逼 ...
mock模拟的数据能增删改查吗_Mock.js模拟数据，脱离后端独立开发，实现增删改查功能...
在目前容近对端手近对端手近对端手近对端手近我们的生产实际中,后端的接口往往是较晚才会出来,并且还要写接口文档,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于 ...
mock.js模拟假数据
mock使用方法很简单, 下面是简单的用法, 详细的用法可以看官方文档, 写的很清楚, 下面的代码直接拷贝到本地html文件, 双击打开即可生成你想要的数据 <!DOCTYPE html> ...
一、在vue项目中使用mock.js（详解）
步骤1.搭建测试项目步骤1.1创建项目命令: vue create mock-demo 步骤1.2安装依赖命令: #使用axios发送ajax cnpm install axios--save ...

vue@3-cli使用mock.js模拟数据.........

vue@3-cli使用mock.js模拟数据.........相关推荐

最新文章

热门文章