仿肯德基宅急送App-Vue实战
前言
Vue学习有一段时间了,就想着用Vue来写个项目练练手,弄了半个月,到今天为止也算勉强能看了。
由于不知道怎么拿手机App的接口,并且KFC电脑端官网真的…一言难尽,所以项目所有数据都是我截图然后写在EasyMock里的,有需要的同学可以自取
首页 商品页 外卖页
技术栈
vue + webpack + vuex + axios
文件目录
│ App.vue
│ main.js
│
├─assets
│ logo.png
│
├─components
│ │ cartcontrol.vue
│ │ code.vue
│ │ coupon.vue
│ │ mineHeader.vue
│ │ scroll.vue
│ │ shopHeader.vue
│ │ sidebar.vue
│ │ submitBar.vue
│ │ takeout.vue
│ │ wallet.vue
│ │
│ └─tabs
│ Other.vue
│ Outward.vue
│ Selfhelp.vue
│ Vgold.vue
│
├─pages
│ ├─home
│ │ home.vue
│ │
│ ├─mine
│ │ mine.vue
│ │
│ ├─order
│ │ order.vue
│ │
│ └─shop
│ shop.vue
│
├─router
│ index.js
│
└─vuex
│ store.js
│ types.js
│
└─modules
com.js
cou.js
take.js
复制代码
效果展示
定义的组件
better-scroll
因为每个页面都需要滑动,所以一开始就把scroll组件封装好,之后使用的话引入一下就行了
复制代码
slot 插槽是一块模板,显示不显示,以及怎样显示由父组件来决定, 也就是把你想要滑动的区域插进去,剩下的内容都是官方文档定义好的,复制一遍就好了
固定头部
头部相对页面是固定的,这里我把头部都封装成了组件,在主页面引入头部,要滑动的部分放入上面定义好的scroll组件即可
侧边栏以及弹出框
起初我的想法是用router-link直接跳转,然后发现这样做页面会自带导航栏,于是我决定通过CSS动态绑定来实现它
.sidebar-con {
position: absolute;
top: 0;
left: -400px;
transform: translateZ(0);
opacity: 0;
width: 100%;
z-index: 1002;
height: 100%;
overflow: auto;
transition: all 0.3s ease;
}
.showbar {
transform: translateX(400px);
opacity: 1;
}
复制代码
Vuex状态管理
const state = {
showSidebar: false
}
const mutations = {
[types.COM_SHOW_SIDE_BAR] (state, status) {
state.showSidebar = status
}
}
const actions = {
setShowSidebar ({commit}, status) {
commit(types.COM_SHOW_SIDE_BAR, status)
}
}
const getters = {
showSidebar: state => state.showSidebar
}
复制代码
用mapGetter拿到对象,然后传给computed属性,对象可以直接使用
computed: {
…mapGetters([
‘showSidebar’
])
},
复制代码
当需要显示的时候使用dispatch将参数传入 this.$store.dispatch(‘setShowSidebar’, true)
整体代码
复制代码
外卖点餐
这里参考的是慕课网黄轶大大的课程,课程地址
商品展示
需要注意的是vue传递原生事件使用$event
复制代码
购物车
复制代码
操作按钮
这个模块主要通过三个小模块实现,删除按钮,显示数量块,增加按钮
复制代码
异步问题
{{item[0].name}}
复制代码 这里循环嵌套,整个DOM结构都是循环出来的,而better-scroll需要操作DOM结构,要实现横向滑动效果,难免会有异步问题。 可是无论我使用.then或者$nextTick都无法挂载better-scroll,查阅了大量文档也无法解决,最后只能使用原生的overflow-X,若是有解决办法,欢迎提出,感激不尽!
结语
总的来说这个项目还有很多不足,实现的功能也很少,后续我会继续改进。
如果这篇文章对你有帮助,不妨点个赞吧!
GitHub地址
仿肯德基宅急送App-Vue实战相关推荐
- 最新仿映客直播APP开发实战项目IOS开发实战8天(最全最新)
最新仿映客直播APP开发实战项目IOS开发实战8天 第 1 章:直播准备 1: [录播] 课程大纲介绍 09:56 2: [录播] 了解直播技术和腾讯云直播 09:54 3: [录播] 基础封装 23 ...
- Python爬虫系列之肯德基宅急送小程序kbcts、kbsv算法
Python爬虫系列之肯德基宅急送小程序kbcts.kbsv算法 如有疑问> 点击这里与我交流 < 微信请扫描下方二维码 代码仅供学习交流,请勿用于非法用途 直接上代码 import re ...
- 肯德基宅急送,你值得学习的滚动屏
在移动端的滚动屏效果里面,肯德基的效果确实不错.原生的是用vue写的,这里我用react强行撸了个效果细节几乎一致的. 技术栈 react + antd + better-scroll + react ...
- 爬虫实战-肯德基kfc门店地址实战
这是较为基础的肯德基门店地址的爬取,网上有很多的教程,此处作为练手贴出代码. 下面的就是基础的代码,不能翻页,也不能改地址,是最简单的爬取了 import requests import json#获 ...
- 最新仿映客直播APP开发实战项目IOS开发实战8天
第 1 章:直播准备 1: [录播] 课程大纲介绍 09:56 2: [录播] 了解直播技术和腾讯云直播 09:54 3: [录播] 基础封装 23:13 4: [录播] 网络封装讲解 1 ...
- 仿映客直播APP开发实战项目IOS开发实战8天课程
第 1 章:直播准备 1: [录播] 课程大纲介绍 09:56 2: [录播] 了解直播技术和腾讯云直播 09:54 3: [录播] 基础封装 23:13 4: [录播] 网络封装讲解 1 ...
- 为啥这么多人早餐都是直接选择肯德基?又贵又不咋好吃。用Python来爬一下看看!
00 前言 肯德基发展了那么多年,他们的食物也随之发生了很多变化,记得以前刚出早餐的时候,也就几个品种,有点单一,然而现在的花样是越来越多,套餐五花八门,各种搭配. 木下爬取了肯德基早餐的菜单,来 ...
- 全民“动吃日”,肯德基WOW桶携手王一博掀起热血运动季
11月15日,肯德基宅急送WOW桶携手王一博官宣"动吃日",推出热血运动季主题桶,以活力四射的视频掀起动感音浪,#冬天就要动吃大吃#话题攀上热搜. 夏日的热辣记忆才褪去不久,热血运 ...
- “开口召唤”美的、欧普、肯德基 天猫精灵双12智能生态巍然成型
双十一没抢到天猫精灵的童鞋,是不是感觉错过了一个亿? 不过双十二又是剁手好机会,12月1日起至11日,每天上午10点整,还能1元抢购价值300元的天猫精灵后悔药. 后悔药包括4重权益大礼包,每个用户最 ...
最新文章
- 李航「机器学习」最全综述
- jeecms v9开发资料
- Echarts --- 各个省份的坐标
- Spring RESTful Web服务中的异常处理
- Dijkstra迪杰斯特拉算法 C++实现
- linux中mac地址路径,MAC地址
- 如何从零开始整一个高颜值 GitHub 小程序客户端?
- 浅评-我所用的输入法
- struts1.x 标签库
- 我的硬件工程师成长之路
- Python决策树鸢尾花类别分类
- ios 抓娃娃开发_可爱抓娃娃ios版_可爱抓娃娃手机版1.0.4 - 系统城
- Word的扩展名是什么
- 郭德纲绝句,没有一句不让你笑的
- html中网站小图标,HTML网站图标favicon
- J2EE基础之map集合框架
- word转pdf(docx4j)
- [CSDN]我的2013,好久不见
- 数据结构—图及其应用(交通问题,实现最短路径、最短时间、最少费用查询)
- uploadify java 下载_uploadify java实现多文件上传和预览