关于项目刚上线前后端所遇到主要问题的复盘

本文涉及的产品
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS MySQL,高可用系列 2核4GB
云数据库 RDS PostgreSQL,高可用系列 2核4GB
简介: 最近正在做的项目上线了,问题很多,有前端的问题也有后端的问题。最近也接触了一点公司的后端,顺便一起简单的总结一下。

image.png


大家好,我是 那个曾经的少年回来了。10年前我也曾经年轻过,如今已步入被淘汰的年龄,但现在幡然醒悟,所以活在当下,每天努力一点点,来看看2024年的时候自己会是什么样子吧,2024年的前端又会是什么样子,而2024年的中国乃至全球又会变成什么样子,如果你也有想法,那还不赶紧行动起来。期待是美好的,但是更重要的是要为美好而为之奋斗付诸于行动。


1、前言


最近正在做的项目上线了,问题很多,有前端的问题也有后端的问题。最近也接触了一点公司的后端,顺便一起简单的总结一下。


  • 应用主要是微信小程序和PC后台, 下面是微信小程序的访问


image.png


这里是正在使用的人数,应该在11月底的时候可能达到访问使用的高峰,情况好的话可能存在上万人的访问使用。


  • 服务器配置 mysql数据库,一主四从 其实我觉得超配了


image.png


  • 应用服务器的话 现在使用了三台应用服务器作为负载均衡


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-…

相关实践学习
每个IT人都想学的“Web应用上云经典架构”实战
本实验从Web应用上云这个最基本的、最普遍的需求出发,帮助IT从业者们通过“阿里云Web应用上云解决方案”,了解一个企业级Web应用上云的常见架构,了解如何构建一个高可用、可扩展的企业级应用架构。
MySQL数据库入门学习
本课程通过最流行的开源数据库MySQL带你了解数据库的世界。   相关的阿里云产品:云数据库RDS MySQL 版 阿里云关系型数据库RDS(Relational Database Service)是一种稳定可靠、可弹性伸缩的在线数据库服务,提供容灾、备份、恢复、迁移等方面的全套解决方案,彻底解决数据库运维的烦恼。 了解产品详情: https://www.aliyun.com/product/rds/mysql 
目录
相关文章
|
设计模式
ES6中新增Array.from()函数的用法详解
ES6中新增Array.from()函数的用法详解
204 1
|
JavaScript
JS检测客户端是否安装
JS检测客户端是否安装
|
机器学习/深度学习 算法 TensorFlow
机器学习算法简介:从线性回归到深度学习
【5月更文挑战第30天】本文概述了6种基本机器学习算法:线性回归、逻辑回归、决策树、支持向量机、随机森林和深度学习。通过Python示例代码展示了如何使用Scikit-learn、statsmodels、TensorFlow库进行实现。这些算法在不同场景下各有优势,如线性回归处理连续值,逻辑回归用于二分类,决策树适用于规则提取,支持向量机最大化类别间隔,随机森林集成多个决策树提升性能,而深度学习利用神经网络解决复杂模式识别问题。理解并选择合适算法对提升模型效果至关重要。
441 4
|
运维 监控 数据可视化
大数据-171 Elasticsearch ES-Head 与 Kibana 配置 使用 测试
大数据-171 Elasticsearch ES-Head 与 Kibana 配置 使用 测试
424 1
|
Java 测试技术
Java反射之Method的invoke方法详解
Java反射之Method的invoke方法详解
|
Java 关系型数据库 MySQL
SpringBoot项目使用yml文件链接数据库异常
【10月更文挑战第4天】本文分析了Spring Boot应用在连接数据库时可能遇到的问题及其解决方案。主要从四个方面探讨:配置文件格式错误、依赖缺失或版本不兼容、数据库服务问题、配置属性未正确注入。针对这些问题,提供了详细的检查方法和调试技巧,如检查YAML格式、验证依赖版本、确认数据库服务状态及用户权限,并通过日志和断点调试定位问题。
1315 6
|
JSON 缓存 前端开发
阿里开发手册 嵩山版-编程规约 (十) 前后端规约
《阿里开发手册 嵩山版》中关于前后端规约的部分,涵盖了前后端交互的API设计、数据格式、错误处理、安全性等关键编程规约,目的是确保前后端开发高效协同,提升软件交付质量。
 阿里开发手册 嵩山版-编程规约 (十) 前后端规约
|
Android开发
Cocos Creator 花了一个月入门经历
一个与人入门算是最笨的那种了吧 分享给大家入门视频教程
1150 0
Cocos Creator 花了一个月入门经历
|
缓存 前端开发 JavaScript
年度代码翻车现场 |前端代码评审问题总结
代码评审于技术团队的工程师文化建设非常有意义,它是形成团队统一代码风格最有效的方式,作者把自己团队在一年的CR中常见的那些小问题做了一些梳理,希望能对大家起到一点小帮助。
220323 8
|
JavaScript
vue 批量绑定属性(你可能没这样用过 v-bind)
vue 批量绑定属性(你可能没这样用过 v-bind)
419 0