vue实战-mockjs模拟数据
vue实战-mockjs模拟数据
1.在src目录下创建文件夹mock
2.将模拟的json格式的数据写入到文件夹中
banner.json
[
{
"id": "1",
"imgUrl": "/images/banner1.jpg"
},
{
"id": "2",
"imgUrl": "/images/banner2.jpg"
},
{
"id": "3",
"imgUrl": "/images/banner3.jpg"
},
{
"id": "4",
"imgUrl": "/images/banner4.jpg"
}
]
floor.json
[
{
"id": "001",
"name": "家用电器",
"keywords": [
"节能补贴",
"4K电视",
"空气净化器",
"IH电饭煲",
"滚筒洗衣机",
"电热水器"
],
"imgUrl": "/images/floor-1-1.png",
"navList": [
{
"url": "#",
"text": "热门"
},
{
"url": "#",
"text": "大家电"
},
{
"url": "#",
"text": "生活电器"
},
{
"url": "#",
"text": "厨房电器"
},
{
"url": "#",
"text": "应季电器"
},
{
"url": "#",
"text": "空气/净水"
},
{
"url": "#",
"text": "高端电器"
}
],
"carouselList": [
{
"id": "0011",
"imgUrl": "/images/floor-1-b01.png"
},
{
"id": "0012",
"imgUrl": "/images/floor-1-b02.png"
},
{
"id": "0013",
"imgUrl": "/images/floor-1-b03.png"
}
],
"recommendList": [
"/images/floor-1-2.png",
"/images/floor-1-3.png",
"/images/floor-1-5.png",
"/images/floor-1-6.png"
],
"bigImg": "/images/floor-1-4.png"
},
{
"id": "002",
"name": "手机通讯",
"keywords": [
"节能补贴2",
"4K电视2",
"空气净化器2",
"IH电饭煲2",
"滚筒洗衣机2",
"电热水器2"
],
"imgUrl": "/images/floor-1-1.png",
"navList": [
{
"url": "#",
"text": "热门2"
},
{
"url": "#",
"text": "大家电2"
},
{
"url": "#",
"text": "生活电器2"
},
{
"url": "#",
"text": "厨房电器2"
},
{
"url": "#",
"text": "应季电器2"
},
{
"url": "#",
"text": "空气/净水2"
},
{
"url": "#",
"text": "高端电器2"
}
],
"carouselList": [
{
"id": "0011",
"imgUrl": "/images/floor-1-b01.png"
},
{
"id": "0012",
"imgUrl": "/images/floor-1-b02.png"
},
{
"id": "0013",
"imgUrl": "/images/floor-1-b03.png"
}
],
"recommendList": [
"/images/floor-1-2.png",
"/images/floor-1-3.png",
"/images/floor-1-5.png",
"/images/floor-1-6.png"
],
"bigImg": "/images/floor-1-4.png"
}
]
3.将所需要的图片资源复制到public下的images文件夹下
4.在mock中创建mockServer.js用来模拟数据
mockServer.js
//引入mockjs插件
//这是对象,必须要大写
import Mock from 'mockjs'
//引入json文件
//webpack下默认暴露的文件格式是:图片和json数据格式,所以这里的json文件不需要暴露
import banner from './banner.json'
import floor from './floor.json'
//使用Mock对象中的mock方法模拟服务器返回的值
//传入两个参数:第一个参数是:请求地址,第二个参数是请求数据
Mock.mock('/mock/banner',{code:200,data:banner})
Mock.mock('/mock/floor',{code:200,data:floor})
5.需要在入口文件main.js中引入才能读取到
//引入mock
import "@/mock/mockServer"
6.实例:首页轮播图获取数据
1)在api文件夹中进行axios的二次封装
mockRequest.js
在创建axios实例时的默认api改成’/mock’
//axios的二次封装
import axios from 'axios'
//引入进度条插件
import nProgress from 'nprogress'
//引入进度条样式
import 'nprogress/nprogress.css'
//创建axios实例
const requests = axios.create({
baseURL:'/mock',
timeout:5000
})
//请求拦截器
requests.interceptors.request.use(config =>{
//config里面包含请求头head
//进度条开始
nProgress.start()
return config
})
// 响应拦截器
//成功与失败的回调函数
requests.interceptors.response.use((res)=>{
//进度条结束
nProgress.done()
return res.data
},(err)=>{
return err.message
})
export default requests
2)在接口管理文件中添加mock的数据接口
import mockRequests from './mockRequest'
//mock的接口
export const reqBannerList = () =>{
return mockRequests({url:'/banner',method:'get'})
}
export const reqFloorList = () =>{
return mockRequests({url:'/floor',method:'get'})
}
3)进行vuex的一系列操作
1.在轮播图的组件下挂载派发actions
mounted(){
this.$store.dispatch('getBannerList')
}
2.home下小仓库中的数据接收处理并进state
//home下的仓库
import { reqCategoryList,reqBannerList} from "@/api"
const state={
categoryList:[],
bannerList:[]
}
const mutations={
CATEGORYLIST(state,categoryList){
state.categoryList = categoryList
},
GETBANNERLIST(state,bannerList){
state.bannerList = bannerList
}
}
const actions={
//通过API里面的接口函数调用,向服务器发请求,获取服务器的数据
async categoryList({commit}){
let result = await reqCategoryList()
if(result.code == 200){
commit('CATEGORYLIST', result.data)
}
},
async getBannerList({commit}){
const result = await reqBannerList()
if(result.code == 200){
commit('GETBANNERLIST',result.data)
}
}
}
const getters={}
export default {
state,
mutations,
actions,
getters
}
3.将仓库中的值返回到页面组件中
利用计算mapState
import { mapState } from 'vuex';
computed:{
...mapState({
bannerList:state => state.home.bannerList
})
}