随笔- 138  评论- 166  文章- 18 
  2018年10月18日
摘要:Spring Cloud Turbine 上一章我们集成了Hystrix Dashboard,使用Hystrix Dashboard可以看到单个应用内的服务信息,显然这是不够的,我们还需要一个工具能让我们汇总系统内多个服务的数据并显示到Hystrix Dashboard上,这个工具就是Turbine 阅读全文
posted @ 2018-10-18 18:50 朝雨忆轻尘 阅读 (1078) 评论 (0) 编辑
摘要:Hystrix Dashboard Hystrix-dashboard是一款针对Hystrix进行实时监控的工具,通过Hystrix Dashboard我们可以在直观地看到各Hystrix Command的请求响应时间, 请求成功率等数据。 添加依赖 我们新建一个工程 spring-cloud-co 阅读全文
posted @ 2018-10-18 18:39 朝雨忆轻尘 阅读 (1831) 评论 (0) 编辑
摘要:雪崩效应 在微服务架构中,由于服务众多,通常会涉及多个服务层级的调用,而一旦基础服务发生故障,很可能会导致级联故障,进而造成整个系统不可用,这种现象被称为服务雪崩效应。服务雪崩效应是一种因“服务提供者”的不可用导致“服务消费者”的不可用,并将这种不可用逐渐放大的过程。 比如在一个系统中, A作为服务 阅读全文
posted @ 2018-10-18 18:36 朝雨忆轻尘 阅读 (1257) 评论 (0) 编辑
  2018年10月17日
摘要:Spring Cloud Feign Spring Cloud Feign是一套基于Netflix Feign实现的声明式服务调用客户端。它使得编写Web服务客户端变得更加简单。我们只需要通过创建接口并用注解来配置它既可完成对Web服务接口的绑定。它具备可插拔的注解支持,包括Feign注解、JAX- 阅读全文
posted @ 2018-10-17 19:37 朝雨忆轻尘 阅读 (1410) 评论 (0) 编辑
摘要:使用RestTemplate调用服务 在上一篇教程中,我们是这样调用服务的,先通过 LoadBalancerClient 选取出对应的服务,然后使用 RestTemplate 进行远程调用。 LoadBalancerClient 就是负载均衡器,默认使用的是 Ribbon 的实现 RibbonLoa 阅读全文
posted @ 2018-10-17 18:42 朝雨忆轻尘 阅读 (1723) 评论 (0) 编辑
  2018年10月16日
摘要:使用Consul提供注册和发现服务 什么是 Consul Consul 是 HashiCorp 公司推出的开源工具,用于实现分布式系统的服务发现与配置。与其它分布式服务注册与发现的方案,Consul 的方案更“一站式”,内置了服务注册与发现框架、分布一致性协议实现、健康检查、Key/Value 存储 阅读全文
posted @ 2018-10-16 18:37 朝雨忆轻尘 阅读 (13427) 评论 (13) 编辑
  2018年9月29日
摘要:容器部署项目 这一章我们引入docker,采用docker容器的方式部署我们的项目。 首先需要有一个linux环境,并且安装 java 和 maven 以及 docker 环境,这个教程多如牛毛,不再赘述。 这里以 kitty-monitor 为例。 添加配置 在 pom.xml 的 propert 阅读全文
posted @ 2018-09-29 18:04 朝雨忆轻尘 阅读 (1004) 评论 (0) 编辑
  2018年9月28日
摘要:系统服务监控 新建监控工程 新建Spring Boot项目,取名 kitty-monitor,结构如下。 添加项目依赖 添加 spring boot admin 的相关依赖。 pom.xml 修改启动端口 修改监控服务器启动端口号。 application.yml 修改启动器类 修改启动器类,主要是 阅读全文
posted @ 2018-09-28 17:05 朝雨忆轻尘 阅读 (940) 评论 (0) 编辑
  2018年9月27日
摘要:项目打包部署 安装MySQL镜像 注意:如果使用docker镜像安装MySQL,也需要在前端部署主机安装MySQL,因为备份还原功能是使用MySQL的本地命令进行操作的。 下载镜像 执行以下命令,拉取MySQL镜像。 镜像下载完成之后,通过以下命令查看下载的镜像。 启动容器 执行以下命令,启动一个容 阅读全文
posted @ 2018-09-27 17:58 朝雨忆轻尘 阅读 (1395) 评论 (0) 编辑
  2018年9月22日
摘要:系统备份还原 在很多时候,我们需要系统数据进行备份还原。我们这里就使用MySql的备份还原命令实现系统备份还原的功能。 新建工程 新建一个maven项目,并添加相关依赖,可以用Spring boot脚手架生成。 新建 kitty-bakcup 工程,这是一个独立运行于后台系统的应用程序,可以分开部署 阅读全文
posted @ 2018-09-22 16:51 朝雨忆轻尘 阅读 (1638) 评论 (2) 编辑
摘要:菜单功能实现 菜单接口封装 菜单管理是一个对菜单树结构的增删改查操作。 提供一个菜单查询接口,查询整颗菜单树形结构。 http/modules/menu.js 添加 findMenuTree 接口。 菜单管理界面 菜单管理界面是使用封装的表格树组件显示菜单结构,并提供增删改查的功能。 Menu.vu 阅读全文
posted @ 2018-09-22 16:44 朝雨忆轻尘 阅读 (5674) 评论 (0) 编辑
摘要:嵌套外部网页 在有些时候,我们需要在我们的内容栏主区域显示外部网页。如查看服务端提供的SQL监控页面,接口文档页面等。 这个时候就要求我们的导航菜单能够解析嵌套网页的URL,并根据URL路由到相应的嵌套组件。接下来我们就讲解具体实现方案。 实现原理 1. 给菜单URL添加嵌套网页前缀,如果是服务端网 阅读全文
posted @ 2018-09-22 16:44 朝雨忆轻尘 阅读 (5789) 评论 (0) 编辑
摘要:系统备份还原 在很多时候,我们需要系统数据进行备份还原。我们这里就使用MySql的备份还原命令实现系统备份还原的功能。 后台接口准备 系统备份还原是对数据库的备份还原,所以必须有后台接口的支持,我们准备好了接口,相关内容可以查阅后台篇。 backup:系统备份创建接口,会在服务端_backup目录下 阅读全文
posted @ 2018-09-22 16:44 朝雨忆轻尘 阅读 (2866) 评论 (0) 编辑
  2018年9月15日
摘要:权限控制方案 既然是后台权限管理系统,当然少不了权限控制啦,至于权限控制,前端方面当然就是对页面资源的访问和操作控制啦。 前端资源权限主要又分为两个部分,即导航菜单的查看权限和页面增删改操作按钮的操作权限。 我们的设计把页面导航菜单和页面操作按钮统一存储在菜单数据库表中,菜单表中包含以下权限关注点。 阅读全文
posted @ 2018-09-15 16:35 朝雨忆轻尘 阅读 (21344) 评论 (3) 编辑
摘要:用户管理模块 添加接口 在 http/moduls/user.js 中添加用户管理相关接口。 模拟数据 在 mock/moduls/user.js 中添加用户管理相关mock接口。 提取根路径 为了可以统一控制mock的开启与关闭,把mock的根路径提取出来。 而具体的Mock接口,把根路径移除,因 阅读全文
posted @ 2018-09-15 15:23 朝雨忆轻尘 阅读 (8176) 评论 (10) 编辑
摘要:什么是跨域? 同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。 同源策略是浏览器安全的基石。 如果一个请求地址里面的协议、域名和端口号都相同,就属于同源。 举个栗子 判断下面URL是否和 http://www.a.com/a/a.html 同源 http: 阅读全文
posted @ 2018-09-15 13:11 朝雨忆轻尘 阅读 (1627) 评论 (0) 编辑
  2018年9月11日
摘要:目录 Java9 新特性 详解 1、Java9新特性之 目录结构 2、Java9新特性之 JShell工具 3、Java9新特性之 模块化 4、Java9新特性之 多版本兼容Jar包 5、Java9新特性之 接口Interface的升级 6、Java9新特性之 钻石操作符的升级 7、Java9新特性 阅读全文
posted @ 2018-09-11 15:09 朝雨忆轻尘 阅读 (119) 评论 (0) 编辑
摘要:本文由 ImportNew - 刘 家财 翻译自 javacodegeeks。欢迎加入翻译小组。转载请见文末要求。 编者注:Java 8已经公布有一段时间了,种种迹象表明Java 8是一个有重大改变的发行版。 在Java Code Geeks上已经有大量的关于Java 8 的教程了,像玩转Java 阅读全文
posted @ 2018-09-11 14:51 朝雨忆轻尘 阅读 (110) 评论 (0) 编辑
摘要:什么是跨域? 同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。 同源策略是浏览器安全的基石。 如果一个请求地址里面的协议、域名和端口号都相同,就属于同源。 举个栗子 判断下面URL是否和 http://www.a.com/a/a.html 同源 http: 阅读全文
posted @ 2018-09-11 14:31 朝雨忆轻尘 阅读 (2232) 评论 (1) 编辑
摘要:前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的。放大之,对vue的生命周期不甚了解。只知道简单的使用,而不知道为什么,这对后面的踩坑是相当不利的。 因为我们有时候会在几个钩子函数里做一些事情,什么时候做,在哪个函数 阅读全文
posted @ 2018-09-11 14:17 朝雨忆轻尘 阅读 (925) 评论 (0) 编辑
  2018年9月4日
摘要:使用第三方图标库 用过Elment的同鞋都知道,Element UI提供的字体图符少之又少,实在是不够用啊,幸好现在有不少丰富的第三方图标库可用,引入也不会很麻烦。 Font Awesome Font Awesome 提供了675个可缩放的矢量图标,可以使用CSS所提供的所有特性对它们进行更改,包括 阅读全文
posted @ 2018-09-04 18:42 朝雨忆轻尘 阅读 (2752) 评论 (0) 编辑
  2018年9月2日
摘要:动态加载菜单 之前我们的导航树都是写死在页面里的,而实际应用中是需要从后台服务器获取菜单数据之后动态生成的。 我们在这里就用上一篇准备好的数据格式Mock出模拟数据,然后动态生成我们的导航菜单。 接口模块化 我们向来讲究模块化,之前接口都集中在,interface.js,我们现在把它改名为 api. 阅读全文
posted @ 2018-09-02 22:56 朝雨忆轻尘 阅读 (35829) 评论 (12) 编辑
  2018年9月1日
摘要:Apache Shiro 优势特点 它是一个功能强大、灵活的,优秀开源的安全框架。 它可以处理身份验证、授权、企业会话管理和加密。 它易于使用和理解,相比Spring Security入门门槛低。 主要功能 验证用户身份 用户访问权限控制 支持单点登录(SSO)功能 可以响应认证、访问控制,或Ses 阅读全文
posted @ 2018-09-01 15:15 朝雨忆轻尘 阅读 (13954) 评论 (0) 编辑
摘要:接口请求格式定义 前台显示需要后台数据,我们这里先把前后端交互接口定义好,没有后台的时候,也方便用mock模拟。 接口定义遵循几个规范: 1. 接口按功能模块划分。 系统登录:登录相关接口 用户管理:用户管理相关接口 机构管理:机构管理相关接口 角色管理 : 角色管理相关接口 菜单管理 : 菜单管理 阅读全文
posted @ 2018-09-01 14:40 朝雨忆轻尘 阅读 (4247) 评论 (0) 编辑
  2018年8月31日
摘要:通用操作 通用操作是指一般的增删改查操作,逻辑大体都是一致的,所以统一抽象到CURD接口,需要用到CURD的表直接实现接口就可以了。 通用操作主要有以下几个: 保存操作 更新操作 删除操作 批量删除 分页查询 根据ID查询 登录管理 登录接口 名称:login 类型:post 路径:/sys/log 阅读全文
posted @ 2018-08-31 20:21 朝雨忆轻尘 阅读 (2965) 评论 (0) 编辑
  2018年8月30日
摘要:使用 Vuex 管理应用状态 1. 引入背景 像先前我们是有导航菜单栏收缩和展开功能的,但是因为组件封装的原因,隐藏按钮在头部组件,而导航菜单在导航菜单组件,这样就涉及到了组件收缩状态的共享问题。收缩展开按钮触发收缩状态的修改,导航菜单需要根据收缩状态来设置导航栏的宽度。这样就需要在收缩状态变更时刷 阅读全文
posted @ 2018-08-30 19:53 朝雨忆轻尘 阅读 (3886) 评论 (1) 编辑
  2018年8月29日
摘要:组件封装 为了避免组件代码的臃肿,这里对主要的功能部件进行封装,保证代码的模块化和简洁度。 组件结构 组件封装重构后,试图组件结构如下图所示 代码一览 Home组件被简化,包含导航、头部和主内容三个组件。 Home.vue HeadBar.vue MenuBar.vue Main.vue 国际化语言 阅读全文
posted @ 2018-08-29 19:06 朝雨忆轻尘 阅读 (5150) 评论 (3) 编辑
  2018年8月28日
摘要:如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 。 我在使用基于 vue.js 2.0 的UI框架 ElementUI 开发网站的时候 , 就遇到了这种问题 : 一个页面有很多表单 , 我试图将表单写成一个单文件组件 , 但是表单 ( 子组件 ) 里的数据和页面 阅读全文
posted @ 2018-08-28 22:48 朝雨忆轻尘 阅读 (2024) 评论 (0) 编辑
摘要:自定义主题 命令行主题工具 1.安装主题工具 首先安装「主题生成工具」,可以全局安装或者安装在当前项目下,推荐安装在项目里,方便别人 clone 项目时能直接安装依赖并启动。 2.安装chalk主题 安装白垩主题,可以从 npm 安装或者从 GitHub 拉取最新代码,这里从 npm 安装。 3.初 阅读全文
posted @ 2018-08-28 11:15 朝雨忆轻尘 阅读 (11655) 评论 (2) 编辑
  2018年8月27日
摘要:国际化支持 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 朝雨忆轻尘 阅读 (4563) 评论 (2) 编辑
  2018年8月26日
摘要:完善登录流程 1. 丰富登录界面 1.1 从 Element 指南中选择组件模板丰富登录界面,放置一个登录界面表单,包含账号密码输入框和登录重置按钮。 1.2 稍微调整一下界面样式 1.3 添加页面组件显示规则和操作响应,其中登录成功后,把登录用户信息存储到本地会话,用于配置路由跳转目标。 1.4 阅读全文
posted @ 2018-08-26 22:22 朝雨忆轻尘 阅读 (12249) 评论 (19) 编辑
  2018年8月25日
摘要:问题背景 在vue中使用axios做网络请求的时候,会遇到this不指向vue,而为undefined。 如下图所示,我们有一个 login 方法,希望在登录成功之后路由到主页,但通过 this.$router 获取路由器出错。 解决方案 使用箭头函数替代普通函数,ES6中的箭头函数 “=>” 内部 阅读全文
posted @ 2018-08-25 22:45 朝雨忆轻尘 阅读 (3636) 评论 (0) 编辑
摘要:封装 axios 模块 封装背景 使用axios发起一个请求是比较简单的事情,但是axios没有进行封装复用,项目越来越大,会引起越来越多的代码冗余,让代码变得越来越难维护。所以我们在这里先对 axios 进行二次封装,使项目中各个组件能够复用请求,让代码变得更容易维护。 封装要点 统一 url 配 阅读全文
posted @ 2018-08-25 21:40 朝雨忆轻尘 阅读 (13047) 评论 (18) 编辑
摘要:背景概述 1. CSS预处理器 css预处理器定义了一种新的编程语言,编译后成正常的CSS文件。为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代码的维护等诸多。CSS 预处理器语言有 scss(sass)、less 等。 2.SASS和SCSS 阅读全文
posted @ 2018-08-25 17:45 朝雨忆轻尘 阅读 (2112) 评论 (1) 编辑
摘要:技术基础 开发之前,请先熟悉下面的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 朝雨忆轻尘 阅读 (21420) 评论 (3) 编辑
摘要:导入项目 打开 Visual Studio Code,File --> add Folder to Workspace,导入我们的项目。 安装 Element 安装依赖 Element 是国内饿了么公司提供的一套开源前端框架,简洁优雅,提供了 vue、react、angular 等多个版本,我们这里 阅读全文
posted @ 2018-08-25 17:45 朝雨忆轻尘 阅读 (15077) 评论 (10) 编辑
  2018年8月24日
摘要:VS Code 常用快捷键 1、注释: 单行注释:ctrl+/, 注释后再按取消 取消单行注释:alt+shift+A 注释后再按取消 2、移动行 向上移动一行:alt+up 向下移动一行:alt+down 3、显示/隐藏左侧目录栏 ctrl + b 4、复制当前行 向上复制一行:shift+alt 阅读全文
posted @ 2018-08-24 21:34 朝雨忆轻尘 阅读 (8026) 评论 (0) 编辑
摘要:直接在 Chrome 的调试窗口中调试 Vue 代码有诸多不便, 好在 Visual Studio Code 中提供了 Debugger for Chrome 插件,能够通过配置直接在 VS Code 断点调试代码, 并且在 VS Code 的调试窗口看到 Chrome 中 console 相同的值 阅读全文
posted @ 2018-08-24 21:33 朝雨忆轻尘 阅读 (44930) 评论 (1) 编辑
  2018年8月23日
摘要:在我们的项目实际开发过程中,后端的接口往往是较晚才会提供出来,并且还要写接口文档,如果前端的开发都要等到接口开发完成才开始就非常影响项目整体开发进度了,mock.js 的出现使前后端分离并行开发成为可能。使用 mock.js,前端调试可以模拟后台接口调用,返回我们定义的数据,解放了前后端开发的屏障。 阅读全文
posted @ 2018-08-23 21:23 朝雨忆轻尘 阅读 (819) 评论 (1) 编辑
摘要:上年10月份, Facebook 发布了新的 node.js 包管理器 Yarn 用以替代 npm ,它比npm更快、更高效。 Yarn VS npm 1、yarn.lock 文件 在 npm 中同样可以使用 npm shrinkwrap 命令来生成一个锁文件,这样在使用 npm install 时 阅读全文
posted @ 2018-08-23 20:36 朝雨忆轻尘 阅读 (1579) 评论 (0) 编辑