//定義表單校驗規(guī)則
const rules = {
    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:checkRePassword,trigger:'blur'}
    ]
}

 <!-- 注冊表單 -->
<el-form ref="form" size="large" autocomplete="off" v-if="isRegister" :model="registerData" :rules="rules">
<el-form-item>
     <h1>注冊</h1>
</el-form-item>
<el-form-item prop="username">
<el-input :prefix-icon="User" placeholder="請輸入用戶名" v-model="registerData.username"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input :prefix-icon="Lock" type="password" placeholder="請輸入密碼" v-model="registerData.password"></el-input>
</el-form-item>
<el-form-item prop="rePassword">
<el-input :prefix-icon="Lock" type="password" placeholder="請輸入再次密碼" v-model="registerData.rePassword"></el-input>
</el-form-item>

const baseURL = '/api';
const instance = axios.create({baseURL})

export default defineConfig({
  server:{
    proxy:{
      '/api':{//獲取路徑中包含了/api的請求
        target:'http://localhost:8080',//后臺服務所在的源
        changeOrigin:true,//修改源
        rewrite:(path)=>path.replace(/^\/api/,"")//把/api替換為空字符串
      }
    }
  }
})

import {userRegisterService,userLoginService} from '@/api/user.js'

const register = async () =>{
    //registerData是一個響應式對象，需。value
   let result =  await userRegisterService(registerData.value)
    if(result.code === 0){
    //成功
     alert(result.msg? result.msg:'注冊成功')
    } else{
      //失敗
     alert('注冊失敗')
   }

}

//綁定登錄數據，復用注冊表單的數據模型
//表單數據校驗。復用注冊的數據校驗
//登錄函數
import{useRouter} from 'vue-router'
const router = useRouter()
const login = async() =>{
    //調用接口，完成登錄
    let result = await userLoginService(registerData.value);
     if(result.code === 0){
     //成功
    alert(result.msg? result.msg:'登錄成功')
    } else{
      //失敗
     alert('登錄失敗')
    }

}

let result = await userLoginService(registerData.value);
     if(result.code === 0){
     //成功
    alert(result.msg? result.msg:'登錄成功')
    } else{
      //失敗
     alert('登錄失敗')
    }

const instance = axios.create({baseURL})

//添加響應攔截器
instance.interceptors.response.use(
    result=>{
        //判斷業(yè)務狀態(tài)碼
        if(result.data.code === 0 ){
            return result.data;
        }
        //操作失敗
        // alert(result.data.msg?result.data.msg:'服務異常')   換成好看的
        ElMessage.error(result.data.msg?result.data.msg:'服務異常')
        //異步操作的狀態(tài)轉換為失敗
        return Promise.reject(result.data)

    },
    err=>{
        alert('服務異常');
        return Promise.reject(err);//異步的狀態(tài)轉化成失敗的狀態(tài)
    }
)

export default instance;

//調用后臺接口完成注冊
import {userRegisterService,userLoginService} from '@/api/user.js'
const register = async () =>{
    //registerData是一個響應式對象，需。value
   let result =  await userRegisterService(registerData.value)
//    if(result.code === 0){
//     //成功
//     alert(result.msg? result.msg:'注冊成功')
//    } else{
//      //失敗
//      alert('注冊失敗')
//    }
    // alert(result.msg? result.msg:'注冊成功')  換成好看的
    ElMessage.success(result.msg? result.msg:'注冊成功')
}

//綁定登錄數據，復用注冊表單的數據模型
//表單數據校驗。復用注冊的數據校驗
//登錄函數
import{useRouter} from 'vue-router'
const router = useRouter()
const login = async() =>{
    //調用接口，完成登錄
    let result = await userLoginService(registerData.value);
//     if(result.code === 0){
//     //成功
//     alert(result.msg? result.msg:'登錄成功')
//    } else{
//      //失敗
//      alert('登錄失敗')
//    }
    // alert(result.msg? result.msg:'登錄成功')換成好看的
    ElMessage.success(result.msg? result.msg:'登錄成功')
    //跳轉到首頁 路由完成跳轉
    router.push('/')
}

//導入vue-router
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 }
]
//創(chuàng)建路由器
const router = createRouter({
    history: createWebHistory(),
    routes: routes
});
export default router

import router from '@/router'
app.use(router)

//定義路由關系
const routes = [
    {path:'/login', component:LoginVue},
    {
        path:'/', 
        redirect: '/article/manage',
        component:LayoutVue,
        //子路由
        children:[
            {path:'/article/category', component:ArticleCategoryVue},
            {path:'/article/manage', component:ArticleManageVue},
            {path:'/user/avatar', component:UserAvatarVue},
            {path:'/user/info', component:UserInfoVue},
            {path:'/user/resetPassword', component:UserResetPasswordVue},
        ]
    },
]

//創(chuàng)建路由器
const router = createRouter({
    routes:routes,
    history:createWebHistory()
})

export default router