vue+Element-Plus+springboot整合mybatis-plus后台管理系统的学习笔记
通过vite快速创建了一个vue项目，vite相比于vue-cli创建的项目更简洁，而且创建项目的速度远远快于vue-cli，然后项目启动的速度也非常快，我写的简易的后台管理系统启动前端页面的时候能明显感觉出来差异了，本人制作的这个系统算是很小很小的项目了，可想而知如果是大型项目做调试的时候vite比起vue-cli创建的项目能快很多，效率更高，vue-cli创建项目使用的是webpack作为打包工具，vite项目使用的是vite作为打包工具，创建和启动效率的差距就是因为二者打包工具性能的差异，目前企业主流可能的用的还是webpack，毕竟vite作为一个还算比较新的打包工具，可能会出现一些意料之外的bug，而且webpack的功能更齐全，周边生态环境也更完善
下列是vite优缺点，原文链接：https://blog.csdn.net/xiasohuai/article/details/123017321
vite优点：
webpack服务器启动速度比vite慢
由于vite启动的时候不需要打包，也就无需分析模块依赖、编译，所以启动速度非常快。当浏览器请求需要的模块时，再对模块进行编译，这种按需动态编译的模式，极大缩短了编译时间，当项目越大，文件越多时，vite的开发时优势越明显
vite热更新比webpack快
vite在HRM方面，当某个模块内容改变时，让浏览器去重新请求该模块即可，而不是像webpack重新将该模块的所有依赖重新编译；
vite使用esbuild(Go 编写) 预构建依赖，而webpack基于nodejs, 比node快 10-100 倍
vite缺点：
生态不及webpack，加载器、插件不够丰富
打包到生产环境时，vite使用传统的rollup进行打包，生产环境esbuild构建对于css和代码分割不够友好。所以，vite的优势是体现在开发阶段
没被大规模重度使用，会隐藏一些问题
项目的开发浏览器要支持esmodule，而且不能识别commonjs语法
回到项目开发中
首先导入Element-Plus和axios以及vue-router这几个重要组件，并做好相关配置导入
引入Git进行代码管理控制，做的全栈开发所以使用idea作为IDE 而idea是代码会实时更新保存的，容易丢失代码，Git就是用来保管我们的代码的
首先开始写登录页面login.vue，并将其添加到路由中设置为首页
登录页面开发中遇到的一些小问题：
ps：因为在学校老师讲的课很水，基本上都是些很浅显易懂的东西，这个学期刚开的Javaweb课程，就是基本上讲些html的常用标签，css一笔带过，后面学习jdbc的时候也很懵逼，基本上就看室友做的照抄，也学习了一些mybatis的用法，当然课上讲的那些都已经被淘汰了有点，比如说现在xml基本上已经被淘汰了，课上mybatis使用的时候基本上都是使用xml去进行配置的，非常的繁琐
页面整体布局一个非常关键的问题
首先要写一个index.css全局样式导入main.js中，通过app.use的方法去装载
html,body,div{ //浏览器基本上都设置了margin和padding，会导致你的页面无法紧贴浏览器的页面
margin: 0;
padding: 0;
}
body,html{ //设置高度占满全屏
height: 100%;
}
然后值得注意的一点的,父组件如果设置了min-height=100%，那么子组件可能继承不到父元素的100%高度
详情参下：
父元素设置min-height子元素高度设置100%取不到值，这是因为子元素 div设置 height:100%；只有当父级元素满足min-height:1000px;设置的条件才触发；浏览器默认是不会触发的，所以子元素的100%的高度继承就失效了。min-height 是在 height 计算之后再套用的
解决方法：给父元素加绝对定位，然后子元素加相对定位，这样子元素的高度就会根据父元素的高度进行计算
然后整个页面的div标签的id选择器login-container中应该设置overflow-y：hidden，这是因为内部的子元素设置了margin-top，导致了父元素也产生了相应的外边距
解决方案如下：
1. 给父元素加边框border
2. 给父元素加内边距padding
3. 给父元素加overflow:hidden
我选择了方案3，最简洁直接的解决方案
背景图片大小要贴合整个页面应该设置成background-size：cover
登录界面中的script使用的是vue3.2新推出的setup语法糖，这也是我第一次使用setup，也遇到了很多bug，但是还是尝试了使用，主要是element-plus是在element-ui的基础上用typescript和vue3的组合式API重构的，我使用element-plus组件的过程中看其官网文档有很多看不懂的语法，所以还是去翻了翻vue3官方文档有关组合式API的用法，但是typescript本人暂时没去学习，所以element-plus的那些组件引入后使用起来还是产生了很多的问题的
登录界面的制作还是比较简单的，然后为登录表单添加表单验证规则，这里就遇到了typescript不会用的尴尬局面了，无法顺利获取表单DOM对象，因为这部分element-plus有关的代码使用了typescript的特定写法，而虽然表单对象绑定了ref，但是由于使用了setup语法糖，所以不能通过调用this.$refs来获取表单DOM对象，最后通过百度解决了这个问题
在vue3.0的时候如果用组合api，由于 setup 在生命周期 beforecreate 和 created 前执行，此时 vue 对象还未创建，因无法使用我们在 vue2.x 常用的 this。
那就用 getCurrentInstance代替this，
const {proxy}=getCurrentInstance()，proxy代替this指向vue组件实例，调用proxy.$refs来获取表单DOM对象，然后调用其validate(valid=>{if（valid）{登录请求}})完成登录功能
然后跨域问题我是前后端统一协调配置了，在vite.config.js中设置了proxy完成前端请求地址的反向代理：
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
ws:true,
rewrite:path => path.replace(/^\/api/, '')
},
},
然后写一个request.js
其中的内容:
import axios from 'axios'
const request = axios.create({
// 注意！！ 这里是全局统一加上了 后端接口前缀 前缀，后端必须进行跨域配置！
baseURL:'/api',
//设置超时限制响应时间
timeout: 10000
})
// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
//设置前端请求传来的参数内容为json
config.headers['Content-Type'] = 'application/json;charset=utf-8';
// config.headers['token'] = user.token; // 设置请求头
return config
}, error => {
return Promise.reject(error)
});
// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
response => {
let res = response.data;
// 如果是返回的文件
if (response.config.responseType === 'blob') {
return res
}
// 兼容服务端返回的字符串数据
if (typeof res === 'string') {
res = res ? JSON.parse(res) : res
}
return res;
},
error => {
console.log('err' + error) // for debug
return Promise.reject(error)
}
)
export default request
需要调用的时候在组件中导入request.js发起axios请求即可
其请求的根路径中的/api会被vite.config.js中的proxy反向代理，变成相应的后端根路径,proxy中也设置了允许跨域的选项，然后后端对应的方法添加@CrossOrigin注解，即可解决跨域问题
登录界面遇到的问题还是比较少的，毕竟只需要实现一个post请求完成登录请求就行
首页的问题就比较多了，不一一赘述了
最后完成了所有功能后通过Git提交并推送到码云的远程仓库中，功能比较简洁，实现了增删改查的几个请求