首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue搭建前端

vue搭建简易前端的思路及问题详解

2025-01-22 09:32:11 作者：无语-葬欧

这篇文章主要介绍了如何使用Vue和ElementPlus构建前端页面,特别是如何进行跨域请求和使用Vue Router进行路由管理,文中通过代码介绍的非常详细,需要的朋友可以参考下

前言

前文初步了解了组件库Element Plus，现在正式开始使用vue搭建大事件前端页面，后端见（springboot以及后续项目专栏）

大致思路

其中html标签，css样式，表单校验都可以通过Element Plus直接快捷生成，而重点在于调用后天接口和分装api，以及在其中碰到的问题

问题

表单校验

el-form标签上通过rules属性，绑定校验规则

el-form-item标签上通过prop属性，指定校验项

//定义表单校验规则
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>

请求跨域

在研究该问题前，我们先思考发生的原因：

我们前段页面的接口为localhost：5173而后端接口为localhost：8080，于浏览器的同源策略限制，向不同源(不同协议、不同域名、不同端口)发送ajax请求会失败。

因此我们要想办法避免服务器向服务器发送请求

解决办法：配置代理：让请求在5173端口中，变成向8080发送请求，就不会存在同源策略

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替换为空字符串
      }
    }
  }
})

这样发送给5173的命令变成了https://localhost:5173/api/******，而到达服务器时，又被文件转换为https://localhost:8080/********这样便躲过了同源策略

优化axios响应拦截器

在代码编写过程中，发现

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('登录失败')
    }

于是便将其整合，结算为一个js文件

const instance = axios.create({baseURL})

//添加响应拦截器
instance.interceptors.response.use(
    result=>{
        //判断业务状态码
        if(result.data.code === 0 ){
            return result.data;
        }
        //操作失败
        // alert(result.data.msg?result.data.msg:'服务异常')   换成好看的
        ElMessage.error(result.data.msg?result.data.msg:'服务异常')
        //异步操作的状态转换为失败
        return Promise.reject(result.data)

    },
    err=>{
        alert('服务异常');
        return Promise.reject(err);//异步的状态转化成失败的状态
    }
)

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）

路由，决定从起点到终点的路径的进程

在前端工程中，路由指的是根据不同的访问路径，展示不同组件的内容

Vue Router是Vue.js的官方路由

使用步骤

安装vue-router npm install vue-router@4
在src/router/index.js中创建路由器，并导出
在vue应用实例中使用vue-router
声明router-view标签，展示组件内容

//导入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 }
]
//创建路由器
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},
        ]
    },
]

//创建路由器
const router = createRouter({
    routes:routes,
    history:createWebHistory()
})

export default router

子路由便是很好的办法，处理一个路由页面中还有很多页面需要跳转的问题

总结

到此这篇关于vue搭建简易前端的文章就介绍到这了,更多相关vue搭建前端内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！