devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

改造Vue-admin-template登录_vue-admin-template改成自己的登录

作者：小小林熬夜学编程 | 2024-04-10 20:27:10

赞

踩

vue-admin-template改成自己的登录

这是是将Vue-admin-template改为登录自己的，拿自己的数据，原作者是gitee花裤衩或者github

devServer: {
  proxy: {
    '/dev-api': {
      target: 'http://localhost:8035',
      changeOrigin: true,
      pathRewrite: {
        '^/dev-api': ''
      }
    }
  }
},

 

main.js如下  

  1. import Vue from 'vue'
  2.  
  3. import 'normalize.css/normalize.css' // A modern alternative to CSS resets
  4.  
  5. import ElementUI from 'element-ui'
  6. import 'element-ui/lib/theme-chalk/index.css'
  7. import locale from 'element-ui/lib/locale/lang/en' // lang i18n
  8.  
  9. import '@/styles/index.scss' // global css
  10.  
  11. import App from './App'
  12. import store from './store'
  13. import router from './router'
  14.  
  15. import '@/icons' // icon
  16. import '@/permission' // permission control
  17.  
  18. /**
  19.  * If you don't want to use mock-server
  20.  * you want to use MockJs for mock api
  21.  * you can execute: mockXHR()
  22.  *
  23.  * Currently MockJs will be used in the production environment,
  24.  * please remove it before going online ! ! !
  25.  */
  26. // if (process.env.NODE_ENV === 'production') {
  27. //   const { mockXHR } = require('../mock')
  28. //   mockXHR()
  29. // }
  30.  
  31. // set ElementUI lang to EN
  32. Vue.use(ElementUI, { locale })
  33. // 如果想要中文版 element-ui，按如下方式声明
  34. // Vue.use(ElementUI)
  35.  
  36. Vue.config.productionTip = false
  37.  
  38. new Vue({
  39.   el: '#app',
  40.   router,
  41.   store,
  42.   render: h => h(App)
  43. })


utils目录下面的request文件

  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.   // withCredentials: true, // send cookies when cross-domain requests
  10.   timeout: 5000 // request timeout
  11. })
  12.  
  13. // request interceptor
  14. service.interceptors.request.use(
  15.   config => {
  16.     // do something before request is sent
  17.  
  18.     if (store.getters.token) {
  19.       // let each request carry token
  20.       // ['X-Token'] is a custom headers key
  21.       // please modify it according to the actual situation
  22.       config.headers['X-Token'] = getToken()
  23.     }
  24.     return config
  25.   },
  26.   error => {
  27.     // do something with request error
  28.     console.log(error) // for debug
  29.     return Promise.reject(error)
  30.   }
  31. )
  32.  
  33. // response interceptor
  34. service.interceptors.response.use(
  35.   /**
  36.    * If you want to get http information such as headers or status
  37.    * Please return  response => response
  38.   */
  40.   /**
  41.    * Determine the request status by custom code
  42.    * Here is just an example
  43.    * You can also judge the status by HTTP Status Code
  44.    */
  45.   response => {
  46.     const res = response.data
  47.  
  48.     // if the custom code is not 20000, it is judged as an error.
  49.     if (res.code !== 20000) {
  50.       Message({
  51.         message: res.message || 'Error',
  52.         type: 'error',
  53.         duration: 5 * 1000
  54.       })
  55.  
  56.       // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
  57.       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
  58.         // to re-login
  59.         MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
  60.           confirmButtonText: 'Re-Login',
  61.           cancelButtonText: 'Cancel',
  62.           type: 'warning'
  63.         }).then(() => {
  64.           store.dispatch('user/resetToken').then(() => {
  65.             location.reload()
  66.           })
  67.         })
  68.       }
  69.       return Promise.reject(new Error(res.message || 'Error'))
  70.     } else {
  71.       return res
  72.     }
  73.   },
  74.   error => {
  75.     console.log('err' + error) // for debug
  76.     Message({
  77.       message: error.message,
  78.       type: 'error',
  79.       duration: 5 * 1000
  80.     })
  81.     return Promise.reject(error)
  82.   }
  83. )
  84.  
  85. export default service

 router目录下面的index文件

  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3.  
  4. Vue.use(Router)
  5.  
  6. /* Layout */
  7. import Layout from '@/layout'
  8.  
  9. /**
  10.  * Note: sub-menu only appear when route children.length >= 1
  11.  * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
  12.  *
  13.  * hidden: true                   if set true, item will not show in the sidebar(default is false)
  14.  * alwaysShow: true               if set true, will always show the root menu
  15.  *                                if not set alwaysShow, when item has more than one children route,
  16.  *                                it will becomes nested mode, otherwise not show the root menu
  17.  * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
  18.  * name:'router-name'             the name is used by <keep-alive> (must set!!!)
  19.  * meta : {
  20.     roles: ['admin','editor']    control the page roles (you can set multiple roles)
  21.     title: 'title'               the name show in sidebar and breadcrumb (recommend set)
  22.     icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
  23.     breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
  24.     activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
  25.   }
  26.  */
  28. /**
  29.  * constantRoutes
  30.  * a base page that does not have permission requirements
  31.  * all roles can be accessed
  32.  */
  33. export const constantRoutes = [
  34.   {
  35.     path: '/login',
  36.     component: () => import('@/views/login/index'),
  37.     hidden: true
  38.   },
  39.  
  40.   {
  41.     path: '/404',
  42.     component: () => import('@/views/404'),
  43.     hidden: true
  44.   },
  45.  
  46.   {
  47.     path: '/',
  48.     component: Layout,
  49.     redirect: '/dashboard',
  50.     children: [{
  51.       path: 'dashboard',
  52.       name: 'Dashboard',
  53.       component: () => import('@/views/dashboard/index'),
  54.       meta: { title: 'Dashboard', icon: 'dashboard' }
  55.     }]
  56.   },
  57.  
  58.   {
  59.     path: '/example',
  60.     component: Layout,
  61.     redirect: '/example/book',
  62.     name: 'Example',
  63.     meta: { title: '图书管理', icon: 'el-icon-s-help' },
  64.     children: [
  65.       {
  66.         path: 'book',
  67.         name: 'Book',
  68.         component: () => import('@/views/book/index'),
  69.         meta: { title: '图书列表', icon: 'table' }
  70.       }
  71.     ]
  72.   },
  73.  
  74.   {
  75.     path: '/form',
  76.     component: Layout,
  77.     children: [
  78.       {
  79.         path: 'index',
  80.         name: 'Form',
  81.         component: () => import('@/views/form/index'),
  82.         meta: { title: 'Form', icon: 'form' }
  83.       }
  84.     ]
  85.   },
  86.  
  87.   {
  88.     path: '/nested',
  89.     component: Layout,
  90.     redirect: '/nested/menu1',
  91.     name: 'Nested',
  92.     meta: {
  93.       title: 'Nested',
  94.       icon: 'nested'
  95.     },
  96.     children: [
  97.       {
  98.         path: 'menu1',
  99.         component: () => import('@/views/nested/menu1/index'), // Parent router-view
  100.         name: 'Menu1',
  101.         meta: { title: 'Menu1' },
  102.         children: [
  103.           {
  104.             path: 'menu1-1',
  105.             component: () => import('@/views/nested/menu1/menu1-1'),
  106.             name: 'Menu1-1',
  107.             meta: { title: 'Menu1-1' }
  108.           },
  109.           {
  110.             path: 'menu1-2',
  111.             component: () => import('@/views/nested/menu1/menu1-2'),
  112.             name: 'Menu1-2',
  113.             meta: { title: 'Menu1-2' },
  114.             children: [
  115.               {
  116.                 path: 'menu1-2-1',
  117.                 component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
  118.                 name: 'Menu1-2-1',
  119.                 meta: { title: 'Menu1-2-1' }
  120.               },
  121.               {
  122.                 path: 'menu1-2-2',
  123.                 component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
  124.                 name: 'Menu1-2-2',
  125.                 meta: { title: 'Menu1-2-2' }
  126.               }
  127.             ]
  128.           },
  129.           {
  130.             path: 'menu1-3',
  131.             component: () => import('@/views/nested/menu1/menu1-3'),
  132.             name: 'Menu1-3',
  133.             meta: { title: 'Menu1-3' }
  134.           }
  135.         ]
  136.       },
  137.       {
  138.         path: 'menu2',
  139.         component: () => import('@/views/nested/menu2/index'),
  140.         name: 'Menu2',
  141.         meta: { title: 'menu2' }
  142.       }
  143.     ]
  144.   },
  145.  
  146.   {
  147.     path: 'external-link',
  148.     component: Layout,
  149.     children: [
  150.       {
  151.         path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
  152.         meta: { title: 'External Link', icon: 'link' }
  153.       }
  154.     ]
  155.   },
  156.  
  157.   // 404 page must be placed at the end !!!
  158.   { path: '*', redirect: '/404', hidden: true }
  159. ]
  160.  
  161. const createRouter = () => new Router({
  162.   // mode: 'history', // require service support
  163.   scrollBehavior: () => ({ y: 0 }),
  164.   routes: constantRoutes
  165. })
  166.  
  167. const router = createRouter()
  168.  
  169. // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
  170. export function resetRouter() {
  171.   const newRouter = createRouter()
  172.   router.matcher = newRouter.matcher // reset router
  173. }
  174.  
  175. export default router

 api目录下面的user.js如下

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

接下来是后端的编写

 注意后端端口要与前端定义的接口相同

server:
  port: 8035

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/t155?characterEncoding=utf-8
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root
    password: root

mybatis-plus:
  configuration:
    map-underscore-to-camel-case: false
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  1.  
  2. @RestController
  3. public class IndexController {
  4.  
  5.     @PostMapping("/user/login")
  6.     public R userLogin(@RequestBody User user) {
  7.         System.out.println("进来了userLogin");
  8.         HashMap<String, Object> map = new HashMap<>();
  9.         if (user.getUsername().equals("admin")&&user.getPassword().equals("111111")){
  10.             map.put("token", "admin-token");
  11.         }else {
  12.             map.put("token", "editor-token");
  13.         }
  14.         return new R(20000,"登录成功", map);
  15.     }
  16.  
  17.     @GetMapping("/user/info")
  18.     public R userInfo(@RequestParam("token") String token) {
  19.         HashMap<String, Object> map = new HashMap<>();
  20.         if (token.equals("admin-token")){
  21.             map.put("roles", "admin");
  22.             map.put("name", "Super Admin");
  23.         }else {
  24.             map.put("roles", "editor");
  25.             map.put("name", "Normal Editor");
  26.         }
  27.         map.put("avatar", "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
  28.         return new R(20000,"查看用户信息", map);
  29.     }
  30.  
  31.     @PostMapping("/user/logout")
  32.     public R userLogout(){
  33.         return new R(20000,"退出成功！");
  34.     }
  35.  
  36.  
  37.     @GetMapping("/book/list/{current}/{pageSize}")
  38.     public R getAllBooks(@PathVariable int current, @PathVariable int pageSize) {
  39.  
  40.         System.out.println("进来了getAllBooks");
  41.  
  42.         return new R(20000, "查询成功!",null);
  43.     }
  44.  
  45.  
  46. }

 接下来就可以测试了，如果登录进去了，就表示成功了，祝各位小伙伴成功

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

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

  

闽ICP备14008679号