使用vue2+Vuex+Router重写饿了么点餐系统和vue插件简析

Posted 2023-03-30

参考技术A vue有自己的脚手架构建工具vue-cli,使用起来非常方便，使用webpack来集成各种开发便捷工具，比如：

代码热更新，修改代码之后网页无刷新改变，对前端开发来说非常的方便

PostCss，再也不用去管兼容性的问题了，只针对chrome写css代码，会自动编译生成支持多款浏览器的css代码

Eslint，统一代码风格，规避低级错误，对于有代码洁癖的人来说是绝对的好东西，不过有些地方的代码校验有时候也挺麻烦的-.-

bable，ES2015出来已经有一段时间了，但是不少浏览器还没有兼容ES6.有了bable，放心使用ES6语法，它会自动转义成ES5语法。

Stylus，类似于SASS/SCSS，但是可以不写和“：”，使用起来还是很方便的

…

除此之外，vue-cli已经使用node配置了一套本地服务器和安装命令等，本地运行和打包只需要一个命令就可以搞定，非常的方便

开发

vue非常好的融合了react的组件化思想和angular的指令思想。

一个vue的组件将html、CSS、JS代码写在一个文件里面，这样既方便编写，也方便管理和修改

Axios

在vue1.x的时候，vue的官方推荐HTTP请求工具是vue-resource，但是在vue2.0的时候将推荐工具改成了axios。

使用方式都差不多，但需要注意的是：接口返回的res并不直接是返回的数据，而是经过axios本身处理过的json对象。真正的数据在res.data里：

axios.get(url).then((res)=>

this.data = res.data

)

Vuex

vue提供了一个数据管理工具vuex，有点类似于angular中factory和service，可以进行数据上的通信。

比如存储一些公共变量或者是不同组件间的数据处理等。

这个有一些高级用法在这里不细说，想要了解的可以去官方文档看，有中文版本。

const store = new Vuex.Store(

state:

count: 0

,

mutations:

increment(state)

state.count++





)

Vue-Router

vue-router是vue的路由系统，可以用来创建单页应用。基本思想是在主页面中引入标签，然后定义路由，把router挂在到app上，然后把各个子页面渲染到view里面。使用起来还是很方便的，

跳转页面只需要

router.push('test')

获取元素节点

vue2.0废除了v-el指令，所有的节点指令修改为ref，然后通过ref来获取元素节点，如

<div ref="testHook">test</div>

...js code

this.$ref.testHook

组件间的通信

一。如果是和子组件通信，则使用ref就可以实现，如：

<test ref="testHook"></test>

...js code

this.$ref.testHook.add() //调用test子组件的add方法

二。使用emit来发送广播

vue2提供了一套广播机制，即一边发送广播，一边接收广播来执行相应操作。使用方法如下：

比如想要给test组件发送一个“相加”广播:

export default

method:

click()

Vue.$emit('add',) //第二个参数可作为传递数据传送到监听端口，不需要则传空对象







那么test组件中就需要监听，在created方法里写

export default

created()

Vue.$on('add',this.add)

,

method:

add()

this.count++







除了以上总结的这点小的知识点以外，还有很多vue的知识想要和大家分享，以后会陆续写出来，大家感兴趣的也可以来我的GitHub一起来写这个项目（觉得不错的给个star Hah） 参考技术B 一起来SegmentFault 头条阅读和讨论SimonZhangITer分享的技术内容《使用vue2+Vuex+Router重写饿了么点餐系统和vue插件简析》

饿了么vue实现学习笔记

技术栈：vue2 + vuex + vue-router + webpack + ES6/7 + fetch + sass + flex + svg
以功能实现着手学习
1. 定位功能 home.vue
通过跨域获取当前的地理位置
http://cangdu.org:8001/v1/cities?type=guess
2. 选择城市转跳页面到搜索详细地址 home.vue
根据API接口的ID，通过
router-link :to="‘/city/‘ + guessCityid"传值
路由定位到city.vue组件
根据路由cityid获取cityid：
this.cityid = this.$route.params.cityid;
通过跨域获取城市名称
3. 搜索地址，并且点击时缓存 city.vue
还是通过跨域访问获取JSON数据，并且在前端控制UI的显示
//http://cangdu.org:8001/v1/pois?type=search&city_id=2&keyword=123
缓存：window.localStorage.getItem(name);
3.1地址的本地缓存加载
如果存在地址的本地缓存的话，在页面初始化时通过getStore方法加载缓存，并且加以显示
3.2搜索地址
在挂载mount的时候已经通过router那里获取到所属城市的id了，如果输入的地址不为空，那么设置3个参数historytitle,placelist,placeNone,分别控制UI（搜索历史，清空所有的显示），输入地址内容的显示，以及如果没有结果显示的UI。
3.3本地缓存的存储
点击一个搜索出来的地址以后，获取本地对该地址数组的缓存：1.如果缓存存在，那么判断地址跟缓存中的数据是否重复，如果不重复，则加入到缓存中去，否则不加入，并且重新设置缓存。2.如果缓存不存在直接加入到数组中，设置为数组缓存。
3.4完成缓存操作以后，通过路由转跳到新的组件上去。
4. 展示所选地址附近商家列表和食品类型列表
4.1展示导航食品类型列表
1.根据搜索地址那儿的router获取经纬度：
"geohash":"30.26537,120.17519"
2.根据api接口获取JSON数组
api:http://cangdu.org:8001/v2/index_entry?30.26537,120.17519&group_type=1&flags[]=F
3.设置新数组负责展示模块
4.2通过组件展示附近商家列表
1.定义一个shopList组件，为组件传值，传值的方式有两种，一种是直接在组件那儿设置参数传值，另外一种是通过mutation传值，通过state取值。
2.在methods处定义一个异步函数initDate，去api获取数据，完成以后再mounted()那儿初始化。
5. 搜索美食，餐馆
跨域。该项目有BUG，显示经纬度错误，已修改PR。
修改详情如下：
BUG显示经纬度错误
src/components/footer section处加入query
代码从 <section @click = "gotoAddress({path: ‘/search/geohash‘})" class="guide_item">
改为<section @click = "gotoAddress({path: ‘/search/geohash‘,query: {geohash}})" class="guide_item">
src/page/search/search.vue mouted处
代码从 this.geohash = this.$route.params;
改为 this.geohash = this.$route.query.geohash;
6.根据距离、销量、评分、特色菜、配送方式等进行排序和筛选 ---组件展示
1.当选中要排序的内容时，将要排序的内容赋值，到data()中，并且将参数传到组件中
赋值例子：
this.restaurant_category_ids=id
传参到组件：
<shop-list :geohash="geohash" :restaurantCategoryId="restaurant_category_id" :restaurantCategoryIds="restaurant_category_ids" :sortByType=‘sortByType‘ :deliveryMode="delivery_mode" :confirmSelect="confirmStatus" :supportIds="support_ids" v-if="latitude"></shop-list>
2.组件通过props获取父组件中的传值
props: [‘restaurantCategoryId‘, ‘restaurantCategoryIds‘, ‘sortByType‘, ‘deliveryMode‘, ‘supportIds‘, ‘confirmSelect‘, ‘geohash‘]
3.创建监听，如果数据改变了的话，通过异步函数去取值，例子如下：
1.创建监听：
watch: {
//监听父级传来的restaurantCategoryIds，当值发生变化的时候重新获取餐馆数据，作用于排序和筛选
restaurantCategoryIds: function (value){
this.listenPropChange();
}
}
2.在methods处创建异步函数：
async listenPropChange(){
this.showLoading = true;
this.offset = 0;
let res = await shopList(this.latitude, this.longitude, this.offset, ‘‘, this.restaurantCategoryIds, this.sortByType, this.deliveryMode, this.supportIds);
this.hideLoading();
//考虑到本地模拟数据是引用类型，所以返回一个新的数组
this.shopListArr = [...res];
}

7. 餐馆食品列表页
1.点击菜单，显示相应的foodList
设置menuIndexChange，解决运动时foodList处依然监听的BUG，点击时menuIndexChange为false，运动结束，true，继续监听，获取shopListTop数组，用scrollTo，移动到相应的foodList
2.下拉食品列表，显示相应的菜单
监听加载数据的动画结束时的状态，动画结束以后获取食品列表的高度，并且对食品列表设定监听，根据pos.y的值来与食品列表高度数组比较获取index，并且显示。同时，设置scrollToElement,当食品列表下移到一定高度时，菜单下移，当点击一定高度以下（从上往下看）菜单时，菜单点击结束，恢复监听，菜单下移。
notice:有点疑问的是，为什么设置好偏移量以后，菜单会下移，从代码层面看，是跟BScroll有关系的。BScroll有点不熟悉hhh，我就看的懂BScroll的参数，并且给它注释了。

8. 购物车功能
8.1购物车父组件功能说明
1.moveInCart
添加到购物车动画
2.showChooseList
显示选规格的界面
3.showReduceTip
显示减少按钮
4.showMoveDot
接收子组件传递的参数，用于moveInCart
8.2moveInCart和showMoveDot
用JS实现点击添加以后，图标移动到购物车
1.在组件中，点击添加按钮，触发addToCart事件，在事件中获取按钮距离视图左边和底部的位置，并且对showMoveDot数组赋值为true,触发父组件showMoveDot的事件
2.父组件showMoveDot的事件触发函数showMoveDotFun对相关参数进行赋值，其中this.showMoveDot = [...this.showMoveDot, ...showMoveDot];是在原先的数组上，清空数组，继续添加数据的意思
3.transition中v-for="(item,index) in showMoveDot"存在该数据的值，则执行动画，执行动画参数：
appear
@after-appear = ‘afterEnter‘
@before-appear="beforeEnter"
4.用JS实现afterEnter和beforeEnter

 

9. 店铺评价页面
点击标签无变化，我看了下API接口，是接口数据的问题。
10. 单个食品详情页面
11.商家详情页
12.登录、注册
后台传递一个base64格式的图片与图片内容
图片给用户看，图片内容校验用户输入的验证码
用户输入的匹配后将验证码内容一起发到服务器再验证

<------之后的部分觉得没必要再看下去了.------>
13.修改密码
14.个人中心 -- 完成
15.发送短信、语音验证 -- 完成
16.下单功能 -- 完成 ?????? //不会
17.订单列表 -- 完成
18.订单详情 -- 完成