【纯干货】Vue仿蘑菇街商城项目(vue+koa+mongodb)
（给前端大学加星标，提升前端技能.）
作者：liu6
https://juejin.im/post/5e6e088ff265da57434bd2b1
1背景介绍
大家好，我是六六。学习了很长时间，为此想做一个项目来锻炼一下自己，于是便看上了蘑菇街（有很多漂亮的衣服和美女哈哈哈）。所以打算从零仿照蘑菇街官网来做一个项目，现在项目终于上线了。对于项目有任何问题或者建议都可以评论，我欢迎大家来提意见。
github地址：github.com/6sy/myShop
2项目介绍
登录，登出功能
注册功能
商品展示功能
用户搜索功能
用户收藏功能
购物车功能
订单功能
个人中心
更换头像
商家聊天
开发问题
部署问题
项目优化
3.登录注册模块
需求分析：
完成用户登录，用户注册，注册信息保存于数据库。
前端vue页面绘制，使用axios完成数据请求，使用koa搭建服务器,采用token验证机制，采用mongodb数据库，使用bcryptjs对密码加密
性能分析：
使用慢网速测试，检查一处问题，已解决。在10.2处
4.商品展示功能
需求分析：
展示推荐商品，以及具体的每个商品。
技术分析：
通过动态路由进行传参。商品列表下拉加载更多，借助了插件。
展示图：
5.用户搜索模块
需求分析：
完成用户搜索商品功能，并可以对搜索物品按需求展示。并保存搜索记录。
技术分析：
通过路由传参到组件，组件在通过参数进行网络请求加载处对应的商品。
6.用户收藏功能
需求分析：
完成对商品收藏与取消收藏功能。
技术分析：
在每个用户中有一个user_collect属性保存着一个数组，收藏时需要将商品id添加到这个数组中即可。每次进入商品时，遍历这个数组判断是否有这个id，有就添加样式。取消收藏从数组中删除即可。
7.购物车功能
需求分析：
添加商品进入购物车，在购物车中进行选择并加入订单。
技术分析：
添加商品保存到数据库中，购物车页面在通过网络请求获取购物车数据。
9.订单功能
需求分析：
把购物车中选中的商品跳转到订单模块，并选择地址，完成信息填写。
展示：
10.个人中心
需求分析：
可以从个人中心中查到我们订单的情况。
展示：
11.更换头像
需求分析：
实现用户的上传头像，和自定义裁剪
技术分析：
采用canvas技术进行裁剪，并通过FormData上传图片到服务器。
效果图：
问题：
实现了裁剪，但是大小不是自定义的，在以后逐渐改善。
12.商家聊天
需求分析：
实现用户与商家的沟通，商家有一个列表记录所有聊天用户。
技术分析：
采用socket.io实现通信。vue组件采用bus总线通信。
效果图：
问题：
组件内的数据保存在组件内，一刷新就没有了。应该在每次组件销毁保存到服务器里
input输入框的高度应该随输入文字的增多而变高，列表中的聊天记录同理。
没有消息提醒功能
13. 开发遇到的问题
13.1:
使用koa写中间件的时候，一定要使用异步。
13.2 网速过慢error:
当网速过慢时，无法进行注册，点击注册无任何反应：
分析：由于网速过慢，在进行账号重复验证时，没有通过验证则已经点击注册了，而此时账号通过判定变量仍为false,即使已满足却因为条件不够无法注册。
if (this.isAccount && this.isPassword) {......} //通过条件，进行网络请求
解决：声明一个变量isClick，判断符合这种情况下，为true,在账号重复性网络请求成功后，重新发送一次注册。
13.3：重新刷新error:
当遇到页面刷新时，页面加载报错
分析：有些数据是通过其他组件传入的，重新刷新导致无数据加载报错。
解决：
通过对数据判断，如果没有数据通过路由直接返回首页。
特定的数据可以通过网络请求解决。
13.4：重新刷新error
判断一个空对象 分析：聊天组件刷新时，由于数据时通过组件传参进入，如果刷新导致数据丢失，数据和视图会报错，判断this.$route.params是否为空对象即可 解决：
isEmptyObj (obj) {
return (Object.prototype.toString.call(obj) === '[object Object]')
&& (Object.getOwnPropertyNames(obj).length === 0)
&& (Object.getOwnPropertySymbols(obj).length === 0)
}
13.5：vue渲染问题：
我用一个对象存储聊天记录，对象名为用户名，对象值为一个数组，数组每一项为每一句聊天的记录.
chatUsers: {
'小李': [{ 'msg': 'obj' }, { 'msg': '你好啊' }],
'小张': [{ 'msg': 'obj' }, { 'msg': '你好啊' }]
}
需求是：要获取每个用户的最后一句聊天记录，并显示。所以很容易用到v-for。
- '(item,index) in chatUsers'
:key='index'>{{item[item.length-1]['msg']}}
报错：
分析：根据报错原因大概是render渲染出错，但是逻辑是没有问题的啊，就是拿不到msg这个属性。
解决：所以我换了一个思路，设置一个对象，用来存储最后一句聊天记录就可以了。
// 最后聊天信息
chatLastMsg: {
}
// 将这个对象的属性设为响应式
handleMsg (msg) {
if (!this.chatUsers[msg.name]) {
this.$set(this.chatUsers, msg.name, [])
this.$set(this.chatLastMsg, msg.name, '')
}
//每次传入消息都赋值给这个对象，也就是最后一次消息了this.chatLastMsg[msg.name] = msg.msg
13.6数据请求报错：
找到问题代码：
this.shop = Object.keys(this.cartList)
分析：在打开购物车页面时，需要进行请求，但是当购物车为空时，请求回来的数据使this.cartList为undefined，导致报错。
解决：
this.cartList? this.shop = Object.keys(this.cartList):this.shop=[]
14.部署问题
14.1上传图片路径：
分析：在本地开发时，保存图片路劲和上传服务端是不一样的，需要改为真实路径。
14.2本地数据库导入服务器数据库：
问题：导入成功后，服务器端会重新创建一个集合，并不会使用我导入的集合。我导入的数据就无法使用。
解决：从服务器端重新创建集合，并将本地数据导入集合内就可以使用了。
15.性能优化
优化前：大概加载出来需要7秒左右，可谓是相当可怕的。核心资源为600kb左右。
1.引入cdn
单文件从600kb压缩到300kb了
2.启用gzip压缩。
单文件从300kb压缩到90kb了，加载时间也减少到1.5s左右了。（有缓存因素影响）
3.路由懒加载
资源懒加载，被访问时才会被加载对应的js模块，而不是第一次加载所有资源
第一次加载核心资源从90kb变成48kb了。
4.属性不再响应式：待完成
5.图片压缩
在检验项目的时候发现了一个大问题，看图：
在进行登录验证的时候发现加载这些图片要8s左右，所以必须进行压缩，进行适当的分辨率调整。
进行压缩之后图片加载都能稳定在100ms之内，大大提升了用户体验。
16.总结
这是我学习以来，第一次从0搭建一个项目，从vue框架到服务器端，再到数据库。在过程中，遇到了很多问题，不过最终都克服了他们。遇到问题不可怕，因为问题都是要被解决的。
分享前端好文，点亮 在看 