本文正在参加「金石计划 . 瓜分6万现金大奖」
大家好，我是
那个曾经的少年回来了。10年前我也曾经年轻过，如今已步入被淘汰的年龄，但现在幡然醒悟，所以活在当下，每天努力一点点，来看看2024年的时候自己会是什么样子吧，2024年的前端又会是什么样子，而2024年的中国乃至全球又会变成什么样子，如果你也有想法，那还不赶紧行动起来。期待是美好的，但是更重要的是要为美好而为之奋斗付诸于行动。
1、前言
最近正在做的项目上线了，问题很多，有前端的问题也有后端的问题。最近也接触了一点公司的后端，顺便一起简单的总结一下。
- 应用主要是微信小程序和PC后台， 下面是微信小程序的访问
这里是正在使用的人数，应该在11月底的时候可能达到访问使用的高峰，情况好的话可能存在上万人的访问使用。
- 服务器配置 mysql数据库，一主四从 其实我觉得超配了
- 应用服务器的话 现在使用了三台应用服务器作为负载均衡
2、前端
先说一下前端的问题，这里对代码的探讨不做过多的展示，主要简单说明一下技术的实现方案。
2.1、技术选型问题
h5嵌套到小程序的webview,但是又要用到小程序里的地图定位，就需要由H5跳转到小程序的页面，然后要由小程序页面返回到webview中的h5,这里还需要有一个返回值传到h5中，这里我暂时没想到办法，至少我没想到办法回传数据，于是只能简单的写个定时器，不断的通过接口调用，相当于数据的回传刷新了。
这里如果完全是小程序的页面就不会存在这个问题了，不过水饺咱没时间全部用小程序的页面呢？
2.2、表单重复提交问题
由于项目中主要的就是数据的录入，所以出问题最多的就是在表单多次提交，其实也有很多的方法。
- 方法一： 按钮提交时，将按钮设置为加载状态，并不可点击。
- 方法二： 通过pinia保存状态数据，点击保存时对比数据，数据如果未被修改，则不调用接口保存，有效的减少了服务器写入数据的压力。
2.3、缓存问题
由于是h5嵌套到webView的小程序中的，所以有时候明明更新了前端，用户却还是之前的版本，这里想到的办法就是通过nginx 配置 缓存
location /{
alias /usr/local/xxxx;
index index.html;
add_header Cache-Control no-cache;
}
no-cache 协商缓存，每次也去服务器请求，但会进行判断是否是新的资源，如果是旧的资源，则直接返回304使用客户端的缓存。
no-store 相当于每次请求都会从服务器获取前端页面，不会进行缓存。
当然这里其实还存在一个问题，
2.4、其他
当然还存在其他一些小问题，比如用户操作便利性的改进，以及友好的错误提示，首页访问较慢、qiankun自子应用加载慢的问题都需要进一步研究解决 等等。
3、后端
由于我也参与了一些后端接口的工作，对整个前后端的情况都有所了解。
3.1、重复数据
由于前期时间确实比较紧张，准备不足，导致程序存在一些问题，经过排查发现，在导入数据的时候没有判断数据的唯一性，导致数据重复。这个算是一个bug，目前已经修复了。
3.2、数据延迟
由于高峰期存在接口10秒都没有提交成功的情况，后来发现mysql事务中的查询存在比较大的耗时，经过调整添加索引修改查询条件，不进行全表扫描，目前观察不存在事务高峰期数据并发导致Mysql数据库CPU拉满的情况。
3.3、日志处理
应用中存在记录日志文件过大，并发量大的时候，导致频繁插入，而且文件越大插入速度必然很慢，这里做了文件大小限制，将大小设置未10M，很小了，速度非常快。并且在应用中对日志类型也就是写入日志的频次进行 修改，没有必要的日志进行了移除。
3.4、用户身份
通过调试发现，每次接口调用，用户身份信息都会重新获取，而且要请求mysql，这个看了一下并不是那么容易处理，暂时还没解决。这里可以进行缓存处理，但是发现有一点复杂，后面有时候肯定还是要处理的。
4、 总结
最近刚好在重装自己的办公电脑，以及个人华为云服务器，总结还需要加强的一些知识点
- linux磁盘挂载问题
- mysql数据备份问题
- 服务器扩容前的处理事项、应用备份、以及相关配置文件
- 服务器扩容后的检查工作、磁盘状态、应用、数据库、redis等正常使用
- mysql数据库索引在查询方面真的太重要了
- mysql 主从同步、读写分离
- 应用层的负载均衡
我的个人博客：vue.tuokecat.com/blog
我的个人github：github.com/aehyok
我的前端项目：pnpm + monorepo + qiankun + vue3 + vite3 + 工具库、组件库 + 工程化 + 自动化
不断完善中,整体框架都有了
在线预览：vue.tuokecat.com
github源码：github.com/aehyok/vue-…
