前提：后端jar環(huán)境、Vue3環(huán)境、Redis環(huán)境

搭建頁面（html標(biāo)簽、css樣式） →? 綁定數(shù)據(jù)與事件（表單校驗(yàn)） → 調(diào)用后臺(tái)接口（接口文檔、src/api/xx.js封裝、頁面函數(shù)中調(diào)用）

Login.vue文件：?

<script setup>
import { User, Lock } from "@element-plus/icons-vue";
import { ref } from "vue";
//控制注冊與登錄表單的顯示， 默認(rèn)false顯示登錄  true時(shí)顯示注冊
const isRegister = ref(false);//定義數(shù)據(jù)模型
const registerData = ref({username: "",password: "",rePassword: "",
});
//校驗(yàn)密碼的函數(shù)
const checkRePassword = (rule, value, callback) => {if (value === "") {callback(new Error("請?jiān)俅未_認(rèn)密碼"));} else if (value !== registerData.value.password) {callback(new Error("請確保兩次輸入的密碼一樣"));} else {callback();}
};
//定義表單校驗(yàn)規(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" }],
};// 調(diào)用后臺(tái)接口，完成注冊
import {userRegisterService} from '@/api/user.js'
const register=async()=>{// registerData是一個(gè)響應(yīng)式對象，如果要獲取值，需要.valuelet result=await userRegisterService(registerData.value);if(result.code===0){alert(result.msg?result.msg:'注冊成功');}else{alert('注冊失敗')}
}
</script><template>
<!-- 登錄和注冊是同一個(gè)頁面 --><el-row class="login-page"><el-col :span="12" class="bg"></el-col><el-col :span="6" :offset="3" class="form">
<!-- 注冊表單 --><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><!-- 確認(rèn)密碼 --><el-form-item prop="rePassword"><el-input :prefix-icon="Lock" type="password" placeholder="請輸入再次密碼" v-model="registerData.rePassword" ></el-input></el-form-item>
<!-- 注冊按鈕 --><el-form-item><el-button class="button" type="primary" auto-insert-space @click="register">注冊</el-button></el-form-item><el-form-item class="flex"><el-link type="info" :underline="false" @click="isRegister = false">← 返回</el-link></el-form-item></el-form><!-- 登錄表單 --><!-- 登錄按鈕 --></el-col></el-row>
</template><style lang="scss" scoped>
/* 樣式 */
.login-page {height: 100vh;background-color: #fff;.bg {background: url("@/assets/logo2.png") no-repeat 60% center / 240px auto,url("@/assets/login_bg.jpg") no-repeat center / cover;border-radius: 0 20px 20px 0;}.form {display: flex;flex-direction: column;justify-content: center;user-select: none;.title {margin: 0 auto;}.button {width: 100%;}.flex {width: 100%;display: flex;justify-content: space-between;}}
}
</style>

api文件夾下的user.js：

// 導(dǎo)入request.js請求工具
import request from '@/utils/request.js'
//提供調(diào)用注冊接口的函數(shù)
export const userRegisterService=(registerData)=>{// 借助于URLsearchParams完成傳遞const params=new URLSearchParams()for(let key in registerData){params.append(key,registerData[key]);}return request.post('/user/register',params);
}

解決跨域問題：解決瀏覽器的同源策略限制，向不同源發(fā)送Ajax請求會(huì)失敗

? ? ? ? 使用配置代理

①utils文件夾下的request.js文件

//定制請求的實(shí)例//導(dǎo)入axios  npm install axios
import axios from 'axios';
//定義一個(gè)變量,記錄公共的前綴  ,  baseURL
const baseURL = '/api';
const instance = axios.create({baseURL})//添加響應(yīng)攔截器
instance.interceptors.response.use(result=>{return result.data;},err=>{alert('服務(wù)異常');return Promise.reject(err);//異步的狀態(tài)轉(zhuǎn)化成失敗的狀態(tài)}
)export default instance;//向外暴露

②修改vite.config.js

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'node:path'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},server:{proxy:{'/api':{//獲取路徑中包含/api的請求target:'http://localhost:9999',//后臺(tái)服務(wù)所在的源changeOrigin:true,//修改源rewrite:(path)=>path.replace(/^\/api/,'')//將/api替換為空字符串}}}
})

?

?

?

?

?

?