devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue前端模板框架--vue-admin-template_vue-template-admin

作者：2023面试高手 | 2024-02-28 02:18:59

赞

踩

vue-template-admin

一、简介

vue-admin-template是基于vue-element-admin的一套后台管理系统基础模板（最少精简版），可作为模板进行二次开发。

GitHub地址：GitHub - PanJiaChen/vue-admin-template: a vue2.0 minimal admin template

建议：你可以在 vue-admin-template 的基础上进行二次开发，把 vue-element-admin当做工具箱，想要什么功能或者组件就去 vue-element-admin 那里复制过来。

二、使用

修改项目名称 vue-admin-template 改为 “自己定义的项目名称”
解压压缩包
进入目录
cd  “自己的项目名称下”
安装依赖
npm install
启动。执行后，浏览器自动弹出并访问http://localhost:9528/
npm run dev

三、源码目录结构

|-dist 生产环境打包生成的打包项目
|-mock 产生模拟数据
|-public 包含会被自动打包到项目根路径的文件夹
    |-index.html 唯一的页面
|-src
    |-api 包含接口请求函数模块
        |-table.js  表格列表mock数据接口的请求函数
        |-user.js  用户登陆相关mock数据接口的请求函数
    |-assets 组件中需要使用的公用资源
        |-404_images 404页面的图片
    |-components 非路由组件
        |-SvgIcon svg图标组件
        |-Breadcrumb 面包屑组件(头部水平方向的层级组件)
        |-Hamburger 用来点击切换左侧菜单导航的图标组件
    |-icons
        |-svg 包含一些svg图片文件
        |-index.js 全局注册SvgIcon组件,加载所有svg图片并暴露所有svg文件名的数组
    |-layout
        |-components 组成整体布局的一些子组件
        |-mixin 组件中可复用的代码
        |-index.vue 后台管理的整体界面布局组件
    |-router
        |-index.js 路由器
    |-store
        |-modules
            |-app.js 管理应用相关数据
            |-settings.js 管理设置相关数据
            |-user.js 管理后台登陆用户相关数据
        |-getters.js 提供子模块相关数据的getters计算属性
        |-index.js vuex的store
    |-styles
        |-xxx.scss 项目组件需要使用的一些样式(使用scss)
    |-utils 一些工具函数
        |-auth.js 操作登陆用户的token cookie
        |-get-page-title.js 得到要显示的网页title
        |-request.js axios二次封装的模块
        |-validate.js 检验相关工具函数
        |-index.js 日期和请求参数处理相关工具函数
    |-views 路由组件文件夹
        |-dashboard 首页
        |-login 登陆
    |-App.vue 应用根组件
    |-main.js 入口js
    |-permission.js 使用全局守卫实现路由权限控制的模块
    |-settings.js 包含应用设置信息的模块
|-.env.development 指定了开发环境的代理服务器前缀路径
|-.env.production 指定了生产环境的代理服务器前缀路径
|-.eslintignore eslint的忽略配置
|-.eslintrc.js eslint的检查配置
|-.gitignore git的忽略配置
|-.npmrc 指定npm的淘宝镜像和sass的下载地址
|-babel.config.js babel的配置
|-jsconfig.json 用于vscode引入路径提示的配置
|-package.json 当前项目包信息
|-package-lock.json 当前项目依赖的第三方包的精确信息
|-vue.config.js webpack相关配置(如: 代理服务器)

四、 修改登录功能

因为该模板使用的是mock数据，没有连接到后端系统。

所以当我们想要连接到自己写的后端系统时，需要对vue-admin-template进行改造。

 1、因为浏览器对Ajax请求具有限制问题，一下三个地方不同，就会产生跨域问题。

跨域问题的原因：访问协议、地址IP、端口号

前端地址：http://localhost:9258

后端地址：http://localhost:8800

解决方法：

第一种方法：

在.env.development文件内，将

                VUE_APP_BASE_API = '/dev-api'
改为         VUE_APP_BASE_API = 'http://localhost:8800'

 

第二种方法：

在vue.config.js文件内

        注释掉mock接口配置

        配置代理转发请求到目标接口

// before: require('./mock/mock-server.js')
proxy: {
  '/dev-api': { // 匹配所有以 '/dev-api'开头的请求路径
    target: 'http://localhost:8800',
    changeOrigin: true, // 支持跨域
    pathRewrite: { // 重写路径: 去掉路径中开头的'/dev-api'
      '^/dev-api': ''
    }
  }
}

2、 修改src/utils/request.js的请求状态码

由于前端访问后端的数据，会传递一个状态码，后端返回数据的状态码可能是200，但是前端默认是20000，这时候需要把两者改为一样的即可，默认修改前端状态码的判断条件即可。

  1. import axios from 'axios'
  2. import { MessageBox, Message } from 'element-ui'
  3. import store from '@/store'
  4. import { getToken } from '@/utils/auth'
  5.  
  6. // create an axios instance
  7. const service = axios.create({
  8.   baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  9.   timeout: 5000 // request timeout
  10. })
  11.  
  12. // request interceptor
  13. service.interceptors.request.use(
  14.   config => {
  15.     if (store.getters.token) {
  16.       config.headers['X-Token'] = getToken()
  17.     }
  18.     return config
  19.   },
  20.   error => {
  21.     console.log(error) // for debug
  22.     return Promise.reject(error)
  23.   }
  24. )
  25.  
  26. // response interceptor
  27. service.interceptors.response.use(
  28.   response => {
  29.     const res = response.data
  30.     // if the custom code is not 20000, it is judged as an error.
  31.     if (res.code !== 200) {
  32.       Message({
  33.         message: res.message || 'Error',
  34.         type: 'error',
  35.         duration: 5 * 1000
  36.       })
  37.  
  38.       // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
  39.       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
  40.         // to re-login
  41.         MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
  42.           confirmButtonText: 'Re-Login',
  43.           cancelButtonText: 'Cancel',
  44.           type: 'warning'
  45.         }).then(() => {
  46.           store.dispatch('user/resetToken').then(() => {
  47.             location.reload()
  48.           })
  49.         })
  50.       }
  51.       return Promise.reject(new Error(res.message || 'Error'))
  52.     } else {
  53.       return res
  54.     }
  55.   },
  56.   error => {
  57.     console.log('err' + error) // for debug
  58.     Message({
  59.       message: error.message,
  60.       type: 'error',
  61.       duration: 5 * 1000
  62.     })
  63.     return Promise.reject(error)
  64.   }
  65. )
  66.  
  67. export default service

3、修改前端接口路径

src/api/user.js 中的 url 地址改为自己后端的发送地址。

  1. import request from '@/utils/request'
  2.  
  3. export function login(data) {
  4.   return request({
  5.     url: '/admin/system/index/login',
  6.     method: 'post',
  7.     data
  8.   })
  9. }
  10.  
  11. export function getInfo(token) {
  12.   return request({
  13.     url: '/admin/system/index/info',
  14.     method: 'get',
  15.     params: { token }
  16.   })
  17. }
  18.  
  19. export function logout() {
  20.   return request({
  21.     url: '/admin/system/index/logout',
  22.     method: 'post'
  23.   })
  24. }

4、修改后端的登录请求

  1. @RestController
  2. @RequestMapping("/admin/system/index")
  3. public class IndexController {
  4.  
  5.     //login
  6.     //{"code":20000,"data":{"token":"admin-token"}}
  7.     @PostMapping("/login")
  8.     public Result login(@RequestBody LoginVo loginVo) {
  9.         Map<String, Object> map = new HashMap<>();
  10.         map.put("token ", "admin-token-a");
  11.         return Result.ok(map);
  12.     }
  13.  
  14.     //info
  15. //    {"code":20000,"data":{"roles":["admin"],
  16. //        "introduction":"I am a super administrator",
  17. //                "avatar":"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif",
  18. //                "name":"Super Admin"}}
  19.     @GetMapping("/info")
  20.     public Result info(HttpServletRequest request) { 
  21.         Map<String, Object> map = new HashMap<>();
  22.         map.put("roles", "[admin]");
  23.         map.put("introduction", "管理员");
  24.         map.put("avatar", "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
  25.         map.put("name", "Super Admin");
  26.         return Result.ok(map);
  27.     }
  28. }

5、添加登录失败的接口

vue端：

  1. // user logout
  2.   logout({ commit, state }) {
  3.     return new Promise((resolve, reject) => {
  4.       logout(state.token).then(() => {
  5.         removeToken() // must remove  token  first
  6.         resetRouter()
  7.         commit('RESET_STATE')
  8.         resolve()
  9.       }).catch(error => {
  10.         reject(error)
  11.       })
  12.     })
  1. export function logout() {
  2.   return request({
  3.     url: '/admin/system/index/logout',
  4.     method: 'post'
  5.   })
  6. }

后端接口：

  1.  @PostMapping("/logout")
  2.     public Result logout() {
  3.         return Result.ok();
  4.     }

另一种退出登录的方式是：

修改logout,直接退出，不发送请求。

  1. // user logout
  2.   logout({ commit, state }) {
  3.     return new Promise((resolve, reject) => {
  4.         removeToken() // must remove  token  first
  5.         resetRouter()
  6.         commit('RESET_STATE')
  7.         resolve()
  8.  
  9.     })

五、帮助

如果感觉对您有帮助，麻烦您给我一个小小的关注，这是经久不衰的动力。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/157189
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号