清柠陪学项目复盘

项目复盘

介绍一下项目？

这个项目名称是“清柠陪学”，是一个一个面向大学生的综合学习平台。
采用前后端分离的方案。（SSR（服务端渲染前端页面的产生是由服务器端生成的，我们就称之为服务端渲染）。使用vue2框架进行开发，使用webpack进行项目优化，完成了登录注册、清柠首页、清柠广场、个人中心、清柠签到、清柠文章、每日计划，外网展示。
我在项目中担任前端组长，参与框架搭建与核心功能（登录注册，个人中心，文章发布，打卡签到）研发。

你怎么理解前后端分离？为什么要前后端分离？

前端写一套代码，后端写一套代码。前端代码跑在浏览器上，后端代码运行到服务器上。前端主要负责渲染页面，后端主要负责处理数据。
职责清晰，分工明确。

为什么使用vue而不是其他框架？

● 基于项目成员的学习进度（大部分成员起步学习的是vue）
● 基于ui设计采用的组件库(element反向迫使只能选用vue)
● 易学，渐进，高效的特点

项目本身的特点，区别于其他管理系统的特点？

1. 功能特点：近年来随着互联网快速发展，大家之间的距离感越来越严重，尤其是大学生之间的交流，有些项目竞赛需要团体协作，但是同学们习惯了自学，缺少了合作能力，或者因为社交圈子太窄，找不到合适的合作伙伴。清柠陪学应运而生。传统学习软件无法提供个性化的定制服务，我们的出发点即为亮点。
2. 技术特点：基于vue全家桶，将各种大而全的性能优化，落实到了具体的功能点和代码里了。
3. UI特点：超简洁的ui风格，一别于其他传统的管理系统，增添了项目的活力和用户好感度。

从项目中学到了什么？

首先我觉得很重要的一点是，让我对整个前端的学习有了很好的实践。以前只是看官方文档或者书，觉得已经理解了基础知识，上手应该会快一点。实践之后发现了很多很多的问题。

然后项目已经上线，我觉得最重要的是学到了项目上线的流程。因为我有加入计科卓越班，我们这边有校企合作的项目。所以严格参照企业的标准进行上线部署。
1、项目立项：
市场需求或者合同、项目立项申请表、项目风险分析清单

2、需求分析与评审：

软件需求报告或设计方案、需求规格说明书

3、概要设计：

概要设计说明书或功能模块描述

4、详细设计：

详细设计说明书，包括软件接口说明、单元测试计划

5、编码实现：

软件功能说明、源代码、源代码说明或者注释

6、测试设计与执行：

测试计划、测试用例、缺陷报告、测试报告

7、产品发布：

产品说明书、使用手册

8、线上运维：

问题反馈记录

9、项目总结：

提交客户方的项目总结或第三方验收资料

作为组长你是怎么管理6个人的团队？

作为组长：
1.组内每周让他们做技术分享，并且互相学习，以此达到触类旁通的效果，不止是各忙各的，让每个人都有项目整体意识和全局观念，防止有人划水。
2.每次开会前，明确会议类型，会前准备（主题，材料，大纲，提前的共识），参会人责任人等，不开无休止的会议，不打无准备的仗，高效简洁。
3.改进团队作风，积极进行团队建设，并鼓励每个人和他们的优点要多夸，奖励制度，每个人的想法与生活方式成就一个人，我们只能借事修人。
4.保持良好的沟通，了解学习进度，这个尤为重要，切记赶鸭子上架，组员明明不会的东西，还要强人所难。唯有了解每个人的情况，才能剑有所向，心有所指。

项目登录的权限管理怎么做？

1.权限管理一般需求是页面权限和按钮权限的管理
2.具体实现的时候分后端和前端两种方案:
（1）前端方案会把所有路由信息在前端配置，通过路由守卫要求用户登录，用户登录后根据角色过滤出路由表。比如我会配置一个asyncRoutes'数组，需要认证的页面在其路由的meta中添加一个'roles字段，等获取用户角色之后取两者的交集，若结果不为空则说明可以访问。此过滤过程结束，剩下的路由就是该用户能访问的页面，最后通过 router.addRoutes(accessRoutes)方式动态添加路由即可。
(2）后端方案会把所有页面路由信息存在数据库中，用户登录的时候根据其角色查询得到其能访问的所有页面路由信息返回给前端，前端再通过addRoutes动态添加路由信息。
按钮权限的控制通常会通过一个指令实现，例如v-permission，将按钮要求角色通过值传给v-permission指令，在指令的moutned 钩子中可以判断当前用户角色和按钮是否存在交集，有则保留按钮，无则移除按钮。
优缺点：纯前端方案的优点是实现简单，不需要额外权限管理页面,但是维护起来问题比较大，有新的页面和角色需求,就要修改前端代码重新打包部署;服务端方案就不存在这个问题，通过专门的角色和权限管理页面，配置页面和按钮权限信息到数据库，应用每次登陆时获取的都是最新的路由信息，可谓一劳永逸!

项目登录是怎么实现的？

使用JWT认证机制。

项目亮点是什么？

性能优化
首屏加载很慢？
首屏计算时间：
new Date().getTime() - performance.timing.navigationStart
放在js代码最下面

浏览器自身的performance API去测量,以谷歌为例，Google的devtools。

1.压缩文件、使用 Tree-shaking 删除无用代码
2.服务端配置 Gzip 进一步再压缩文件体积
3.资源按需加载
4.通过 Chrome DevTools 分析首屏不需要使用的 CSS 文件，以此来精简 CSS
5.内联关键的 CSS 代码
6.使用 CDN 加载资源（npm第三方非主要功能的库全部使用cdn在index.html引入。比如防抖节流的库，axios的库，天气的库，日期格式化的库）及 dns-prefetch 预解析 DNS 的 IP 地址
对资源使用 preconnect，以便预先进行 IP 解析、TCP 握手、TLS 握手
7.缓存文件，对首屏数据做离线缓存
8.图片优化，包括：用 CSS 代替蹄片、裁剪适配屏幕的图片大小、小图使用 base64 或者 PNG 格式、支持 WebP 就尽量使用 WebP、渐进式加载图片。
9.长列表优化
可视列表|| 容器的宽高 || 真实列表
举个栗子：现在需要被渲染出来的列表数量一共有100条，但是实际上在页面需要被渲染的列表数量只需要10条，这个10条就是所谓的真实列表。startIndex我的总列表(数组)的长度为1000，而需要渲染的列表片段为100—200，那么这个开始的位置，也就是数组的index则为99。endIndex最后一个元素的index是199。实现：主要就是通过v-if去控制列表的展示，通过startIdx和endIdx的增减，去展示不同位置的数据，让这两个值递增就可以实现列表滚动。
vue长列表优化的思路:
首先要从设计上避免大数据获取和渲染，实在需要则可以采用虚拟表的方式优化渲染数量，最后优化更新，如果不需要更新可以使用v-once避免更新，需要更新可以使用v-memo进一步优化大数据更新；也可以采用其他的交互方式优化，无线滚动，懒加载等方案。
用法
记住一个模板的子树。元素和组件上都可以使用。该指令接收一个固定长度的数组作为依赖值进行记忆比对。如果数组中的每个值都和上次渲染的时候相同，则整个该子树的更新会被跳过

...

当组件重新渲染的时候，如果valueA都维持不变，那么对这个

以及它的所有子节点的更新都将被跳过。事实上，即使是虚拟 DOM 的 VNode 创建也将被跳过，因为子树的记忆副本可以被重用。 使用场景 假设请求接口返回来了1000+条数据。 前端需要做筛选。 选出符合条件的数据进行展示。 如果没有符合条件的。则保持上次的展示。 10.路由懒加载 + 统一根路径 + 图片懒加载 + 分页

项目利用webpack做了那些优化？

1. 优化loader的配置
   （1）优化正则匹配
   （2）通过cacheDirectory选项开启缓存
   （3）通过include、exclude来减少被处理的文件。

{
  // 1、如果项目源码中只有js文件，就不要写成/\.jsx?$/，以提升正则表达式的性能
  test: /\.js$/,
  // 2、babel-loader支持缓存转换出的结果，通过cacheDirectory选项开启
  loader: 'babel-loader?cacheDirectory',
  // 3、只对项目根目录下的src 目录中的文件采用 babel-loader
  include: [resolve('src')]
},

2. 优化UglifyJs插件
   webpack默认提供了UglifyJS插件来压缩JS代码，但是它使用的是单线程压缩代码，也就是说多个js文件需要被压缩，它需要一个个文件进行压缩。所以说在正式环境打包压缩代码速度非常慢(因为压缩JS代码需要先把代码解析成用Object抽象表示的AST语法树，再去应用各种规则分析和处理AST，导致这个过程耗时非常大)。
   因此我们需要可以并行处理多个子任务，多个子任务完成后，再将结果发到主进程中，基于这个思想后，因此 ParallelUglifyPlugin 插件就产生了，当webpack有多个JS文件需要输出和压缩时候，原来会使用UglifyJS去一个个压缩并且输出，但是ParallelUglifyPlugin插件则会开启多个子进程，无非就是串行变成了并行处理该压缩了，并行处理多个子任务，效率会更加的提高。

3. tree-shaking摇树
   这个东西的作用就是，当你项目在打包的时候，它会帮你剔除一些无用的js代码，从而降低包的体积，提升性能。
   usedExports: 目的是标注出来哪些函数是没有被使用 unused
   terser：将未使用的函数, 从我们的代码中删除

4. 按需加载代码
   通过vue写的单页应用时，可能会有很多的路由引入。当打包构建的时候，javascript包会变得非常大，影响加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。这样会大大提高首屏显示的速度，但是可能其他的页面的速度就会降下来。

图片的懒加载是怎么实现的？

在滚动屏幕之前，可视化区域之外的图片不会进行加载，在滚动屏幕时才加载。这样使得网页的加载速度更快，减少了服务器的负载。懒加载适用于图片较多，页面列表较长（长列表）的场景中。
原理：
图片的加载是由src引起的，当对src赋值时，浏览器就会请求图片资源。根据这个原理，我们使用HTML5 的data-xxx属性来储存图片的路径，在需要加载图片的时候，将data-xxx中图片的路径赋值给src，这样就实现了图片的按需加载，即懒加载。
注意：data-xxx 中的xxx可以自定义，这里我们使用data-src来定义。
懒加载的实现重点在于确定用户需要加载哪张图片，在浏览器中，可视区域内的资源就是用户需要的资源。所以当图片出现在可视区域时，获取图片的真实地址并赋值给图片即可。
知识点：
（1）window.innerHeight 是浏览器可视区的高度
（2）document.body.scrollTop || document.documentElement.scrollTop 是浏览器滚动的过的距离
（3）imgs.offsetTop 是元素顶部距离文档顶部的高度（包括滚动条的距离）
（4）图片加载条件：img.offsetTop < window.innerHeight + document.body.scrollTop;

引入富文本编辑器会导致xss攻击？

const xssFilter = (html)=> {
if(!html) return ‘’;
//将script标签过滤
html = html.replace(/<\s*/?script\s*>/,‘’);
//过滤html标签中存在的javascript所执行的内容
html = html.replace(/javascript:[^‘"]/g,‘’);
//过滤html标签中所执行的脚本
html = html.replace(/onerror\s=\s*[’“]?[^'”]*[‘"]?/g,’');
return html;
}

登录信息存储在localstrong里有极大的风险，怎么解决？

1.可能会被篡改，对 localStorage进行加密和解密，推荐：
localStorage.setItem(‘user’,window.btoa(window.encodeURIComponent(JSON.stringify(res.data))))
2.给window添加监听事件
window.addEventListener(‘storage’, (e) => { localStorage.setItem(e.key, e.oldValue) //重新赋值修改前的值 }) 123
如果该条数据是不变的，可适用。

项目前后端怎么统一接口？

基于restfulAPI设计规范。