通用管理后台项目笔记 2 - 环境配置、封装(路由、axios)

概述

从0打造通用的后台管理系统,系列的第2篇博客,开发环境Node+Yarn+Vite的开发环境,这是记录的学习笔记,这篇主要分享环境配置、封装(路由、axios、storage)等内容。

环境配置

软件项目都会经历本地开发、测试服、生产环境不同的运行环境,项目在最开始的时候都会定义config文件,对环境进行区分,方便切换环境,提高工作中的开发效率,也可以在本地部署自己的mock环境,我的项目后期会使用PHP作为后端服务,实现Api接口。

vue 复制代码
const env = import.meta.env.MODE || 'prod'
const EnvConfig = {
    dev:{
        baseApi:'/',
        mockApi:''
    },
    test:{
        baseApi:'',
        mockApi:''
    },
    prod:{
        baseApi:'',
        mockApi:''
    }
}
export default {
    env:'dev',
    mock:true,
    ...EnvConfig[env]
}

使用Config 配置的环境,比如可以在封装在axios中的引用:

arduino 复制代码
import config from "../config";

//在axios中的引用
const service = axios.create({
    baseURL: config.baseApi,
    timeout: config.timeout
})

路由封装

一个项目,最开始的时候都要配置好路由环境,路由跳转的三种方式(router-link 、传统跳转 、Composition API跳转),我们分别去分步骤讲解和实现它们:

1. main.js 全局加载路由加载路由的过程就相当于引入文件。

javascript 复制代码
import router from './router';
app.use(router).mount('#app')

2.在App.vue的文件需要引入router组件。

xml 复制代码
<template>
  <router-view></router-view>
</template>

3.使用

router-link 方式

ini 复制代码
<router-link to="/login">登录</router-link>

传统跳转

xml 复制代码
<template> 
	<el-button @click="goHome">回首页</el-button> 
</template> 
<script> 
	export default { 
		name:'login', 
		methods:{ 
			goHome(){ 
				this.$router.push('/welcome') 
				} 
			} 
	}
</script>

Composition API跳转:

xml 复制代码
<script setup> 
import { useRouter } from 'vue-router' 
let router = useRouter() 
const goHome = ()=>{ 
    router.push('/welcome') 
}
</script>

封装axios

封装axios更能提高效率,对Http 请求(request)、响应(response)进行token验证,和返回参数拦截。

javascript 复制代码
import axios from "axios";

//创建axios实例对象,添加全局配置
const service = axios.create({
    baseURL: config.baseApi,
    timeout: 8000
})

//请求拦截
service.interceptors.request.use((req) => {
    //请求拦截具体逻辑代码实现
    return req;
})

//响应拦截
service.interceptors.response.use((res) => {
    //响应拦截具体逻辑代码实现
})

function request(options){
    options.method = options.method || 'get'
    if(options.method.toLowerCase() === 'get'){
        options.params = options.data;
    }

    if(config.env === 'prod'){
        service.defaults.baseURL = config.baseApi
    } else {
        service.defaults.baseURL = config.mock ? config.mockApi : config.baseApi
    }
    return service(options)
}

['get','post','put','delete','patch'].forEach((item) => {
    request[item] = (url,data,options) => {
        return request({
            url,
            data,
            method:item,
            ...options
        })
    }
})

export default request;

在控制器中的使用的时候 在main.js中全局导入组件,使用:

ini 复制代码
app.config.globalProperties.$request = request;
javascript 复制代码
this.$request({
  method: 'get',
  url: 'http://192.168.88.140/test.php',
}).then((res) => {
  console.log(res)
})
相关推荐
会飞的鱼先生21 分钟前
vue3 内置组件KeepAlive的使用
前端·javascript·vue.js
苹果酱056734 分钟前
【Azure Redis 缓存】在Azure Redis中,如何限制只允许Azure App Service访问?
java·vue.js·spring boot·mysql·课程设计
咪库咪库咪2 小时前
vue1
前端·vue.js
洋333 小时前
[纯原创无Ai] 我把React调教成vue的模样了
vue.js·react.js
李是啥也不会3 小时前
Vue中Axios实战指南:高效网络请求的艺术
前端·javascript·vue.js
JavaDog程序狗4 小时前
【实操】uniapp纯前端搞个识别植物花草小程序
前端·vue.js·uni-app
じ☆ve 清风°4 小时前
Vue.js 核心特性解析:响应式原理与组合式API实践
前端·vue.js
Sahas10196 小时前
vite+vue2+elementui构建之 vite.config.js
vue.js·elementui
itsOli6 小时前
(25)性能优化和项目上线 | Vue.js 项目实战: 移动端“旅游网站”开发
前端·javascript·vue.js
华洛6 小时前
从0到1打造企业级AI售前机器人——实战指南二:RAG工程落地之数据处理篇🧐
前端·javascript·vue.js