China, Northeast Forestry University, Software Engineering, Frameworks for Web Application.
Web系统框架，是东北林业大学软件工程专业第6学期的一门专业选修课。
主讲教师：王波老师
课程前部分，基于Vite/Vue3框架的前端MVVM设计模式、组件化设计与单页面开发技术。
课程后部分，基于springboot/spring-cloud框架的后端微服务架构、设计思想与实现技术。
开发环境/框架及版本
- VS Code
- Node.js ^20
- Vue ^3.5
- VueUse ^10 (替代Pinia/Axios)
环境配置较复杂，先看这里
- https://github.com/bwhyman/java-course
- https://github.com/bwhyman/web-course
- https://github.com/bwhyman/springboot-course
- https://github.com/bwhyman/vite-vue3-examples
- https://github.com/bwhyman/flutter_examples
更新nodejs: 22。
按最新vite-vue3模板构建项目并更新依赖版本。
不知为什么，vscode在控制台运行npm run命令错误，必须将切换为 cmd模式 运行。
更新至vue:3.5，更新配置方案。
重新封装useFetch()函数。
添加装饰器模式实现示例(Decorators)。
设计抽象的store缓存装饰器，通过环绕切面在业务方法调用前判断store中缓存，
有则直接返回；没有则实际调用业务方法，并将结果置于store。
装饰器将冗余的缓存判断与核心业务代码解耦。
但装饰器仅支持类，不支持独立函数。
装饰器必须修饰基本方式声明的方法，不能用箭头函数。
注意方法返回值类型与修饰器修改后类型统一。
封装响应式对象/数组与Map为2个独立装饰器，增加装饰器代码可读性。
定义清空装饰器，在执行业务前执行指定清空函数。
tsconfig.app.json需添加配置支持
compilerOptions {
...,
"experimentalDecorators": true,
}添加自定义全局响应式数据源实现。
修改为官方推荐开发环境配置，Vue - Official/eslint/prettier插件。
统一异常处理及弹出模态框。
避免页面出现y轴滚动条时使主区域左移。
全屏loading遮罩下禁止滚动。
作业：Checkbox双向互交绑定；函数式全屏Loading遮罩组件
必须安装Node ^20。
vue更新至3.4。
更新vs code插件及配置。vue引入最新vs code插件vue-official替代volar，取消了TS的take over接管模式以提高性能。
重构。引入VueUse替代Pinia/Axios。
基于useFetch()函数的全局异常处理比axios麻烦，需要封装。
几乎所有数据对象都是响应式的，会不会太重没必要？
store仅用于响应式数据缓存，创建service封装包含网络请求的业务处理。
更新依赖。
Homework03，组件封装与暴露属性。
Homework04，基于Slot的组件内容扩展。
API Mocking移植到mriage
比较了几款API Mocking方案。目的，前端独立开发时模拟后端API请求数据，使用简单学习曲线平缓。
axios-mock-adapter，一直不支持获取REST API路径中参数，需手写正则表达式；延迟需手写Promise；返回的是数组，http status code/headers/body按元素顺序封装，别扭的设计。
MSW，模拟真实服务器，但基于浏览器的使用模式需要运行并生成独立文件，目的仅在测试及联调下使用，不利于打包部署。
node express，真实服务器，但启用支持TS需创建较复杂的独立项目。
mriage，功能丰富，甚至支持模拟数据库的CRUD，但也没什么用，自己实现很方便；基于的pretender.js 21年就不再更新PR也无人处理。passthrough()函数在拦截axios请求时无法更新Promise对象中的通知标识，经测试请求数据却已返回，而原生fatch无此问题。
基于Slot插槽自定义全局权限组件
Pinia按组合式重构，像一个全局的响应式的没有视图Vue组件
更新升级依赖
重构。移除vuex，完全基于pinia使用全局响应式数据。
基于vue新项目构建方法重构
路由基于createWebHistory()函数构建的history在生产环境下需要web容器配置
使用基于createWebHashHistory()函数带#符号的路径解决问题
引入新状态管理库pinia
更新vite/vue/vue-router/vuex版本
使用原生JS+HTML+Proxy代理类，模拟实现视图响应式更新
基于vite重构，引入vue3.2 script-setup等特性。
由于没有脚手架，许多基本模板文件/配置文件得自己写，希望官方尽快完善。