潘2024-01-202025-08-13

vue封装数据发送后台

可以使用将数据转换为JSON格式或者使用FormData对象封装数据(键值对)键对应后台的实体类,值前端要传入后台的值
    JSON:                         
    const data = {               
      name: 'John',              
      age: 25,                    
    };
    JSON.stringify(data)

    FormData:
    const formData = new FormData();
    formData.append('name', 'John');
    formData.append('age', 25);

文件上传

1.创建一个表单并添加一个文件输入控件，例如使用<input type="file">元素。
2.监听文件选择事件，获取用户选择的文件，并将其存储在Vue组件的data属性中。
3.通过FormData（表单数据对象）来构造包含上传文件的表单数据。
4.发送POST请求到服务器，携带表单数据，以此来完成文件上传操作。
后端，我们使用了Spring Boot框架和Spring MVC来处理文件上传。通过@RequestParam注解来获取上传的文件，MultipartFile对象包含了文件的各种信息和操作方法。我们使用getBytes()方法获取文件的字节数组，然后使用Files.write()方法将文件写入目标路径。

vue生命周期

1.beforeCreate：实例刚被创建，数据观测和事件配置之前，此时无法访问到data和methods等实例属性。
2.created：实例已经被创建，数据观测和事件配置完成，此时可以访问到data和methods等实例属性，但未挂载到DOM上。
3.beforeMount：在挂载开始之前被调用，此时模板编译已完成，但DOM还未生成。
4.mounted：实例已经挂载到DOM上，此时可以对DOM进行操作，访问到挂载的元素。
5.beforeUpdate：数据更新时，重新渲染之前被调用，此时数据已经更新，但DOM尚未重新渲染。
6.updated：数据更新并且DOM重新渲染完成后被调用。
7.beforeDestroy：实例销毁之前被调用，此时实例仍然完全可用。
8.destroyed：实例销毁后被调用，此时实例及其所有的事件监听器和观察者都被移除。
9.beforeCreate和created钩子函数会在组件实例化之前执行；
10.beforeDestroy和destroyed钩子函数会在组件销毁之前执行。

vue权限控制

当我们开发一个应用程序时，经常需要对用户的权限进行控制，以决定用户能够执行哪些操作或看到哪些内容。
首先，我们需要在Vue中注册这个自定义指令。指令是一种特殊的功能，可以在HTML标签中使用，用来控制元素的行为。在这个例子中，我们将指令名称设置为permission。
接下来，我们定义了指令的具体实现逻辑。当一个元素被插入到页面中时，指令会生效。在这个函数中，我们首先从浏览器的存储中（sessionStorage）获取用户的权限列表，这个列表中存储了用户拥有的权限信息。
然后，我们判断当前权限列表中是否包含了指令的绑定值（也就是所需的权限）。如果不包含，说明用户没有相应的权限。在这种情况下，我们会进行以下操作：
如果元素不是按钮，我们会将它隐藏起来，使用户无法看到它。
如果元素是按钮，我们会禁用它，使用户无法点击它。
此外，我们还给禁用的按钮添加了一个CSS类名is-disabled，通过添加这个类名，我们可以为禁用的按钮添加一些特定的样式。
最后，代码中还添加了一个自定义方法contains，用来判断一个数组是否包含某个特定的值。尽管在这段代码中没有使用到这个方法，但可能会在其他地方使用到它。
总的来说，这段代码实现了一个功能权限判断的指令。它通过用户的权限列表来控制应用程序中的元素是否可见或可操作，从而实现了权限控制的功能。

spingmvc的一些注解

1.@Controller：用于标识一个类为Spring MVC的控制器，可以处理HTTP请求并返回响应结果。
2.@RequestMapping：用于映射请求路径和控制器方法，支持路径变量、请求参数和HTTP方法等条件。
3.@PathVariable：用于获取URL中的路径变量，可以将其绑定到方法参数中。
4.@RequestParam：用于获取请求参数，可以将其绑定到方法参数中，并支持参数默认值、必填项和名称映射等配置。
5.@ResponseBody：用于标识方法返回的结果直接写入HTTP响应体中，而不是通过模板引擎渲染页面。
6.@ModelAttribute：用于在请求处理方法执行前将请求参数绑定到模型对象中，以便在视图中进行显示。
7.@SessionAttribute：用于将模型对象存储到会话中，以便多个请求之间共享数据。
8.@CookieValue：用于获取指定名称的cookie值，并将其绑定到方法参数中。
9.@InitBinder：用于定制数据绑定操作，例如对日期格式进行转换、防止XSS攻击等。
10.@ExceptionHandler：用于捕获控制器内部抛出的异常，并进行统一处理和返回错误信息。

spingmvc返回数据到前端的几种方式

1.使用@ResponseBody注解：在控制器的方法上添加@ResponseBody注解，可以将方法的返回值直接写入HTTP响应体中。Spring MVC会自动将返回值转换为JSON、XML等格式，并设置正确的Content-Type头。
2.返回ModelAndView对象：ModelAndView是Spring MVC中常用的返回类型，它包含了要返回给视图的数据和视图名称。
3.使用Model和Map：可以在方法参数中添加Model或Map类型的参数，然后将数据存储到其中。Spring MVC会自动将这些数据传递给视图。
4.使用HttpServletRequest和HttpServletResponse：可以直接在方法参数中声明HttpServletRequest和HttpServletResponse对象，并使用它们进行数据读取和写入。

时间显示

 formatDate(data) {
   const now = new Date();
  const inputDate = new Date(date);
  //移除时间部分，只比较日期
   const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
 const inputDay = new Date(inputDate.getFullYear(), inputDate.getMonth(), inputDate.getDate());
   //计算两个日期之间的天数差
   const diff = Math.floor((today - inputDay) / (1000 * 60 * 60 * 24));
  if (diff === 0) {
    //如果是当天，显示小时和分
     const hours = inputDate.getHours().toString().padStart(2,'0');
     const minutes = inputDate.getMinutes().toString().padStart(2,'0');
     return '${hours} : ${minutes}'
  } else if (diff === 1) {
     //昨天
     return '昨天';
   } else {
     //几天前
     return '${diff}天前';
   }

}

vue笔记