vlambda博客
学习文章列表

vue相关知识点合集


一、使用vue + element UI制作后台管理系统配置搭建

1.vue的全局引入

npm install -g @vue/cli

需要安装node,官方网站，否则提示npm不可用

2.创建项目

vue create Name //Name为你想创建的文件名

3.项目配置选择

第一个是之前的项目选择了保存所以出现的选项，第一次是不会出现的，第二个是安装vue2，第三个是安装vue3，最后一个为手动安装，这里我们选择手动安装

vue相关知识点合集

选择2.x版本


vue相关知识点合集

询问路由器模式直接no就好

vue相关知识点合集
储存当前的配置信息，询问你储存在哪里，直接回车

vue相关知识点合集
是否保存刚才设置的所有信息，保存以后下次可以直接选，就像之前的选项1，一样

vue相关知识点合集

cd进入项目

4.引入elementui

1.安装elementui

npm i element-ui -S

 
   
   
 
    
  
    
    
  
  • 1
    •

可以直接查看官网文档elementui官网
安装完成后可以在package.Json中看到版本


安装完成后可以在package.Json中看到版本



2.启动程序


进入项目的目录


npm run serve





3.配置


在main.js中导入，并且使用，Vue.use()，这样完整的环境就搭建好了


4.模板展示

elementUI的组件也是非常多，挑挑选选也自己做出了一些界面


vue相关知识点合集

vue相关知识点合集


二、vue的数据展示

1.在js的data中定义数据

vue相关知识点合集

2.在template中通过{undefined{}}来显示

vue相关知识点合集

3.小程序界面

vue相关知识点合集


三、vue使用echarts图表

1.导入echarts包

npm install echarts -S

2.vue引用全局echarts

在main.js中

vue相关知识点合集

如果要使用中国地图的化就需要加china那两行


3.图表的建立

vue相关知识点合集

首先确定一块长宽的显示界面注意id，id只能出现一次


下面就是在script中的mounted函数中去编写函数以饼图举例

vue相关知识点合集


vue相关知识点合集


4.图表出处

1.进入echarts官网

2.选择想要的图表

vue相关知识点合集


3.获取option源代码

vue相关知识点合集


4.使用

覆盖掉你原来的option就可以了


四、vue更改vue-admin-telement模板登录

1.更改env.development中的baseUrl

vue相关知识点合集

换成自己本地的url


2.更改api

vue相关知识点合集


3.查看拦截器

vue相关知识点合集


4.查看需要的token返回值

vue相关知识点合集


spring boot 部分

vue相关知识点合集


关闭eslint校验

vue相关知识点合集


在vue.config.js中添加lintOnSave:false


5.安装vue-element-admin报错问题

npm 安装 node-sass 依赖时，会从 github.com 上下载 .node 文件。由于国内网络环境的问题，这个下载时间可能会很长，甚至导致超时失败。

这是使用 sass 的同学可能都会遇到的郁闷的问题。


解决方案就是使用其他源，或者使用工具下载，然后将安装源指定到本地。


解决办法：

1.卸载node-sass

npm uninstall node-sass

2.再用npm安装:必须先卸载已安装的node-sass，否则无法安装新的

npm install node-sass

3.再次安装依赖

npm install

4.启动

npm run dev


五、vue-admin-templete连接后台 + 更改权限


1.关闭mock

在vue.config.js中注释如下内容

vue相关知识点合集


在main.js中注释如下

vue相关知识点合集


2.更改连接源

在config下的setting.config中将

vue相关知识点合集


3.后台传递

将mock文件下的controller中的user按照相同格式从后台往前台传输

前台mock传递数据

const accessTokens = { admin: 'admin-accessToken', editor: 'editor-accessToken', test: 'test-accessToken', sample: 'sample-accessToken', division: 'division-accessToken', applicant: 'applicant-accessToken',}
module.exports = [ { url: '/publicKey', type: 'post', response() { return { code: 200, msg: 'success', data: { mockServer: true, publicKey: 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDBT2vr+dhZElF73FJ6xiP181txKWUSNLPQQlid6DUJhGAOZblluafIdLmnUyKE8mMHhT3R+Ib3ssZcJku6Hn72yHYj/qPkCGFv0eFo7G+GJfDIUeDyalBN0QsuiE/XzPHJBuJDfRArOiWvH0BXOv5kpeXSXM8yTt5Na1jAYSiQ/wIDAQAB', }, } }, }, { url: '/login', type: 'post', response(config) { const { username } = config.body const accessToken = accessTokens[username] if (!accessToken) { return { code: 500, msg: '帐户或密码不正确。', } } return { code: 200, msg: 'success', data: { accessToken }, } }, }, { url: '/register', type: 'post', response() { return { code: 200, msg: '模拟注册成功', } }, }, { url: '/userInfo', type: 'post', response(config) { const { accessToken } = config.body let permissions = ['admin'] let username = 'admin' if ('admin-accessToken' === accessToken) { permissions = ['admin'] username = 'admin' } if ('editor-accessToken' === accessToken) { permissions = ['editor'] username = 'editor' } if ('test-accessToken' === accessToken) { permissions = ['test'] username = 'test' } if ('sample-accessToken' === accessToken) { permissions = ['sample'] username = 'sample' } if ('division-accessToken' === accessToken) { permissions = ['division'] username = 'division' } if ('applicant-accessToken' === accessToken) { permissions = ['applicant'] username = 'applicant' }
 return { code: 200, msg: 'success', data: { permissions, username, 'avatar|1': [ 'https://i.gtimg.cn/club/item/face/img/2/15922_100.gif', 'https://i.gtimg.cn/club/item/face/img/8/15918_100.gif', ], }, } }, }, { url: '/logout', type: 'post', response() { return { code: 200, msg: 'success', } }, },]

后台Java传递数据

** * <p> * 前端控制器 * </p> * * * @author 又菜又爱玩 * @since 2021-12-21 */@Api(tags = "用户信息类")@RestControllerpublic class MmLoginuserController { @Autowired private MmLoginuserService mmLoginuserService;
 @ApiOperation("用户登录") @PostMapping(value = "/login") public CommonResponse Login(){ return CommonResponse.ok().data("data","admin-accessToken"); } @ApiOperation("用户信息") @PostMapping("/userInfo") public CommonResponse info(){ ArrayList list = new ArrayList(); list.add("admin"); return CommonResponse.ok() .data("permissions",list) .data("username","admin") .data("avatar","https://img0.baidu.com/it/u=3623309039,2407011632&fm=26&fmt=auto"); }

 @ApiOperation("用户退出") @GetMapping("/logout") public CommonResponse logout(){ return CommonResponse.ok().data("token", "admin"); }

 @ApiOperation("密钥") @PostMapping("/publicKey") public CommonResponse Key(){ return CommonResponse.ok().data("mockServer", false) .data("publicKey", "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDBT2vr+dhZElF73FJ6xiP181txKWUSNLPQQlid6DUJhGAOZblluafIdLmnUyKE8mMHhT3R+Ib3ssZcJku6Hn72yHYj/qPkCGFv0eFo7G+GJfDIUeDyalBN0QsuiE/XzPHJBuJDfRArOiWvH0BXOv5kpeXSXM8yTt5Na1jAYSiQ/wIDAQAB"); }

}

4.修改store/modules下的user.js

vue相关知识点合集


在这个地方，如果传递格式不匹配data就是空值，将自己后台传递的数据拉出来，像我传过来的数据都在data的集合而不是data,这里就需要修改。

vue相关知识点合集

这里发现一个数组检验，也就是permissions是必须是数组的，我的相应后台

vue相关知识点合集

退出可以直接将清除token的方法拉上来就可以了

vue相关知识点合集

这时你的登录，登出代码都在后端了。

5、权限管理

vue-admin-templete在config文件夹下的permission中权限所需要的代码已经写好了我们只需要在路由中进行权限配置就好了。vue相关知识点合集

我的路由代码如下

/** * @copyright chuzhixin [email protected] * @description router全局配置，如有必要可分文件抽离 */
import Vue from 'vue'import VueRouter from 'vue-router'import Layout from '@/layouts'import EmptyLayout from '@/layouts/EmptyLayout'import { publicPath, routerMode } from '@/config'
Vue.use(VueRouter)
export const constantRoutes = [ { path: '/login', component: () => import('@/views/login/index'), hidden: true, }, { path: '/register', component: () => import('@/views/register/index'), hidden: true, }, { path: '/401', name: '401', component: () => import('@/views/401'), hidden: true, }, { path: '/404', name: '404', component: () => import('@/views/404'), hidden: true, },]
/*当settings.js里authentication配置的是intelligence时，views引入交给前端配置*/export const asyncRoutes = [ { path: '/', component: Layout, redirect: '/index', children: [ { path: '/index', name: 'Index', component: () => import('@/views/index/index'), meta: { title: '首页', icon: 'home', affix: true, noKeepAlive: true, }, }, ], }, { path: '/choseProgram', component: Layout, children: [ { path: '/choseProgram', name: 'choseProgram', component: () => import('@/views/choseProgram'), meta: { title: '选择项目', icon: 'home', permissions: ['admin', 'applicant'],
 // affix: true, // noKeepAlive: true, }, }, ], }, { path: '/approver', component: Layout, name: 'Vab', alwaysShow: true, meta: { title: '审批', icon: 'box-open', permissions: ['admin', 'division', 'sample', 'test', 'editor'], }, children: [ { path: '/approver', name: 'approver', component: () => import('@/views/approver'), meta: { title: '审批', icon: 'home', permissions: ['admin'],
 // affix: true, // noKeepAlive: true, }, },
 { path: '/manager', component: () => import('@/views/approver/manager/index'), redirect: 'noRedirect', alwaysShow: true, meta: { title: '主管审批', icon: 'box-open', permissions: ['admin', 'division'], },
 children: [ { path: 'y_approval', name: 'y_approval', component: () => import('@/views/approver/manager/y_approval/index'), meta: { title: '已审批', icon: 'home', // affix: true, // noKeepAlive: true, }, }, { path: 'n_approval', name: 'n_approval', component: () => import('@/views/approver/manager/n_approval/index'), meta: { title: '未审批', icon: 'home', // affix: true, // noKeepAlive: true, }, }, { path: 'turn_down', name: 'turn_down', component: () => import('@/views/approver/manager/turn_down/index'), meta: { title: '已驳回', icon: 'home', // affix: true, // noKeepAlive: true, }, }, { path: 'm_info', name: 'm_info', component: () => import('@/views/approver/manager/m_info/index'), meta: { title: '详情',
 //affix: false, //noKeepAlive: false, }, hidden: true, }, ], },
 { path: '/checkout', component: () => import('@/views/approver//checkout/index'), redirect: 'noRedirect', alwaysShow: true, meta: { title: '校验员审批', icon: 'box-open', permissions: ['admin', 'editor'], }, children: [ { path: 'y_pass', name: 'y_pass', component: () => import('@/views/approver/checkout/y_pass/index'), meta: { title: '已通过', icon: 'home', // affix: true, // noKeepAlive: true, }, }, { path: 'n_check', name: 'n_check', component: () => import('@/views/approver/checkout/n_check/index'), meta: { title: '未审批', icon: 'home', // affix: true, // noKeepAlive: true, }, }, { path: 'turn_down', name: 'turn_down', component: () => import('@/views/approver/checkout/turn_down'), meta: { title: '已驳回', icon: 'home', // affix: true, // noKeepAlive: true, }, }, { path: 'c_info', name: 'c_info', component: () => import('@/views/approver/checkout/c_info/index'), meta: { title: '详情',
 //affix: false, //noKeepAlive: false, }, hidden: true, }, ], },
 { path: '/receiver', component: () => import('@/views/approver/receiver/index'), redirect: 'noRedirect', alwaysShow: true, meta: { title: '接样人审批', icon: 'box-open', permissions: ['admin', 'sample'], },
 children: [ { path: 'y_pass1', name: 'y_pass1', component: () => import('@/views/approver/receiver/y_pass1/index'), meta: { title: '已通过', icon: 'home', // affix: true, // noKeepAlive: true, }, }, { path: 'n_check1', name: 'n_check1', component: () => import('@/views/approver/receiver/n_check1/index'), meta: { title: '未审批', icon: 'home', // affix: true, // noKeepAlive: true, }, }, { path: 'turn_down1', name: 'turn_down1', component: () => import('@/views/approver/receiver/turn_down1'), meta: { title: '已驳回', icon: 'home', // affix: true, // noKeepAlive: true, }, }, { path: 'c_info1', name: 'c_info1', component: () => import('@/views/approver/receiver/c_info1/index'), meta: { title: '详情',
 //affix: false, //noKeepAlive: false, }, hidden: true, }, ], },
 { path: '/monitor', component: () => import('@/views/approver//monitor/index'), redirect: 'noRedirect', alwaysShow: true,
 meta: { title: '检测员审批', icon: 'box-open', permissions: ['admin', 'test'], },
 children: [ { path: 'indata', name: 'indata', component: () => import('@/views/approver/monitor/indata/index'), meta: { title: '录入数据', icon: 'home', // affix: true, // noKeepAlive: true, }, }, { path: 'y_pass', name: 'y_pass', component: () => import('@/views/approver/checkout/y_pass/index'), meta: { title: '已通过', icon: 'home', // affix: true, // noKeepAlive: true, }, }, { path: 'n_check', name: 'n_check', component: () => import('@/views/approver/checkout/n_check/index'), meta: { title: '未审批', icon: 'home', // affix: true, // noKeepAlive: true, }, }, { path: 'turn_down', name: 'turn_down', component: () => import('@/views/approver/checkout/turn_down'), meta: { title: '已驳回', icon: 'home', // affix: true, // noKeepAlive: true, }, }, { path: 'c_info', name: 'c_info', component: () => import('@/views/approver/checkout/c_info/index'), meta: { title: '详情',
 //affix: false, //noKeepAlive: false, }, hidden: true, }, { path: 'detail', name: 'detail', component: () => import('@/views/approver/monitor/detail/index'), meta: { title: '详情',
 //affix: false, //noKeepAlive: false, }, hidden: true, }, ], }, ], }, { path: '/distribution', component: Layout, children: [ { path: '/distribution', name: 'distribution', component: () => import('@/views/distribution'), meta: { title: '技术分配', icon: 'home', permissions: ['admin', 'sample'], // affix: true, // noKeepAlive: true, }, }, ], }, { path: '/management', name: 'management', component: Layout, alwaysShow: true,
 meta: { title: '管理', icon: 'box-open', permissions: ['admin'] },
 children: [ { path: 'M_user', name: 'M_user', component: () => import('@/views/approver/management/M_user/index'), meta: { title: '用户管理', icon: 'home', // affix: true, // noKeepAlive: true, }, }, { path: 'serve', name: 'serve', component: () => import('@/views/approver/management/serve/index'), meta: { title: '添加用户',
 //affix: false, //noKeepAlive: false, }, hidden: true, }, { path: 'N_user', name: 'N_user', component: () => import('@/views/approver/management/N_user/index'), meta: { title: '添加用户',
 //affix: false, //noKeepAlive: false, }, hidden: true, }, { path: 'pass', name: 'pass', component: () => import('@/views/approver/management/T_user/index'), meta: { title: '条目管理', icon: 'home', // affix: true, // noKeepAlive: true, }, }, { path: 'remember', name: 'remember', component: () => import('@/views/approver/management/B_user/index'), meta: { title: '部门管理', icon: 'home', // affix: true, // noKeepAlive: true, }, }, { path: '/result/detail', name: 'detail', hidden: true, component: () => import('@/views/result/detail'), meta: { title: '详情', icon: 'home', hidden: true, // affix: true, // noKeepAlive: true, }, }, ], }, { path: '/result', component: Layout, children: [ { path: '/result', name: 'result', component: () => import('@/views/result/index'), meta: { title: '结果', icon: 'home', // affix: true, // noKeepAlive: true, }, }, ], }, { path: '/print', component: Layout, children: [ { path: '/print', name: 'print', component: () => import('@/views/print'), meta: { title: '打印', icon: 'home', // affix: true, // noKeepAlive: true, }, }, ], },
 { path: '*', redirect: '/404', hidden: true, },]
const router = new VueRouter({ base: routerMode === 'history' ? publicPath : '', mode: routerMode, scrollBehavior: () => ({ y: 0, }), routes: constantRoutes,})//注释的地方是允许路由重复点击，如果你觉得框架路由跳转规范太过严格可选择放开/* const originalPush = VueRouter.prototype.push;VueRouter.prototype.push = function push(location, onResolve, onReject) { if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject); return originalPush.call(this, location).catch((err) => err);}; */
export function resetRouter() { router.matcher = new VueRouter({ base: routerMode === 'history' ? publicPath : '', mode: routerMode, scrollBehavior: () => ({ y: 0, }), routes: constantRoutes, }).matcher}
export default router

当我使用smaple权限进入时

vue相关知识点合集


这些都是应该从用户表中读权限的，为了演示，就先这样写咯

vue相关知识点合集

vue相关知识点合集


再改成admin看下效果




原文链接：

(117条消息) 又菜又爱玩的博客_又菜又爱玩呜呜呜~_CSDN博客-c,java,VUE领域博主



   

    CSDN社区 |信息工程学院105工作室 


推荐阅读

数码宝贝物语 时空异客 学习版 数码宝贝物语 时空异客 学习版
基于Netty自定义TCP协议 基于Netty自定义TCP协议

相关文章