Vue.js - 随笔分类 - 朝雨忆轻尘

Spring Boot + Spring Cloud 实现权限管理系统后端篇（十七）：登录验证码实现（Captcha）

摘要：登录验证码登录验证是一般系统都会有的功能，验证的方式也多种多样，比如输入式验证码，拖动式验证条，拖动式验证拼图等等。我们这里先实现常规的输入验证码的方式，右边显示验证码图片，点击可刷新，左边输入验证码。如下图为实现的效果。实现案例验证码的实现需要前后端协同，脱离彼此则不可用，故将前后端的实现阅读全文

posted @ 2018-10-29 18:45 朝雨忆轻尘阅读(6053) 评论(2) 推荐(1) 编辑

IT人如何打造个性化的个人网站（在线简历）

摘要：前言众所周知，IT行业人员在求职时，如果拥有自己的技术博客和个人网站多少是可以加些分的，因为这也是IT人的技术证明之一。内容丰富的技术博客就不必多少了，往往技术博客大神市场上多是供不应求的，而且技术博客出彩主要是在内容经营上，至于博客本身直接到各大技术平台注册一个即可，当然有兴趣的朋友想要自建个人阅读全文

posted @ 2018-10-21 18:02 朝雨忆轻尘阅读(7433) 评论(0) 推荐(1) 编辑

Vue + Element UI 实现权限管理系统前端篇（十五）：嵌套外部网页

摘要：嵌套外部网页在有些时候，我们需要在我们的内容栏主区域显示外部网页。如查看服务端提供的SQL监控页面，接口文档页面等。这个时候就要求我们的导航菜单能够解析嵌套网页的URL，并根据URL路由到相应的嵌套组件。接下来我们就讲解具体实现方案。实现原理 1. 给菜单URL添加嵌套网页前缀，如果是服务端网阅读全文

posted @ 2018-09-22 16:44 朝雨忆轻尘阅读(14311) 评论(1) 推荐(0) 编辑

Vue + Element UI 实现权限管理系统前端篇（十六）：系统备份还原

摘要：系统备份还原在很多时候，我们需要系统数据进行备份还原。我们这里就使用MySql的备份还原命令实现系统备份还原的功能。后台接口准备系统备份还原是对数据库的备份还原，所以必须有后台接口的支持，我们准备好了接口，相关内容可以查阅后台篇。 backup:系统备份创建接口，会在服务端_backup目录下阅读全文

posted @ 2018-09-22 16:44 朝雨忆轻尘阅读(5870) 评论(2) 推荐(0) 编辑

Vue + Element UI 实现权限管理系统前端篇（十四）：菜单功能实现

摘要：菜单功能实现菜单接口封装菜单管理是一个对菜单树结构的增删改查操作。提供一个菜单查询接口，查询整颗菜单树形结构。 http/modules/menu.js 添加 findMenuTree 接口。菜单管理界面菜单管理界面是使用封装的表格树组件显示菜单结构，并提供增删改查的功能。 Menu.vu 阅读全文

posted @ 2018-09-22 16:44 朝雨忆轻尘阅读(11702) 评论(1) 推荐(4) 编辑

Vue + Element UI 实现权限管理系统前端篇（十三）：页面权限控制

摘要：权限控制方案既然是后台权限管理系统，当然少不了权限控制啦，至于权限控制，前端方面当然就是对页面资源的访问和操作控制啦。前端资源权限主要又分为两个部分，即导航菜单的查看权限和页面增删改操作按钮的操作权限。我们的设计把页面导航菜单和页面操作按钮统一存储在菜单数据库表中，菜单表中包含以下权限关注点。阅读全文

posted @ 2018-09-15 16:35 朝雨忆轻尘阅读(69571) 评论(4) 推荐(6) 编辑

Vue + Element UI 实现权限管理系统前端篇（十二）：用户管理模块

摘要：用户管理模块添加接口在 http/moduls/user.js 中添加用户管理相关接口。模拟数据在 mock/moduls/user.js 中添加用户管理相关mock接口。提取根路径为了可以统一控制mock的开启与关闭，把mock的根路径提取出来。而具体的Mock接口，把根路径移除，因阅读全文

posted @ 2018-09-15 15:23 朝雨忆轻尘阅读(21757) 评论(10) 推荐(1) 编辑

Vue笔记：生命周期和钩子函数

摘要：前言在使用vue一个多礼拜后，感觉现在还停留在初级阶段，虽然知道怎么和后端做数据交互，但是对于mounted这个挂载还不是很清楚的。放大之，对vue的生命周期不甚了解。只知道简单的使用，而不知道为什么，这对后面的踩坑是相当不利的。因为我们有时候会在几个钩子函数里做一些事情，什么时候做，在哪个函数阅读全文

posted @ 2018-09-11 14:17 朝雨忆轻尘阅读(1989) 评论(0) 推荐(4) 编辑

Vue + Element UI 实现权限管理系统前端篇（十一）：第三方图标库

摘要：使用第三方图标库用过Elment的同鞋都知道，Element UI提供的字体图符少之又少，实在是不够用啊，幸好现在有不少丰富的第三方图标库可用，引入也不会很麻烦。 Font Awesome Font Awesome 提供了675个可缩放的矢量图标，可以使用CSS所提供的所有特性对它们进行更改，包括阅读全文

posted @ 2018-09-04 18:42 朝雨忆轻尘阅读(5544) 评论(0) 推荐(1) 编辑

Vue + Element UI 实现权限管理系统前端篇（十）：动态加载菜单

摘要：动态加载菜单之前我们的导航树都是写死在页面里的，而实际应用中是需要从后台服务器获取菜单数据之后动态生成的。我们在这里就用上一篇准备好的数据格式Mock出模拟数据，然后动态生成我们的导航菜单。接口模块化我们向来讲究模块化，之前接口都集中在，interface.js，我们现在把它改名为 api. 阅读全文

posted @ 2018-09-02 22:56 朝雨忆轻尘阅读(89109) 评论(13) 推荐(14) 编辑

Vue + Element UI 实现权限管理系统前端篇（九）：接口格式定义

摘要：接口请求格式定义前台显示需要后台数据，我们这里先把前后端交互接口定义好，没有后台的时候，也方便用mock模拟。接口定义遵循几个规范： 1. 接口按功能模块划分。系统登录：登录相关接口用户管理：用户管理相关接口机构管理：机构管理相关接口角色管理：角色管理相关接口菜单管理：菜单管理阅读全文

posted @ 2018-09-01 14:40 朝雨忆轻尘阅读(8513) 评论(0) 推荐(3) 编辑

Vue + Element UI 实现权限管理系统前端篇（八）：管理应用状态

摘要：使用 Vuex 管理应用状态 1. 引入背景像先前我们是有导航菜单栏收缩和展开功能的，但是因为组件封装的原因，隐藏按钮在头部组件，而导航菜单在导航菜单组件，这样就涉及到了组件收缩状态的共享问题。收缩展开按钮触发收缩状态的修改，导航菜单需要根据收缩状态来设置导航栏的宽度。这样就需要在收缩状态变更时刷阅读全文

posted @ 2018-08-30 19:53 朝雨忆轻尘阅读(8166) 评论(4) 推荐(2) 编辑

Vue + Element UI 实现权限管理系统前端篇（七）：功能组件封装

摘要：组件封装为了避免组件代码的臃肿，这里对主要的功能部件进行封装，保证代码的模块化和简洁度。组件结构组件封装重构后，试图组件结构如下图所示代码一览 Home组件被简化，包含导航、头部和主内容三个组件。 Home.vue HeadBar.vue MenuBar.vue Main.vue 国际化语言阅读全文

posted @ 2018-08-29 19:06 朝雨忆轻尘阅读(10527) 评论(8) 推荐(3) 编辑

Vue笔记：使用 vuex 管理应用状态

摘要：如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃。我在使用基于 vue.js 2.0 的UI框架 ElementUI 开发网站的时候 , 就遇到了这种问题 : 一个页面有很多表单 , 我试图将表单写成一个单文件组件 , 但是表单 ( 子组件 ) 里的数据和页面阅读全文

posted @ 2018-08-28 22:48 朝雨忆轻尘阅读(4324) 评论(1) 推荐(3) 编辑

Vue + Element UI 实现权限管理系统前端篇（六）：更换皮肤主题

摘要：自定义主题命令行主题工具 1.安装主题工具首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动。 2.安装chalk主题安装白垩主题，可以从 npm 安装或者从 GitHub 拉取最新代码，这里从 npm 安装。 3.初阅读全文

posted @ 2018-08-28 11:15 朝雨忆轻尘阅读(22477) 评论(8) 推荐(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 朝雨忆轻尘阅读(9488) 评论(3) 推荐(4) 编辑

Vue + Element UI 实现权限管理系统前端篇（四）：优化登录流程

摘要：完善登录流程 1. 丰富登录界面 1.1 从 Element 指南中选择组件模板丰富登录界面，放置一个登录界面表单，包含账号密码输入框和登录重置按钮。 1.2 稍微调整一下界面样式 1.3 添加页面组件显示规则和操作响应，其中登录成功后，把登录用户信息存储到本地会话，用于配置路由跳转目标。 1.4 阅读全文

posted @ 2018-08-26 22:22 朝雨忆轻尘阅读(26068) 评论(34) 推荐(8) 编辑

Vue笔记：使用 axios 中 this 指向问题

摘要：问题背景在vue中使用axios做网络请求的时候，会遇到this不指向vue，而为undefined。如下图所示，我们有一个 login 方法，希望在登录成功之后路由到主页，但通过 this.$router 获取路由器出错。解决方案使用箭头函数替代普通函数，ES6中的箭头函数 “=>” 内部阅读全文

posted @ 2018-08-25 22:45 朝雨忆轻尘阅读(7931) 评论(0) 推荐(1) 编辑

Vue + Element UI 实现权限管理系统前端篇（三）：工具模块封装

摘要：封装 axios 模块封装背景使用axios发起一个请求是比较简单的事情，但是axios没有进行封装复用，项目越来越大，会引起越来越多的代码冗余，让代码变得越来越难维护。所以我们在这里先对 axios 进行二次封装，使项目中各个组件能够复用请求，让代码变得更容易维护。封装要点统一 url 配阅读全文

posted @ 2018-08-25 21:40 朝雨忆轻尘阅读(28764) 评论(24) 推荐(11) 编辑

Vue笔记：在项目中使用 SCSS

摘要：背景概述 1. CSS预处理器 css预处理器定义了一种新的编程语言，编译后成正常的CSS文件。为CSS增加一些编程的特性，无需考虑浏览器的兼容问题，让CSS更加简洁，适应性更强，可读性更佳，更易于代码的维护等诸多。CSS 预处理器语言有 scss（sass）、less 等。 2.SASS和SCSS 阅读全文

posted @ 2018-08-25 17:45 朝雨忆轻尘阅读(3680) 评论(1) 推荐(0) 编辑

随笔分类 - Vue.js