学习总结1 - 技术栈

Vue的学习

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

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

组件化：

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

MVVM

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

响应式

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

生命周期

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

学习了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**注解来接收数据。

javascript 复制代码

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);
  });

java 复制代码

    @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;
    }

删除成员

javascript 复制代码

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('取消删除');
  });


}

java 复制代码

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

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