图片 18

隐藏和淡入淡出效果,就这一篇

图片 1

  为了把JQuery搞熟习,望着新手教程,一个二个例子打,边看边记,算是1夜晚的三个小总括吧。加油,笔者很本可是自家很辛勤啊。系统的领悟它,将要花时间咯。

图片 2

MVC 设计概述

在早先时代 Java Web 的付出中,统一把彰显层、控制层、数据层的操作全体付给 JSP
只怕 JavaBean 来进行处理,大家称之为 Model1:

图片 3

  • 出现的弊病:
  • JSP 和 Java Bean 之间严重耦合,Java 代码和 HTML 代码也耦合在了同步
  • 需要开荒者不唯有要驾驭 Java ,还要有高超的前端水平
  • 前端和后端彼此依赖,前端供给等待后端达成,后端也依赖前端完成,能力张开中用的测试
  • 代码难以复用

正因为地方的种种弊端,所以高速这种办法就被 Servlet + JSP + Java Bean
所代表了,开始时代的 MVC 模型(Model2)仿佛下图那样:

图片 4

先是用户的请求会到达 Servlet,然后根据请求调用相应的 Java
Bean,并把全部的显得结果提交 JSP 去做到,那样的格局大家就叫做 MVC 形式。

  • M 代表 模型(Model)
    模型是何许吧? 模型正是数量,正是 dao,bean
  • V 代表 视图(View)
    视图是什么样呢? 就是网页, JSP,用来显示模型中的数据
  • C 代表 控制器(controller)
    调控器是何等?
    调整器的意义便是把分歧的数量(Model),展现在不相同的视图(View)上,Servlet
    扮演的便是这样的剧中人物。

扩大阅读:Web开荒格局

  

前言

繁多初学者,乃至是职业一-叁年的伴儿们都恐怕弄不清楚?servlet Struts1Struts二 springmvc 哪些是单例,哪些是多例,哪些是线程安全?

在谈那一个话题从前,我们先领会一下Java中有关的变量类型以及内部存储器模型JMM。

Spring MVC 的架构

为缓和长久层中向来未管理好的数据库事务的编制程序,又为了迎合 NoSQL
的强势崛起,Spring MVC 给出了方案:

图片 5

理念的模型层被拆分为了业务层(Service)和数据访问层(DAO,Data Access
Object)。
在 Service 下能够经过 Spring
的表明式事务操作数据访问层,而在作业层上还允许大家访问 NoSQL
,那样就可见满足别具一格的 NoSQL
的采纳了,它能够大大升高网络系统的性子。

  • 特点:
    布局松散,差不离能够在 Spring MVC 中运用各种视图
    松耦合,各种模块分离
    与 Spring 无缝集成

<!DOCTYPE html>
<html>
<head>
    <title>JQuery常见效果</title>
    <script type="text/javascript" src="../jquery.min.js"></script>
    <script type="text/javascript">
        // $(function(){
        //     $('p').click(function(){
        //         $(this).hide();
        //     })
        // })
        // 复杂一点的隐藏样式
        // $(function(){
        //     $('.hide').click(function(){
        //         $(this).parents('.ex').hide('slow');
        //     })
        // })

        // 注意.hide(speed,callback) .show(speed,callback)
        // speed规定显示或隐藏的速度,可以取'slow','fast'或者
        // 毫秒。
        // slow和fast一定不要忘记引号。
        // callback是显示或隐藏完成后所执行的函数名称。

        // $(function(){
        //     $('#hide').click(function(){
        //         $('p').hide();
        //     })
        //     $('#show').click(function(){
        //         $('p').show();
        //     })
        // })
        // $(function(){
        //     $('#box').click(function(){
        //         $(this).hide(2000,function(){
        //             // 让这个盒子在两秒隐藏后显示出来
        //             $(this).show(2000,function(){
        //                 $(this).css('background-color','yellow');
        //             });
        //         })
        //     })
        // })

        // toggle(speed,callback),切换元素的可见状态,用法和show
        // ,hide相同

        // $(document).ready(function(){
        //     $('#box').click(function(){
        //         $('.p1').toggle();
        //     })
        // })

        // 接下来便是淡入淡出效果
        // fadeIn(speed,callback);用于淡入已隐藏的元素
        // $(function(){
        //     $('#fadein').click(function(){
        //         $('#box1').fadeIn();
        //         $('#box2').fadeIn('slow');
        //         $('#box3').fadeIn('4000',function(){
        //         $(this).css('background-color','yellow');
        //         });
        //     })
        // })
        // 相反fadeOut(speed,callback);用于淡出可见元素,
        // 用法和fadeIn(speed,callback)一致
        // $().ready(function(){
        //     $('#fadein').click(function(){
        //         $('#box1').fadeOut(6000);
        //         $('#box2').fadeOut(3000);
        //         $('#box3').fadeOut(1000);
        //     })
        // })
        // 接下来便是fadeToggle(speed,callback),同理切换元素的可见性
        // 如果元素已淡入,则fadeToggle()会向元素添加淡出效果
        // 如果元素已淡出,则fadeToggle()会向元素添加淡出效果
        // $(document).ready(function(){
        //     $('#fadein').click(function(){
        //         $('#box1').fadeToggle(1000);
        //         $('#box2').fadeToggle(3000);
        //         $('#box3').fadeToggle(6000);
        //     })
        // })

        // 接下来便是fadeTo(speed,opacity,callback);
        // 意思是准许渐变为给定的不透明度(必需要规定效果的时长,不然
        //没有效果,方法无效)
        $(function(){
            $('#fadein').click(function(){
                $('#box1').fadeTo(2000,0.5);
                $('#box2').fadeTo(2000,0.7);
                $('#box3').fadeTo(4000,0.2);
            })
        })
    </script>
    <style type="text/css">
        /*.ex{
            padding: 10px;
            background-color: red;
            border: 1px solid yellow;
        }*/

    </style>
</head>
<body>
    <!-- 第一个简单的隐藏效果 -->
    <!-- <p>第一次点击</p>
    <p>第二次点击</p>
    <p>第三次点击</p> -->
    <!-- <h1>你好</h1>
    <div class="ex">
        <button class="hide">点我隐藏</button>
        <p>安徽<br>
            一个美丽的地方
        </p>
    </div>
    <h2>Hellow</h2>
    <div class="ex">
        <button class="hide">点我隐藏</button>
        <p>商贸<br>
            8栋611寝室</p>
    </div> -->

    <!-- 定义一个段落,加上显示和隐藏的按钮 -->
    <!-- <p>点击按钮,切换效果</p>
    <button id="hide">隐藏</button>
    <button id="show">显示</button> -->

    <!-- 下面来写一个可以用到hide(speed,callback) -->

    <!-- <div id="box" style="width: 200px;height: 400px;background-color: red;">

    </div> -->

    <!-- <button id="box">隐藏/显示</button>
    <p class="p1">这是一大段文本</p> -->
    <button id="fadein">开关</button>
    <div id="box1" style="display:block;width: 100px;height: 100px;background-color: red;"></div>
    <div id="box2" style="display:block;width: 100px;height: 100px;background-color: red;"></div>
    <div id="box3" style="display:block;width: 100px;height: 100px;background-color: red;"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>淡入淡出</title>
    <script type="text/javascript" src="../jquery.min.js"></script>
    <script type="text/javascript">
        // fadeIn例子
        // $(function(){
        //     $('#button').click(function(){
        //         $('#box1').fadeIn(1000);
        //         $('#box2').fadeIn(2000);
        //         $('#box3').fadeIn(4000);
        //     })
        // })

        // fadeOut例子
        // $(document).ready(function(){
        //     $('#button').click(function(){
        //         $('#box1').fadeOut(1000);
        //         $('#box2').fadeOut(4000);
        //         $('#box3').fadeOut(6000);
        //     })
        // })

        // fadeToggle用法
        // $().ready(function(){
        //     $('#button').click(function(){
        //         $('#box1').fadeToggle('slow');
        //         $('#box2').fadeToggle('fast');
        //         $('#box3').fadeToggle();
        //     })
        // })

        // fadeTo用法
        $().ready(function(){
            $('#button').click(function(){
                $('#box1').fadeTo(4000,0.5);
                $('#box2').fadeTo(1000,0.5);
                $('#box3').fadeTo(8000,0.5);
            })
        })
    </script>
</head>
<body>
    <button id="button">点击我</button>
    <div id="box1" style="display:none;width: 200px;height: 200px;background-color: red;"></div>
    <div id="box2" style="display:none;width: 200px;height: 200px;background-color: yellow;"></div>
    <div id="box3" style="display:none;width: 200px;height: 200px;background-color: blue;"></div>
</body>
</html>

变量类型

  • 类变量:独立于方法之外的变量,用 static 修饰。
  • 一些变量:类的点子中的变量。
  • 实例变量(全局变量):独立于方法之外的变量,但是没有 static 修饰。

Hello Spring MVC

让大家来写一下大家的首先个 Spring MVC 程序:

 

JAVA的部分变量

  • ①部分变量申明在艺术、构造方法只怕语句块中;
  • 某些变量在措施、构造方法、或许语句块被执行的时候制造,当它们实践到位后,变量将会被灭绝;
  • 访问修饰符不能够用于局部变量;
  • 有个别变量只在注明它的点子、构造方法只怕语句块中可知;
  • 一部分变量是在栈上分配的。
  • 一些变量未有暗中认可值,所以部分变量被声称后,必须经过初叶化,本事够运用。

第一步:在 IDEA 中新建 Spring MVC 项目

图片 6

再者取名称为 【HelloSpringMVC】,点击【Finish】:

图片 7

IDEA 会自动帮大家下载好需求的 jar
包,并且为我们创设好有的暗中认可的目录和文件,创设好之后项目组织如下:

图片 8

JAVA的实例变量

  • 实例变量注脚在3个类中,但在点子、构造方法和语句块之外;
  • 当三个目的被实例化之后,每一种实例变量的值就跟着明显;
  • 实例变量在目的创造的时候创立,在指标被销毁的时候销毁;
  • 实例变量的值应该至少被一个形式、构造方法也许语句块引用,使得外部能够通过那几个形式获得实例变量音信;
  • 实例变量能够注脚在应用前只怕应用后;
  • 访问修饰符能够修饰实例变量;
  • 实例变量对于类中的方法、构造方法大概语句块是可知的。一般景观下应该把实例变量设为私有。通过利用访问修饰符能够使实例变量对子类可见;
  • 实例变量具备暗许值。数值型变量的暗中同意值是0,布尔型变量的私下认可值是false,引用类型变量的暗中认可值是null。变量的值能够在宣称时钦命,也能够在构造方法中钦赐;实例变量可以一向通过变量名访问。但在静态方法以及其余类中,就应该利用完全限定名:ObejectReference.VariableName。

第二步:修改 web.xml

大家开发 web.xml ,根据下图成功修改:

图片 9

<url-pattern>要素的值改为 / ,表示要阻止全数的呼吁,并交由Spring
MVC的后台调整器来拍卖,改完事后:

<servlet-mapping>
    <servlet-name>dispatcher</servlet-name>
    <url-pattern>/</url-pattern>
</servlet-mapping>

JAVA的类变量(静态变量)

  • 类变量也称之为静态变量,在类中以static关键字表明,但必须在章程构造方法和语句块之外。
  • 任由二个类创造了稍稍个对象,类只持有类变量的1份拷贝。
  • 静态变量除了被声称为常量外没有多少使用。常量是指注解为public/private,final和static类型的变量。常量开首化后不得改造。
  • 静态变量储存在静态存款和储蓄区。平常被声称为常量,非常少单独选用static阐明变量。
  • 静态变量在先后起始时创建,在程序截止时销毁。
  • 与实例变量具备相似的可知性。但为了对类的使用者可知,大好些个静态变量证明为public类型。
  • 私下认可值和实例变量相似。数值型变量默许值是0,布尔型私下认可值是false,引用类型私下认可值是null。变量的值能够在注解的时候钦赐,也能够在构造方法中钦定。别的,静态变量还能在静态语句块中开头化。
  • 静态变量能够通过:ClassName.VariableName的方法访问。
  • 类变量被声称为public static
    final类型时,类变量名称一般建议利用大写字母。如若静态变量不是public和final类型,其命名格局与实例变量以及一些变量的命名格局一样。

第三步:编辑 dispatcher-servlet.xml

以此文件名的上马 dispatcher 与地点 web.xml 中的 <servlet-name>
成分配置的 dispatcher 对应,那是 Spring MVC
的酷炫配置文件(xxx-servlet.xml),咱们编辑如下:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd">

    <bean id="simpleUrlHandlerMapping"
          class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
        <property name="mappings">
            <props>
                <!-- /hello 路径的请求交给 id 为 helloController 的控制器处理-->
                <prop key="/hello">helloController</prop>
            </props>
        </property>
    </bean>
    <bean id="helloController" class="controller.HelloController"></bean>
</beans>

Java的内部存款和储蓄器模型JMM

Java的内部存款和储蓄器模型JMM(Java Memory
Model)JMM主假设为着鲜明了线程和内部存款和储蓄器之间的局地关系。依据JMM的规划,系统存在三个主内部存款和储蓄器(Main
Memory),Java中装有实例变量都储存在主存中,对于全部线程都以共享的。每条线程都有温馨的行事内部存款和储蓄器(Working
Memory),事行业内部部存款和储蓄器由缓存和货栈两局地构成,缓存中保存的是主存中变量的正片,缓存也许并不总和主存同步,相当于缓存中变量的修改大概未有立时写到主存中;仓库中保留的是线程的片段变量,线程之间不能互相直接待上访问货仓中的变量。依据JMM,大家能够将杂谈中所切磋的Servlet实例的内部存款和储蓄器模型抽象为下图所示的模子。

图片 10

第四步:编写 HelloController

在 Package【controller】下创建 【HelloController】类,并实现
org.springframework.web.servlet.mvc.Controller 接口:

package controller;

import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.Controller;

public class HelloController implements Controller{
    @Override
    public ModelAndView handleRequest(javax.servlet.http.HttpServletRequest httpServletRequest, javax.servlet.http.HttpServletResponse httpServletResponse) throws Exception {
        return null;
    }
}
  • 出现了难点: javax.servlet 包找不到
  • 解决: 将本地 汤姆cat 服务器的目录下【lib】文件夹下的
    servlet-api.jar 包拷贝到工程【lib】文件夹下,增多注重

Spring MVC 通过 ModelAndView 对象把模型和视图结合在共同

ModelAndView mav = new ModelAndView("index.jsp");
mav.addObject("message", "Hello Spring MVC");

此地球表面示视图的是index.jsp
模型数据的是 message,内容是 “Hello Spring MVC”

package controller;

import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.Controller;

public class HelloController implements Controller {

    public ModelAndView handleRequest(javax.servlet.http.HttpServletRequest httpServletRequest, javax.servlet.http.HttpServletResponse httpServletResponse) throws Exception {
        ModelAndView mav = new ModelAndView("index.jsp");
        mav.addObject("message", "Hello Spring MVC");
        return mav;
    }
}

线程安全

第五步:准备 index.jsp

将 index.jsp 的剧情改换为:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>

<h1>${message}</h1>

剧情很简短,用El说明式突显 message 的剧情。

Servlet

Servlet/JSP本事和ASP、PHP等相比较,由于其二十四线程运维而享有非常高的实行作用。由于Servlet/JSP暗中认可是以10二线程方式推行的,所以,在编写制定代码时索要极度细心地想念四线程的安全性难题。然则,繁多人编写Servlet/JSP程序时并不曾留神到二十四线程安全性的标题,那频仍导致编写的程序在为数非常的少用户访问前卫未别的问题,而在出现用户上涨到一定值时,就能够日常出现一些朦胧的难点。

第陆步:铺排 汤姆cat 及连锁条件

在【Run】菜单项下找到【艾德it Configurations】

图片 11

配置 Tomcat 环境:

图片 12

慎选好本地的 汤姆cat 服务器,并改好名字:

图片 13

在 Deployment 标签页下完了如下操作:

图片 14

点击 OK 就好了,大家点击右上角的三角形将 汤姆cat 服务器运维起来。

  • 并发的标题: 汤姆cat 服务器不只怕通常运行
  • 原因: 汤姆cat 服务器找不到有关的 jar 包
  • 缓解情势:
    将【lib】文件夹整个剪贴到【WEB-INF】下,比量齐观新确立正视:

图片 15

Servlet的十二线程机制

Servlet系列布局是成立在Java十2线程机制之上的,它的生命周期是由Web容器担任的。当客户端第一次呼吁有些Servlet
时,Servlet容器将会根据web.xml配置文件实例化那些Servlet类。当有新的客户端请求该Servlet时,一般不会再实例化该
Servlet类,也便是有多个线程在采取那么些实例。Servlet容器会自动使用线程池等技巧来帮忙系统的运转,如下图所示。

图片 16

这么,当五个或五个线程同时做客同多个Servlet时,恐怕会时有发生八个线程同一时候做客同1财富的情事,数据大概会变得不平等。所以在用Servlet营造的Web应用时只要不留意线程安全的主题材料,会使所写的Servlet程序有不便觉察的错误。

第拾步:重启服务器

重启服务器,输入地方:localhost/hello

图片 17

参考资料:Spring MVC
教程(how2j.cn)


Servlet的线程安全主题材料

Servlet的线程安全难题主要性是出于实例变量使用不当而引起的,这里以一个切实的例证来声明。

/**
 * 模拟用户AB在同时执行不同的动作
 * 先执行 http://localhost:8080/concurrent?username=A&action=play
 * 稍后执行 http://localhost:8080/concurrent?username=B&action=eat
 */
public class Concurrent extends HttpServlet {
    private static final long serialVersionUID = 1L;
    private String action = "";//动作  
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        try {  
            String username = request.getParameter("username");  
            action = request.getParameter("username");  
            Thread.sleep(5000); //为了突出并发问题,在这设置一个延时  
            //如果不出意外,应该用户AB都在吃饭
            System.out.println("用户:"+username+"在"+action);
        } catch (Exception e) {  
        }  
    }
}

跟踪 Spring MVC 的请求

每当用户在 Web
浏览器中式点心击链接恐怕提交表单的时候,请求就从头专门的工作了,像是邮递员同样,从相距浏览器初阶到收获响应重返,它会经历重重站点,在每1个站点都会留下一些音信并且也会带上其余音信,下图为
Spring MVC 的央浼流程:

图片 18

Struts1

第二,鲜明一点Sturts一action是单例格局,线程是不安全的。Struts一选取的ActionServlet是单例的,既然是单例,当使用实例变量的时候就能有线程安全的主题素材。全部一般在付出中间试验禁止行使实例变量的。

第一站:DispatcherServlet

从呼吁离开浏览器将来,第一站达到的就是 DispatcherServlet,看名字那是一个Servlet,通过 J2EE 的就学,我们知晓 Servlet 能够阻挡并拍卖 HTTP
请求,DispatcherServlet 会拦截全数的请求,并且将那些请求发送给 Spring
MVC 调控器。

<servlet>
    <servlet-name>dispatcher</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>dispatcher</servlet-name>
    <!-- 拦截所有的请求 -->
    <url-pattern>/</url-pattern>
</servlet-mapping>
  • DispatcherServlet 的任务正是挡住请求发送给 Spring MVC 调节器。

Struts2

struts2应用的是actionContext,都以利用在那之中的实例变量,让struts二自行相配成对象的。每回管理贰个请求,struts2就能实例化3个目的,那样就不会有线程安全的标题了。

急需注意的是,假设struts二+spring来保管注入的时候,不要把Action设置成单例,不然会出标题的。当然现在没有多少有档期的顺序接纳struts2了。

其次站:处理器映射(HandlerMapping)

  • 问题:出类拔萃的应用程序中或者会有多少个调节器,这几个请求到底应该发放哪二个调控器呢?

所以 DispatcherServlet
会询问二个或多少个管理器映射来显明请求的下一站在哪儿,管理器映射会凭借请求所引导的
UPRADOL 音信来举行表决
,举例地点的事例中,大家经过计划simpleUrlHandlerMapping 来将 /hello 地址交给 helloController 管理:

<bean id="simpleUrlHandlerMapping"
      class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
    <property name="mappings">
        <props>
            <!-- /hello 路径的请求交给 id 为 helloController 的控制器处理-->
            <prop key="/hello">helloController</prop>
        </props>
    </property>
</bean>
<bean id="helloController" class="controller.HelloController"></bean>

SpringMVC

SpringMVC的controller暗许是单例方式的,所以也许有三十二线程并发的难点。

第三站:控制器

一经选用了非常的调节器, DispatcherServlet
会将请求发送给选中的调节器,到了控制器,请求会卸下其负载(用户提交的伸手)等待调节器管理完这一个消息:

public ModelAndView handleRequest(javax.servlet.http.HttpServletRequest httpServletRequest, javax.servlet.http.HttpServletResponse httpServletResponse) throws Exception {
    // 处理逻辑
    ....
}

总结

  • servlet Struts一 SpringMvc
    是线程不安全的,当然如果您不应用实例变量也就不存在线程安全的难题了。

  • Struts贰 是线程安全的,当然前提情状是,Action 不提交
    spring管理,并且不设置为单例。

  • SpringMvc 的 Bean
    能够设置成多例产生线程安全,不过毫无疑问程度上回影响系统品质。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:
网站地图xml地图