一、媒介提要
基于Vue和Express框架写的一个全栈购物商城，纪录项目过程当中碰到的一些题目以及履历和技能。
二、汗青版本
- 基于Vue-CLI2.0:点我检察
这个分支版本是一两年前的，基于Vue-CLI2.0写的，数据要求是Mock，纯前端的项目。 - 基于 Vue-CLI3.0:点我检察
这个分支版本是基于Vue-CLI3.0的，将脚手架从2.0迁徙晋级到了3.0，碰到的一些题目和坑也都填完了~也是纯Web端Mock模仿数据的项目。 - 当前版本:点我检察
基于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优化的。
- 将rouer.js形式改成mode:history
- 下载装置PrerenderSPAPlugin
PrerenderSPAPlugin是Google的一个库，基于Chromium是猎取数据，装置PrerenderSPAPlugin的时刻会自动下载Chromium浏览器，国内npm装置Chromium会常常装置失利，发起用淘宝的cnpm装置
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install PrerenderSPAPlugin --save
- 在vue.config.js中引入PrerenderSPAPlugin，设置须要预衬着的路由。
- 下载装置 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
- 辨别开辟环境和临盆环境
- alias的体式格局直接指定目次。
- CDN
临盆环境中将一些共有库Vue,vuex,vue-router等库不打包到项目中，而是经由过程CDN的体式格局引入这些共有库，如许能够削减项目的大小，也能够借助CDN的上风，让网站加载更快。引荐一个壮大的cdn库：[https://www.bootcdn.cn/](https://www.bootcdn.cn/) - 临盆环境紧缩和出去console打印日记
- 临盆环境开启gzip紧缩
- 临盆环境启用预衬着
- 临盆环境星散css，外链CSS能够缓存
1.7 毛病日记监控Sentry
集成Sentry开源日记监控体系，在官网注册猎取key，在main.js中引入RavenVue并设置即可
1.8 自动构建和延续集成
Github自动构建和延续集成基于Travis
- 登录Travis挑选须要延续集成的项目。
- 在.travis.yml写上响应的config,服务器设置ssh_key，
- 每次代码push到指定分支(比方master)的时刻，Travis会自动实行项目上的.travis.yml文件，最先自动构建，构建胜利经由过程scp密令传送到服务器，完成自动布置的功用。
每次须要发版，只须要push代码，然后去喝杯咖啡，回来就已构建宣布完成，解放劳动力
1.9 代码自动花样化优化
团队协作的时刻，每一个成员用的编辑器差别，缩进花样也差别，如许兼并代码的时刻会涌现种种不测的状况，团队一致编辑器和编辑器不太实际，由于每一个人的写代码习气和作风不一致。能够借助husky 和 link-stage，每次commit的时刻都邑装置设置的划定规矩花样化代码，参考文章:https://segmentfault.com/a/1190000009546913
1.10代码优化
- 设想形式
表单考证须要写许多推断前提，if-else 或许swith，当前提越多时或许背面须要修正需求前提的时刻，会变得不是很好保护，能够用战略形式来重构营业代码:
- 善用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手艺栈
合营后端做了权限体系，依据用户的权限来展现和隐蔽菜单和按钮。
4.服务器
- Nginx设置gzip和缓存战略，依据差别的 URL来代办。
- 请求HTTPS证书,全站晋级到HTTPS，设置HTTP2.0的协定。
Github:
前端: https://github.com/czero1995/fancy-store
