1.首先将登录页面的静态页面写出来

<template>
  <section class="login-section">
    <div class="box">
      <!-- 装饰性方块元素 -->
      <div class="square" :style="`--i:${i}`" v-for="i in 6" :key="i"></div>
      <h1 style="text-align: center;font-size: 30px;">企业财务管理系统</h1>
      <div class="container">
        <el-form :model="form" :rules="rules" ref="ruleFormref" label-width="120px" label-position="top" size="large"
          class="login-form">
          <h1>用户登录</h1>

          <el-form-item label="用户名：" prop="account">
            <el-input v-model="form.account" placeholder="请输入用户名" class="custom-input" />
          </el-form-item>

          <el-form-item label="密码：" prop="password">
            <el-input v-model="form.password" type="password" placeholder="请输入密码" show-password class="custom-input" />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit(ruleFormref)" class="login-button">
              登录
            </el-button>
          </el-form-item>

          <div class="copyright">
            @2025企业财务管理系统版权 @All Rights Reserves
          </div>
        </el-form>
      </div>
    </div>
  </section>
</template>

2.然后对登录表单进行登录使得验证

首先应该对表单进行绑定rule,绑定在表单这里

<el-form :model="form" :rules="rules" ref="ruleFormref" label-width="120px" label-position="top" size="large"
          class="login-form">

然后书写表单的验证规则

const rules = ref({
  account: [
    { required: true, message: '用户名不能为空', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度需在3-20之间', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度需在6-20之间', trigger: 'blur' }
  ]
})

3.基础登录业务的实现

http请求在这里

import axios from 'axios'
import 'element-plus/theme-chalk/el-message.css'

const httpInstance = axios.create({
    baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',
    // baseURL: 'http://www.globeman.cn:8081',
    timeout: 5000
})

//axios请求拦截器
httpInstance.interceptors.request.use(config => {
    // 统一设置 Content-Type 为 JSON
    config.headers['Content-Type'] = 'application/json';
    // 也可以加其他逻辑，比如给所有请求加 token
    // config.headers.Authorization = localStorage.getItem('token');
    return config
}, e => Promise.reject(e))

//axios响应式拦截器
httpInstance.interceptors.response.use(res => res.data, e => {
    return Promise.reject(e)
})

export default httpInstance

1.先进行登录接口的封装

   在src页面下的api处进行登录接口的封装

//封装和用户相关的接口函数

import request from '@/utils/http'

export const loginAPI = (form) => {
    return request({
        url: '/login',
        method: 'POST',
        data: {
            account: form.account,
            password: form.password
        }
    })
}

   2.在登录页面调用登录接口

      这里我们为表单绑定上一个ruleFormref，为的是使用它内部的一个validata方法来在点击登录后进行表单的全验证，在点击登录后验证通过并调用接口成功后会进行一个跳转的操作。

//用于表单的全部验证
const ruleFormref = ref(null)

//登录按钮
const onSubmit = () => {
  ruleFormref.value.validate(async (valid) => {
    console.log(valid)
    if (valid) {
      const res = await loginAPI(form.value)
      console.log(res)
      router.replace({ path: '/' })
    }
  })
  // router.replace({ path: '/' })
}