这里写目录标题
- 登录业务流程
- 表单如何进行校验
- 自定义校验规则
- 整个表单的统一内容校验
- 封装登录接口
- axios的二次封装
- 整个项目api的统一管理
- 调用接口
登录业务流程
表单如何进行校验
ElementPlus表单组件内置了表单校验功能，只需要按照组件要求配置必要参数即可
1.按照接口字段准备表单对象并绑定。
2.按用户需求准备规则对象并绑定。
3.指定表单域的校验字段名。
4.把表单对象进行双向绑定。
自定义校验规则
整个表单的统一内容校验
思考:每个表单域都有自己的校验触发事件，如果用户一上来就点击登录怎么办呢？
答:在点击登录时需要对所有需要校验的表单进行统一校验.
1.获取form组件实例
用在form中定义ref=formRef“”
其中const formRef = ref(null)
2.调用实例方法
如上图。
封装登录接口
axios的二次封装
1.创建axios实例，有基础URL，还有请求的超时时间等。
axios.creat()用于创建一个新的axios实例。这个函数接受一个配置对象作为参数，允许你自定义该实例的默认配置。
baseURL这是配置对象中的一个属性.
timeout这也是配置对象中的一个属性，用于定义请求的超时时间（以毫秒为单位）。
2.请求拦截器。
使用instance.interceptors.request.use()添加一个请求拦截器。在这个拦截器中，你可以在请求发送之前对请求配置进行修改。如果请求拦截器中出现错误，将返回一个被拒绝的Promise，错误信息是new Error(error)。
3.响应拦截器。
使用instance.interceptors.response.use()添加一个响应拦截器。在这个拦截器中，你可以对响应数据进行处理。
拦截器首先从响应数据中解构出code、message和data字段。
如果code等于200（表示请求成功），则直接返回data。
如果code不等于200，则使用ElMessage.error()显示错误信息（如果响应中有message则显示message，否则显示"网络错误"）。然后返回一个被拒绝的Promise，错误信息也是message或"网络错误"。
4.封装请求函数。
定义一个request函数，该函数接受一个options对象作为参数，该对象包含了请求的配置信息。
在request函数中，如果options没有指定method，则默认使用"GET"方法。
使用之前创建的axios实例（instance）来发起请求，并返回这个请求的Promise。
5.导出
使用export default request;导出request函数，使得其他模块可以引入并使用这个封装好的请求函数。
整个项目api的统一管理
目的是封装一个用于处理请求的API调用，使得在项目的其他部分调用API时更加简洁和统一。
1.导入request模块
这行代码从项目的utils目录下的request模块中导入了request函数。这个函数是一个基于某个HTTP客户端（如axios、fetch等）的封装，用于发送HTTP请求
2.定义相应的函数。定义了一个名为loginApi的导出常量，它本身是一个函数，接收一个对象作为参数，这个对象包含username和password两个属性。这两个属性分别代表用户的用户名和密码。
3.使用request函数发送请求
在loginApi函数的函数体内，它调用了request函数，并传入了一个对象作为参数。这个对象指定了请求的URL（“/login”）、方法（“post”）和发送的数据（一个包含username和password的对象）。这意味着loginApi函数会向服务器的/login端点发送一个POST请求，请求体中包含用户的用户名和密码。
4.返回值
loginApi函数返回了request函数的调用结果。这意味着request函数的返回值（通常是一个Promise对象，代表了异步HTTP请求的结果）将被loginApi函数返回给它的调用者。调用者可以进一步处理这个Promise对象，比如使用.then()和.catch()方法来处理请求成功或失败的情况。
调用接口
跳转页面用router.replace(),这个是不可以返回上一页。router.push()可以返回上一页。
useRoute获取参数，useRouter调用方法。import { useRouter } from “vue-router”;const router = useRouter();
