当前位置：首页 > news >正文

学习总结1

news 2025/8/8 21:59:19

Vue的学习

Vue是一套用于构建用户界面的渐进式JavaScript框架；

Vue中关键的几个概念：组件化，MVVM，响应式，和生命周期。

1. 组件化：

在Vue框架中，允许你将界面拆分为小的，独立的可重复使用的组件，每个组件有自己的样式，逻辑，这样可以简化复杂网站的开发和维护

2. MVVM

MVVM (Model-View-ViewModel) 是一种设计模式，Model表示数据，View表示界面，ViewModel作为链接Model和View的桥梁，处理View的显示逻辑，并将用户的交互转化为对Model的操作

3. 响应式

响应式就是当一个DOM元素绑定了响应式数据的时候，当数据发生变化的时候，相关的DOM自动更新以反映这些变化。

4. 生命周期

生命周期描述了一个组件从创建到销毁的整个过程，包括创建，挂载，更新和销毁等阶段，我们可以使用生命周期钩子函数来在不同阶段执行自定义代码。

学习了Vue中的一些知识点：

条件语句( v-if )，循环语句( v-for )，组件，计算属性( computed )，监听属性( watch )，样式绑定，绑定事件，表单( v-model )，自定义指令，路由( router )，axios

在学习过程中，比较难的几个方面是组件中的数据传递和路由中的多级路由配置；

组件中的数据传递：子传父，父传子，provide 和 inject 实现跨组件通信；

路由中的多级路由配置：一级路由和多级路由，使用 children 来创建多级路由；

还学习了很多厉害的动态效果。

SpringBoot学习

使用SpringBoot的优点：1. 基于Spring 4，2. 简化编码，3. 简化配置，4. 简化部署，5. 简化监控但是由于我之前没有学习过Spring，所以有很多注解只晓得要用，不晓得到底有什么用，这是后面还要进行学习的地方。

这周尝试实现了前后端交互，刚开始前端发送请求过去后端一直接收不到，然后搞了好久才晓得是要配置跨域申请，然后还有要注意的就是前端发送get请求的时候是使用@RequestParam()注解,Post请求后端在接受的时候要使用@RequestBody注解来接收数据。

axios.get('http://localhost:8081/findAll').then(function (response) {let data = response.data.students; // 提取响应中的数据console.log(data); // 在控制台查看数据tableData.value = data;}).catch(function (error) {console.error('获取学生数据时出错：', error);});

    @GetMapping("/findAll")public String findAll(){List<Student> allStudent = studentMapper.findAllStudent();System.out.println(allStudent);Map<String,Object> data=new HashMap<>();data.put("students",allStudent);Gson gson=new Gson();String json = gson.toJson(data);return json;}

删除成员

const deleteById = (row) => {ElMessageBox.confirm('确定要删除吗？', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',}).then(() => {// 点击确定按钮时的逻辑axios.post("http://localhost:8081/deleteById", {id:row.id}).then((resp) => {console.log(resp);ElMessage({message: "删除成功",type: 'success' // 消息类型，可选值有 success（成功）、warning（警告）、info（一般信息）、error（错误）});const index = tableData.value.findIndex(item => item.id === row.id);if (index !== -1) {tableData.value.splice(index, 1); // 从tableData数组中删除相应的数据项}}).catch((error) => {console.error(error);});}).catch(() => {// 点击取消按钮时的逻辑console.log('取消删除');});}

@PostMapping("/deleteById")public String delete(@RequestBody Map<String,String> map){int id = Integer.parseInt(map.get("id"));studentMapper.deleteById(id);return "删除成功";}

然后还学习了MybatisPlus，Vuex，piain，都学了一个大概，会基本的用法了，还未深入的去了解这些知识。