Vue实战教程之仿肯德基宅急送App

前端  /  管理员 发布于 4年前   462

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动态绑定来实现它

样式用的是Vant UI组件，最外面绑定了一个动态样式showbar，然后把整体的初始位置设在屏幕之外，当传入参数为true时再回来，用Vuex管理它的状态

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

整体代码

外卖点餐

这里参考的是慕课网黄奕大大的课程，课程地址

商品展示

这里通过currentIndex和index做对比，来确认是否添加current类，通过添加current类来实现当前页面的区域的样式变化，他们之间的对比关系也就是menu区域和foods区域的显示区域的对比关系

需要注意的是vue传递原生事件使用$event

购物车

购物车列表的显示和隐藏以及清空按钮是通过数据fold来决定的，购物车列表是通过计算属性listshow来实现，清空按钮也是通过设置count属性来实现，这样都达到了不用操作dom就可以改变dom行为的效果。

操作按钮

这个模块主要通过三个小模块实现,删除按钮,显示数量块,增加按钮

addCart以及decreaseCart方法，默认会传入event原生dom事件，food数据是从父组件传入的，所以对这个数据的修改，也能够反应到父组件，也因为购物车的数据也是从父组件传入的，使用同一个food数据，从而关联到购物车的购买数量统计。

异步问题

  
   
   
{{item[0].name}}
   
    
   
          
     
      
                            

这里循环嵌套，整个DOM结构都是循环出来的，而better-scroll需要操作DOM结构，要实现横向滑动效果，难免会有异步问题。

可是无论我使用.then或者$nextTick都无法挂载better-scroll，查阅了大量文档也无法解决，最后只能使用原生的overflow-X，若是有解决办法，欢迎提出，感激不尽!

结语

总的来说这个项目还有很多不足，实现的功能也很少，后续我会继续改进。

如果这篇文章对你有帮助，不妨点个赞吧！

GitHub地址

总结

以上所述是小编给大家介绍的Vue实战教程之仿肯德基宅急送App,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！