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})}

vue实战-mockjs模拟数据相关推荐

mock模拟的数据能增删改查吗_如何在Vue中使用Mockjs模拟数据的增删查改
之前一直使用json-server在前端开发时,搭建本地数据接口测试,但有时又需要将做好的项目放于 github page上做项目演示.在本地时,json server很好使用,但一旦放在github ...
【Vue】032-尚硅谷-尚品汇-mockjs模拟数据---20230111
032-尚硅谷-尚品汇-mockjs模拟数据官网链接第一步:安装依赖包mockjs 安装mockjs `npm install --save mockjs` 第二步:在src文件夹下创建一个文件夹 ...
vue尚品汇商城项目-day03【vue插件-19.mockjs模拟数据（开发Home首页当中的ListContainer组件与Floor组件）】
文章目录 19.mockjs模拟数据(开发Home首页当中的ListContainer组件与Floor组件) 本人其他相关文章链接 19.mockjs模拟数据(开发Home首页当中的ListConta ...
mock模拟接口测试 vue_Easy Mock以及Vue+Mock.js模拟数据
Easy Mock以及Vue+Mock.js模拟数据一.Mock.js简介 Mock.js是一个可以模拟后端数据,也可以模拟增删改查操作的js库基础语法规范数据模板中的每个属性由 3 部分构成: ...
在vue-cli项目下简单使用mockjs模拟数据
为什么要用mockjs 实际开发中,前后端分离,前端需要后端的接口去完成页面的渲染,但是并不能等到后端成员写完接口再开始进行测试.大部分情况下,前后端需要同时进行开发.因此便需要mockjs制造随机数 ...
【MockJS】使用MockJS模拟数据（超级详细）
[MockJS]使用MockJS模拟数据 (超级详细) 文章目录 [MockJS]使用MockJS模拟数据 (超级详细) 2. MockJS 2.1 准备工作 2.2 语法规范数据模板定义规范 DT ...
react使用mockjs模拟数据
react使用mockjs模拟数据废话少说,直接开始: mockjs简介生成随机数据,拦截 Ajax 请求注意:只能使用axios,fetch请求无法拦截官网:http://mockjs.co ...
使用mockjs模拟数据
一.安装简单粗暴 npm install mockjs 二.引入 CommonJS引入 let Mock = require('mockjs') let userInfo = Mock.mock({ ...
前端用Mockjs模拟数据
mockjs可以模拟数据,可以使我们更快的得到较为真实的数据,且可以拦截axios的接口调用,让我们的代码实现了调用接口的逻辑且得到模拟的数据,保存业务完整度. 使用步骤: 1.安装 npm i mo ...

vue实战-mockjs模拟数据

vue实战-mockjs模拟数据

1.在src目录下创建文件夹mock

2.将模拟的json格式的数据写入到文件夹中

banner.json

floor.json

3.将所需要的图片资源复制到public下的images文件夹下

4.在mock中创建mockServer.js用来模拟数据

mockServer.js

5.需要在入口文件main.js中引入才能读取到

6.实例：首页轮播图获取数据

1）在api文件夹中进行axios的二次封装

2）在接口管理文件中添加mock的数据接口

3）进行vuex的一系列操作

1.在轮播图的组件下挂载派发actions

2.home下小仓库中的数据接收处理并进state

3.将仓库中的值返回到页面组件中

vue实战-mockjs模拟数据相关推荐

最新文章

热门文章