springboot+vue——22

登录的实现

        数据绑定和校验

//用于注册的数据模型
const registerData = ref({
    username: '',
    password: '',
    // rePassword: ''
})

//自定义确认密码的校验函数
const rePasswordValid = (rule, value, callback) => {
    if (value == null || value === '') {
        return callback(new Error('请再次确认密码'))
    }
    if (registerData.password !== value) {
        return callback(new Error('两次输入密码不一致'))
    }
}
//用于注册的表单校验模型
const registerDataRules = ref({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 5, max: 16, message: '用户名的长度必须为5~16位', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 5, max: 16, message: '密码长度必须为5~16位', trigger: 'blur' }
    ],
    // rePassword: [
    //     { validator: rePasswordValid, trigger: 'blur' }
    // ]
})
import { registerService,loginService} from '@/api/user.js'
//用于登录的事件函数
const login = async () => {
    let result = await loginService(registerData.value)
    if(result.code===0){
        alert('登录成功!')
    }else{
        alert('登录失败!')
    }
}

路由

        根据不同的访问路径，展示不同组件的内容

        新建router文件夹，新建index.js文件

import {createRouter,createWebHistory} from 'vue-router'

//导入组件
import LoginVue from '@/views/Login.vue'
import LayoutVue from '@/views/Layout.vue'

//定义路由关系
const routes = [
    {path:'/login',component:LoginVue},
    {path:'/',component:LayoutVue},
]

//创建路由器
const router = createRouter({
    history:createWebHistory(),
    routes:routes
})

//导出路由
export default router

        main.js导入router

import './assets/main.scss'

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from '@/router'

const app = createApp(App)
app.use(router)
app.use(ElementPlus)
app.mount('#app')

        App.vue修改

<script setup>
</script>

<template>
    <router-view></router-view>
</template>

<style scoped>

</style>

子路由

//定义路由关系
const routes = [
    {path:'/login',component:LoginVue},
    {path:'/',component:LayoutVue,redirect:'/article/manage',children:[
        {path:'/article/category',component:ArticleCategory},
        {path:'/article/manage',component:ArticleManage},
        {path:'/user/avatar',component:UserAvatar},
        {path:'/user/info',component:UserInfo},
        {path:'/user/resetPassword',component:UserResetPassword},
    ]},
]

子路由children        重定向redirect

        在Layout.vue组件的右侧中间区域，添加router-view标签

<!-- 中间区域 -->
<el-main>
    <div style="width: 1290px; height: 570px;border: 1px solid red;">
        <router-view></router-view>
    </div>
</el-main>

        el-menu-item 标签的index属性可以设置点击后的路由路径

<el-menu-item index="/article/category">
    <el-icon>
        <Management />
    </el-icon>
    <span>文章分类</span>
</el-menu-item>