VueExpress全栈购物商城

一、前言提纲

基于 Vue 和 Express 框架写的一个全栈购物商城，记录项目过程中遇到的一些问题以及经验和技巧。

二、历史版本

1. 基于 Vue-CLI2.0: 点我查看

   这个分支版本是一两年前的，基于 Vue-CLI2.0 写的，数据请求是 Mock，纯前端的项目。

2. 基于 Vue-CLI3.0: 点我查看

   这个分支版本是基于 Vue-CLI3.0 的，将脚手架从 2.0 迁移升级到了 3.0，遇到的一些问题和坑也都填完了~ 也是纯 Web 端 Mock 模拟数据的项目。

3. 当前版本: 点我查看

   基于 Vue-CLI3.0, 前端用 Vue 全家桶，后端用 Express+MongoDB+Redis，后台管理系统 CMS 是用的 Vue-Element-Admin

三、详情

1. 前端

在线预览:https://www.fancystore.cn

手机直接扫描二维码真机体验:

1.1 技术栈:

• Vue 全家桶(Vue-CLI3,Vue2.x)
• Vue-Router(页面 KeepAlive 的处理)
• Vuex(状态管理库，刷新保存状态)
• Axios(二次封装配置的数据请求)
• Less(CSS 预处理)
• I18n(国际化处理)
• Vant(UI 库, 按需加载 +rem)
• SEO(预渲染)
• Sentry(线上错误日志监控)
• Travic(自动构建, 持续部署)

1.2 适配

项目代码 px 自动转换为 rem，需要在 main.js 中引入 amfe-flexible 库

Vant UI 库也有 REM 单位，需要在 vue.config.js 中配置:

1.3 SEO

单页 (SPA)SEO 是一个痛点，目前有两种方式，一种是SSR, 一种是 预渲染(PrerenderSPAPlugin)。

这个项目是用 预渲染 (PrerenderSPAPlugin)+vue-meta-info 这两个库来做 SEO 优化的。

1. 将 rouer.js 模式改为mode:history
2. 下载安装 PrerenderSPAPlugin

   PrerenderSPAPlugin 是 Google 的一个库，基于 Chromium 是获取数据，安装 PrerenderSPAPlugin 的时候会自动下载 Chromium 浏览器，国内 npm 安装 Chromium 会经常安装失败，建议用淘宝的 cnpm 安装

    npm install -g cnpm --registry=https://registry.npm.taobao.org
    cnpm install PrerenderSPAPlugin --save

1. 在 vue.config.js 中引入PrerenderSPAPlugin，配置需要预渲染的路由。
2. 下载安装 vue-meta-info

   在 main.js 中引入 vue-meta-info，在每个页面配置 meta 信息，这样每个单页路由都有不同的 title, 理由爬虫引擎抓取重要内容，利于 SEO。

预渲染前只有一个 index.html, 预渲染后最后打包出来的预渲染目录文件如下:

1.4 路由懒加载以及缓存 keep-alive 动的态判断

项目中会使用 keep-alive 会提高用户体验和网站的性能, 如果想实现部分页面缓存，部分页面不需要缓存，可以在 router.js 里面的路由添加 meta.keepalive 在跟 router-vier 加入判断:

1.5 Vuex 状态管理页面刷新失效问题

用 Vuex 管理全局的状态，会遇到刷新页面的时候所有的状态丢失或者重置，可以在 App.vue 的钩子函数添加代码，会在页面刷新的时候将 Vuex 存储到 Storage 中，刷新完成后又再从 Storage 取出来存到 Vuex 里面:

1.6 封装数据请求

封装 Axios，添加 Axios 请求 (request) 和相应 (response), 统一处理错误信息或者登录认证的消息, 所有的数据请求都存放到api 目录下，对应的页面方便后续的维护和管理。

1.7 打包构建优化 vue.config.js

1. 区分开发环境和生产环境
2. alias 的方式直接指定目录。
3. CDN

   生产环境中将一些共有库 Vue,vuex,vue-router 等库不打包到项目中，而是通过 CDN 的方式引入这些共有库，这样可以减少项目的大小，也可以借助 CDN 的优势，让网站加载更快。推荐一个强大的 cdn 库：[https://www.bootcdn.cn/](https://www.bootcdn.cn/)

4. 生产环境压缩和出去 console 打印日志
5. 生产环境开启 gzip 压缩
6. 生产环境启用预渲染
7. 生产环境分离 css，外链 CSS 可以缓存

1.7 错误日志监控 Sentry

集成 Sentry 开源日志监控系统，在官网注册获取 key，在main.js 中引入 RavenVue 并配置即可

1.8 自动构建和持续集成

Github 自动构建和持续集成基于 Travis

1. 登录 Travis 选择需要持续集成的项目。
2. 在.travis.yml 写上相应的 config, 服务器配置 ssh_key，
3. 每次代码 push 到指定分支 (比如 master) 的时候，Travis 会自动执行项目上的.travis.yml 文件，开始自动构建，构建成功通过 scp 密令传送到服务器，完成自动部署的功能。

   每次需要发版，只需要 push 代码，然后去喝杯咖啡，回来就已经构建发布完成，解放劳动力

1.9 代码自动格式化优化

团队合作的时候，每个成员用的编辑器不同，缩进格式也不同，这样合并代码的时候会出现各种意外的情况，团队统一编辑器和编辑器不太现实，因为每个人的写代码习惯和风格不一致。可以借助 husky 和 link-stage，每次 commit 的时候都会安装配置的规则格式化代码，参考文章:https://segmentfault.com/a/1190000009546913

1.10 代码优化

1. 设计模式

表单验证需要写很多判断条件，if-else 或者 swith，当条件越多时或者后面需要修改需求条件的时候，会变得不是很好维护，可以用 策略模式 来重构业务代码:

1. 善用 Mixin, 提取共用的组件，将项目组件化

Vue 的 Mixin 复用代码，可以更好的提高开发效率和可维护性
除了将一些共用的页面做成组件引入的方式之外，大文件项目也分好几个模块，将文件才成模块的方式会更好维护和更好的阅读。

2. 服务端

2.1 技术栈:

• Node
• Express
• Mongo
• Mongoose
• Redis
• Qiniu
• PM2

2.2 登录授权

用 Session 认证机制，来实现登录登出。
配置 Session 的加密解密，将 Session 存储到 Redis，提高性能, 如果有多台服务器，Redis 可以共享 Session。

2.3 中间件判断用户是否登录:

有些 API 请求是需要用户登录才可以访问的，可以写中间件来判断:

2.4 中间件判断用户的权限:

有些 API 的请求是需要判断用户是否有权限，比如添加、删除和更新，会在中间件判断是否有权限

2.5 PM2 多进程启动项目

2.6 Mongodb 优化设置索引

2.7 Redis 做缓存

2.8 七牛云对象存储配置 Key 还有域名的绑定以及 HTTPS 证书的申请

3. 后台管理系统 CMS

在线预览:https://www.fancystore.cn/admin

3.1 技术栈

vue-element-admin

配合后端做了权限系统，根据用户的权限来展示和隐藏菜单和按钮。

4. 服务器

1. Nginx 配置 gzip 和缓存策略，根据不同的 URL 来代理。
2. 申请 HTTPS 证书, 全站升级到 HTTPS，配置 HTTP2.0 的协议。

Github:

前端: https://github.com/czero1995/fancy-store

服务端: https://github.com/czero1995/fancy-store-server.git

后台管理 CMS: https://github.com/czero1995/fancy-store-admin.git