传统html+vue+elementUI开发&nodeJS环境搭建

简介: Shiro提供了完整的企业级会话管理功能,不依赖于底层容器(如Tomcat、WebLogic),不管是J2SE还是J2EE环境都可以使用,提供了会话管理,会话事件监听,会话存储/持久化,容器无关的集群,失效/过期支持,对Web的透明支持,SSO单点登录的支持等特性。 所谓会话,即用户访问应用时保持的连接关系,在多次交互中应用能够识别出当前访问的用户是谁,且可以在多次交互中保存一些数据。如访问一些网站时登录成功后,网站可以记住用户,且在退出之前都可以识别当前用户是谁。

一. ElementUI简介
我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的,
所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件

ElementUI官网:https://element.eleme.cn/#/zh-CN

注1:类似前端框架还有iview

demo1.html(非模块化)

hello elementUI

二. Vue+ElementUI安装
2.1 CDN方式

  <!-- 1. 导入css -->
  <link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="stylesheet">
  <!-- 2. 引入vue和vue-router-->
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  <!-- 未使用vue路由功能可不导入 -->
  <script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js"></script>
  <!-- 3. 引入ElementUI组件 -->
  <script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script> 
  

2.2 NPM(略,需要配置NodeJs环境)

三、会话管理

Shiro提供了完整的企业级会话管理功能,不依赖于底层容器(如Tomcat、WebLogic),不管是J2SE还是J2EE环境都可以使用,提供了会话管理,会话事件监听,会话存储/持久化,容器无关的集群,失效/过期支持,对Web的透明支持,SSO单点登录的支持等特性。

所谓会话,即用户访问应用时保持的连接关系,在多次交互中应用能够识别出当前访问的用户是谁,且可以在多次交互中保存一些数据。如访问一些网站时登录成功后,网站可以记住用户,且在退出之前都可以识别当前用户是谁。

1.基础组件

1.1 SessionManager

会话管理器管理着应用中所有 Subject 的会话的创建、维护、删除、失效、验证等工作。是Shiro 的核心组件,顶层组件SecurityManager直接继承了SessionManager,且提供了SessionsSecurityManager实现直接把会话管理委托给相应的SessionManager
1)DefaultSessionManager:使用的默认实现,用于JavaSE环境
2)ServletContainerSessionManager:使用的默认实现,用于Web环境,其直接使用Servlet容器的会话
3)DefaultWebSessionManager:用于Web环境的实现,可以替代ServletContainerSessionManager,自己维护着会话,直接废弃了Servlet容器的会话管理

1.2 SessionListener

SessionListener会话监听器用于监听会话创建、过期及停止事件。
实现方式:
1)实现SessionListener,必须实现所有方法
2)继承SessionListenerAdapter,重写指定方法

相关API:
1)onStart(Session session):监听会话创建事件
2)onStop(Session session):监听会话销毁事件
3)onExpiration(Session session):监听会话过期事件

1.3 SessionDao

Shiro提供SessionDAO用于会话的CRUD,即DAO(Data Access Object)模式实现。
1)AbstractSessionDAO:提供了SessionDAO的基础实现,如生成会话ID等
2)CachingSessionDAO:提供了对开发者透明的会话缓存的功能,需要设置相应的CacheManager
3)MemorySessionDAO:直接在内存中进行会话维护(默认方式)
4)EnterpriseCacheSessionDAO:提供了缓存功能的会话维护,默认情况下使用MapCache实现,内部使用ConcurrentHashMap保存缓存的会话。

相关API:
//如DefaultSessionManager在创建完session后会调用该方法;
//如保存到关系数据库/文件系统/NoSQL数据库;redis
//即可以实现会话的持久化;返回会话ID;主要此处返回的ID.equals(session.getId());
Serializable create(Session session);
//根据会话ID获取会话
Session readSession(Serializable sessionId) throws UnknownSessionException;
//更新会话;如更新会话最后访问时间/停止会话/设置超时时间/设置移除属性等会调用
void update(Session session) throws UnknownSessionException;
//删除会话;当会话过期/会话停止(如用户退出时)会调用
void delete(Session session);
//获取当前所有活跃用户,如果用户量多此方法影响性能
Collection getActiveSessions();

1.4 会话验证

1)Shiro提供了会话验证调度器,用于定期的验证会话是否已过期,如果过期将停止会话。
2)出于性能考虑,一般情况下都是获取会话的同时来验证会话是否过期并停止会话的;但是如果在Web环境中,如果用户不主动退出是不知道会话是否过期的,因此需要定义的检测会话是否过期,Shiro提供了会话验证调度器来定期检查会话是否过期,SessionValidationScheduler 。
3)Shrio也提供了使用Quartz会话验证调度器 QuartzSessionValidationScheduler 。

1.5 案例

1)创建Session ID生成器


2)自定义会话管理

  <property name="sessionIdGenerator" ref="sessionIdGenerator"/>

3)创建会话监听器

4)会话cookie模板

  <!--设置cookie的name-->
  <constructor-arg value="shiro.session"/>
  <!--设置cookie有效时间-->
  <property name="maxAge" value="-1"/>
  <!--设置httpOnly-->
  <property name="httpOnly" value="true"/>

5)SessionManager会话管理器

  <!--设置session会话过期时间 毫秒 3分钟=180000-->
  <property name="globalSessionTimeout" value="180000"/>
  <!--设置sessionDao-->
  <property name="sessionDAO" ref="customSessionDao"/>
  <!--设置间隔多久检查一次session的有效性 默认60分钟-->
  <property name="sessionValidationInterval" value="1800000"/>
  <!--配置会话验证调度器-->
  <!--<property name="sessionValidationScheduler" ref="sessionValidationScheduler"/>-->
  <!--是否开启检测,默认开启-->
  <!--<property name="sessionValidationSchedulerEnabled" value="true"/>-->
  <!--是否删除无效的session,默认开启-->
  <property name="deleteInvalidSessions" value="true"/>
  <!--配置session监听器-->
  <property name="sessionListeners">
      <list>
          <ref bean="shiroSessionListener"/>
      </list>
  </property>
  <!--会话Cookie模板-->
  <property name="sessionIdCookie" ref="sessionIdCookie"/>
  <!--取消URL后面的JSESSIONID-->
  <property name="sessionIdUrlRewritingEnabled" value="false"/>

d7f0b849-6744-4ef0-932e-28272ad8b254

四、缓存管理

1.为什么要使用缓存

在没有使用缓存的情况下,我们每次发送请求都会调用一次doGetAuthorizationInfo方法来进行用户的授权操作,但是我们知道,一个用户具有的权限一般不会频繁的修改,也就是每次授权的内容都是一样的,所以我们希望在用户登录成功的第一次授权成功后将用户的权限保存在缓存中,下一次请求授权的话就直接从缓存中获取,这样效率会更高一些。

2.什么是ehcache

Ehcache是现在最流行的纯Java开源缓存框架,配置简单、结构清晰、功能强大。是Hibernate中默认CacheProvider。Ehcache是一种广泛使用的开源Java分布式缓存。主要面向通用缓存,Java EE和轻量级容器。它具有内存和磁盘存储,缓存加载器,缓存扩展,缓存异常处理程序,一个gzip缓存servlet过滤器,支持REST和SOAP api等特点。

注1:本章介绍的是2.X版本,3.x的版本和2.x的版本API差异比较大

五.ehcache特点

1) 够快

  Ehcache的发行有一段时长了,经过几年的努力和不计其数的性能测试,Ehcache终被设计于large, high concurrency systems.

2) 够简单

  开发者提供的接口非常简单明了,从Ehcache的搭建到运用运行仅仅需要的是你宝贵的几分钟。其实很多开发者都不知道自己用在用Ehcache,Ehcache被广泛的运用于其他的开源项目

3) 够袖珍

  关于这点的特性,官方给了一个很可爱的名字small foot print ,一般Ehcache的发布版本不会到2M,V 2.2.3 才 668KB。

4) 够轻量

  核心程序仅仅依赖slf4j这一个包,没有之一!

5) 好扩展

  Ehcache提供了对大数据的内存和硬盘的存储,最近版本允许多实例、保存对象高灵活性、提供LRU、LFU、FIFO淘汰算法,基础属性支持热配置、支持的插件多

6) 监听器

  缓存管理器监听器 (CacheManagerListener)和 缓存监听器(CacheEvenListener),做一些统计或数据一致性广播挺好用的

7) 分布式缓存

  从Ehcache 1.2开始,支持高性能的分布式缓存,兼具灵活性和扩展性

4.ehcache入门

1)导入相关依赖

 <groupId>net.sf.ehcache</groupId>
 <artifactId>ehcache</artifactId>
 <version>2.10.0</version>

2)核心接口

CacheManager:缓存管理器
Cache:缓存对象,缓存管理器内可以放置若干cache,存放数据的实质,所有cache都实现了Ehcache接口
Element:单条缓存数据的组成单位

CacheManager -> Cache(可定义各种缓存策略) -> Element

3)核心配置文件

ehcache.xml

5.shiro与ehcache整合

1)导入相关依赖(注意:这里使用shiro的1.4.1版本)

注:之前是使用的1.3.1版本,在安全退出的时候引发了UnknownSessionException: There is no session with id错误,通过升级shiro版本后问题解决!!!o(╥﹏╥)o 一下午时间啊!!!

  <groupId>org.apache.shiro</groupId>
  <artifactId>shiro-ehcache</artifactId>
  <version>1.4.1</version>

    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-context-support</artifactId>
        <version>${spring.version}</version>
    </dependency>

2)实现spring与ehcache缓存

创建spring-ehcache.xml

  <property name="configLocation" value="classpath:ehcache.xml"/>
  <property name="shared" value="true"/>

  <property name="cacheManager" ref="cacheManagerFactory"/>

3)在SecurityManager安全管理器中设置缓存管理器

4)开启Shiro的授权或者认证数据缓存

在自定义Realm配置中开启并设置授权或者认证数据缓存

注:这里只开启了授权缓存,避免每次请求都要重新查询授权数据!!!

相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
13天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【8月更文挑战第29天】Node.js,一个基于Chrome V8引擎的JavaScript运行环境,以其非阻塞I/O模型和事件驱动机制,在后端开发领域赢得了广泛关注。本文将从基本概念入手,通过实例讲解Node.js在后端开发中的应用,并分享一些实用的编程技巧。无论你是前端开发者还是后端新手,这篇文章都将为你打开一扇探索Node.js的大门。
|
4天前
|
存储 JavaScript 安全
深入浅出Node.js后端开发
【9月更文挑战第6天】在数字化浪潮中,后端开发作为技术架构的支柱,承载着数据存储、业务逻辑处理和用户交互等核心功能。Node.js,作为一个轻量级、高效的JavaScript运行环境,已经成为许多开发者的首选工具。本文将深入探讨Node.js的基础知识、实战应用以及面临的挑战,旨在为初学者和经验丰富的开发者提供一份全面的指南。从搭建开发环境到部署应用程序,我们将一步步揭示Node.js的魅力所在,同时也会触及性能优化和安全防护等高级话题。无论你是初涉后端开发的新手,还是希望深化对Node.js的理解,这篇文章都将是你的宝贵资源。
|
7天前
|
JavaScript API 数据库
深入理解Node.js事件循环及其在后端开发中的应用
【9月更文挑战第3天】本文将深入浅出地介绍Node.js的事件循环机制,探讨其非阻塞I/O模型和如何在后端开发中利用这一特性来处理高并发请求。通过实际的代码示例,我们将看到如何有效地使用异步操作来优化应用性能。文章旨在为读者揭示Node.js在后端开发中的核心优势和应用场景,帮助开发者更好地理解和运用事件循环来构建高性能的后端服务。
|
7天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【9月更文挑战第3天】本文将带你走进Node.js的世界,通过深入浅出的方式,让你了解Node.js的基本概念、特性以及如何在后端开发中应用。我们将从Node.js的安装开始,逐步深入到异步编程模型、事件驱动机制等核心概念,最后通过一个简单的Web服务器示例,让你对Node.js有一个全面的认识。无论你是前端开发者还是后端开发者,只要你对Node.js感兴趣,这篇文章都将为你打开一扇新的大门。
|
11天前
|
Kubernetes JavaScript Cloud Native
深入浅出Node.js后端开发
【8月更文挑战第31天】在数字化浪潮中,云原生技术如同星辰大海中的航船,引领企业乘风破浪。本文将带你从Docker容器的基础出发,探索至Kubernetes集群的奥秘,用代码示例点亮技术的灯塔,助你在云原生的海洋中找到属于自己的航道。
|
11天前
|
JavaScript 开发者
深入理解Node.js事件循环及其在后端开发中的应用
【8月更文挑战第31天】 本文将带你走进Node.js的事件循环机制,通过浅显易懂的语言和实例代码,揭示其背后的工作原理。我们将一起探索如何高效利用事件循环进行异步编程,提升后端应用的性能和响应速度。无论你是Node.js新手还是有一定经验的开发者,这篇文章都能给你带来新的启发和思考。
|
11天前
|
开发者 Java 存储
JSF 与 CDI 携手共进,紧跟技术热点,激发开发者情感共鸣,开启高效开发新征程
【8月更文挑战第31天】JavaServer Faces (JSF) 与 Contexts and Dependency Injection (CDI) 在 Java EE 领域中紧密协作,助力开发者高效构建现代 Web 应用。JSF 凭借其丰富的组件库和页面导航功能受到青睐,而 CDI 则优雅地管理对象生命周期并实现依赖注入。两者结合,不仅简化了复杂企业应用的开发,还实现了松耦合架构,增强了代码的灵活性、可维护性和可扩展性。通过示例展示了如何利用 CDI 将业务服务对象注入 JSF Managed Bean,以及如何在不同页面间共享数据,突显了这一组合的强大功能。
25 0
|
11天前
|
大数据 数据处理 分布式计算
JSF 逆袭大数据江湖!看前端框架如何挑战数据处理极限?揭秘这场技术与勇气的较量!
【8月更文挑战第31天】在信息爆炸时代,大数据已成为企业和政府决策的关键。JavaServer Faces(JSF)作为标准的 Java Web 框架,如何与大数据技术结合,高效处理大规模数据集?本文探讨大数据的挑战与机遇,介绍 JSF 与 Hadoop、Apache Spark 等技术的融合,展示其实现高效数据存储和处理的潜力,并提供示例代码,助您构建强大的大数据系统。
21 0
|
11天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【8月更文挑战第31天】在数字时代的浪潮中,Node.js以其非阻塞、事件驱动的特性,成为炙手可热的后端技术。本文将带你领略Node.js的魅力所在,从搭建开发环境到实战演练,我们用浅显易懂的语言和生动的例子,让你轻松掌握Node.js后端开发的精髓。无论你是新手还是有经验的开发者,这篇文章都将为你的技术之路添砖加瓦。
|
11天前
|
SQL 缓存 JavaScript
深入浅出Node.js后端开发
【8月更文挑战第31天】本文将带你走进Node.js的世界,从基础到进阶,逐步深入探讨如何在后端开发中利用Node.js的异步特性和丰富的库来构建高效、可扩展的应用。我们将通过实际代码示例,展示如何搭建一个简单的RESTful API,并讨论最佳实践和性能优化策略。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供宝贵的知识和技能。