mock.js模拟商城活动的数据
生成随机数据，拦截 Ajax 请求
mock的数据只会在前台玩耍，不会向后台发起请求。
本项目搭配完整的后端，这个只是用来测试玩玩。
安装完插件，使用步骤：
- 创建mock文件夹
- 准备json数据，在该文件夹中创建相应的json文件
- 把mock数据需要的图片放置到public文件夹中，public文件夹在打包是，会把相应的资源原封不动打包到dist文件夹中
- 创建mockServer.js通过mockjs插件模拟实现数据
- mockServer.js文件在main.js文件中引入
- 封装对应的mockRequest.js，url为mockServer的地址
- 建立对应的api仓库和store仓库
- 在Vue组件中派发与获取
在activity.json中随便写点数据：
[{ "id": "001", "title": "故易集市", "desc": "折扣好物，低价捡漏...", "img": "/default/default.jpg"}, { "id": "002", "title": "旧物换礼", "desc": "用9kg衣服换了...", "img": "/default/default.jpg"}, { "id": "003", "title": "高价回收", "desc": "免沟通，免纠纷...", "img": "/default/default.jpg"}, { "id": "004", "title": "公益活动", "desc": "每单捐赠1元，帮助山区的孩子走出大山...", "img": "/default/default.jpg"}]
建立mockServer.js服务：
// 引入mockjs模块
import Mock from 'mockjs';
// 引入JSON数据，JSON数据没有对外暴露，但可以引入
// webpack默认对外暴露的：图片、JSON数据格式
import activity from './activity.json';
// mock数据
// mock(请求地址，请求数据)
Mock.mock("/mock/activity", { code: 200, data: activity });
注意要把图片资源放到这里：
建立专属的mockRequest.js，相比原来的request.js，把原来配置的基础路径改一下：
导包...
// 利用axios方法create，创建一个axois的实例
const request = axios.create({
// 配置基础路径
baseURL: "/mock",
// 配置请求超时的时间10s
timeout: 10000
});
请求拦截器，响应拦截器...
api管理模块我是再开了一个，activity.js：
/**
* 活动信息相关的接口模块
*/
import mockRequests from './mockRequest';
// 获取活动列表的数据
export const reqActivityList = () => mockRequests.get('/activity');
activity.jsvuex数据仓库(store)，一样的套路：
// 活动信息相关的数据小仓库
import { reqActivityList } from "@/api/activity"
const state = {
activityList: []
}
const mutations = {
GETACTIVITYLIST(state, activityList) {
state.activityList = activityList
}
}
const actions = {
// 获取虚拟的活动列表数据
async getActivityList({ commit }) {
let res = await reqActivityList()
if (res.code === 200) {
commit('GETACTIVITYLIST', res.data);
}
}
}
const getters = {
}
export default {
state,
mutations,
actions,
getters
}
最后在对应组件/页面中派发并获取：
...
computed:{
...mapState({
activityList: state => state.activity.activityList
})
},
mounted(){
this.$store.dispatch('getActivityList');
},
...
效果如下，顺便简单敷衍一下样式：
