基于springboot vue教务管理系统 springboot vue3

springBoot+vue3+elemen plus开发过程中遇到的技术使用点回顾

1.前端vue3部分

由原本的vue2选项式API开发变成两种模式，即可选择选项式开发，又新增了组合式API开发，两者在于代码的规范不一样，都可实现功能需求

本次项目选择了组合式开发

①.vue组件内不在需要先导出名称使用，可以直接根据路径调用。

②声明响应式变量由ref与reactive两个关键字实现 这些声明的变量默认就是响应式的变化，数据变化，视图也会变化。

具体如下

③生命周期钩子函数及 ref与reactive在使用前从vue里面引入。

④不需要遵守vue2的规范，所以使开发更简单，申明方法不需要在methods：{}里面 类似于js原生调用，也可以直接function method（）{…}

⑤v-if , v-for …等指令与vue2一样正常使用

⑥父组件传值子组件，只用到其中一种

父组件定义id，绑定tableId

子组件接收，以及监听变化后进行加载操作

⑦style样式操作（很多自己已经忘记的）

1.样式里面写三元表达式

2. 给style加scoped限制在本组件使用后，修改element plus的样式需要使用**:deep()**

2.element plus部分

①在官网复制模板代码的时候，最外层的不要复制到

② 给style加scoped限制在本组件使用后，修改element plus的样式需要使用**:deep()**

③让div居中的操作（其中一种）

1.先给父级div宽度，display属性设置为浮动flex

2.子级div设置样式为margin: 0 auto;

④表单验证规则

1.绑定ref 绑定rules

2.声明ref以及rules

3.在item标签的prop绑定rules规则，且prop与v-model绑定字段需要相同

⑤json文件上传

v-model 绑定文件上传后的生成的列表

action 指向上传的地址

accept 表明选择上传的文件类型

limit 限制选择上传文件个数

on-success 可获取上传成功返回数据

3.后端springboot框架部分

①包文件架构

⑤json文件上传

上传到本地路径，生成的文件地址保存至数据库字段

③其他部分都是正常的增删改查

ng" alt=“image-20230508100058597” style=“zoom:80%;” />

③其他部分都是正常的增删改查