前后端分离 Vue + NodeJS(Koa) + 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地址

前端：https://github.com/frankxjkuang/daike-client

后端：https://github.com/frankxjkuang/daike-server

未完待续

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

写在最后

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

作者：KoK44541
连接：https://juejin.cn/post/6844903589148639239
来源：掘金

最后

最近小于哥也做了一个关于职场分享的视频号，主要是职场面试分享以及技术分享之类的，我想大家一定会有用的大的，这里希望大家来气关注一下

回复 【idea激活】即可获得idea的激活方式

回复 【Java】获取java相关的视频教程和资料

回复 【SpringCloud】获取SpringCloud相关多的学习资料

回复 【python】获取全套0基础Python知识手册

回复 【2020】获取2020java相关面试题教程

回复 【加群】即可加入终端研发部相关的技术交流群

阅读更多

大家好，小于哥需要你们的支持！

程序员需知的 58 个网站

单点登录 —看完不懂，我跪搓衣板！

工作十年，我是如何达到年薪40W以上的？

字节跳动一面：i++ 是线程安全的吗？

大家好，欢迎加我微信，很高兴认识你！

在华为鸿蒙 OS 上尝鲜，我的第一个“hello world”，起飞！

Java中运行1000==1000为false，而100==100为true？

啥？HashMap 1.8 还有死循环？你逗我呢！

可不可以不用再写 finally ？

相信自己，没有做不到的，只有想不到的

在这里获得的不仅仅是技术！

喜欢就给个“在看”