技术栈：前端采用 Vue2.7版本(可使用Vue3的新特性)作为核心引入大量Vue生态下的组件库（elment ui）、工具库(Vuex VueRouter)等技术。后端使用 .NET 6 开发高性能的 RESTful 风格 API 和微服务。使用EFCore 进行数据库读写操作，使用 Redis 作为缓存层，提高应用性能，使用 gRPC 协议实现微服务间的高效通信。严格参照内部编码规范进行开发（大部分参考微软编码规范） 项目描述：智慧校园系统是一个庞大的项目，项目建立在我们自主开发的低代码平台(减少没有技术含量的CRUD)之上。并且一直不断的更新迭代。我主要描述我参与的其中的一些核心模块。 1.动态页面：我们的系统采用了一种高度灵活的方法来构建动态页面，通过调用后端服务。获取到页面的配置数据，并据此渲染页面。这种方法不仅允许我们根据每个页面区域的具体需求来展示不同的内容（例如表格或自定义组件），而且还让我们能够轻松应对各种定制化需求。为了满足不同客户的要求，我们开发了一系列定制化的组件。此外，我们还特别关注权限管理，确保即使是最小级别的元素（如单个字段或按钮）也能按照用户的权限设置正确显示或隐藏。动态表格组件是我们系统中最常用的组件之一。它可以根据接收到的配置数据动态地调整表格的布局和内容，包括字段的排列顺序、样式以及是否显示等。这种灵活性确保了表格可以根据实际需要进行高效定制。为了确保跨平台兼容性，特别是在移动设备上，我们采用了响应式设计策略。包括使用媒体查询来适应不同屏幕尺寸，并为H5端提供专门优化的组件版本，从而确保无论是在桌面还是移动设备上都能获得一致且优秀的用户体验。 2、拖拽工作台：为了满足学校教师个性化定制首页的需求，我们开发了一项拖拽工作台功能。使用 vuedraggable 库实现拖拽，用户可以轻松地将各种组件拖放到首页的显示区域，并自由调整它们的位置。这一功能不仅提供了丰富的组件选择（开发了大量用户提出的需求组件与大量使用ECharts开发的的图表组件），还允许用户根据个人喜好和工作习惯定制首页布局，从而获得一个完全个性化的主页。满足了每个教师自己的需求。 3、教师个人网盘：为了满足学校的需求，我开发了一个类似百度云网盘的服务，专门为教师们提供基本的云端存储功能。针对大文件的上传，使用了simiple-uplader.js。完成了文件秒传、断点续传功能。为了防止数据量过大，查询接口我们使用了mqtt协议。订阅消息通道，依次渲染数据。提升用户的体验。 4、速度优化：对于一个应用来说，页面打开的速度能很好的提升用户体验。对于我们的低代码平台来说，因为需要额外的请求页面配置的服务。所以我们使用了骨架屏加异步加懒加载的手段。优先渲染对于用户而言重要的的区域。对于非关键的部分延迟加载。利用骨架屏的方式在数据加载过程中提供更好的视觉效果，从而提升用户体验。对页面我们也进行了懒加载。只要用户滚动到了可视区域，才会渲染组件。大大提高了首屏的渲染速度。我们也利用浏览器的本地存储机制（如localStorage），我们将一些页面配置信息缓存在客户端，以便在用户下次访问时能够更快地加载页面。也通过使用Webpack的各种插件和技术减小包体积。当然我们在代码的编写多处采用设计模式如工厂模式提高代码的质量，杜绝性能较差代码的出现，也便于系统的维护迭代。优化后给用户的体验从页面打开需要7-8s提升到3s