黑马程序员-电商后台管理系统技术总结

前端技术栈

使用Vue CLI脚手架进行项目搭建。‌
利用Element UI进行界面美化。‌
引入了axios作为HTTP请求库。‌
使用了Echarts进行图表展示。‌
使用了nprogress作为加载进度条。‌

登录与登出

如何实现登录？

流程： 在登录页面输入用户名和密码，调用后台接口进行验证，通过验证后，根据后台的响应状态跳到项目主页。
相关技术点： http是无状态的（每个http请求对于服务器来说前后没有任何关系，也就是说，你这次访问服务器，关闭后再次访问服务器，服务器是意识不到又是你来访问的），登陆成功后需要记录登录状态，解决方法：通过cookie在客户端记录状态，通过session在服务器端记录状态，通过token维持状态。
客户端与服务器端存在跨域问题（端口号不同），不存在跨域问题用cookie和session记录，存在用token维持登录状态。

登录页面输入用户名和密码进行登录，服务器对用户名和密码调用接口进行验证通过后生成该用户的token并返回给客户端，客户端将该token存储在sessionStorage中，后续的所有请求都要携带此token发送请求，服务端再次验证token是否通过，这样就能知道你是哪个用户。

需要授权的 API ，必须在请求头中使用 Authorization 字段提供 token 令牌。怎么做呢？
通过axios请求拦截器添加token，保证拥有获取数据的权限。

☆☆数据存储方式？为什么？

将登录成功之后服务器分配的token，保存到客户端的sessionStorage中
（1）为什么要保存token? 因为项目中除了登录之外的其他API接口，必须在登录之后才能访问（token相当于通行证，记录已经登录）
（2） token只应在当前网站打开期间生效，所以将token保存在 sessionStorage中（localStorage是持久化的存储机制，sessionStorage是会话期间的存储机制）
sessionStorage & localStorage
localStorage适合存储需要在多个浏览器会话之间保持的数据，‌
而sessionStorage则适合存储仅在当前会话期间有效的临时数据。‌
这两种存储方式都保存在客户端，‌一般不与服务器进行通信交互，‌且存储的数据大小相对较大，‌不会影响网站的性能。

sessionStorage：开发者需要保存一些数据，但是只在客户端使用，并不想把这些数据交给服务端，也不想把这些数据进行缓存到磁盘。但在浏览器打开后，只要浏览器不关闭，数据一直能够保留，即使刷新页面。
如果你想保存一条数据，不会因为页面的刷新而丢失，sessionStorage 是非常好的选择。

登出如何实现？

销毁本地的token，再重定向到登录页

主页布局

展示菜单，并路由导航到相应页面
获取菜单，定义生命周期函数（在某个时刻会自动执行的函数），调用该函数发送请求
生命周期函数

用户管理

添加用户、删除用户、修改用户、搜索用户、分配角色、分页功能
作用域插槽

权限管理

主要分为展示权限列表（权限名称+路径+权限等级）、
角色列表（增加删除修改，分配权限（弹出对话框，以树形结构获取所有数据））

商品管理

商品分类（分类管理）

展示商品分类的信息（名称、是否有效），相应增加删除修改操作

分类参数（参数管理）

展示商品固定的特征信息以及参数的增加删除修改操作
级联选择器、tab页签

商品列表

商品信息（名称、价格、重量、创建时间、操作）
操作：增删改查
这里的添加商品较为复杂，需要跳转到添加商品的页面而非简单的对话框

添加商品页面：

订单管理

订单基本信息、修改订单地址、查询物流进度（以时间轴形式Timeline）

数据报表

涉及ECharts+mounted()生命周期函数

优化上线

优化策略

前端性能优化策略包括代码压缩、资源合并、减少HTTP请求、懒加载、图片优化、缓存优化、CDN加载、减少DOM操作、异步加载等。

Webpack是一个前端模块化方案，更侧重模块打包。我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源

添加进度条效果 nprogress

生成打包策略

根据生成的报告（vue-cli-service bulid --report）发现问题并解决问题
看到有哪些文件体积过大，将其优化
优化项目的打开速度

CDN加载

内容分发网络（Content Delivery Network，CDN）是建立并覆盖在因特网之上的一层特殊网络，专门用于通过因特网高效传递丰富的多媒体内容，对因特网中的信息流进行优化，从而提高网络的使用效率。
通过externals加载外部CDN资源，就是改为引入外部js路径，可以大大减少依赖项占用内存。
还可通过CDN优化Element UI 的打包，进一步减小打包后的文件体积

首屏加载优化（减少项目首次加载时间）

路由懒加载： 打包构建项目时，JS包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，当路由被访问时才加载对应组件，可以提高页面加载效率。

1. 安装@babel/plugin-syntax-dynamic-import 包
2. 在babel.config.js配置文件中声明该插件
3. 将路由改为按需加载的形式

项目上线

1. 通过node创建web服务器
2. 开启gzip配置
   使用gzip可以减少文件体积，使传输速度更快。
   可以通过服务器端使用Express做gzip压缩
3. 配置HTTPS服务（一般由后台开发人员进行，前端了解即可）
4. 使用pm2管理应用
   后台node server服务器被关掉，那么网站服务就停止了，再通过浏览器访问项目打不开
   保留很多终端窗口可能难以管理，关闭终端窗口网站能够正常运行
   PM2是常用的node进程管理工具，它可以提供node.js应用管理，如自动重载、性能监控、负载均衡等。同类工具有Supervisor、Forever等。

启动项目命令：

pm2 start 脚本 --name 自定义名称

查看运行项目：

pm2 ls

停止项目：

pm2 stop 自定义名称

重启项目：

pm2 restart 自定义名称

删除项目：

pm2 delete 自定义名称

前端项目部署和发布流程：
包括代码打包、版本控制（Git）、自动化测试（Jest、Mocha等）、持续集成（CI）和持续部署（CD）等环节。可以使用工具如Webpack、Babel、Jenkins、Travis CI等。