自动草稿

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。

    <!-- 聊天列表 -->
    <ul>
      <li v-for='(item,index) in chatUsers'
          :key='index'>{{item[item.length-1]['msg']}}</li>      
    </ul>
复制代码

报错:

Vue仿蘑菇街商城项目(vue+koa+mongodb)

分析:根据报错原因大概是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数据请求报错:

Vue仿蘑菇街商城项目(vue+koa+mongodb)

找到问题代码:

 this.shop = Object.keys(this.cartList)
复制代码

分析:在打开购物车页面时,需要进行请求,但是当购物车为空时,请求回来的数据使this.cartList为undefined,导致报错。

解决:

this.cartList? this.shop = Object.keys(this.cartList):this.shop=[]
复制代码

14.部署问题

14.1上传图片路径:

Vue仿蘑菇街商城项目(vue+koa+mongodb)

分析:在本地开发时,保存图片路径和上传服务端是不一样的,需要改为真实路径。

14.2本地数据库导入服务器数据库:

问题:导入成功后,服务器端会重新创建一个集合,并不会使用我导入的集合。我导入的数据就无法使用。

解决:从服务器端重新创建集合,并将本地数据导入集合内就可以使用了。

15.性能优化

优化前:大概加载出来需要7秒左右,可谓是相当可怕的。核心资源为600kb左右。

Vue仿蘑菇街商城项目(vue+koa+mongodb)

1.引入cdn

Vue仿蘑菇街商城项目(vue+koa+mongodb)

单文件从600kb压缩到300kb了

2.启用gzip压缩。

Vue仿蘑菇街商城项目(vue+koa+mongodb)

单文件从300kb压缩到90kb了,加载时间也减少到1.5s左右了。(有缓存因素影响)

3.路由懒加载

资源懒加载,被访问时才会被加载对应的js模块,而不是第一次加载所有资源

Vue仿蘑菇街商城项目(vue+koa+mongodb)

第一次加载核心资源从90kb变成48kb了。

4.属性不再响应式:待完成

16.总结

这是我学习以来,第一次从0搭建一个项目,从vue框架到服务器端,再到数据库。在过程中,遇到了很多问题,不过最终都克服了他们。遇到问题不可怕,因为问题都是要被解决的。

推荐Vue学习资料文章:

基于 electron-vue 开发的音乐播放器「实践」

「实践」Vue项目中标配编辑器插件Vue-Quill-Editor

Vue插件总结【前端开发必备】

一篇文章,教你学会Vue-CLI 插件开发【Vue进阶篇】

消息队列助你成为高薪 Node.js 工程师

Node.js 中的 stream 模块详解

「干货」了不起的 Deno 实战教程

「干货」通俗易懂的Deno 入门教程

Deno 正式发布,彻底弄明白和 node 的区别

「实践」基于Apify+node+react/vue搭建一个有点意思的爬虫平台

「实践」深入对比 Vue 3.0 Composition API 和 React Hooks

前端网红框架的插件机制全梳理(axios、koa、redux、vuex)

深入Vue 必学高阶组件 HOC「进阶篇」

深入学习Vue的data、computed、watch来实现最精简响应式系统

10个实例小练习,快速入门熟练 Vue3 核心新特性(一)

10个实例小练习,快速入门熟练 Vue3 核心新特性(二)

教你部署搭建一个Vue-cli4+Webpack移动端框架「实践」

2020前端就业Vue框架篇「实践」

详解Vue3中 router 带来了哪些变化?

Vue项目部署及性能优化指导篇「实践」

Vue高性能渲染大数据Tree组件「实践」

尤大大细品VuePress搭建技术网站与个人博客「实践」

10个Vue开发技巧「实践」

是什么导致尤大大选择放弃Webpack?【vite 原理解析】

带你了解 vue-next(Vue 3.0)之 小试牛刀【实践】

带你了解 vue-next(Vue 3.0)之 初入茅庐【实践】

实践Vue 3.0做JSX(TSX)风格的组件开发

一篇文章教你并列比较React.js和Vue.js的语法【实践】

手拉手带你开启Vue3世界的鬼斧神工【实践】

深入浅出通过vue-cli3构建一个SSR应用程序【实践】

怎样为你的 Vue.js 单页应用提速

聊聊昨晚尤雨溪现场针对Vue3.0 Beta版本新特性知识点汇总

【新消息】Vue 3.0 Beta 版本发布,你还学的动么?

Vue真是太好了 壹万多字的Vue知识点 超详细!

Vue + Koa从零打造一个H5页面可视化编辑器——Quark-h5

深入浅出Vue3 跟着尤雨溪学 TypeScript 之 Ref 【实践】

手把手教你深入浅出vue-cli3升级vue-cli4的方法

Vue 3.0 Beta 和React 开发者分别杠上了

手把手教你用vue drag chart 实现一个可以拖动 / 缩放的图表组件

Vue3 尝鲜

总结Vue组件的通信

手把手让你成为更好的Vue.js开发人员的12个技巧和窍门【实践】

Vue 开源项目 TOP45

2020 年,Vue 受欢迎程度是否会超过 React?

尤雨溪:Vue 3.0的设计原则

使用vue实现HTML页面生成图片

实现全栈收银系统(Node+Vue)(上)

实现全栈收银系统(Node+Vue)(下)

vue引入原生高德地图

Vue合理配置WebSocket并实现群聊

多年vue项目实战经验汇总

vue之将echart封装为组件

基于 Vue 的两层吸顶踩坑总结

Vue插件总结【前端开发必备】

Vue 开发必须知道的 36 个技巧【近1W字】

构建大型 Vue.js 项目的10条建议

深入理解vue中的slot与slot-scope

手把手教你Vue解析pdf(base64)转图片【实践】

使用vue+node搭建前端异常监控系统

推荐 8 个漂亮的 vue.js 进度条组件

基于Vue实现拖拽升级(九宫格拖拽)

手摸手,带你用vue撸后台 系列二(登录权限篇)

手摸手,带你用vue撸后台 系列三(实战篇)

前端框架用vue还是react?清晰对比两者差异

Vue组件间通信几种方式,你用哪种?【实践】

浅析 React / Vue 跨端渲染原理与实现

10个Vue开发技巧助力成为更好的工程师

手把手教你Vue之父子组件间通信实践讲解【props、$ref 、$emit】

1W字长文+多图,带你了解vue的双向数据绑定源码实现

深入浅出Vue3 的响应式和以前的区别到底在哪里?【实践】

干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)

基于Vue/VueRouter/Vuex/Axios登录路由和接口级拦截原理与实现

手把手教你D3.js 实现数据可视化极速上手到Vue应用

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【上】

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【中】

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

Vue3.0权限管理实现流程【实践】

后台管理系统,前端Vue根据角色动态设置菜单栏和路由