vue-element-plus-admin应用教程_vue-element-plus-admin入门教学

• 官方说明文档

vue-element-plus-admin

• 连接后端

vite.config.ts文件

target后替换为自己的后端端口号

server: {
      port: 4023,//前端请求端口,按照自己的写
      proxy: {
        // 选项写法
        '/api': {
          target: 'http://localhost:12766',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      },
      hmr: {
        overlay: false
      },
      host: '0.0.0.0'
    }

env.base文件

这里替换成自己的后端端口号就可以

# 接口前缀
VITE_API_BASE_PATH='http://localhost:12766'

网络上常见的改法是

VITE_BASE_URL='http://localhost:12766'

之所以改VITE_API_BASE_PATH是因为./src/axios/service.ts 文件中定义的后端路径为

export const PATH_URL = import.meta.env.VITE_API_BASE_PATH

设置请求成功状态码、白名单等：./src/constants/index.ts

遇到一个问题，如果我需要很多个后端接口来实现前端功能，要怎么弄？

我发现proxy设置的判断无效，于是开辟了一个新的方法，我在env.base文件中新增一个接口前缀，命名为VITE_BASE_URL

然后再找到./src/axios/service.ts 文件，修改下面部分代码即可（其实就只加了一个if判断，我再修改代码的时候部分需要用mock，所以url请求接口就包含mock）

axiosInstance.interceptors.request.use((res: InternalAxiosRequestConfig) => {
  const controller = new AbortController()
  const url = res.url || ''
  if (url.includes('mock')) {
    res.baseURL = import.meta.env.VITE_BASE_URL
  }
  res.signal = controller.signal
  abortControllerMap.set(
    import.meta.env.VITE_USE_MOCK === 'true' ? url.replace('/mock', '') : url,
    controller
  )
  return res
})

举个例子，这里我登录用的自己的后端接口，其余的还是mock，我只需要在./api/login/index.ts中修改

export const loginApi = (data: UserType): Promise<IResponse<UserType>> => {
  return request.post({ url: '/api/User/login', data })
}

即可， 如图

• 后端

这里我使用的后端是abp搭配.net5.0以及SQL Sever2008

.host后缀文件中的appsetting.json中配置数据库信息，注意创建数据库时配置日志自增，然后将启动项设置为EF，用NuGet打开控制台（工具栏选NuGet），输入update-database，数据库就关联好了，再将启动项改为.host后缀文件，运行就行了，具体的后端写法先不说明，重点研究前端

• 新增路由

我想添加一个了这样的页面

首先在src/router/index.ts中添加自己需要的新菜单，注意区分动态路由和静态路由，然后再去views里面仿写。由于还没开始写后端和数据库，添加路由后发现并没有更新在页面？发现要去mock/role/index.mock.ts中给对应角色增加相应路由

……持续更新中，未完成