一、项目内容  使用vue3+Layui实现通用管理系统前端，使用vue3+layui搭建系统UI界面，使用nodejs搭建模拟web服务器，使用echarts实现系统可视化模块，可以此项目为基础进行扩展开发，快速搭建管理系统，具体内容如下：  1.常见功能实现：实现用户登录（用户名密码登录、手机验证码登录、第三方登录）、找回密码（邮箱找回、短信验证码找回）、注册界面、系统主页、用户管理、系统配置、数据字典、日志管理、菜单管理、角色管理、消息管理、验证码管理、可视化界面等管理系统的常见功能。  2.公共常用组件：实现公共组件的抽离以便能进行扩展及复用，包括通用表格、通用编辑器、通用详情页、关联

5.前端校验我们在前端提交的表单数据，我们也是需要对提交的数据做相关的校验的Form组件提供了表单验证的功能，只需要通过rules属性传入约定的验证规则，并将Form-Item的prop属性设置为需校验的字段名即可校验的页面效果前端数据校验就搞定了。后端校验也是不可避免的6.后端服务校验6.1JSR-303介绍  JSR是JavaSpecificationRequests的缩写，意思是Java规范提案。是指向JCP(JavaCommunityProcess)提出新增一个标准化技术规范的正式请求。任何人都可以提交JSR，以向Java平台增添新的API和服务。JSR已成为Java界的一个重要标准。

文章目录一、前言二、使用shrinkpng进行图片压缩2.1安装依赖包2.2引入包2.3开始编码三、网络上建议的其他压缩图片的插件3.1vue-image-compressor3.2vue-filepond总结一、前言最近有一个需求，通过手机拍照后上传图片到服务器，大家应该都知道，现在的手机像素实在是太高了，随便拍一张都是10M以上，直接上传到服务器一方面是浪费存储空间，另外就是特别浪费流量，如果网络不好还很慢。所以想寻求一种前端压缩图片的方案。在网上找了很多方式效果都不好，要么是根本无法实现功能，要么就是兼容性不好。不过最终找到一个比较完美的插件。点击可以直接到主页：shrinkpng，话不

1.引言前端容器化是一种将前端应用程序打包成容器的技术，使其可以在不同的环境中快速、高效地部署和运行。2.背景前后端分离的趋势已形成现状，前端工程复杂度叠加增长，新、老项目部署依赖的环境和Node.js版本会存在差异，生产环境下构建混淆后的脚本、静态资源文件依赖环境部署服务进行访问，前端工程未能形成"单体工件"部署，容器的出现大大简化了部署流程。前端容器化可以方便的管理前端环境变量注入、运行环境(不同项目依赖不同的node环境，node的版本兼容是个很大的问题)、节约服务器成本、更快捷方便的版本回滚、多架构部署、CI/CD自动化集成部署、DevOps等等，好处只有多到你想不到(此处手动偷笑)。

需求:实现流程图功能，根据状态不同显示不同的颜色，点击有对应的点击颜色思想：根据jsmind构建思维导图，改变节点背景颜色，获取点击节点事件当点击节点是设置节点选中背景图片。注意：由于jsmind更新各版本api都有很大改动，所以我使用的都是官方文档注明的基于各版本都支持的api效果： 这里的要素是根据接口返回的，具体接口数据如下： root是根节点，chrldren是子要素，可以根据自己的需求自行改造代码：先引入jsmind库（我引入的最新版本0.5）npminstalljsmind@latest--save找到刚才引入vue中的jsmind的npm包，可以看到jsmind.css,在这里可

由于前端在开发时使用的都是标准ui设计图，基本都是按照所以1920*1080，而小屏幕笔记本由于分辨率高，所以导致的显示元素变小，因此很多笔记本的默认显示都是放大125%或者150%。如果页面比较简单就让多余的空白单边扩展，这样可以不受影响，但是如果页面遍布了引入的其他组件，就不好控制位置和大小了。我去搜了一下，基本都是根据window.screen.availHeight来获取屏幕缩放比例，window.screen.availHeight>1000说明缩放选择的是100%，否则是125%、150%,还有使用媒体查询的，直接拷贝过去试了一下一点用没有，但是我说明一下，这个肯定是一种解决方式，

文章目录后台代码gitclone到本地创建数据库配置项目测试前端项目gitclone到本地下载node.js下载组件无法识别npm命令的解决运行结果附录1：不想每次登录都填写用户名密码？附录2：不想每次输入验证码验证？附录3：想要局域网的其他电脑也能访问到当前项目？附录4：没有权限又不想授权？跳过严格的编译检查代码自动生成gitclone项目修改数据库信息修改代码生成器第一次使用第二次使用（相同项目不同模块）修改controller配置可视化操作案例1.common模块：2.其他模块使用新建自己的目录、菜单创建菜单目录规范树形组件将请求转发给网关跨域问题是什么可行的解决方案最终解决后台代码gi

前话：我只是个自学到工作的小菜鸟，如果有大佬有更好的方法，希望不吝赐教。1.电脑环境node版本14.20.0   vue-cli4.4.0(如果你的项目是vue-cli5版本（即webpack5）的会有很多问题，解决办法写在后边)这是我用到的三个插件的版本，自行安装，版本请保持和我一致。【我发布了oh-my-toolsnpm包，也可以直接下载包使用，npmioh-my-tools,然后使用】 "file-saver":"^2.0.5",  "xlsx":"^0.16.9",  "xlsx-style-medalsoft":"^0.8.13"2.下边直接贴代码，复制能直接使用，完全二百五都能用

前言：后端使用SpringBoot框架，前端使用Vue框架，做一个前后端分离的小项目，需求：实现一个表格，具备新增、删除、修改的功能。目录一、数据库表的设计二、后端实现环境配置数据处理-增删改查model层mapper层XML配置Service层controller层单元测试三、前后端交互配置vite.config.ts文件配置创建axios实例 业务请求四、前端实现环境配置Main.vueinterface接口五、效果展示六、总结一、数据库表的设计设计了一个merchandise表，id是编号，唯一的，类型为int，category是一级类别，type是二级类别，name是商品的名称，sum

🌷🍁博主猫头虎（🐅🐾）带您GotoNewWorld✨🍁🦄博客首页——🐅🐾猫头虎的博客🎐🐳《面试题大全专栏》🦕文章图文并茂🦖生动形象🐅简单易学！欢迎大家来踩踩~🌺🌊《IDEA开发秘籍专栏》🐾学会IDEA常用操作，工作效率翻倍~💐🌊《100天精通Golang(基础入门篇）》🐅学会Golang语言，畅玩云原生，走遍大小厂~💐🪁🍁希望本文能够给您带来一定的帮助🌸文章粗浅，敬请批评指正！🐅🐾🍁🐥解决WebSocket通信：前端拿不到最后一条数据的问题🛠️作者：猫头虎简介📚在实时应用开发中，WebSocket是一种常用的通信协议。然而，在使用过程中，你可能会遇到一个棘手的问题——前端拿不到最后一条数据。本