elemint-ui-admin基础

最新推荐文章于 2024-06-23 09:46:07 发布

机智的香锅锅

最新推荐文章于 2024-06-23 09:46:07 发布

阅读量287

点赞数

文章标签： vue.js javascript es6 sass

本文链接：https://blog.csdn.net/qq_42673825/article/details/118557616

版权

本文档详细记录了vue-element-admin项目的配置与优化过程，包括关闭Eslint校验、禁用路由#号、调整布局样式、切换语言、处理路由、登录逻辑、端口设置、请求接口等，旨在帮助开发者快速理解和定制项目。

摘要由CSDN通过智能技术生成

官网 vue-element-admin (panjiachen.github.io)

以下自己总结的可能比较乱

关闭vue校验

 #步骤一
 idea 设置 搜索 Eslint
 #步骤二
 在vue.config.js中
   //lintOnSave: process.env.NODE_ENV === 'development',//开启vue规范检查
   lintOnSave: false,//关闭vue规范检查
 第30行

关闭报错

 控制台 频繁 打印
 GET http://192.168.31.6/sockjs-node/info?t=1623817831047 
 显示排除文件
 在 node_modules\sockjs-client\dist\sockjs.js
 搜索 self.xhr.send(payload);
 注释 1609 行

开启中文

 在src/main.js 中
 # 删除 
 //import locale from 'element-ui/lib/locale/lang/en' // lang i18n
 //Vue.use(ElementUI, { locale })
 
 #添加
 Vue.use(ElementUI)

更改浏览器选项卡文字

固定头部

 #在src/settings.js 中
   title: '后台管理系统',
 #固定头部
   fixedHeader: true,
 #侧边栏标志
   sidebarLogo: true
 修改在 src\layout\components\Sidebar\Logo.vue 中的 title: '后台管理系统',

左侧路由选项卡

 src\layout\components\Sidebar\index.vue
 
 样式 src\styles\variables.scss
 
 // sidebar
 $menuText: #2c2d2d; // 菜单文字 bfcbd9
 $menuActiveText:#409EFF; // 文字颜色 #FFD04B
 $subMenuActiveText: #56565e; //子菜单活动文本 f4f4f5 //https://github.com/ElemeFE/element/issues/12951
 
 $menuBg: #eeeeee; //菜单背景色#545c64 #304156
 $menuHover: #b3D8FF; //菜单悬停
 //$menuActiveBg: #b3D8FF; // 选中菜单背景色
 
 $subMenuBg: #e3e2e2; //子菜单背景色#1f2d3d  e3e2e2
 $subMenuHover: #b3d8ff; //子菜单悬停#001528
 
 $sideBarWidth: 210px; //边条宽度
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
 :export {
   menuText: $menuText;
   menuActiveText: $menuActiveText;
   subMenuActiveText: $subMenuActiveText;
   menuBg: $menuBg;
   menuHover: $menuHover;
   subMenuBg: $subMenuBg;
   subMenuHover: $subMenuHover;
   sideBarWidth: $sideBarWidth;
 }

关闭路由#号

 // 在 src\router\index.js
 const createRouter = () => new Router({
   mode: 'history', // 加上
   scrollBehavior: () => ({ y: 0 }),
   routes: constantRoutes
 })
 const router = createRouter()
 export function resetRouter() {
   const newRouter = createRouter()
   router.matcher = newRouter.matcher // reset router
 }

面包屑

 src\components\Breadcrumb\index.vue
 
 if (!this.isDashboard(first)) {
     matched = [{ path: '/home', meta: { title: '首页' }}].concat(matched)
 }
 
 isDashboard(route) {
     const name = route && route.name
     if (!name) {
         return false
     }
     return name.trim().toLocaleLowerCase() === 'Home'.toLocaleLowerCase()
 },

退出登录

 src\layout\components\Navbar.vue
 // 1.触发退出的方法
 async logout() {
     await this.$store.dispatch('user/logout')
     this.$router.push(`/login?redirect=${this.$route.fullPath}`)
 }
 // 2.vuex 中的 user.js
   // 用户注销登录
   logout({ commit, state }) {
     return new Promise((resolve, reject) => {
       logout(state.token).then(() => {
         removeToken() // 删除令牌
         resetRouter()
         commit('RESET_STATE')
         resolve()
       }).catch(error => {
         reject(error)
       })
     })
   },
 
   // 移除令牌
   resetToken({ commit }) {
     return new Promise(resolve => {
       removeToken() // 必须先删除令牌
       commit('RESET_STATE')
       resolve()
     })
   }
 // 3. api/user.js
 // 请求用户退出
 export function logout(token) {
   return request({
     url: `/auth/logout?accessToken=${token}`,
     headers:{
       'Authorization':'Basic bXhnLWJsb2ctYWRtaW46MTIzNDU2'
     },
     method: 'get'
   })
 }

更改端口

 在 vue.config.js 中
     const port = process.env.port || process.env.npm_config_port || 80 // dev port

获取用户信息

 在 路由拦截器中 调用 获取用户信息 的方法

发起请求

 
 get传值用params,post传值用data
 
 src/api 中
 
 import request from '@/utils/request'
 
 export default {
   // 用户登录
   testw() {
     return request({
       baseURL:'http://192.168.31.6:8082',
       url: '/login',
       method: 'post',
       data:{
         "username": "admin",
         "code": "",
         "password": "123"
       }
     })
   },
 
     // 分页条件查询标签列表
     getList(query, current = 1, size = 20) {
         return request({
             url: `/article/label/search`,
             method: 'post',
             data: {...query, current, size} // 合并为一个新对象提交给后台数据接口
         })
     },
 
     // 新增标签
     add(data) {
         return request({
             url: `/article/label`,
             method: 'post',
             data
         })
     },
 
     // 查询标签详情
     getById(id) {
         return request({
             url: `/article/label/${id}`,
             method: 'get'
         })
     },
 
     // 更新标签
     update(data) {
         return request({
             url: `/article/label`,
             method: 'put',
             data
         })
     },
 
     // 通过标签id删除标签信息
     deleteById(id) {
         return request({
             url: `/article/label/${id}`,
             method: 'delete'
         })
     }
 
 
 }

在页面中使用

 import category from '@/api/category.js'
 
     test3(){
       category.testw().then((res)=>{
         this.Token = res
       }).catch((res)=>{
       })
     }

后台接收不到data

 // 单次处理
 import qs from 'qs';
 
 let data = qs.stringify({
     username : "admin",
     password : "123456"
 })
 
 // 在每次的请求都做处理
 import qs from 'qs';
 // 请求拦截器 在发送请求之前做一些事情
 service.interceptors.request.use(
   config => {
 
     if (store.getters.token) {
       // config.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
       // 让每个请求都携带令牌
       // let each request carry token
       // ['X-Token'] is a custom headers key
       // please modify it according to the actual situation
       config.headers['X-Token'] = getToken()
     }
 
     config.data = qs.stringify(config.data);  //*****************************qs处理********************************
     return config
   },
   error => {
     // 做一些请求错误的事情
     console.log(error) // for debug
     return Promise.reject(error)
   }
 )

请求后台登录

取消验证用户

 src\utils\validate.js
 
 /**
  * 验证登录用户
  */
 export function validUsername(str) {
   // const valid_map = ['admin', 'editor']
   // return valid_map.indexOf(str.trim()) >= 0
 
   // 用户名长度大于0
   return str.trim().length>0
 }

更改请求后台地址

 src\api\user.js
 
 export function login(data) {
   return request({
     baseURL:'http://192.168.31.6:8082',
     url: '/login',
     method: 'post',
     data: data
   })
 }

更改请求后台地址

 在 src\utils\request.js
 const service = axios.create({
   baseURL: 'http://192.168.31.6:8002', // 请求后台数据
   timeout: 5000 // 超时时间
 })

请求登录

 src\api\user.js
 
 src\store\modules\user.js
 
   // 用户登录  .trim()
   login({ commit }, userInfo) {
     // 解析用户信息
     const { username , password , code } = userInfo
     return new Promise((resolve, reject) => {
       // 调用 api/user 的 login
       login({ username: username.trim(), password: password , code: code}).then(response => {
         const { data } = response // 解析请求的data
         commit('SET_TOKEN', data.token) // 把token存入vuex
         setToken(data.token) // token 存入 cookies
         resolve()
       }).catch(error => {
         reject(error)
       })
     })
   },

原登录接口

 http://192.168.31.6/dev-api/vue-admin-template/user/login
 "code": 200,
 "data": {
    "token": "admin-token"
  }
 GET
 http://192.168.31.6/dev-api/vue-admin-template/user/info?token=admin-token
 {
     "code":200,
     "data":{
         "roles":["admin"],
         "introduction":"I am a super administrator",
         "avatar":"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif",
         "name":"Super Admin"
     }
 }
 POST
 http://192.168.31.6/dev-api/vue-admin-template/user/logout
 {"code":200,"data":"success"}

跨域

 转发
 
     // 解决跨域问题
     proxy: {
       // [process.env.VUE_APP_BASE_API]: {
       //   target: 'http://192.168.31.6:8002',
       //   changeOrigin: true,
       //   pathRewrite: {
       //     ['^' + process.env.VUE_APP_BASE_API]: '/'
       //   }
       // }
       // ,
       '/hello': {
         target: 'http://192.168.31.6:8002',
         changeOrigin: true,
         pathRewrite: {
           '^/hello': '/'
         }
       }
 
       // [process.env.VUE_APP_BASE_API]: {
       //   target: 'http://0.0.0.0:8002',
       //   changeOrigin: true,
       //   pathRewrite: {
       //     ['^' + process.env.VUE_APP_BASE_API]: '/'
       //   }
       // }
 
     },
         
         
 在
 .env.development
 # just a flag
 ENV = 'development'
 
 # base api
 # VUE_APP_BASE_API = '/dev-api'
 # VUE_APP_BASE_API 值 要和 '/hello' 一样
 VUE_APP_BASE_API = '/system'
 
 VUE_APP_SERVICE_URL = 'http://192.168.31.6:6001'

机智的香锅锅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
elemint-ui-admin基础

官网vue-element-admin (panjiachen.github.io)以下自己总结的可能比较乱关闭vue校验#步骤一idea 设置搜索 Eslint#步骤二在vue.config.js中 //lintOnSave: process.env.NODE_ENV === 'development',//开启vue规范检查 lintOnSave: false,//关闭vue规范检查第30行关闭报错控制台频繁打印GET http://1...
复制链接

扫一扫