岁岁岁平安的博客

本篇博客内容：详细讨论与讲解了如何使用前端技术JSP或Vue3实现Ajax的跨域请求后端SpringBoot服务器。涉及方法：JSONP、注解@CorssMapping。配置类实现WebMvcConfigurer接口或实现配置类返回CorsFilter跨资源共享拦截器对象(注解@Configuration、@Bean)...

本篇博客内容：使用Vue3快速开发登录注册页面。前端Vue页面与后端SpringBoot服务器进行对接。其中涉及前端表单项校验规则设定与绑定、“二次确认密码”自定义校验规则(element-plus)、后端自定义异常类、后端封装返回前端数据结果类、全局异常处理器、配置前后端跨域请求、Hutool工具类的使用。最后成功完成员工的登录、注册功能,,,

本篇博客的内容：使用SpringBoot3+Vue3实现基本增删改查。包括前后端通信交互的实现。解决和配置后端跨域请求。实现SpringBoot3后端服务器与Vue3前端页面可视交互的分页查询、条件查询、新增、编辑(修改)、数据单个删除与数据批量删除等等...

本篇博客的内容：2025最新教程使用Vue3快速搭建后台管理系统(整体设计与实现)。主要包括网页的父、子级路由嵌套渲染页面、网页头部的标题、logo、头像、用户名的设计与实现、网页侧边导航栏的设计与实现(菜单项路由跳转、菜单项选择时高亮显示)。详细讲解网页主体数据展示区域的设计与实现(数据表格、按钮项、表单等等)...

本篇博客的内容：实现Vue3集成Vue-Router(路由)。详细讲到了嵌套路由(父、子级路由配置)的使用(<RouterView/>)、路由守卫(导航守卫:路由跳转修改网页标题)(beforeEach())、404NotFound页面的设计与路由跳转配置(详细操作)...还有内容在《Vue3集成Vue-Route》(上)...

本篇博客的内容：实现Vue3集成Vue-Router(路由)。详细讲到了<RouterLink>(路由跳转)、push('/xxx')与replace('/xxx')的编程式路由跳转、如何设置默认页面路由？最后详细的演示操作路由跳转的单个参数与多个参数传递的方式与获取传的参数。更多的《Vue3集成Vue-Router》内容将在下篇博客...

本篇博客的主要内容：实现Vue3集成Element-Plus。Element-Plus常用组件的使用(下篇)，涉及标签：<el-carousel>(走马灯/轮播图)、<el-date-picker>(日期选择器)、DateTimePicker(日期时间选择控制器)、<el-time-picker>(时间选择器)、<el-table>(表格)、<el-pagination>(分页)、scope(插槽/操作栏)、<el-dialog>(对话框/弹窗)的详细使用方法与操作演示、页面渲染效果...

本篇博客的主要内容：实现Vue3集成Element-Plus。Element-Plus常用组件的使用（上篇）：涉及标签：<el-input>(input输入框)、<el-select>(select下拉框)、<el-radio-group>(单选框)、<el-checkbox-group>(Checkbox多选框)、<el-image>(图片)的详细讲解与如何使用...

本篇博客的内容：完成Vue3集成Element-Plus的初步学习。包括常用的element-plus、sass组件依赖、插件的安装、导入。element-plus组件库的按钮、图标的几种常见使用方式和场景。element-plus进阶操作：自定义主题的详细实现...

8、通常在views目录下单独再创建一个目录——"element"，用来存放element的一些组件。11、通常都是默认展示根组件文件App.vue里的内容，如何展示自己创建的组件文件的内容？（4）最后的基本结构已经完成，然后接着去element官网复制组件代码，然后调整就可以了。7、App.vue是我们的根组件，定义其它的组件页面通通放在views目录下。（2）<script>（定义vue当中的数据模型和方法）（3）<style>（定义css当中的代码）（2）在入口文件（main.js）中引入。

（5）":data"表示绑定一个数据模型：是数组tableData，其中数组当中是一个一个的js当中的对象。（2）注意在组件文件中标签<template>中时注意，里面只能有一个根标签。（4）在组件官网一直往下翻可以找到各个里面用到的属性和其中的一些方法。（1）去element官网查看寻找想要的，然后复制+修改就行了。（6）"prop"表示要展示的是哪种类型对应的数据。（4）介绍分页组件的事件（events）（1）我选择有背景色的分页做学习和练习。（6）"lable"表示表头的属性。

一旦通过v-model绑定一个数据模型时，这个数据模型必须声明出来，就要去data(){}中写。8、最后测试提交表单数据，查看提交的表单数据——>再提交到服务端就可以了。7、提交按钮时会触发一个方法——>onSubmit()，这时就要去声明。9、 如何采集到form表单中每一个表单项的数据内容——>只需要通过""来进行数据绑定，将各个表单项的数据绑定到一个对象当中就可以了。如何将js对象——>变成"json格式"的字符串？为了能够显示出提交的对象中的每一个属性?2、这里选择学习——>5、这里选择学习——>

value：表示输入的值，提交表单后传给服务器的值——>"男"表示1，"女"表示2。定义数据模型时，对象要使用大括号。像这里searchForm: {....}3、这一步之后的效果展示（只是空有一个布局——>目前还没有任何的内容）2、找到这种布局对应的代码（复制——>粘贴到标签<div>中）5、 在主展示区域的上方添加"员工查询"的（且独占一行）表单。还有一个当点击"查询"按钮时，会触发一个方法，也要去声明。7、给表格增加一个边框——>加入border属性即可。6、日期选择器——>(官网中组件中找)

"scope.row"拿到的是后台这一行的数据，加上"scope.row.gender"，得到指定性别的字段，再配合三元运算符进行判断。如果1——>男，2——>女。在Vue.js中，钩子方法（也称为生命周期钩子或生命周期事件）是Vue实例在创建、更新、销毁等关键时刻自动调用的函数。1、这次学习的是上次还未完成好的恶element案例，对列表数据的异步加载，并渲染展示。这里就不用三元运算符，用img标签，然后src动态给地址，记住动态动态？只要vue对象一创建、挂载完成，然后自动发送请求，加载数据。