Vue3+Ts+Vite+AntdUI后台基础模板打造：Layout布局及高效请求封装

前端

2023-12-04 02:21:32

Vue3+Ts+Vite+AntdUI构建后台基础模板：Layout布局及请求封装

导言

在构建现代化、功能齐全的后台管理系统时，布局和请求封装扮演着至关重要的角色。本篇教程将深入探讨如何使用Ant Design UI构建灵活的布局结构，以及如何利用Axios进行高效的请求处理，从而提升后台系统的可维护性和用户体验。

Layout布局

1. Ant Design UI组件

Ant Design UI提供了一套丰富的Layout组件，可轻松构建各种复杂的布局。在本教程中，我们将使用Layout、Sider、Header、Content和Footer组件来创建一个简洁实用的两栏布局。

2. 代码示例

<template>
  <Layout>
    <Sider>
      <Menu mode="inline" theme="dark">
        <MenuItem key="1">首页</MenuItem>
        <MenuItem key="2">用户管理</MenuItem>
        <MenuItem key="3">角色管理</MenuItem>
        <MenuItem key="4">权限管理</MenuItem>
      </Menu>
    </Sider>
    <Layout>
      <Header>面包屑导航</Header>
      <Content>
        内容区域
      </Content>
      <Footer>版权信息</Footer>
    </Layout>
  </Layout>
</template>

请求封装

1. Axios简介

Axios是一个简洁易用的HTTP客户端库，可简化后台系统的请求处理。它提供了一系列开箱即用的特性，包括超时设置、拦截器和自动JSON转换。

2. 代码示例

import axios from 'axios'

const service = axios.create({
  baseURL: 'http://localhost:8080', // 后端API基准URL
  timeout: 10000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json' // 默认请求头
  }
})

3. 拦截器

拦截器允许我们在请求发送和响应接收之前或之后执行自定义操作。我们可以使用拦截器来处理错误、添加身份验证令牌或对请求数据进行预处理。

4. 请求发送拦截器

service.interceptors.request.use(
  config => {
    // 在发送请求之前执行自定义操作
    return config
  },
  error => {
    // 处理请求错误
    return Promise.reject(error)
  }
)

5. 响应接收拦截器

service.interceptors.response.use(
  response => {
    // 对响应数据执行自定义操作
    return response.data
  },
  error => {
    // 处理响应错误
    return Promise.reject(error)
  }
)