vue外卖十四：商家详情：用mockjs模拟api数据接口
2024-06-04 08:27:39
1）安装mockjs
官网：mockjs.com
文档：https://github.com/nuysoft/Mock/wiki/Getting-Started
http://mockjs.com/examples.html
cnpm install mockjs --save
2）创建目录/文件
2.1使用mockjs形成数据src/mock/mockServer.js
/*
使用mockjs提供mock数据接口*/
import Mock from 'mockjs'
import data from './data.json' //引入数据// 返回goods的接口
Mock.mock('/goods', {code:0, data: data.goods})
// 返回ratings的接口
Mock.mock('/ratings', {code:0, data: data.ratings})
// 返回info的接口
Mock.mock('/info', {code:0, data: data.info})// export default ??? 不需要向外暴露任何数据, 只需要保存能执行即可
2.2引入，用于打包编译src/main.js
// 入口文件
import Vue from 'vue'
import App from './App'
import router from './router/index.js'
import store from './store' //引入vuex管理状态
import {Button} from 'mint-ui'
import './mock/mockServer' // 【1】加载mockServer即可
// 注册全局组件
Vue.component(Button.name, Button)// 2.0新版本es6写法
new Vue({el: '#app',render: h => h(App),router,store
})/*//1.0版写法new Vue({el: '#app',components: { App },template: '<App/>'
})*/
2.3mock/data.json
据页面设计稿写出数据结构，一层示例
{"info": {"name": "嘉禾一品（温都水城）","description": "硅谷专送","deliveryTime": 28,"score": 4.2,"serviceScore": 4.1,"foodScore": 4.3,"rankRate": 69.2,"minPrice": 20,"deliveryPrice": 4,"ratingCount": 24,"sellCount": 90,"distance": "1000m","bulletin": "是以粥为特色的中式营养快餐，自2004年10月18日创立“嘉和一品”品牌至今，不断优化管理，积极创新，立足于“贴近百姓生活，服务千家万户”","supports": [{"type": 0,"name": "首单","content": "新用户下单立减17元(不与其它活动同享)"},],"category": "包子粥店, 简餐","phone": "18501083744","address": "北京市丰台区太平桥44号","workTime": "09:35-24:00"},"goods": [{"name": "优惠","icon": "https://fuss10.elemecdn.com/b/91/8cf4f67e0e8223931cd595dc932fepng.png","foods": [{"name": "南瓜粥","price": 9,"oldPrice": "","description": "甜粥","sellCount": 91,"rating": 100,"info": "主、辅料:水、大米、南瓜、冰糖等","ratings": [{"username": "3******c","rateTime": 1469281964000,"rateType": 0,"text": "很喜欢的粥","avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"},]]"ratings": [{"username": "3******c","rateTime": 1469281964000,"deliveryTime": 30,"score": 5,"rateType": 0,"text": "不错,粥很好喝,我经常吃这一家,非常赞,以后也会常来吃,强烈推荐.","avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png","recommend": ["南瓜粥","皮蛋瘦肉粥","扁豆焖面","娃娃菜炖豆腐","牛肉馅饼"]},]
}
3）ajax请求 api/index.js
//获取mockjs模拟的后端商家数据
export const reqShopGoods=()=>ajax('/shop_goods') //食物列表 不加api，此请求不从代理走
export const reqShopRating=()=>ajax('/shop_rating') //评价列表
export const reqShopInfo=()=>ajax('/shop_info') //商家信息
4）vuex状态相关store/
4.0 state.js 状态保存
export default{...略过goods: [], // 【1】商品列表ratings: [], // 【2】商家评价列表info: {}, // 【3】商家信息
}
4.1 mutation-types.js 改变类型-方便维护
export const RECEIVE_GOODS = 'receive_goods' // 【1】接收商品数组
export const RECEIVE_RATINGS = 'receive_ratings' // 【2】接收商家评价数组
export const RECEIVE_INFO = 'receive_info' // 【3】接收商家信息
4.3 mutations.js 改变状态
import {RECEIVE_ADDRESS,RECEIVE_CATEGORYS,RECEIVE_SHOPS,RECEIVE_USER_INFO,RESET_USER_INFO,
//【1】商家相关以下3个RECEIVE_INFO,RECEIVE_RATINGS,RECEIVE_GOODS,
} from './mutation-types.js'export default{//中括号为计算属性名es6语法：作用是动态的写出当前函数名，方便后期维护...//【2】商家相关以下三个[RECEIVE_INFO](state,{info}){state.info=info},[RECEIVE_RATINGS](state,{rating}){state.rating=rating},[RECEIVE_GOODS](state,{goods}){state.goods=goods}
}4.4 actions.js 触发mutation
知识点：action的 callback参数
async getShopRatings({commit}, callback) {
…
// 【新知识点】数据更新了, 通知一下组件
callback && callback()
},
// 控制mutations
import {RECEIVE_ADDRESS,RECEIVE_CATEGORYS,RECEIVE_SHOPS,RECEIVE_USER_INFO,RESET_USER_INFO, //退出mutaion-typesRECEIVE_INFO,//【1】以下3个商家相关RECEIVE_RATINGS,RECEIVE_GOODS,
} from './mutation-types.js'
import {reqAddress,reqFoodCategorys,reqShops,reqUserInfo, //获取session的用户信息reqLogout, //退出登录reqShopGoods,// 【2】以下3个商家相关请求reqShopRating,reqShopInfo,
} from '../api/index.js'export default{//获取地址用于改变状态async getAddress({commit,state}){//构造纬,经度参数用于请求const geohash=state.latitude+','+state.longitudeconst result=await reqAddress(geohash)// 提交一个状态改变if(result.code===0){const address=result.data//提交mutation，commit(对象名,对象值)commit(RECEIVE_ADDRESS,{address})}},...略过//【3】商家信息async getShopInfo({commit}){const result=await reqShopInfo()if(result.code==0){ const info=result.datacommit(RECEIVE_INFO,{info})}},// 【4】异步获取商家评价列表async getShopRatings({commit}, callback) {const result = await reqShopRatings()if (result.code === 0) {const ratings = result.datacommit(RECEIVE_RATINGS, {ratings})// 【新知识点】数据更新了, 通知一下组件callback && callback()}},//【5】 异步获取商家商品列表async getShopGoods({commit}, callback) {const result = await reqShopGoods()if (result.code === 0) {const goods = result.datacommit(RECEIVE_GOODS, {goods})// 数据更新了, 通知一下组件callback && callback()}},}5）src/pages/shop/shop.vue 用vuex的action发起ajax请求并触发mutation，再把数据放入state中
<script>import ShopHeader from '../../components/ShopHeader/index.vue'export default{mounted(){//【1】调用action发ajax请求，并放入vuex//getShopInfo源自actions.js函数名this.$store.dispatch('getShopInfo')},components:{...略过}}
</script>
效果：http://localhost:8080/#/shop/goods
查看vue开发者插件中info信息：
vue外卖十四：商家详情：用mockjs模拟api数据接口相关推荐
- vue外卖二十：商家详情-评价列表：评价列表接口模拟-vuex获取完整数据链流程、滑动better-scroll
一.评价列表接口模拟-获取完整数据链流程 1)数据模拟mockjs src/mock/mockServer.js /* 使用mockjs提供mock数据接口*/ import Mock from 'm ...
- Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城（SSM前后端分离项目）十四（Spring Data Elasticsearch，将数据添加到索引库）
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)十四(Spring Data Elasticsearch,将数据添加到索引库) 一.创建El ...
- 第十四届蓝桥杯校内模拟赛第二期-Java个人题解（仅供参考）
刚刚结束第十四届蓝桥杯校内模拟赛第二期,在这记录下自己的代码 不保证正确! 不保证正确! 不保证正确! 有问题一起改正!! 题解 2048 代码: package _14届模拟2;public cla ...
- 第十四届蓝桥杯校内模拟赛第一期——Python
第十四届蓝桥杯校内模拟赛第一期--Python 文章目录 第十四届蓝桥杯校内模拟赛第一期--Python 1.二进制位数 问题描述 参考答案 扩展 2. 晨跑 问题描述 参考答案 扩展 3. 调和级数 ...
- STM32G431-基于HAL库(第十四届蓝桥杯嵌入式模拟题2)
文章目录 前言 一.CubeMX配置(第十四届模拟题2完整版) 二.代码相关定义.声明 1.函数声明 2.宏定义 3.变量定义 三.主要函数 1.按键扫描 2.各参数控制 3.LCD显示 4.输出信号 ...
- Vue移动端框架Mint UI教程-调用模拟json数据(五)
1:安装 npm install vue-resource 2:打开main.js 注册 import VueResource from 'vue-resource' Vue.use(VueResou ...
- vue外卖十九：商家详情-底部购物车组件，购物车相关vuex状态设计、相关计算、清空购物车+滚动购物车
一.购物车基础 1)购物车状态设计cartFoods+mutation store/state.js // 所有要管理的状态数据:从页面需求分析出来,最好和api/index.js里的命名相同 exp ...
- 【Vue】032-尚硅谷-尚品汇-mockjs模拟数据---20230111
032-尚硅谷-尚品汇-mockjs模拟数据 官网链接 第一步:安装依赖包mockjs 安装mockjs `npm install --save mockjs` 第二步:在src文件夹下创建一个文件夹 ...
- 二十四、深入Java抽象类，抽象方法和接口
@Author:Runsen @Date:2020/5/31 作者介绍:Runsen目前大三下学期,专业化学工程与工艺,大学沉迷日语,Python, Java和一系列数据分析软件.导致翘课严重,专业排 ...
最新文章
- Android入门第八篇之GridView(九宫图)
- Asp.net如何截屏
- 学习Java中遇到的问题积累_1
- 请编写程序编写前n个整数的全排列_26道基础算法题（请查收）
- owncloud8 php,owncloud-8.2.3
- word表格转换成html,delphi将word表格转换成html_取得Word 表格中的数据
- OpenCV——读取图片的数据类型必须是int8类型吗？
- php5 相关软件下载
- iPhone6分辨率
- Excel数据透视表中的值计算
- PetShop的系统架构设计
- QRSpeed QQ机器人 词库编写教学
- UE4启动GameActivity
- ZedGraph类库之基本教程篇
- 0402 0603 0805 1206焊盘封装尺寸
- 玩游戏显示服务器不稳定,FPS不稳定是什么原因？玩游戏FPS低怎么办？
- python的方向_Python有哪些就业方向
- 神经网络的激活函数总结
- IDEA 源根之外的Java文件
- 一个好的预发布环境应该是怎么样的？