wrkd35

wrkd35 查看完整档案

杭州编辑  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

wrkd35 发布了文章 · 8月25日

SSM框架下实现权限管理(附源码)

具体思路:配置三张表,分别是角色表,权限表和角色权限对应表。后端配置一个全局拦截器,在拦截每一次请求时,去查表里该用户对应的角色权限是否存在,如果存在就通过,不存在就拒绝并提示。

一. 设计数据库表结构

  • 角色表

  • 权限表

  • 角色权限对应表

二. 配置全局拦截器

AllInterceptor.java

public class AllInterceptor implements HandlerInterceptor {        
    /**     * 角色对应权限表的service     */    
    @Autowired    
    private MenuService menuService;        
    /**     * 权限表的service     */    
    @Autowired    
    private UrlService urlService;        
    
    @Override    
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response,            Object handler) throws Exception {        
        // 得到请求地址        
        String url = request.getRequestURI();
        HttpSession session = request.getSession();    
        String projectName = "/CustomerSystem";        
        // 去除请求前缀文件名 (可以去也可以不去,看你主要的请求长什么样和权限表里存的地址)       
        url = url.substring(projectName.length(), url.length());        
        url_info uInfo = this.urlService.selectUrl(url);        if(uInfo != null){            
            menu_info mInfo = new menu_info();                mInfo.setType(Integer.parseInt((String)session.getAttribute("type")) + 1);            
            mInfo.setUrlId(uInfo.getId());            
            int a = this.menuService.selectMenu(mInfo);                // 有该权限直接通过            
            if(a > 0){                
                return true;            
            }            
            // 没有该权限就提示并跳转到登录页面
            session.setAttribute("msg",                    "<script type='text/javascript'>alert('抱歉,您尚未有此功能权限!')</script>");    
            request.getRequestDispatcher("/WEB-INF/jsp/login.jsp").forward(request, response);            return false;        }        
            // 查不到此地址,直接返回提示并跳转到登录页面            session.setAttribute("msg",                "<script type='text/javascript'>alert('抱歉,您尚未有此功能权限!')</script>");        
            request.getRequestDispatcher("/WEB-INF/jsp/login.jsp").forward(request, response);        
            return false;    
      }    
      
      @Override    
      public void postHandle(HttpServletRequest request, HttpServletResponse response,            Object handler, ModelAndView model) throws Exception {    }    
      
      @Override    
      public void afterCompletion(HttpServletRequest request, HttpServletResponse response,            Object handler, Exception ex)            throws Exception {    }
      
}

在springMVC配置文件里声明这个全局拦截器

springmvc-config.xml

<!-- 配置拦截器 -->
<mvc:interceptors>    
    <mvc:interceptor>        
        <mvc:mapping path="/**"/>        
        <!-- 配置不被拦截的路径 -->        
        <mvc:exclude-mapping path="/cus_login.action"/>            <mvc:exclude-mapping path="/cus_checklogin.action"/>        
        <mvc:exclude-mapping path="/cus_exit.action"/>              <!-- 把拦截器注入到spring容器中 -->        
        <bean class="com.itheima.core.interceptor.CustomerAllInterceptor"></bean>    
    </mvc:interceptor>
</mvc:interceptors>

至此,权限管理就已经完成了。

三. 下面是我设计完成的校园选课系统里的权限管理模块的页面

项目的GitHub地址,点击前往

欢迎大家前往,给个star。

首页:

登录后的页面

管理员登录后的权限管理页面

查看原文

赞 0 收藏 0 评论 0

wrkd35 发布了文章 · 8月25日

Kettle的简单入门实战

Kettle简介

  • Kettle是一款国外开源的ETL工具,纯java编写,可以在Window、Linux、Unix上运行,绿色无需安装,数据抽取高效稳定。

  • Kettle 中文名称叫水壶,该项目的主程序员MATT 希望把各种数据放到一个壶里,然后以一种指定的格式流出。

  • Kettle这个ETL工具集,它允许你管理来自不同数据库的数据,通过提供一个图形化的用户环境来描述你想做什么,而不是你想怎么做。

  • Kettle中有两种脚本文件,transformation和job,transformation完成针对数据的基础转换,job则完成整个工作流的控制。

  • Kettle(现在已经更名为PDI,Pentaho Data Integration-Pentaho数据集成)。

前期准备要配置java环境。(附B站的学习视频:点击前往

1. 下载Kettle  点击前往

下载好了以后,无需安装,只要解压就好了,非常方便。

2. 启动Kettle

双击目录下的 Spoon.bat 即可。

打开的界面:

3. 简单实战:把源数据库表中的数据处理想移植的字段到目标数据库的表中,并且建立定时执行的作业。

注意:在数据库链接的过程中,可能会报某个数据库连接找不到的异常。是因为没有对应的数据库链接驱动,所以先把对应驱动放入kettle的lib文件夹。

    a. 创建一个新的转换

    b. 配置DB连接(转换——>转换1——> DB连接)

我们配置两个DB连接,分别是源数据库和目标数据库,如下图所示:

         以MySQL为例,前两个方框为必填项,填写完毕以后,可以点击最后的 测试 按钮,查看是否能正确连接。

        c. 新建表输入(核心对象——>输入——>表输入) 拖入到右侧的工作区中,并且双击它

选择数据库连接,编写sql,点击预览,查看是否有正确执行,这样表输入就体验了。

                    

         d. 新建插入/更新(核心对象——>输出——>插入/更新) 拖入到右侧的工作区中

         按shift键,点击表输入,然后拉到 插入/更新 使它们建立连接顺序。如下图所示

选择数据库和目标表等等后,就配置好了。

         e. 点击运行按钮,查看目标表里是否数据有写入,这样,简单实战的转换部分已经完成。 

         执行结果:

        f. 新建一个作业, 把start,转换和成功拖入到右边,并且建立连接。如下图所示:

        g. 双击start 配置执行策略,以下面为例,我配置了每五秒钟执行一次。

        h. 双击转换,可以导入我们上面的转换文件。

        i. 点击运行按钮,查看日志。至此,简单实战已经完成了。

         执行结果:

查看原文

赞 0 收藏 0 评论 0

wrkd35 发布了文章 · 8月10日

CentOS7 下 离线安装Docker 和 Docker Compose

GitHub地址:点击前往

Docker离线安装

1.docker的rpm安装包下载

  • 下载地址:点击前往
  • 下载版本:docker-ce-17.12.0.ce-1.el7.centos.x86_64.rpm

2.所需依赖包下载(8 + 1)

****九个依赖包均在上面的github里

  • 前八个依赖包列表:

    1. audit-libs-python-2.8.5-4.el7.x86_64.rpm
    2. checkpolicy-2.5-8.el7.x86_64.rpm
    3. libcgroup-0.41-21.el7.x86_64.rpm
    4. libseccomp-2.3.1-3.el7.x86_64.rpm
    5. libsemanage-2.5-14.el7.x86_64.rpm
    6. policycoreutils-python-2.5-33.el7.x86_64.rpm
    7. python-IPy-0.75-6.el7.noarch.rpm
    8. setools-libs-3.3.8-4.el7.x86_64.rpm
  • 最后一个依赖包

                9. container-selinux-2.107-3.el7.noarch.rpm

3.安装

  • 本文测试路径:root/docker/rpm
  • 把前8个依赖上传至root/docker路径下
  • 把docker安装包和第9个依赖上传至root/docker/rpm路径下
  • 上传成功后docker路径下的文件结构:

        

  • 上传成功后rpm路径下的文件结构:

  • 批量安装docker路径下的依赖包:
rpm -Uvh *.rpm --nodeps --force

  • 安装 container-selinux-2.107-3.el7.noarch.rpm :
rpm -Uvh container-selinux-2.107-3.el7.noarch.rpm

  • 安装docker:
rpm -Uvh docker-ce-17.12.0.ce-1.el7.centos.x86_64.rpm

  • 启动 docker:systemctl start docker
  • 查看 docker版本:docker -v

  • 至此,docker安装成功

Docker Compose离线安装

1.下载 Linux 版本的 Docker Compose

  • 下载地址:点击前往
  • 文件名:docker-compose-Linux-x86_64

2.安装

  • 将下载下来的“docker-compose-Linux-x86_64”文件上传至root目录下。
  • 执行如下命令将其移动到 /usr/local/bin,并改名为“docker-compose
sudo mv docker-compose-Linux-x86_64 /usr/local/bin/docker-compose
  • 执行如下命令添加可执行权限
sudo chmod +x /usr/local/bin/docker-compose
  • 使用 docker-compose -v 命令测试是否安装成功

  • 至此,Docker Compose 安装成功。
查看原文

赞 0 收藏 0 评论 0

wrkd35 发布了文章 · 8月9日

解决后台服务重启后,前端webSocket断了的问题

后端服务器宕机或重启时,前端Vue 不断重连webSocket的解决办法:

问题重现:后台服务重启时,前端连接的webScoket就断了,需要刷新页面才能重新建立连接,这样用户体验的效果不好,而且有些业务场景,比如硬件监控系统大屏这些是不允许刷新页面的,所以需要前端发现webSocket断了,然后自己不断去发起连接。

解决思路:在webSocket的生命周期onclose和onerror时调用重连函数,增加心跳检测。

解决方案:

  1. 创建变量

    data() {    
        return {        
            // webSocket对象        
            webSocket: null,        
            // webSocketUrl地址        
            webSocketUrl: null,        
            //连接标识 避免重复连接        
            isConnect: false,        
            //断线重连后,延迟5秒重新创建WebSocket连接  rec用来存储延迟请求的代码        
            rec: null,        
            // 心跳发送/返回的信息        
            checkMsg: {hhh: 'heartbeat'},        
            //每段时间发送一次心跳包 这里设置为20s    
            timeout: 20000,        
            //延时发送消息对象(启动心跳新建这个对象,收到消息后重置对象)        
            timeoutObj: null,    
       }
    }
  2. 创建webSocket连接

    //创建webSocket连接
    createWebSocket() {    
        let that = this;    
        that.webSocket = new WebSocket(that.webSocketUrl);
        that.initWebsocket();
    }
  3. 初始化webSocket连接

    initWebsocket() {    
        let that = this;    
        //WebSocket连接建立之后会调用onopen方法
        that.webSocket.onopen = that.websocketonopen;    
        //当websocket收到服务器发送的信息之后  会调用onmessage方法     
        that.webSocket.onmessage = that.websocketonmessage;
        //当websocket因为各种原因(正常或者异常)关闭之后,会调用onclose方法    
        that.webSocket.onclose = that.websocketclose;    
        //当websocket因为异常原因(比如服务器部署、断网等)关闭之后,会调用onerror方法    
        //在onerror中需要调用reConnect方法重连服务器    
        that.webSocket.onerror = that.websocketonerror;
    }
  4. websocketonopen函数

    websocketonopen() {    
        let that = this;    
        console.log('open');    
        //连接建立后修改标识    
        that.isConnect = true;    
        // 建立连接后开始心跳    
        // 因为nginx一般会设置例如60s没有传输数据就断开连接  所以要定时发送数据    
        that.timeoutObj = setTimeout(function() {        
            if (that.isConnect)    
                that.webSocket.send(that.checkMsg);    
                }, that.timeout);
     }
  5. websocketonerror函数

    websocketonerror() {    
        let that = this;    
        console.log('error');    
        //连接断开后修改标识    
        that.isConnect = false;    
        //连接错误 需要重连    
        that.reConnect();
    }
  6. websocketonmessage函数

    websocketonmessage(e) {    
        // 拿到数据,处理自己的业务    
        let that = this;    
        console.log(e.data);                    
        //获取消息后 重置心跳    
        clearTimeout(that.timeoutObj);    
        that.timeoutObj = setTimeout(function() {    
            if (that.isConnect)
                that.webSocket.send(that.checkMsg);    
                },that.timeout);
    }
  7. websocketclose函数

    websocketclose() {    
        let that = this;    
        console.log('close');    
        //连接断开后修改标识    
        that.isConnect = false;    
        //连接错误 需要重连    
        that.reConnect();
    }
  8. 定义重连函数

    reConnect() {    
        let that = this;    
        console.log('尝试重新连接');    
        //如果已经连上就不在重连了    
        if (that.isConnect) {        
            return;    
        }    
        clearTimeout(that.rec);    
        // 延迟5秒重连  避免过多次过频繁请求重连    
        that.rec = setTimeout(function() {    
            that.createWebSocket();    }, 5000);
    }
查看原文

赞 2 收藏 2 评论 0

wrkd35 发布了文章 · 8月7日

解决echarts图表造成浏览器内存泄漏问题

问题重现:公司做的是监控系统大屏,所以需要相对实时的数据,需要前端不断轮询后台数据,所以时间久了造成浏览器崩溃。排查了好几天的问题,发现是用到echarts的模块占用的内存不断上升。

错误的原因:

  1. 每次轮询后都创建了一个新的echarts对象
  2. 定时器滥用,造成每次都创建一个对象

解决办法:

  1.  定时器写法,在每次setInterval()里都先clearInterval()销毁

    var timer = setInterval(function() {                            clearInterval(timer);    
        // 下面处理业务
        }, 1000)
  2. echarts写法,第一次初始化一个对象,后面都复用这个对象;然后在每次轮询后,只重新set数据有变化的属性。例如:

    RingDiagram(e) {    
        var _this = this;    
        // 第一次设置公共不会变化的属性    
        if (_this.times === 1) {        
            _this.chart =       this.$echarts.init(document.getElementById('RingDiagramTime'));        
            _this.times++;        
            _this.chart.setOption({    
                // 添加属性    
            });                
        }else{        
             _this.chart.setOption({            
                series: [{                
                    data: e,            
                }]        
            });    
       }
    }

Chrome查了内存的方法:

查看原文

赞 2 收藏 1 评论 0

wrkd35 关注了专栏 · 8月7日

达达前端

达达前端技术社群:囊括前端Vue、JavaScript、数据结构与算法、实战演练、Node全栈一线技术,紧跟业界发展步伐,一个热爱前端的达达程序员。

关注 1112

wrkd35 关注了用户 · 8月7日

aco @aco

出卖技术,买糖吃。

关注 124

wrkd35 关注了用户 · 8月7日

京东设计中心JDC @jingdongshejizhongxin

致力为京东零售消费者提供完美的购物体验。以京东零售体验设计为核心,为京东集团各业务条线提供设计支持, 包括线上基础产品体验设计、营销活动体验设计、品牌创意设计、新媒体传播设计、内外部系统产品设计、企业文 化设计传播以及体验创新研究等;部门专业领域涉及用户研究、交互设计、视觉设计以及前端开发。成员分布于北 京、深圳、上海。

关注 974

wrkd35 关注了专栏 · 8月7日

技术风暴

关注公众号「关山不难越」学习更多前端进阶知识。 Classical is something not fade,but grow more precious with time pass by,so is dream id dream.

关注 1881

wrkd35 关注了用户 · 8月7日

日拱一兵 @tanrigongyibing

欢迎关注,公众号「日拱一兵」,以读侦探小说思维趣味轻松学习Java技术

送你《1000G 免费精选技术学习资料》(2020 年最新)
https://mp.weixin.qq.com/s/9p...

关注 19388

认证与成就

  • 获得 4 次点赞
  • 获得 2 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 2 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 8月7日
个人主页被 127 人浏览