vue-element-admin

URL： https://panjiachen.github.io/vue-element-admin-site/zh/ 测试了下面两个方案： 集成方案: vue-element-admin 基础模板: vue-admin-template 建议 你可以把 vue-element-admin 当做工具箱或者集成方案仓库，在 vue-admin-template 的基础上进行二次开发，想要什么功能或者组件就去 vue-element-admin 那里复制过来。 操作步骤： # 克隆项目 git clone https://github.com/PanJiaChen/vue-element-admin.git # 进入项目目录 cd vue-element-admin # 安装依赖 npm install # 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题 npm install --registry=https://registry.npm.taobao.org # 本地开发 启动项目 npm run dev 额外操作： 在项目根目录下，建立.npmrc文件，输入如下内容，解决node-sass的问题。 sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

权限控制（vue） 经常会遇到，角色权限控制问题，若是页面控制，倒好说，可如果是当前页面部分可见不可见，这就有些麻烦，如果加上条件就更加苛刻。之前只是简单的 v-if 进行控制，如今想试试指令（网上一直有这些操作方式） 参考 参考了 vue-element-admin -- 指令 应用场景 权限控制 dom隐藏（不推荐） 直接从dom节点删除 依据传入的数据动态进行修改 代码 需求：需要实现一个依据动态参数进行修改的模块 test.vue template <div class="test-height"> <!-- 指令调用，status是动态参数 --> <h1 v-permission="{ role: ['so'], status }">test</h1> </div> js import permission from '@/directives/permission' export default { ... directives: { permission }, data () { return { status: false } }, mounted () { // 动态修改参数 setTimeout(() => { this.status = !this.status }, 1000) } } permission.js import store from '@

在确定了后台系统的详细规划和整体功能以后，花费时间更多的其实是对技术细节的打磨。本主题借鉴我开发个人网站 魚立说 的经验，整理了在开发后台系统过程可能会遇到的各种技术要点。 本文来源：魚立说。本文链接： https://www.yulisay.com/d/endskills.html ，支持微信浏览器打开。 更多精彩文章，请移步 魚立说个人网站 翻看。欢迎欣赏，吐槽不足之处。 涉及到的代码已经整理到 https://github.com/yulis-say/web-full-stack 中的 end-skills 目录，若觉得有用，请分享并 star 。 1 后台开发小结 下面对后台系统的开发技术要点依次进行概括，包括必要的说明和资源引导。 1.1 后台系统模板 搭建后台系统，为了省时省力，可以选用一些流行的后台系统模板。关于这部分，可以阅读本站整理的《流行的后台管理系统模板》一文。 考虑到技术的流行性和后台功能的完善，本站使用了基于 Vue.js 和 Element-UI 实现的 vue-admin-template 作为参考，进行了后台系统的搭建和二次开发。 参考 vue-element-admin 后台系统模板，最终的后台系统效果将如图所示： 1.2 vue-admin-template 使用技巧 配置代理请求，解决跨域问题。做如下修改： 修改 .env

简介 之前的技术路线本来是angular的，后来经过一段时间的开发还是打算选择vue，原因是vue简单丰富，尽管angular规范强大，但是组件库都不太符合国人风格。看到GitHub上Vue Element Admin这么高的人气后就毫不犹豫的选择了这个后台管理框架。作为一个后端开发，刚刚下载Vue Element Admin框架时确实无从下手，但是一番研究之后也就适应了，今天就介绍下改造Vue Element Admin登录并对接vNext授权服务。vNext授权服务使用的是ids4框架，所以使用ids4框架授权的服务都可以参考该登录。 代码分析 根据Vue Element Admin作者的介绍，该框架登录需要两步，获取token和获取userinfo（用户信息）。作者公司的后端设计应该是用户信息中包括用户权限，所以Vue Element Admin（后称Admin）登录只需调两次接口。 在view路径的login中可以看到login的click事件： handleLogin() { this .$refs.loginForm.validate(valid => { if (valid) { this .loading = true this .$store.dispatch("user/userLogin", this .loginForm).then(()=> { this

一 Tinymce可视化编辑器 参考： https://panjiachen.gitee.io/vue-element-admin/#/components/tinymce 二 组件初始化 Tinymce是一个传统javascript插件，默认不能用于Vue.js因此需要做一些特殊的整合步骤 1 复制脚本库 将脚本库复制到项目的static目录下（在vue-element-admin-master的static路径下） 2 引入js脚本 在guli-admin/index.html 中引入js脚本 <script src="/static/tinymce4.7.5/tinymce.min.js"></script> <script src="/static/tinymce4.7.5/langs/zh_CN.js"></script> 三 组件引入 为了让Tinymce能用于Vue.js项目，vue-element-admin对Tinymce进行了封装，下面将它引入到课程信息页面 1 复制组件 src/components/Tinymce（在vue-element-admin-master的src路径下） 2 引入组件 Info.vue 组件中引入 Tinymce // 注册富文本组件 components: { Tinymce }, 3 使用组件 <!-- 课程简介--> <el

今天把前端采用vue-element-admin与springboot的项目部署到正是线上，在开发线上很OK的，一放上去我的天啊，坑是真的多阿。下面听我一一道来：我这边采用的是nginx服务器部署。 1. 首页能显示，F5强刷新页面404空白页。 location / { index index.php index.html index.htm; 　　　　try_files $uri $uri/ /index.html; } 2.接口出现返回405，404，403错误 1。去掉vue.config.js中的 // proxy: { // // change xxx-api/login => mock/login // // detail: https://cli.vuejs.org/config/#devserver-proxy // [process.env.VUE_APP_BASE_API]: { // target: `http://127.0.0.1:7081/callcenter-api`, // changeOrigin: true, // pathRewrite: { // ['^' + process.env.VUE_APP_BASE_API]: '' // } // } // }, //after: require('./mock/mock-server.js')

下载地址： 百度网盘 章节目录： 1-1 摒弃千篇一律项目，选我：前后端一体化微服务网关项目试看 第2章 扫盲网关前置技术：必备网络基础【夯实基础，所向披靡！】 扫盲网关前置技术，掌握必备网络基础，以【原理插图+脑图+示例代理】相结合的方式，主 要讲解OSI七层网络协议、经典协议与数据包、tcp粘包拆包及udp、tcp、http等代码编写。 轻松领略到网络编程快感。 2-1 跬步千里 - 为什么要学习网络基础【有目的学习，事半功倍】 2-2 天下无双 - 经典协议与数据包 2-3 眉目传情 - tcpdump抓包分析三次握手和四次挥手 2-4 依依惜别-为啥time_wait需要等待2msl 2-5 节流开源 - 图解为啥需要流量控制 2-6 一人荷戟 - 如何调整网络负载 2-7 比屋连甍 - 解开粘包、拆包谜团 2-8 各行其是 - 自定义消息格式实现装包与拆包 2-9 刀枪剑戟 - udp实现原来如此简单 2-10 刀枪剑戟 - 玩转tcp服务器 2-11 刀枪剑戟-忘记关闭连接会怎么样 2-12 刀枪剑戟 - http Server与 Client【常用必学!!! 】 2-13 知其所以 - 脑图精讲http Server源码 2-14 知其所以 - 脑图精讲http Client源码 2-15 刀枪剑戟 - RoundTripper连接上下游的纽带 2-16 刀枪剑戟 -

下载地址： 百度网盘 章节目录： 1-1 摒弃千篇一律项目，选我：前后端一体化微服务网关项目试看 第2章 扫盲网关前置技术：必备网络基础【夯实基础，所向披靡！】 扫盲网关前置技术，掌握必备网络基础，以【原理插图+脑图+示例代理】相结合的方式，主 要讲解OSI七层网络协议、经典协议与数据包、tcp粘包拆包及udp、tcp、http等代码编写。 轻松领略到网络编程快感。 2-1 跬步千里 - 为什么要学习网络基础【有目的学习，事半功倍】 2-2 天下无双 - 经典协议与数据包 2-3 眉目传情 - tcpdump抓包分析三次握手和四次挥手 2-4 依依惜别-为啥time_wait需要等待2msl 2-5 节流开源 - 图解为啥需要流量控制 2-6 一人荷戟 - 如何调整网络负载 2-7 比屋连甍 - 解开粘包、拆包谜团 2-8 各行其是 - 自定义消息格式实现装包与拆包 2-9 刀枪剑戟 - udp实现原来如此简单 2-10 刀枪剑戟 - 玩转tcp服务器 2-11 刀枪剑戟-忘记关闭连接会怎么样 2-12 刀枪剑戟 - http Server与 Client【常用必学!!! 】 2-13 知其所以 - 脑图精讲http Server源码 2-14 知其所以 - 脑图精讲http Client源码 2-15 刀枪剑戟 - RoundTripper连接上下游的纽带 2-16 刀枪剑戟 -

功能概述： 根据后端返回接口，实现路由动态显示 实现按钮（HTML元素）级别权限控制 涉及知识点： 路由守卫 Vuex使用 Vue自定义指令 导航守卫 前端工程采用Github开源项目 Vue-element-admin 作为模板，该项目地址： Github | Vue-element-admin 。 在 Vue-element-admin 模板项目的 src/permission.js 文件中，给出了路由守卫、加载动态路由的实现方案，在实现了基于不同角色加载动态路由的功能。我们只需要稍作改动，就能将基于角色加载路由改造为基于权限加载路由。 导航守卫 ：可以应用于在路由跳转时，对用户的登录状态或权限进行判断。项目中使用全局前置守卫。参考Vue官方文档： https://router.vuejs.org/zh/guide/advanced/navigation-guards.html 后台返回接口 权限系统后台采用基于角色的权限控制方案（ role-based access control ），如上图所示， 该用户信息接口将查询用户所具有的所有角色，再将这些角色的权限并集按照路由 - 操作整合在一起返回。在用户登录入系统后，我们从后台请求获得用户信息（个人信息 + 权限信息），作为全局属性储存在前端。不同权限的用户看到的页面不同，依赖于这些属性，它们决定了路由如何加载、页面如何渲染。

简介 之前的技术路线本来是angular的，后来经过一段时间的开发还是打算选择vue，原因是vue简单丰富，尽管angular规范强大，但是组件库都不太符合国人风格。看到GitHub上Vue Element Admin这么高的人气后就毫不犹豫的选择了这个后台管理框架。作为一个后端开发，刚刚下载Vue Element Admin框架时确实无从下手，但是一番研究之后也就适应了，今天就介绍下改造Vue Element Admin登录并对接vNext授权服务。vNext授权服务使用的是ids4框架，所以使用ids4框架授权的服务都可以参考该登录。 代码分析 根据Vue Element Admin作者的介绍，该框架登录需要两步，获取token和获取userinfo（用户信息）。Vue Element Admin作者公司的后端设计应该是用户信息中包括用户权限，所以Vue Element Admin（后称Admin）登录只需调两次接口。 在view路径的login中可以看到login的click事件： handleLogin() { this .$refs.loginForm.validate(valid => { if (valid) { this .loading = true this .$store.dispatch("user/userLogin", this .loginForm)