官网 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'