vue搭建簡易前端的思路及問題詳解

更新時間：2025年01月22日 09:32:27 作者：無語-葬歐

這篇文章主要介紹了如何使用Vue和ElementPlus構建前端頁面,特別是如何進行跨域請求和使用Vue?Router進行路由管理,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

前言

前文初步了解了組件庫Element Plus，現(xiàn)在正式開始使用vue搭建大事件前端頁面，后端見（springboot以及后續(xù)項目專欄）

大致思路

其中html標簽，css樣式，表單校驗都可以通過Element Plus直接快捷生成，而重點在于調(diào)用后天接口和分裝api，以及在其中碰到的問題

問題

表單校驗

el-form標簽上通過rules屬性，綁定校驗規(guī)則

el-form-item標簽上通過prop屬性，指定校驗項

//定義表單校驗規(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>

請求跨域

在研究該問題前，我們先思考發(fā)生的原因：

我們前段頁面的接口為localhost：5173而后端接口為localhost：8080，于瀏覽器的同源策略限制，向不同源(不同協(xié)議、不同域名、不同端口)發(fā)送ajax請求會失敗。

因此我們要想辦法避免服務器向服務器發(fā)送請求

解決辦法：配置代理：讓請求在5173端口中，變成向8080發(fā)送請求，就不會存在同源策略

request.js中配置baseURL的值為/api

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

vite.config.js中配置

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

這樣發(fā)送給5173的命令變成了https://localhost:5173/api/******，而到達服務器時，又被文件轉(zhuǎn)換為https://localhost:8080/********這樣便躲過了同源策略

優(yōu)化axios響應攔截器

在代碼編寫過程中，發(fā)現(xiàn)

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('注冊失敗')
   }

}

//綁定登錄數(shù)據(jù)，復用注冊表單的數(shù)據(jù)模型
//表單數(shù)據(jù)校驗。復用注冊的數(shù)據(jù)校驗
//登錄函數(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('登錄失敗')
    }

}

有許多重復代碼，

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

于是便將其整合，結算為一個js文件

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)轉(zhuǎn)換為失敗
        return Promise.reject(result.data)

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

export default instance;

代碼簡化為

//調(diào)用后臺接口完成注冊
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:'注冊成功')
}

//綁定登錄數(shù)據(jù)，復用注冊表單的數(shù)據(jù)模型
//表單數(shù)據(jù)校驗。復用注冊的數(shù)據(jù)校驗
//登錄函數(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('/')
}

主頁面布局

在編寫多個頁面后，我們發(fā)現(xiàn)，每次登錄的首頁以及跳轉(zhuǎn)需要改進，由此我們引入了路由（Vue Router）

路由，決定從起點到終點的路徑的進程

在前端工程中，路由指的是根據(jù)不同的訪問路徑，展示不同組件的內(nèi)容

Vue Router是Vue.js的官方路由

使用步驟

安裝vue-router npm install vue-router@4
在src/router/index.js中創(chuàng)建路由器，并導出
在vue應用實例中使用vue-router
聲明router-view標簽，展示組件內(nèi)容

//導入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)

子路由

對于一個頁面的多個跳轉(zhuǎ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

子路由便是很好的辦法，處理一個路由頁面中還有很多頁面需要跳轉(zhuǎn)的問題

總結

到此這篇關于vue搭建簡易前端的文章就介紹到這了,更多相關vue搭建前端內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue?Vite熱更新不起作用的正確解決辦法
熱更新全稱Hot Module Reload,常常在構建工具里面出現(xiàn),下面這篇文章主要介紹了Vue?Vite熱更新不起作用的正確解決辦法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-03-03
element?el-tooltip實現(xiàn)自定義修改樣式
本文主要介紹了element?el-tooltip實現(xiàn)自定義修改樣式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-07-07
從0搭建Vue3組件庫之如何使用Vite打包組件庫
這篇文章主要介紹了從0搭建Vue3組件庫之如何使用Vite打包組件庫,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-03-03
Vue中的事件處理詳情
這篇文章主要介紹了Vue中的事件處理詳情，文章通過給按鈕綁定一個?click?事件展開詳細內(nèi)容介紹，需要的小伙伴可以參考一下
2022-05-05
Vue新手指南之創(chuàng)建第一個vue-cli腳手架程序
vue-cli 是一個官方發(fā)布 vue.js 項目腳手架,使用 vue-cli 可以快速創(chuàng)建 vue 項目。這篇文章主要給大家介紹了關于Vue新手指南之創(chuàng)建第一個vue-cli程序的相關資料,需要的朋友可以參考下
2021-05-05
antd form表單使用setFildesValue 賦值失效的解決
這篇文章主要介紹了antd form表單使用setFildesValue 賦值失效的解決方案，具有很好的參考價值，希望對大家有所幫助。
2023-04-04
關于@click.native中?.native?的含義與使用方式
這篇文章主要介紹了關于@click.native中?.native?的含義與使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue為何棄用Ajax，選擇Axios？ajax與axios的區(qū)別？
ajax技術實現(xiàn)了局部數(shù)據(jù)的刷新，axios實現(xiàn)了對ajax的封裝；axios有的ajax都有，ajax有的axios不一定有?？偨Y一句話就是axios是ajax，ajax不止axios。
2023-01-01
Vue Spa切換頁面時更改標題的實例代碼
本篇文章主要介紹了Vue Spa切換頁面時更改標題的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
Vue項目中如何使用Axios封裝http請求詳解
這篇文章主要給大家介紹了關于Vue項目中如何使用Axios封裝http請求的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-10-10