vue搭建簡易前端的思路及問題詳解
前言
前文初步了解了組件庫Element Plus,現(xiàn)在正式開始使用vue搭建大事件前端頁面,后端見(springboot以及后續(xù)項(xiàng)目專欄)
大致思路

其中html標(biāo)簽,css樣式,表單校驗(yàn)都可以通過Element Plus直接快捷生成,而重點(diǎn)在于調(diào)用后天接口和分裝api,以及在其中碰到的問題
問題
表單校驗(yàn)
el-form標(biāo)簽上通過rules屬性,綁定校驗(yàn)規(guī)則
el-form-item標(biāo)簽上通過prop屬性,指定校驗(yàn)項(xiàng)
//定義表單校驗(yàn)規(guī)則
const rules = {
username:[
{required:true,message:'請(qǐng)輸入用戶名',trigger:'blur'},
{min:5,max:16,message:'長度為5-16位非空字符', trigger:'blur'}
],
password:[
{required:true,message:'請(qǐng)輸入密碼',trigger:'blur'},
{min:5,max:16,message:'長度為5-16位非空字符',trigger:'blur'}
],
rePassword:[
{validator:checkRePassword,trigger:'blur'}
]
}
<!-- 注冊(cè)表單 -->
<el-form ref="form" size="large" autocomplete="off" v-if="isRegister" :model="registerData" :rules="rules">
<el-form-item>
<h1>注冊(cè)</h1>
</el-form-item>
<el-form-item prop="username">
<el-input :prefix-icon="User" placeholder="請(qǐng)輸入用戶名" v-model="registerData.username"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input :prefix-icon="Lock" type="password" placeholder="請(qǐng)輸入密碼" v-model="registerData.password"></el-input>
</el-form-item>
<el-form-item prop="rePassword">
<el-input :prefix-icon="Lock" type="password" placeholder="請(qǐng)輸入再次密碼" v-model="registerData.rePassword"></el-input>
</el-form-item>請(qǐng)求跨域
在研究該問題前,我們先思考發(fā)生的原因:
我們前段頁面的接口為localhost:5173而后端接口為localhost:8080,于瀏覽器的同源策略限制,向不同源(不同協(xié)議、不同域名、不同端口)發(fā)送ajax請(qǐng)求會(huì)失敗。
因此我們要想辦法避免服務(wù)器向服務(wù)器發(fā)送請(qǐng)求
解決辦法:配置代理:讓請(qǐng)求在5173端口中,變成向8080發(fā)送請(qǐng)求,就不會(huì)存在同源策略
request.js中配置baseURL的值為/api
const baseURL = '/api';
const instance = axios.create({baseURL})vite.config.js中配置
export default defineConfig({
server:{
proxy:{
'/api':{//獲取路徑中包含了/api的請(qǐng)求
target:'http://localhost:8080',//后臺(tái)服務(wù)所在的源
changeOrigin:true,//修改源
rewrite:(path)=>path.replace(/^\/api/,"")//把/api替換為空字符串
}
}
}
})這樣發(fā)送給5173的命令變成了https://localhost:5173/api/******,而到達(dá)服務(wù)器時(shí),又被文件轉(zhuǎn)換為https://localhost:8080/********這樣便躲過了同源策略
優(yōu)化axios響應(yīng)攔截器
在代碼編寫過程中,發(fā)現(xiàn)
import {userRegisterService,userLoginService} from '@/api/user.js'
const register = async () =>{
//registerData是一個(gè)響應(yīng)式對(duì)象,需。value
let result = await userRegisterService(registerData.value)
if(result.code === 0){
//成功
alert(result.msg? result.msg:'注冊(cè)成功')
} else{
//失敗
alert('注冊(cè)失敗')
}
}
//綁定登錄數(shù)據(jù),復(fù)用注冊(cè)表單的數(shù)據(jù)模型
//表單數(shù)據(jù)校驗(yàn)。復(fù)用注冊(cè)的數(shù)據(jù)校驗(yàn)
//登錄函數(shù)
import{useRouter} from 'vue-router'
const router = useRouter()
const login = async() =>{
//調(diào)用接口,完成登錄
let result = await userLoginService(registerData.value);
if(result.code === 0){
//成功
alert(result.msg? result.msg:'登錄成功')
} else{
//失敗
alert('登錄失敗')
}
}有許多重復(fù)代碼,
let result = await userLoginService(registerData.value);
if(result.code === 0){
//成功
alert(result.msg? result.msg:'登錄成功')
} else{
//失敗
alert('登錄失敗')
}于是便將其整合,結(jié)算為一個(gè)js文件
const instance = axios.create({baseURL})
//添加響應(yīng)攔截器
instance.interceptors.response.use(
result=>{
//判斷業(yè)務(wù)狀態(tài)碼
if(result.data.code === 0 ){
return result.data;
}
//操作失敗
// alert(result.data.msg?result.data.msg:'服務(wù)異常') 換成好看的
ElMessage.error(result.data.msg?result.data.msg:'服務(wù)異常')
//異步操作的狀態(tài)轉(zhuǎn)換為失敗
return Promise.reject(result.data)
},
err=>{
alert('服務(wù)異常');
return Promise.reject(err);//異步的狀態(tài)轉(zhuǎn)化成失敗的狀態(tài)
}
)
export default instance;代碼簡化為
//調(diào)用后臺(tái)接口完成注冊(cè)
import {userRegisterService,userLoginService} from '@/api/user.js'
const register = async () =>{
//registerData是一個(gè)響應(yīng)式對(duì)象,需。value
let result = await userRegisterService(registerData.value)
// if(result.code === 0){
// //成功
// alert(result.msg? result.msg:'注冊(cè)成功')
// } else{
// //失敗
// alert('注冊(cè)失敗')
// }
// alert(result.msg? result.msg:'注冊(cè)成功') 換成好看的
ElMessage.success(result.msg? result.msg:'注冊(cè)成功')
}
//綁定登錄數(shù)據(jù),復(fù)用注冊(cè)表單的數(shù)據(jù)模型
//表單數(shù)據(jù)校驗(yàn)。復(fù)用注冊(cè)的數(shù)據(jù)校驗(yàn)
//登錄函數(shù)
import{useRouter} from 'vue-router'
const router = useRouter()
const login = async() =>{
//調(diào)用接口,完成登錄
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:'登錄成功')
//跳轉(zhuǎn)到首頁 路由完成跳轉(zhuǎn)
router.push('/')
}
主頁面布局
在編寫多個(gè)頁面后,我們發(fā)現(xiàn),每次登錄的首頁以及跳轉(zhuǎn)需要改進(jìn),由此我們引入了路由(Vue Router)
路由,決定從起點(diǎn)到終點(diǎn)的路徑的進(jìn)程
在前端工程中,路由指的是根據(jù)不同的訪問路徑,展示不同組件的內(nèi)容
Vue Router是Vue.js的官方路由
使用步驟
- 安裝vue-router npm install vue-router@4
- 在src/router/index.js中創(chuàng)建路由器,并導(dǎo)出
- 在vue應(yīng)用實(shí)例中使用vue-router
- 聲明router-view標(biāo)簽,展示組件內(nèi)容
//導(dǎo)入vue-router
import { createRouter, createWebHistory } from 'vue-router'
//導(dǎo)入組件
import LoginVue from '@/views/Login.vue'
import LayoutVue from '@/views/Layout.vue'
//定義路由關(guān)系
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)
子路由
對(duì)于一個(gè)頁面的多個(gè)跳轉(zhuǎn):


//定義路由關(guān)系
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子路由便是很好的辦法,處理一個(gè)路由頁面中還有很多頁面需要跳轉(zhuǎn)的問題
總結(jié)
到此這篇關(guān)于vue搭建簡易前端的文章就介紹到這了,更多相關(guān)vue搭建前端內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Element中select多數(shù)據(jù)加載優(yōu)化的實(shí)現(xiàn)
本文主要介紹了Element中select多數(shù)據(jù)加載優(yōu)化的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09
vue 運(yùn)用mock數(shù)據(jù)的示例代碼
本篇文章主要介紹了vue 運(yùn)用mock數(shù)據(jù)的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
Vue3警告:Failed to resolve component:XXX的詳細(xì)解決辦法
最近在一個(gè)vue3項(xiàng)目中遇到了報(bào)錯(cuò),整理了些解決辦法,這篇文章主要給大家介紹了關(guān)于Vue3警告:Failed to resolve component:XXX的詳細(xì)解決辦法,文中介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05

