个人简历补充

持续更新

1.对工作的认识

2.八股文和知识面

前端（基础知识 / 开发能力 / 总结输出能力）：
前端技术知识（含八股）总结 - 持续更新中
Vue基础学习总结
js基础学习总结
CSS基础学习总结
HTML基础学习总结

后端（基础知识 / 开发能力 / 总结输出能力）：
2022秋招面经总结（补充前面文章中不含的内容）
JavaSE基础补充+JVM学习复习总结记录
数据库MySQL+JDBC学习复习总结记录
Linux课程project----基于c/c++
Linux基础和Linux下C编程复习总结

基础（基础知识 / 总结输出能力）：
操作系统原理OS复习总结
计算机网络基础复习总结

算法（调研能力，思维方式，抽象总结能力）：
SCI-2区：LSTM-convolutional-BLSTM encoder-decoder network for minimum mean-square error approach to speech enhancement
EI / 中文核心：基于抛物面焦点麦克风预处理和迁移学习的语音增强方法
专利：一种基于混合掩蔽学习目标的语音增强方法

随笔记录见其他博客

3.实战

3.1 前端实战

3.1.1 mPaaS（移动领域）

1. 云计算（cloud computing）中讨论的服务包括基础设施即服务（IaaS, Infrastructure-As-A-Service），平台即服务（PaaS, Platform-As-A-Service）和软件即服务（SaaS, Software-As-A-Service）三个层次的服务。（理解：Iaas如买的阿里云买的服务器、PaaS如mPaas提供了移动平台、SaaS如钉钉，三个层次层层递进）
2. mPaaS（mobile Platform-as-a-Service），起源蚂蚁金服。
   具体能力见：

mPaaS能力介绍1
mPaaS能力介绍2
实时发布服务能力MDS
离线包
小程序

3.1.2 普通前端项目框架

package.json ：项目的 package.json 是配置和描述如何与程序交互和运行的中心。 npm CLI（和 yarn）用它来识别你的项目并了解如何处理项目的依赖关系。package.json 文件使 npm 可以启动你的项目、运行脚本、安装依赖项、发布到 NPM 注册表以及许多其他有用的任务。 npm CLI 也是管理 package.json 的最佳方法，因为它有助于在项目的整个生命周期内生成和更新 package.json 文件。

移动端页面适配（vue中实现移动端页面样式自适应）：
lib-flexible插件配合postcss-px2rem插件（阿里解决方案，配合了vant组件库）
方案流程：

1. npm i lib-flexible --save，在main.js里import ‘lib-flexible’，设置or注释掉标签< meta >
   flexible会为页面根据屏幕尺寸自动添加标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值。同时flexible.js文件中封装这refreshRem方法,与页面监听事件绑定,可以动态设置根元素的font-size。体现在页面上就是html根上的style="font-size"会根据机型屏幕尺寸变。
   举个例子：如iphone6的尺寸是375px，它的页面上就是html根上的自动被依赖设置为style=“font-size: 37.5px”
   在lib-flexible里的flexible.js源码里的refreshRam()体现了这一核心操作，他的rem也是 var rem = (width / 10) + ‘px’。
   该公式的物理含义为 1rem=1根元素字体大小
   在做rem布局方案中，一般推荐是将我们的网页划为十等份，我们的HTML标签的字号为视口宽度的1/10（和上面公式也对上了）。
   举个例子：375尺寸的设计图，1rem=37.5px，即1rem十等分了设计图尺寸。
   只用该插件我们可以在样式文件中直接以 rem 作为单位编写样式，而无需手动计算不同屏幕下元素的具体尺寸。
2. npm install px2rem-loader，配置px2rem-loader，在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，设置remUnit: 设计图尺寸 / 10
   postcss-px2rem会将你写的px值转换为对应的rem，rem单位用于适配不同宽度的屏幕，它是根据标签的font-size值来计算出结果的。设置完remUnit我们就可以直接根据设计图上的px值进行正常开发了。
   举个例子：如果设计图尺寸是375的，此时remUnit就要设置成37.5。此时在该设计图尺寸下16px就是16 / 37.5 = 0.426667rem（rem是个比例单位）。当机型变成其他尺寸，如414，此时16px字体尺寸肯定要等比例放大。此时lib-flexible已经帮我们把根元素的font-size变化更新了出来，postcss-px2rem帮我们转换px尺寸。在设计图375px下是根元素fontsize是37.5，此时更新成了41.4，代表的物理含义是1rem = 41.4px，最后该375下的16px字体就变成了414屏幕尺寸 41.4 * 0.426667 = 17.6px。

mpaas框架下移动端h5调用native的能力：引入alipayjsapi

3.1.3 微前端

• 微前端概念和微服务一样，解耦前端页面框架。可以做到vue、react、原生混合开发，互相解耦。典型框架是qiankun

3.1.4 项目经历：把一个word文档内容（分不同章节）展示在一个竖直大长页中，包含多个echarts/表格/页面数据、多个接口请求。除上拉滑动查看外，还可以大纲直接点击章节查看。如何实现并优化？

• 解决方案：章节锚点（定位） + 上拉滚动监听（优化按需渲染压力、按需发送请求压力）+ 节流（优化滚动监听频率）+ 异步组件懒加载（优化按需渲染压力、按需发送请求压力）+ 章节锚点flag数组（避免重复发送请求）

• echarts / g2plot 画图：1.id重复画图问题。2.g2plot更新数据要调用更新数据的方法，echarts更新数据要重置配置里的data。3.实时更新数据用watch就行。

• 数据制作成展示结构（包括页面直接展示、表展示、柱状图、饼图、折线图展示，类似于仪表大盘实现）：
  大概：由于该需求特殊性，前端整理组织全部数据。故利用工厂设计模式整理数据。页面多个模块显示内容是调用不同接口得到数据，且包含列表、echarts、直接显示等多种展示方式，给每个某块设计一个独立的vue data属性，即独立的数据结构对象（其实有点typescript的感觉）。实时性可采用定时器发请求。
  具体：.map方法数组筛选出数组、三个点…拆装箱、固定自定义数据结构。注意let temp = { a:[] }初始化列表。直接属性temp.b = 3可以，列表temp.a.push()必须初始化了a才行。

• webworker：该需求js数据计算的量级不大，单次处理不到100条数据，所以没用webworker

3.1.5 项目经历：文件上传

• element-ui的上传文件组件。前端默认发的是post请求，Content-Type为multipart/form-data，即通过常见的FormData编码（一般二进制文件上传都要用这个）类型把File类型（继承Blob，二进制，其type属性为为该文件具体的MIME类型）文件直接传上去了。后端Spring框架的MultipartFile类来处理上传的文件（它通常用于处理multipart/form-data类型的请求），通过get等方法获取文件信息、文件流内容等，处理文件。该流程也是比较常见常规的上传文件流程。

• 阿里OSS给前端/客户端/后端暴露的oss.put()调用上传文件。前端/客户端发的是put请求（后端没验证，但感觉大概率是。PUT请求用于向指定URL传输文件或数据，在文件上传场景中，可以使用PUT请求直接将File从客户端发到服务器），Content-Type为application/msword或其他类型或干脆没有Content-Type字段，通过该编码类型把File类型（继承Blob，二进制，其type属性为该文件具体的MIME类型）文件传上去了。可以看出来和element-ui的上传文件组件及后端处理文件方式这一条龙相比，没用multipart/form-data对文件进行编码，而是直接甩File上去。

• 大文件上传：blob切片上传。

• 断点续传：可以使用 localStorage 或 sessionStorage 来存储已上传的切片信息，包括已上传的切片索引、切片大小等。采用文件唯一标识符或用户会话标识符进行区分。

3.1.5 项目经历：登录（PC页面；基于mpaas hybird方案移动端一般由客户端控制登录）

1.区分二维码登录和账户登录
基于账户登录：
2.登录（登录验证、登录保持、登录退出）：

1. localstorage获取缓存的用户名等其他信息做展示
2. 用户名和密码校验（特殊字符校验、长度校验等定制化校验，即表单校验）
3. 上锁（防止重复登录）
4. client发请求获取公钥（服务端生成），拿到返回结果后，通过SM2加密算法和公钥，加密密码
5. clinet将用户名和加密后的密码发请求*
6. server返回的header里Set-Cookie加密token、加密sessionId（涉及redis会话保持），并在body里放了加密token和用户uuid
7. 解锁，到此步已经登录成功，后续均为具体需求场景
8. client拿用户uuid和token发请求，拿到用户全部信息
9. client清除之前的localstorage、sessionstorage中无用缓存信息，并set新的用户信息（可用做下次登录用户名头像签名等信息的展示等等），并格式化用户信息数据，并vuex中保存信息。（总结：清除/初始化localstorage、sessionstorage、vuex中保存的用户信息，vuex/localstorage等保存这些可以用来做登陆保持）
10. 获取菜单信息，动态调整页面路由，千人千面
11. 退出。清除信息、状态，返回登录页。

基于二维码登录：
3.登录（登录验证、登录保持、登录退出）：

1. 拿到qrcode的string，通过组件生成qr码
2. 二维码定时器发检查登录状态，再来个计数器刷新码
3. 检查成功，发请求拿token后边都一样

tips细节：

• 为了更安全，可以在3.client发请求*时候再来个公私钥密码对发给server，这样server发来的sessionId和token也能加密）

• 登录过程中有许多信息需要共享使用，借助vuex可以在代码中共享

• sessionId和token一般会set在cookie里。（cookie localstorage sessionstorage区别在前文）

• token放在cookie无法跨域，可以放在HTTP请求的头信息Authorization字段或者代码里存一下；sessionId遇上分布式场景，可以存在redis里来识别。

• 加密/解密（防泄露） 和 签名/验签（防篡改）
  加密/解密过程：密码原理上安全，但可以抓到公钥，而且可以篡改信息
  a -> b ：a请求登录，需要加密密码，向b请求获取公钥
  b -> a：b配合加密算法生成公/私钥对，自留私钥，给a发公钥
  a -> b：a拿到公钥，配合加密算法，加密密码，发给b，b用私钥解密

签名/验签过程：保证信息不会篡改，就算抓到报文和公钥，因为不知道私钥也没法改信息
a -> b：a配合加密算法生成公/私钥对，自己对信息做签名，把签名（即加密后信息）+原文信息发给b
b -> a：b收到消息后，向a发请求获取公钥验签
a -> b：a给b发公钥
b：b验签

加密配合签名，可以保证防泄漏和防篡改。整个报文加密，需要通过https进行网络传输层面加密。

3.2 后端实战