仿美团外卖的全栈项目(vue+node+mongodb)带支付-大三求实习

2024-06-02 18:25:05

关于

2019届大三学生，前段时间一直想一个人单独开发一个较为完整的项目，在众多应用中，考虑之后选择了美团外卖来模仿，这段时间就利用课余时间进行开发，前端用vue+vuex+vue-router+axios，因为需要用到定位和支付等功能，需要后端配合，而且想要做真正数据交互，所以用express(基于nodejs的框架)做后台，数据库用NOSQL的mongodb。前端项目包含20多个路由，涉及到vue文件有40个，功能设计登录，定位，浏览商品，加购物车，下订单，支付(支持微信和支付宝的扫码支付和调起app支付)，评价，个人信息更改，是一个较为完整的项目。

注意：此项目为个人开发实践练习，不作为任何商业用途

重要事情先讲一遍

求广深实习，现在可以开始上班(要求暑假上班也可以)，每周保证4天以上的上班时间

功能

登录/注销
IP定位
搜索地址
获取商店(计算当前位置和商店的距离)
加购物车
下订单
支付(支持微信和支付宝的扫码支付和调起app支付)
评价
头像上传(用了七牛云存储)
图片懒加载

技术栈

Webpack-cli搭建项目
Vue全家桶(vue+vuex+vue-router)
CSS预处理器SCSS
axios与后端进行请求数据
使用better-scroll滚动
七牛云存储图片
支付宝和微信支付
Express搭建后端服务
Mongoose对MongoDB进行便捷操作
使用Charles抓取数据

多图预警

定位和搜索商家

扫码支付

调起APP支付

购物车

商品操作

评论

其它操作

还有一些其它功能就不放图了哈

线上地址

请用谷歌浏览器然后开启移动端浏览，如果要调用APP支付就需要用手机自带浏览器打开，然后支付时选择调起APP支付
复制代码

线上地址

仓库地址

代码已开源到github上面，有具体的运行操作，如果觉得还可以，请给个Star哈哈！
复制代码

github地址

未完待续

还有商家管理PC端还没写完，等写完再开源出来
复制代码

写在最后

因为还是学生，平时最多也是和同学一起开发，并没有参与过真正的企业团队开发，所以应该有很多地方做的不是很好，欢迎各位大佬们给我提一些意见，最后再问一句哈，求广深实习，现在可以开始上班(要求暑假上班也可以)，每周保证4天以上的上班时间。如果没有，我等下再来问哈。。。

转载于:https://juejin.im/post/5aca46e2f265da238c3af4ca

仿美团外卖的全栈项目(vue+node+mongodb)带支付-大三求实习相关推荐

【uniapp前端组件】仿美团外卖商品列表
仿美团外卖商品列表简易实现美团外卖商品列表,没什么技术难点,简单来说就是两个scroll-view协作,并且两个scroll-view不会滑动冲突. 实际效果仿美团外卖商品列表实际项目效果简介 ...
Vue开发的仿美团外卖Html5前端页面
今天给大家开源一个仿美团外卖的Vue项目,介绍Vue和vue-router的基本用法. 工程结构工程目录结构比较简单,如下图所示. 运行效果部分运行效果如下图,实现了基本的页面切换,导航菜单,购物 ...
vue商城项目源码_CMS全栈项目之Vue和React篇（下）（含源码）
今天给大家介绍的主要是我们全栈CMS系统的未讲解完的后台部分和前台部分,如果对项目背景和技术栈不太了解,可以查看我之前的文章基于nodeJS从0到1实现一个CMS全栈项目(上) 基于nodeJS从0 ...
一个nuxt(vue)+mongoose全栈项目聊聊我粗浅的项目架构
这是一篇求职文章年龄21 坐标成都找一份vue.js移动端H5工作一份没有任何包装纯真实的简历简历戳这求职文章一共有两篇另外一篇请点击一个基于Vue+TypeScript的[移动端]Vue ...
Vue、Node全栈项目~面向小白的博客系统~
个人博客系统前言 ❝ 代码质量问题轻点喷(去年才学的前端),有啥建议欢迎联系我,联系方式见最下方,感谢! 页面有啥bug也可以反馈给我,感谢! 这是一套包含前后端代码的个人博客系统,欢迎各位提出建议 ...
CH12-综合项目—仿美团外卖
文章目录目标一.项目分析目标项目概述开发环境模块说明二.效果展示目标店铺界面店铺详情界面店铺详情界面确认清空购物车的对话框菜品详情界面订单界面和支付界面三.服务器数据准备 ...
王者荣耀全栈项目部署到阿里云服务器笔记
王者荣耀全栈项目部署到阿里云服务器笔记原创Charles_GX 最后发布于2020-03-27 01:27:00 阅读数 177 收藏展开王者荣耀全栈项目部署到阿里云服务器笔记学习的项目来自 ...
Web全栈~38.Vue
Web全栈~38.Vue 上一期基本语法 template和script交互 <template><div id="app"><div>我是{ ...
基于Android的仿美团外卖系统设计与实现文档+源码+视频
基于Android的仿美团外卖系统设计与实现演示视频摘要为了巩固所学 Android 基础知识,要开发一款仿美团外卖的项目,该项目与我们平常看到的美团外卖项目界面比较类似,展示的内容包括店铺. ...

最新文章

热门文章