基于vue-cil搭建的简单Mock的学习

基于vue-cil搭建简单的mock.js数据的学习

1.前期准备

• 创建一个vue-cli项目（新建一个文件夹，然后cmd打开控制台）
• 注意：前提是已经安装好了vue-cli以及node.js,如果没有，建议先去安装一下。

2.创建第一个vue-cil项目

vue create 项目的名称

3.安装相关依赖配置

• 安装mockjs

$ npm install mockjs

4.在项目目录中新建一个mock文件夹

• 新建一个index.js文件，开始构建基本数据

import Mock from 'mockjs'

const data = Mock.mock({
   
  'name|1-4':'我要学Mock!!',
  string:'@cword(3)'
})

console.log(data);

5.在main.js中导入这个文件夹

import Vue from 'vue'
import App from './App.vue'
import '../mock'

//原型挂载axios请求方便发送
import axios from 'axios'
Vue.prototype.$http = axios

Vue.config.productionTip = false

new Vue({
   
  render: h => h(App),
}).$mount('#app')

然后，打开按F12控制台就可以看到效果啦！！

其他的mock规则请参考官网：Mock.js (mockjs.com)

示例效果详见：Mock.js (mockjs.com)

模拟前端接口请求Mock数据

1.安装axios

$ npm install axios

2.在mock下面的index.js中构建假的接口数据

简单的接口请求数据:

Mock.mock('/api/news','get',{
   
  status:200,
  msg:'获取数据成功',