当前位置: 首页 > 编程日记 > 正文

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

关于

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

相关文章:

Task01:青少年软件编程(Scratch)等级考试模拟卷(一级)

电子学会 软件编程(图形化)一级训练营 试题来源 青少年软件编程(Scratch)等级考试试卷(一级)【2019.09】青少年软件编程(Scratch)等级考试试卷(一级)【2019…

CSS——float属性备忘笔记

通过指定CSS属性float的值,从而使元素向左或向右浮动,然后由后继元素向上移动以填补前面元素的浮动而空出的可用空间。CSS的float属性,作用就是改变块元素对象的默认显示方式,HTML标签设置了float属性之后,它将不再独自占据一行,从…

beats x连android手机吗,beats x 能连安卓手机吗?

1,手机打开蓝牙功能,进入搜索蓝牙耳机状态。2,当蓝牙耳机处于电源状态时,需要按下蓝牙耳机的开关按钮约5秒。3,直到指示灯是蓝色的,红灯闪烁并交替地松动。4,此时,蓝牙耳机和手机将进…

[置顶] Objective-C ,ios,iphone开发基础:命名规范

命名规范:http://bukkake.iteye.com/blog/695492 点击打开链接转载于:https://www.cnblogs.com/pangblog/p/3292256.html

Task02:青少年软件编程(Scratch)等级考试模拟卷(一级)

电子学会 软件编程(图形化)一级训练营 试题来源 青少年软件编程(Scratch)等级考试试卷(一级)【2019.09】青少年软件编程(Scratch)等级考试试卷(一级)【2019…

python 爬虫气象气象定时报 气象预警推送

"2018-04-09 14时""长沙市""10日(明天)""多云转雷阵雨""29℃""19℃""3-4级""11日(后天)""雷阵雨""27℃""20℃"…

右键脚本html,js实现右键自定义菜单

本文实例为大家分享了右键自定义菜单的具体代码,供大家参考,具体内容如下#menu {height: 200px;width: 50px;border: 1px solid gray;background-color: antiquewhite;padding: 10px;display: none;position: absolute;}ul,li {margin: 0;padding: 0;lis…

ogre3d环境配置与简单程序示例

SDK安装以及编译 1、下载SDK,地址如下 http://www.ogre3d.org/download/sdk 2、安装SDK,直接解压到相应目录,如D:/ogreSDK 3、我用的是1.8版本,打开SDK安装目录,如图: D:\Program Files\OgreSDK_vc10_v1-8-…

【组队学习】【32期】Linux实践

Linux实践 航路开辟者:刘羽中领航员:六一航海士:刘洋、王晓亮、陈玉立、六一 基本信息 开源内容:https://github.com/datawhalechina/team-learning-program/tree/master/LinuxPractice开源内容:https://shimo.im/d…

成为MySQL DBA 博客系列-数据库升级

数据库供应商通常每个月都会发布一些有bug /安全性修补程序的补丁,我们为什么要关心?新的版本可能对关于安全漏洞和黑客入侵系统的修复,所以除非安全性不被关注,否则您可能希望在您的系统上安装最新的安全修补程序。其中MySQL主要…

html中item属性,项目id(属性) | itemid (attribute)

项目id(属性) | itemid (attribute)itemid全局属性是某个项目的唯一全局标识符。itemid属性只能为既具有元素指定itemscope和itemtype属性。此外,itemid只能在具有itemscope相应属性的元素上指定itemtype或引用支持全局标识符的词汇表。itemtype全局标识符的确切含义…

程序员也想改 Lottie 动画?是的!

一、前言 Hi,大家好,我是承香墨影! Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案,用过都说好。完全解耦开发人员和设计师,让设计师设计的动画,在程序中无缝还原,真是一旦拿起绝不…

poj 1698 Alice's Chance 最大流

题目:给出n部电影的可以在周几拍摄、总天数、期限,问能不能把n部电影接下来。 分析: 对于每部电影连上源点,流量为总天数。 对于每一天建立一个点,连上汇点,流量为为1。 对于每部电影,如果可以在…

为一月份开设的组队学习课程投票啦

目前Datawhale的开源内容分为两种:第一种是已经囊括在我们的学习路线图内的Datawhale精品课,第二种是暂未囊括在我们的学习路线图内的Datawhale测试课。 我们根据您的投票来确定精品课程的排期,其它测试课程一旦完成,即可排入我们…

华为鸿蒙有机会吗,谷歌重压之下,华为鸿蒙还有机会翻盘吗?全球系统生态之争开启...

就在华为处处被针对之际,华为动作可从来都没停下。芯片被制裁,就自己建工厂;海外华为被制裁,就把早已整出来的鸿蒙升级,适配到手机上;5G设备被制裁,就联系企业,扶植养猪,…

(读书笔记).NET大局观-.NET语言(1)

通用语言运行时 通用语言运行时被明确设计为支持多种语言,一般而言,建立于CLR之上的语言可以获得共同的良好处理。通过一个宏大的核心语义集,CLR还界定了一个以它为基础的典型编程语言的大体部分。例如对于任何一种基于CLR的语言,…

【分布式共识三】拜占庭将军问题----书面协议

2019独角兽企业重金招聘Python工程师标准>>> 区块链兄弟社区,区块链技术专业问答先行者,中国区块链技术爱好者聚集地 作者:吴寿鹤 来源:区块链兄弟 原文链接:http://www.blockchainbrother.com/article/8 著…

2021.09 电子学会 - 软件编程(图形化)试题讲解

软件编程(图形化)试题讲解 一级 考核目标 考查对软件编程界面的认识和基本操作;能够导入角色、背景和声音,通过对角色和背景进行简单操作,编写一个具有简单顺序结构的作品;同时考查简单的逻辑推理能力。 …

css代码应该放html哪里,css代码放到哪里?

CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等。css代码需要放到哪里? 是不是一定写到html文件里面呢? 下面给大家介绍一下。css代码的定义通常有三种方式,内部样式表,内联样式表…

vmware克隆centos修改linux mac地址

故障背景: 在vmware workstation中了完全克隆了一个已经存在的centos的虚拟机,启动之后发现网卡没有启动。于是重启一下network服务,发现提示错误信息“Device eth0 does not seem to be present, delaying initialization.” www.2cto.com …

运用jieba库分词

代码: 统计出团队中文简介中词频 import jieba txtopen("C:\\Users\\Administrator\\Desktop\\介绍.txt","r",encodingutf-8).read() wordsjieba.lcut(txt) counts{} for word in words: if len(word)1: continue else: counts[word]counts.get…

【NCEPU】韩宇:上海新能源汽车比赛方案讲解

韩宇是华北电力大学国教大三的学生,参加了多期Datawhale的组队学习,也在天池、Kaggle等比赛中取得了不错的成绩。 他在线下组队学习时,曾为大家分享过如何准备天池深度学习的比赛?。这篇图文是他为大家分享自己刚刚参加的2021上海…

宁波大红鹰学院计算机科学与技术,2019宁波大红鹰学院专业排名

宁波大红鹰学院是一所全日制民办普通本科高校,由宁波大红鹰教育集团出资举办。学校创办于2001年4月,2008年4月,经教育部批准升格为本科院校,为了让大家更好的了解这所大学的专业排名,下面是学习啦小编给大家带来的宁波…

Json.Net学习笔记

Json.Net学习笔记 摘自: http://www.verydemo.com/demo_c360_i45119.html分类:编程语言/ASP.NET/文章导读:string googleSearchText "{ ""responseData"": { ""results"": [ { ""GsearchResul…

中国电子学会青少年编程能力等级测试图形化四级编程题:正话反说

「青少年编程竞赛交流群」已成立(适合6至18周岁的青少年),公众号后台回复【Scratch】或【Python】,即可进入。如果加入了之前的社群不需要重复加入。 我们将有关编程题目的教学视频已经发布到抖音号21252972100,小马老…

4.10日一直报错application未注入的问题解决

1.db.propertities 里面连接的是正式库,改为5522测试库 2.将pom.xml右键run as 后点击 instal转载于:https://www.cnblogs.com/CrisZjie180228/p/8793502.html

北邮计算机科学技术是学硕吗,【计算机考研】2020北京邮电大学计算机科学与技术考研初试科目、参考书目、复试详情汇总...

原标题:【计算机考研】2020北京邮电大学计算机科学与技术考研初试科目、参考书目、复试详情汇总一、考试科目计院的学硕是计算机科学与技术,专硕为计算机技术。计算机科学与技术:①101思想政治理论②201英语一③301数学一④803计算机学科基础…

node学习笔记

1.node.js的回调函数的两个参数:第一个参数代表错误信息,第二个参数代表结果。 if (err) {// 出错了 } else {// 正常 } 复制代码注:当正常读取时,err参数为null,data参数为读取到的String。当读取发生错误时&#xff…

PHP5.3.8连接Sql Server SQLSRV30

PHP5.3连接SQL Server就不能用php_mssql.dll了。 网上下载了好多都不行,因为它的版本是5.2的,不能再PHP5.3中使用。 后来听说微软专门为PHP出了自己的dll。 叫做Microsoft SQL Server Driver for PHP PHP5.3中用3.0的版本就可以了。 SQLSRV30.EXE 就是这…

Task03:青少年软件编程(Scratch)等级考试模拟卷(一级)

电子学会 软件编程(图形化)一级训练营 试题来源 青少年软件编程(Scratch)等级考试试卷(一级)【2019.09】青少年软件编程(Scratch)等级考试试卷(一级)【2019…