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中引入才能读取到
//引入mockimport "@/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})}
