随笔- 138  评论- 212  文章- 18 
随笔分类 - Vue.js
vue.js
Spring Boot + Spring Cloud 实现权限管理系统 后端篇(十七):登录验证码实现(Captcha)
摘要:登录验证码 登录验证是一般系统都会有的功能,验证的方式也多种多样,比如输入式验证码,拖动式验证条,拖动式验证拼图等等。 我们这里先实现常规的输入验证码的方式,右边显示验证码图片,点击可刷新,左边输入验证码。如下图为实现的效果。 实现案例 验证码的实现需要前后端协同,脱离彼此则不可用,故将前后端的实现 阅读全文
posted @ 2018-10-29 18:45 朝雨忆轻尘 阅读(3860) 评论(2) 推荐(0) 编辑
IT人如何打造个性化的个人网站(在线简历)
摘要:前言 众所周知,IT行业人员在求职时,如果拥有自己的技术博客和个人网站多少是可以加些分的,因为这也是IT人的技术证明之一。内容丰富的技术博客就不必多少了,往往技术博客大神市场上多是供不应求的,而且技术博客出彩主要是在内容经营上,至于博客本身直接到各大技术平台注册一个即可,当然有兴趣的朋友想要自建个人 阅读全文
posted @ 2018-10-21 18:02 朝雨忆轻尘 阅读(4722) 评论(0) 推荐(1) 编辑
Vue + Element UI 实现权限管理系统 前端篇(十五):嵌套外部网页
摘要:嵌套外部网页 在有些时候,我们需要在我们的内容栏主区域显示外部网页。如查看服务端提供的SQL监控页面,接口文档页面等。 这个时候就要求我们的导航菜单能够解析嵌套网页的URL,并根据URL路由到相应的嵌套组件。接下来我们就讲解具体实现方案。 实现原理 1. 给菜单URL添加嵌套网页前缀,如果是服务端网 阅读全文
posted @ 2018-09-22 16:44 朝雨忆轻尘 阅读(8631) 评论(1) 推荐(0) 编辑
Vue + Element UI 实现权限管理系统 前端篇(十六):系统备份还原
摘要:系统备份还原 在很多时候,我们需要系统数据进行备份还原。我们这里就使用MySql的备份还原命令实现系统备份还原的功能。 后台接口准备 系统备份还原是对数据库的备份还原,所以必须有后台接口的支持,我们准备好了接口,相关内容可以查阅后台篇。 backup:系统备份创建接口,会在服务端_backup目录下 阅读全文
posted @ 2018-09-22 16:44 朝雨忆轻尘 阅读(3456) 评论(1) 推荐(0) 编辑
Vue + Element UI 实现权限管理系统 前端篇(十四):菜单功能实现
摘要:菜单功能实现 菜单接口封装 菜单管理是一个对菜单树结构的增删改查操作。 提供一个菜单查询接口,查询整颗菜单树形结构。 http/modules/menu.js 添加 findMenuTree 接口。 菜单管理界面 菜单管理界面是使用封装的表格树组件显示菜单结构,并提供增删改查的功能。 Menu.vu 阅读全文
posted @ 2018-09-22 16:44 朝雨忆轻尘 阅读(6963) 评论(0) 推荐(4) 编辑
Vue + Element UI 实现权限管理系统 前端篇(十三):页面权限控制
摘要:权限控制方案 既然是后台权限管理系统,当然少不了权限控制啦,至于权限控制,前端方面当然就是对页面资源的访问和操作控制啦。 前端资源权限主要又分为两个部分,即导航菜单的查看权限和页面增删改操作按钮的操作权限。 我们的设计把页面导航菜单和页面操作按钮统一存储在菜单数据库表中,菜单表中包含以下权限关注点。 阅读全文
posted @ 2018-09-15 16:35 朝雨忆轻尘 阅读(33096) 评论(4) 推荐(2) 编辑
Vue + Element UI 实现权限管理系统 前端篇(十二):用户管理模块
摘要:用户管理模块 添加接口 在 http/moduls/user.js 中添加用户管理相关接口。 模拟数据 在 mock/moduls/user.js 中添加用户管理相关mock接口。 提取根路径 为了可以统一控制mock的开启与关闭,把mock的根路径提取出来。 而具体的Mock接口,把根路径移除,因 阅读全文
posted @ 2018-09-15 15:23 朝雨忆轻尘 阅读(12257) 评论(10) 推荐(1) 编辑
Vue笔记:生命周期和钩子函数
摘要:前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的。放大之,对vue的生命周期不甚了解。只知道简单的使用,而不知道为什么,这对后面的踩坑是相当不利的。 因为我们有时候会在几个钩子函数里做一些事情,什么时候做,在哪个函数 阅读全文
posted @ 2018-09-11 14:17 朝雨忆轻尘 阅读(1197) 评论(0) 推荐(2) 编辑
Vue + Element UI 实现权限管理系统 前端篇(十一):第三方图标库
摘要:使用第三方图标库 用过Elment的同鞋都知道,Element UI提供的字体图符少之又少,实在是不够用啊,幸好现在有不少丰富的第三方图标库可用,引入也不会很麻烦。 Font Awesome Font Awesome 提供了675个可缩放的矢量图标,可以使用CSS所提供的所有特性对它们进行更改,包括 阅读全文
posted @ 2018-09-04 18:42 朝雨忆轻尘 阅读(3700) 评论(0) 推荐(0) 编辑
Vue + Element UI 实现权限管理系统 前端篇(十):动态加载菜单
摘要:动态加载菜单 之前我们的导航树都是写死在页面里的,而实际应用中是需要从后台服务器获取菜单数据之后动态生成的。 我们在这里就用上一篇准备好的数据格式Mock出模拟数据,然后动态生成我们的导航菜单。 接口模块化 我们向来讲究模块化,之前接口都集中在,interface.js,我们现在把它改名为 api. 阅读全文
posted @ 2018-09-02 22:56 朝雨忆轻尘 阅读(52875) 评论(13) 推荐(9) 编辑
Vue + Element UI 实现权限管理系统 前端篇(九):接口格式定义
摘要:接口请求格式定义 前台显示需要后台数据,我们这里先把前后端交互接口定义好,没有后台的时候,也方便用mock模拟。 接口定义遵循几个规范: 1. 接口按功能模块划分。 系统登录:登录相关接口 用户管理:用户管理相关接口 机构管理:机构管理相关接口 角色管理 : 角色管理相关接口 菜单管理 : 菜单管理 阅读全文
posted @ 2018-09-01 14:40 朝雨忆轻尘 阅读(5509) 评论(0) 推荐(3) 编辑
Vue + Element UI 实现权限管理系统 前端篇(八):管理应用状态
摘要:使用 Vuex 管理应用状态 1. 引入背景 像先前我们是有导航菜单栏收缩和展开功能的,但是因为组件封装的原因,隐藏按钮在头部组件,而导航菜单在导航菜单组件,这样就涉及到了组件收缩状态的共享问题。收缩展开按钮触发收缩状态的修改,导航菜单需要根据收缩状态来设置导航栏的宽度。这样就需要在收缩状态变更时刷 阅读全文
posted @ 2018-08-30 19:53 朝雨忆轻尘 阅读(5108) 评论(2) 推荐(2) 编辑
Vue + Element UI 实现权限管理系统 前端篇(七):功能组件封装
摘要:组件封装 为了避免组件代码的臃肿,这里对主要的功能部件进行封装,保证代码的模块化和简洁度。 组件结构 组件封装重构后,试图组件结构如下图所示 代码一览 Home组件被简化,包含导航、头部和主内容三个组件。 Home.vue HeadBar.vue MenuBar.vue Main.vue 国际化语言 阅读全文
posted @ 2018-08-29 19:06 朝雨忆轻尘 阅读(6763) 评论(3) 推荐(2) 编辑
Vue笔记:使用 vuex 管理应用状态
摘要:如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 。 我在使用基于 vue.js 2.0 的UI框架 ElementUI 开发网站的时候 , 就遇到了这种问题 : 一个页面有很多表单 , 我试图将表单写成一个单文件组件 , 但是表单 ( 子组件 ) 里的数据和页面 阅读全文
posted @ 2018-08-28 22:48 朝雨忆轻尘 阅读(2648) 评论(0) 推荐(2) 编辑
Vue + Element UI 实现权限管理系统 前端篇(六):更换皮肤主题
摘要:自定义主题 命令行主题工具 1.安装主题工具 首先安装「主题生成工具」,可以全局安装或者安装在当前项目下,推荐安装在项目里,方便别人 clone 项目时能直接安装依赖并启动。 2.安装chalk主题 安装白垩主题,可以从 npm 安装或者从 GitHub 拉取最新代码,这里从 npm 安装。 3.初 阅读全文
posted @ 2018-08-28 11:15 朝雨忆轻尘 阅读(15097) 评论(6) 推荐(2) 编辑
Vue + Element UI 实现权限管理系统 前端篇(五):国际化实现
摘要:国际化支持 1.安装依赖 执行以下命令,安装 i18n 依赖。 2.添加配置 2.1 在 src 下新建 i18n 目录,并创建一个 index.js。 index.js 2.2 在 assets 目录下面创建连个多语言文件。 zh.json en.json 2.3 在 main.js 中引入 i1 阅读全文
posted @ 2018-08-27 20:07 朝雨忆轻尘 阅读(6039) 评论(2) 推荐(3) 编辑
Vue + Element UI 实现权限管理系统 前端篇(四):优化登录流程
摘要:完善登录流程 1. 丰富登录界面 1.1 从 Element 指南中选择组件模板丰富登录界面,放置一个登录界面表单,包含账号密码输入框和登录重置按钮。 1.2 稍微调整一下界面样式 1.3 添加页面组件显示规则和操作响应,其中登录成功后,把登录用户信息存储到本地会话,用于配置路由跳转目标。 1.4 阅读全文
posted @ 2018-08-26 22:22 朝雨忆轻尘 阅读(16055) 评论(26) 推荐(6) 编辑
Vue笔记:使用 axios 中 this 指向问题
摘要:问题背景 在vue中使用axios做网络请求的时候,会遇到this不指向vue,而为undefined。 如下图所示,我们有一个 login 方法,希望在登录成功之后路由到主页,但通过 this.$router 获取路由器出错。 解决方案 使用箭头函数替代普通函数,ES6中的箭头函数 “=>” 内部 阅读全文
posted @ 2018-08-25 22:45 朝雨忆轻尘 阅读(4899) 评论(0) 推荐(1) 编辑
Vue + Element UI 实现权限管理系统 前端篇(三):工具模块封装
摘要:封装 axios 模块 封装背景 使用axios发起一个请求是比较简单的事情,但是axios没有进行封装复用,项目越来越大,会引起越来越多的代码冗余,让代码变得越来越难维护。所以我们在这里先对 axios 进行二次封装,使项目中各个组件能够复用请求,让代码变得更容易维护。 封装要点 统一 url 配 阅读全文
posted @ 2018-08-25 21:40 朝雨忆轻尘 阅读(17979) 评论(21) 推荐(9) 编辑
Vue笔记:在项目中使用 SCSS
摘要:背景概述 1. CSS预处理器 css预处理器定义了一种新的编程语言,编译后成正常的CSS文件。为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代码的维护等诸多。CSS 预处理器语言有 scss(sass)、less 等。 2.SASS和SCSS 阅读全文
posted @ 2018-08-25 17:45 朝雨忆轻尘 阅读(2555) 评论(1) 推荐(0) 编辑
Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境
摘要:技术基础 开发之前,请先熟悉下面的4个文档 vue.js2.0中文, 优秀的JS框架 vue-router, vue.js 配套路由 vuex,vue.js 应用状态管理库 Element,饿了么提供的UI框架 开发环境 Node JS(npm) Visual Studio Code(前端IDE) 阅读全文
posted @ 2018-08-25 17:45 朝雨忆轻尘 阅读(30910) 评论(3) 推荐(14) 编辑
Vue + Element UI 实现权限管理系统 前端篇(二):Vue + Element 案例
摘要:导入项目 打开 Visual Studio Code,File --> add Folder to Workspace,导入我们的项目。 安装 Element 安装依赖 Element 是国内饿了么公司提供的一套开源前端框架,简洁优雅,提供了 vue、react、angular 等多个版本,我们这里 阅读全文
posted @ 2018-08-25 17:45 朝雨忆轻尘 阅读(21407) 评论(11) 推荐(9) 编辑
Vue笔记:使用 VS Code 断点调试
摘要:直接在 Chrome 的调试窗口中调试 Vue 代码有诸多不便, 好在 Visual Studio Code 中提供了 Debugger for Chrome 插件,能够通过配置直接在 VS Code 断点调试代码, 并且在 VS Code 的调试窗口看到 Chrome 中 console 相同的值 阅读全文
posted @ 2018-08-24 21:33 朝雨忆轻尘 阅读(63536) 评论(1) 推荐(1) 编辑
Vue笔记:使用 mock.js 模拟数据
摘要:在我们的项目实际开发过程中,后端的接口往往是较晚才会提供出来,并且还要写接口文档,如果前端的开发都要等到接口开发完成才开始就非常影响项目整体开发进度了,mock.js 的出现使前后端分离并行开发成为可能。使用 mock.js,前端调试可以模拟后台接口调用,返回我们定义的数据,解放了前后端开发的屏障。 阅读全文
posted @ 2018-08-23 21:23 朝雨忆轻尘 阅读(1055) 评论(1) 推荐(0) 编辑
Vue笔记:使用 Yarn 管理依赖包
摘要:上年10月份, Facebook 发布了新的 node.js 包管理器 Yarn 用以替代 npm ,它比npm更快、更高效。 Yarn VS npm 1、yarn.lock 文件 在 npm 中同样可以使用 npm shrinkwrap 命令来生成一个锁文件,这样在使用 npm install 时 阅读全文
posted @ 2018-08-23 20:36 朝雨忆轻尘 阅读(2349) 评论(0) 推荐(0) 编辑
Vue笔记:封装 axios 为插件使用
摘要:前言 自从Vue2.0推荐大家使用 axios 开始,axios 被越来越多的人所了解。使用axios发起一个请求对大家来说是比较简单的事情,但是axios没有进行封装复用,项目越来越大,引起的代码冗余。就会非常麻烦的一件事。所以本文会详细的跟大家介绍,如何封装请求,并且在项目组件中复用请求。有需要 阅读全文
posted @ 2018-08-22 19:19 朝雨忆轻尘 阅读(1631) 评论(0) 推荐(0) 编辑
Vue笔记:使用 axios 发送请求
摘要:在Vue1.0的时候有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource。 关于为什么放弃推荐? -> 尤大原话 最近团队讨论了一下,Ajax 本身跟 Vue 并没有什么需要特别整合的地方,使用 fetch po 阅读全文
posted @ 2018-08-22 19:16 朝雨忆轻尘 阅读(3258) 评论(0) 推荐(1) 编辑