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

头像
zwStar
    阅读 2 分钟
    58

    关于

    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天以上的上班时间。如果没有，我等下再来问哈。。。

    javascriptnode.jsmongodbvue.js
    zwStar
    435 声望24 粉丝
    « 上一篇
    给你的mongodb设置密码吧！
    下一篇 »
    Vue源码解析-了解vue插槽slot篇
    52

    引用和评论

    推荐阅读
    头像
    Vue源码解析-了解vue插槽slot篇

    zwStar赞 13阅读 5.8k

    头像
    Vue.js-Vue实例

    寒青赞 11阅读 6.5k

    头像
    2025年最新反编译微信小程序的教程及工具

    TANKING赞 7阅读 4.8k

    头像
    你可能不知道的图片加载相关知识

    夕水赞 5阅读 3.7k

    头像
    更强大、更灵活！ defineModel 重新定义双向绑定

    南玖赞 4阅读 3.8k

    头像
    Base64编码的“暗坑”：解密失败？可能是这些原因！

    南玖赞 6阅读 3.5k评论 1

    头像
    Koa+Typescript起手式(空环境) 不用每次玩node都要搭环境了！

    alwaysVe赞 4阅读 11.4k

    52 条评论
    得票最新
    头像
    derek：

    NOSQL现在官方不是说叫 not only SQL了么

    2018-04-10
    zwStar（作者）：

    @derek 学习了，我还停留在非关系型数据库的理解上

    2018-04-10
    头像
    kekevin：

    顶一个↑↑↑↑

    2018-04-09
    zwStar（作者）：

    @kekevin 感谢哈

    2018-04-09
    头像
    我和faker五五开：

    可以问问作者读什么专业吗 在哪里上学

    2018-04-09
    zwStar（作者）：

    @我和faker五五开 专业软件工程，学校是东莞理工学院

    2018-04-09
    我和faker五五开：

    @我和faker五五开 我也是东莞人 好样的

    2018-04-09
    zwStar（作者）：

    @我和faker五五开 哈哈

    2018-04-09
    头像
    卡布奇诺5232：

    牛啊！！！我收藏了！！！

    2018-04-09
    zwStar（作者）：

    @卡布奇诺5232 多谢哈

    2018-04-09
    头像
    嘎嘣槌：

    订单详情 返回事件没搞好

    2018-04-09
    zwStar（作者）：

    @嘎嘣槌 好的，谢谢提醒哈

    2018-04-09
    头像
    路小仁：

    不要找实习，，完全可以直接去找工作了

    2018-04-10
    zwStar（作者）：

    @路小仁 没有呢，没有参与企业团队开发过，很多东西不懂的哈

    2018-04-10
    头像
    badbad小哥哥：

    并不是很出彩其实。。

    另外，应该参考了网上其他的人的代码吧 为什么提都不提一下呢？

    另外，你“致敬”别人项目的时候记得把网页的title的改了，不要出现页面内容写着美团，网页title写着vue-element，饿了么表示很委屈。

    2018-04-10
    zwStar（作者）：

    @badbad小哥哥 多谢指点哈，真是不好意思，刚开始是要做饿了么的，发现饿了么数据有点难爬，就改成美团了。。。

    2018-04-10
    badbad小哥哥：

    @badbad小哥哥 不存在，加油

    2018-04-10
    头像
    码农土哥：

    项目不错，有点美中不足的是，数据加载时间过长，没有加载动画，导致白屏时间过长，有点影响用户体验。

    2018-04-10
    zwStar（作者）：

    @码农土哥 多谢指点，因为服务器配置有点低，还有在性能优化这方面学习和实践不足，会继续学习然后更新项目的

    2018-04-10
    码农土哥：

    @码农土哥 我还是很佩服能在校期间做出如此作品的应届生的，欢迎关注我的公众号：闰土大叔。里面有干货，也有关于职场心理建设的鸡汤，很适合在校大学生和初入职场的新人小白。

    2018-04-10
    zwStar（作者）：

    @码农土哥 @闰土大叔 谢谢大佬，已关注哈

    2018-04-10
    头像
    暮雨：

    后生可畏啊，再学习下 devops就是全端人才了

    2018-04-10
    zwStar（作者）：

    @暮雨 前辈过奖了呢

    2018-04-10
    头像
    Sociosarbis：

    今天看了你的文章才知道有charles这个工具。不过上面没有提到抓取数据的流程，能简要地告诉我你抓取数据的流程是怎么样的吗.我的疑惑是，需要抓的数据有那么多，应该有一个比较智能的方法去做的吧。谢谢。最后一句：这个做得真的不错，应该是看过最完整的练手项目了

    2018-04-10
    zwStar（作者）：

    @Sociosarbis 谢谢赞扬哈，不过抓数据我还真没什么智能的方法，因为我就抓取了10多个餐馆的数据(每个餐馆包含商家信息，食物，评论)，然后因为美团返回的数据非常复杂，一个json文件非常大，我就写了个脚本，提取我想要的部分信息，然后再插入数据库，所以抓数据还是最笨的那种办法去抓的

    2018-04-10
    Sociosarbis：

    @Sociosarbis @zwStar 多谢解惑

    2018-04-10
    头像
    MOCHIKO：

    同大三学生，加油楼楼~

    2018-04-11
    zwStar（作者）：

    @MOCHIKO 一起加油哈

    2018-04-11
    头像
    zhangzs000：

    真正工作的人也不一定能做到

    2018-04-12
    头像
    17621213682：

    真的很厉害，不需要实习了，目测工作1年可以达到这个水平已经很好了

    2018-04-13
    zwStar（作者）：

    @17621213682 谢谢，过奖了哈

    2018-04-13
    头像
    meahu：
    <ul>
    <li>
        <div class="imgWrap">
            <img src="http://p0.meituan.net/50.0.100/xianfu/cf5ddfcae114ed8d7d147d51064532252477.jpg">
        </div>
        <span>邀请有奖</span>
    </li>
    ...
</ul>

    提个建议哈，div其实可以不写，然后imgWrap的样式给img便签，再给img设置成块级元素，就可以少一层元素了。

    2018-04-15
    zwStar（作者）：

    @meahu @meahu 谢谢您的指导哈

    2018-04-15
    头像
    clei：

    求教,QQ2452438194

    2018-05-09