[Vue3]构建通用后台系统

e7da404d5c3eec1a61ad682c48f0ead0.png

前言

基于Vue3 + Vite + Element-plus 来构建一个常见的后台,做这个的原因还是在于理清技术细节,虽然这玩意到处都是,但对于前端经验不算多的我而言,还是有必要自己捣鼓一次的,此外本次使用JavaScript来开发,而不适用TypeScript,核心原因是,遇到一些问题时,请教周围的前端朋友发现他们都不太熟悉TypeScript,所以一些小问题因为其类型推断系统搞了很久,后面和解了,个人项目用JavaScript也没啥问题,下面我们开始吧。

本文会提供完整的代码,请放心食用。

使用yarn构建vue3项目:

yarn create vite DashboardFrameWork --template vue
yarn && yarn dev

然后安装相应的依赖:

yarn add element-plus --save
yarn add @element-plus/icons-vue --save
yarn add axios --save
yarn add sass --save
yarn add vue-router@next --save
yarn add vuex@next --save

我将依赖都安装到dependencies(--save)中。

就我个人理解,开发时使用的工具向的东西,比如vite、webpack、mockjs等,不需要在上线时依赖,那么就将其安装到devDependencies(--dev)中,反之则安装到dependencies中。

上述安装的依赖中,element-plus是UI框架,element-plus/icons-vue是UI框架的图标相关的支撑库,axios是HTTP请求库、sass是用于编写样式的CSS超集语言、vue-router用于实现单页面路由,vuex用于实现状态存储,很常见的Vue3全家桶。

封装axios

为了方便开发和代码模块化,多数项目在开始前会进行一些基本的封装并构建出项目的骨架。

首先,我们对axios库进行封装,如果单纯的使用axios库,其用法已经足够简单了,但结合后台业务情况,还是有必要对它进行二次封装,实现请求拦截、响应拦截。

创建src/utils/request.js,用于实现封装JavaScript的逻辑,先创建axios对象:

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

接着实现请求拦截,实现每次请求前身份的校验:

// 请求拦截
service.interceptors.request.use((req) => {
  const headers = req.headers;
  const { token } = storage.getItem("userInfo") || {};
  if (token) {
    if (!headers.Authorization) headers.Authorization = "Bearer " + token;
  }
  return req;
});

上述代码中,从storage中获取userInfo的数据,我们可以通过chrome的开发者工具Application查看到storage中存储的数据:

c9fbd42543cfa7d61b1d0c9a135a5d6e.png

我们在login时,将用户基础信息写入其中,每次请求前都会通过请求拦截做一次登录校验。

以类似的方式,我们可以实现响应拦截:

// 响应拦截
service.interceptors.response.use((res) => {
  const { code, data, msg } = res.data;
  if (code === 200) {
    return data;
  } else if (code === 500001) {
    ElMessage.error(TOKEN_INVALID);
    // 让错误信息展示一下,再跳转
    setTimeout(() => {
      router.push("/login");
    }, 1500);
    // 抛出异常
    return Promise.reject(TOKEN_INVALID);
  } else {
    ElMessage.error(msg || NETWORK_ERROR);
    return Promise.reject(msg || NETWORK_ERROR);
  }
});

如果响应的code是200,则将数据正常返回,如果code不为200,则通过ELMessage给用户展示相关的错误信息,并通过路由方法跳转到login页面,一个小技巧是,失败时,不要立刻跳转到login页面,因为我们希望用户看到相关的报错信息,最后返回Promise.reject对象。

拦截相关的方法实现好后,再封装一下请求方法就好了:

function request(options) {
  options.method = options.method || "get";
  if (options.method.toLowerCase() === "get") {
    options.params = options.data;
  }
  let isMock = config.mock;
  //  兼容局部Mock的用法
  if (typeof options.mock != "undefined") {
    isMock = options.mock;
  }
  service.defaults.baseURL = isMock ? config.mockApi : config.baseApi;

  return service(options);
}

上述代码中封装了request方法,这里的核心在于,请求的URL是Mock地址还是真实的后台地址。

通过Mock,前端可以在不需要后台提供出完整的API的情况下进行开发,很多前端开源项目会使用Mockjs来构建一个单独的serve来为前端项目提供数据,而这里我直接使用了在线的Mock服务(后文介绍)。

至此,我们可以通过如下方式来实现http请求:

request({
  url: "/users/login",
  method: "post",
  data: {
    username: "ayuliao",
    pwd: "123"
  }
}).then((res) => {
  console.log(res);
});

request.js github位置:https://github.com/ayuLiao/DashboardFrameWork/blob/master/src/utils/request.js

配置文件

多数项目中,都会使用配置文件来管理相关的配置,我们也不例外。

创建src/config/config/index.js,代码如下:

/**
 * 环境配置封装
 */

// import.meta.env.MODE 当前项目环境
const env = import.meta.env.MODE
const EnvConfig = {
    development:{
        baseApi:'/api',
        mockApi:'https://www.fastmock.site/mock/xxx/api'
    },
    production:{
        baseApi:'//xxx.com/api',
        mockApi:'https://www.fastmock.site/mock/xxx/api'
    }
}
export default {
    env,
    // 是否开启Mock
    mock:true, 
    namespace:'manager',
    ...EnvConfig[env]
}

通过env.MODE来判断当前的环境,在Vue3中,默认情况下,开发服务器 (dev 命令) 运行在 development (开发) 模式,而 build 命令则运行在 production (生产) 模式(更多可看

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue3.0 TS 后台管理系统项目文档 一、项目介绍 该项目是一个使用 Vue3.0 和 TypeScript 开发的后台管理系统。主要功能包括用户登录、权限管理、数据展示、数据编辑等。 二、项目结构 1. src 目录:项目主要代码存放位置 - components:组件目录,存放通用组件和业务组件 - views:视图目录,存放各个页面的逻辑和模板 - utils:工具目录,存放与业务无关的工具函数、网络请求等 - router.ts:路由配置文件 - main.ts:项目入口文件 2. assets 目录:存放静态资源,如图片、样式等 3. types 目录:存放 TypeScript 类型定义文件 三、功能模块 1. 用户登录模块 - 用户名、密码验证 - 登录成功后,保存用户信息到本地 2. 权限管理模块 - 管理员、普通用户权限划分 - 根据不同的权限显示不同的菜单和页面 3. 数据展示模块 - 获取后台数据 - 在页面中展示数据,支持分页和搜索功能 4. 数据编辑模块 - 支持对页面数据的修改、增加和删除操作 四、技术栈 1. Vue3.0:使用 Vue3.0 版本进行开发,享受其更优秀的性能和开发体验 2. TypeScript:使用 TypeScript 进行开发,增强代码的可维护性和可读性 3. Vue Router:用于管理页面的路由跳转和权限控制 4. Vuex:用于状态管理,方便组件间的数据共享和通信 5. Element Plus:使用 Element Plus UI 组件库来构建页面,提供丰富的组件和样式 五、项目配置与启动 1. 安装依赖:使用 npm 或 yarn 安装项目依赖包 2. 配置环境:根据实际需求修改 API 地址和其他配置项 3. 启动项目:运行 npm run serve 或 yarn serve 命令启动项目 六、总结 该项目是一个基于 Vue3.0 和 TypeScript 开发的后台管理系统,具备用户登录、权限管理、数据展示和编辑等功能。通过项目结构、功能模块、技术栈以及项目配置与启动进行了详细说明,希望对项目的开发和使用提供一定的参考和指导。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

懒编程-二两

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值