学习总结1

Vue的学习

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

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

  1. 组件化:

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

  1. MVVM

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

  1. 响应式

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

  1. 生命周期

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

学习了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,都学了一个大概,会基本的用法了,还未深入的去了解这些知识。

相关推荐
小吕学编程14 分钟前
ES练习册
java·前端·elasticsearch
Asthenia041221 分钟前
Netty编解码器详解与实战
前端
袁煦丞26 分钟前
每天省2小时!这个网盘神器让我告别云存储混乱(附内网穿透神操作)
前端·程序员·远程工作
qsmyhsgcs26 分钟前
Java程序员转人工智能入门学习路线图(2025版)
java·人工智能·学习·机器学习·算法工程师·人工智能入门·ai算法工程师
Humbunklung44 分钟前
PySide6 GUI 学习笔记——常用类及控件使用方法(常用类矩阵QRectF)
笔记·python·学习·pyqt
Mr.app1 小时前
vue mixin混入与hook
vue.js
一个专注写代码的程序媛1 小时前
vue组件间通信
前端·javascript·vue.js
一笑code2 小时前
美团社招一面
前端·javascript·vue.js
懒懒是个程序员2 小时前
layui时间范围
前端·javascript·layui
NoneCoder2 小时前
HTML响应式网页设计与跨平台适配
前端·html