寫在開始:一個(gè)搬磚程序員的隨緣記錄
上一章寫了從零開始Vue+SpringBoot后臺(tái)管理系統(tǒng)：Vue3+TypeScript項(xiàng)目搭建
Vue+TypeScript的前端項(xiàng)目已經(jīng)搭建完成了
這一章的內(nèi)容是引入element-plus和axios實(shí)現(xiàn)頁(yè)面的布局和前后端數(shù)據(jù)的串聯(lián)，實(shí)現(xiàn)一個(gè)登陸的功能，跳轉(zhuǎn)到首頁(yè)
現(xiàn)在前端項(xiàng)目的一個(gè)結(jié)構(gòu)目錄
一、引入element-plus
npm i element-plus
在src/main.js中加入element-plus
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(router).use(ElementPlus).mount('#app')
1、登錄頁(yè)面構(gòu)建
修改登陸頁(yè)面src/views/Login.vue
<template>
<el-form ref="form" :model="loginUser" label-width="55px" class="loginForm">
<h3 class="login_title">登錄</h3>
<el-form-item label="用戶名">
<el-input v-model="loginUser.username" placeholder="請(qǐng)輸入用戶名"></el-input>
</el-form-item>
<el-form-item label="密碼">
<el-input v-model="loginUser.password" type="password" placeholder="請(qǐng)輸入密碼"></el-input>
</el-form-item>
<el-form-item style="width: 100%">
<el-button type="primary" style="width: 100%;background: #505458;border: none">登錄</el-button>
</el-form-item>
</el-form>
</template>
<script lang="ts">
import { reactive } from 'vue'
export default {
name: 'Login',
setup() {
// 表單字段
const loginUser = reactive({
username: '',
password: ''
})
return { loginUser }
},
}
</script>
<style>
.loginForm {
border-radius: 15px;
background-clip: padding-box;
margin: 90px auto;
width: 350px;
padding: 35px 35px 35px 35px;
background: #fff;
border: 1px solid #eaeaea;
box-shadow: 0 0 25px #cac6c6;
}
.login_title {
margin: 0px auto 40px auto;
text-align: center;
color: #505458;
}
</style>
運(yùn)行項(xiàng)目可以看到現(xiàn)在的登錄界面算比較美觀了
2、登錄頁(yè)面加入校驗(yàn)
現(xiàn)在給登錄頁(yè)面表單添加簡(jiǎn)單的校驗(yàn)規(guī)則
關(guān)鍵點(diǎn)：
script部分
template部分
加入表單校驗(yàn)Login.vue完整代碼
<template>
<el-form ref="form" :model="loginUser" :rules="rules" label-width="55px" class="loginForm">
<h3 class="login_title">登錄</h3>
<el-form-item label="賬號(hào)" prop="username">
<el-input v-model="loginUser.username" placeholder="請(qǐng)輸入用戶名"></el-input>
</el-form-item>
<el-form-item label="密碼" prop="password">
<el-input v-model="loginUser.password" type="password" placeholder="請(qǐng)輸入密碼"></el-input>
</el-form-item>
<el-form-item style="width: 100%">
<el-button type="primary" style="width: 100%;background: #505458;border: none">登錄</el-button>
</el-form-item>
</el-form>
</template>
<script lang="ts">
import { reactive } from 'vue'
export default {
name: 'Login',
setup() {
// 表單字段
const loginUser = reactive({
username: '',
password: ''
})
//登錄表單校驗(yàn)
const rules = reactive({
username: [
{ required: true, message: '請(qǐng)輸入用戶名', trigger: 'blur' },
{ min: 6, max: 12, message: '長(zhǎng)度在 6 到 12 個(gè)字符', trigger: 'blur' }
],
password: [
{ required: true, message: '請(qǐng)輸入密碼', trigger: 'blur' },
{ min: 6, max: 20, message: '長(zhǎng)度在 6 到 20 個(gè)字符', trigger: 'blur' }
]
})
return { loginUser, rules }
},
}
</script>
<style>
.loginForm {
border-radius: 15px;
background-clip: padding-box;
margin: 90px auto;
width: 350px;
padding: 35px 35px 35px 35px;
background: #fff;
border: 1px solid #eaeaea;
box-shadow: 0 0 25px #cac6c6;
}
.login_title {
margin: 0px auto 40px auto;
text-align: center;
color: #505458;
}
</style>
登錄頁(yè)面效果
二、引入axios
1、下載axios
npm i axios
2、配置axios
在src下新建api文件夾，在api文件夾下新建request.ts
import axios,{InternalAxiosRequestConfig,AxiosResponse} from 'axios'
import { ElLoading } from 'element-plus'
import { ElMessage } from 'element-plus'
let loading:any;
const startLoading = () =>{
interface Options{
lock: boolean;
text: string;
background: string;
}
const options:Options = {
lock: true,
text: 'Loading',
background: 'rgba(0, 0, 0, 0.7)'
}
loading = ElLoading.service(options)
}
const endLoading = ()=>{
loading.close()
}
// 請(qǐng)求攔截
axios.interceptors.request.use((config:InternalAxiosRequestConfig<any>)=>{
// 開始Loading
startLoading()
return config
})
//請(qǐng)求響應(yīng)攔截
axios.interceptors.response.use((res:AxiosResponse<any, any>)=>{
endLoading()
// 成功直接返回響應(yīng)數(shù)據(jù)
if(res.status === 200){
return res.data
}
},error=>{
endLoading()
const { response: res } = error
const msg = typeof res.data === 'string' ? res.data: res.data.error || '請(qǐng)求錯(cuò)誤，請(qǐng)稍后重試'
ElMessage.error(msg)
// 錯(cuò)誤提醒
return Promise.reject(error)
})
export default axios
在main.ts中引入axios，全局掛載axios
main.ts完整代碼
import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
// 引入element-plus
import ElementPlus from 'element-plus'
// 引入element-plus樣式
import 'element-plus/dist/index.css'
// 引入axios
import axios from '@/api/request'
const app = createApp(App)
// 全局掛載axios
app.config.globalProperties.$axios = axios
app.use(router)
app.use(ElementPlus)
app.mount('#app')
3、請(qǐng)求后端數(shù)據(jù)跨域處理
在項(xiàng)目根目錄新建 vue.config.js 文件
module.exports = {
devServer: {
open: true,
//前端項(xiàng)目域名
host: 'localhost',
//前端項(xiàng)目端口
port: 8081,
https: false,
//配置跨域
proxy: {
'/api': {
//后端項(xiàng)目請(qǐng)求接口地址
target: 'http://localhost:8082/api/',
//如果要代理 websockets，配置這個(gè)參數(shù)
ws: true,
//允許跨域
changOrigin: true,
pathRewrite: {
//請(qǐng)求的時(shí)候使用這個(gè)api就可以
'^/api': ''
}
}
}
}
}
4、首頁(yè)
在src/views下新建首頁(yè)頁(yè)面Home.vue
<template>
<div>首頁(yè)</div>
</template>
<script>
export default {
name: 'Index'
}
</script>
5、實(shí)現(xiàn)登錄
加入請(qǐng)求登錄方法
在頁(yè)面中點(diǎn)擊登錄按鈕時(shí)請(qǐng)求登錄方法
登錄方法代碼
const login = () => {
proxy.$axios({
url: '/api/user/login',
method: 'post',
data: loginUser
}).then((res: any) => {
if (res.code == 200) {
proxy.$message({
message: '登錄成功',
type: 'success'
})
router.push('/home')
} else {
proxy.$message({
message: res.data.msg,
type: 'error'
})
}
})
console.log('login')
}
Login.vue整體代碼
<template>
<el-form ref="form" :model="loginUser" :rules="rules" label-width="55px" class="loginForm">
<h3 class="login_title">登錄</h3>
<el-form-item label="賬號(hào)" prop="username">
<el-input v-model="loginUser.username" placeholder="請(qǐng)輸入用戶名"></el-input>
</el-form-item>
<el-form-item label="密碼" prop="password">
<el-input v-model="loginUser.password" type="password" placeholder="請(qǐng)輸入密碼"></el-input>
</el-form-item>
<el-form-item style="width: 100%">
<el-button type="primary" style="width: 100%;background: #505458;border: none" @click="login()">登錄</el-button>
</el-form-item>
</el-form>
</template>
<script lang="ts">
import {reactive, getCurrentInstance} from 'vue'
import {useRouter} from 'vue-router'
export default {
name: 'Login',
setup() {
// @ts-ignore
const {proxy} = getCurrentInstance()
// 表單字段
const loginUser = reactive({
username: '',
password: ''
})
//登錄表單校驗(yàn)
const rules = reactive({
username: [
{required: true, message: '請(qǐng)輸入用戶名', trigger: 'blur'},
{min: 6, max: 12, message: '長(zhǎng)度在 6 到 12 個(gè)字符', trigger: 'blur'}
],
password: [
{required: true, message: '請(qǐng)輸入密碼', trigger: 'blur'},
{min: 6, max: 20, message: '長(zhǎng)度在 6 到 20 個(gè)字符', trigger: 'blur'}
]
})
const router = useRouter()
const login = () => {
proxy.$axios({
url: '/api/user/login',
method: 'post',
data: loginUser
}).then((res: any) => {
if (res.code == 200) {
proxy.$message({
message: '登錄成功',
type: 'success'
})
router.push('/home')
} else {
proxy.$message({
message: res.data.msg,
type: 'error'
})
}
})
console.log('login')
}
return {loginUser, rules, login}
},
}
</script>
<style>
.loginForm {
border-radius: 15px;
background-clip: padding-box;
margin: 90px auto;
width: 350px;
padding: 35px 35px 35px 35px;
background: #fff;
border: 1px solid #eaeaea;
box-shadow: 0 0 25px #cac6c6;
}
.login_title {
margin: 0px auto 40px auto;
text-align: center;
color: #505458;
}
</style>
登錄成功然后跳轉(zhuǎn)到首頁(yè)的功能就實(shí)現(xiàn)了文章來源：http://www.zghlxwxcb.cn/news/detail-646118.html
Over文章來源地址http://www.zghlxwxcb.cn/news/detail-646118.html
到了這里，關(guān)于Vue+SpringBoot項(xiàng)目開發(fā)：登錄頁(yè)面美化，登錄功能實(shí)現(xiàn)（三）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
