【tomcat && servlet】
web相关概念回顾
    cs/bs
    静态资源/动态资源
    网络通信三要素：IP、端口、传输协议

服务器、服务器软件、web服务器软件

weblogic:oracle公司,大型 javaEE服务器 支持所有的javaEE规范 收费
websphere:IBM公司,大型 javaEE服务器 支持所有的javaEE规范 收费
jboss:jboss公司,大型 javaEE服务器 支持所有的javaEE规范 收费
tomcat:apache基金组织，小型 java EE服务器 支持少量的java EE规范，免费

tomcat目录结构
    bin 可执行文件
    conf 配置文件
    lib 依赖jar包
    logs 日志文件
    temp 临时文件
    webapps 存放web项目
    work 存放运行时数据

下载 http://tomcat.apache.org/
安装：解压压缩包
卸载：删除目录
启动: bin/startup.bat
【需要在系统环境变量中配置JAVA_HOME属性，属性值为JDK的安装目录】
关闭：bin/shutdown.bat    ctrl+c

找到 8080端口号对应的进程
netstat -ano
查看 8080 端口对应的 pid
打开 window 资源管理器，点击进程，根据 pid 结束对应的进程

conf/server.xml
line 69 port="8080" 修改为 port="8888"
redirectPort="8843" 修改为 redirectPort="8845"

一般将tomcat的端口号修改为80,对应的是http协议的默认端口

tomcat部署项目
    01 直接将项目放到webapps文件夹下
        /hello : 项目的访问目录 虚拟目录
        简化部署：将项目打包成一个war包，再将war包放到webapps中

    02 conf/server.xml
        最后一行 host标签中，定义 <Context docBase="d:\hello" path="/hhe" />
        docBase:项目存放的路径 path：虚拟目录

    03 conf/Catalina/localhost 【推荐、热部署】
        新建任意名称的xml ，内容：<Context docBase="d:\hello"/>
        虚拟目录为xml的文件名称

java动态项目的目录结构
项目名称
  -- WEB-INFO
     -- web.xml web项目的核心配置文件
     -- classes 存放字节码文件的目录
     -- lib  存放依赖的jar包

idea 集成 tomcat
    run/edit configuration defaults tomcat-server local configure
    指定tomcat的安装目录
    顺便可以指定打开的浏览器
    【热部署】
     on update action:update resources
     on frame deactication:update resources

     vm options: -Dfile.encoding=utf-8【如果启动服务器出现乱码问题】

【servlet】server applet:运行在服务器上的小程序
     一个接口，定义了java类被浏览器访问到的规则

快速入门
    创建java ee项目
    写一个类，实现servlet接口，复写接口的方法
    web.xml配置servlet

【servlet执行原理】

http://localhost:8080/servlet/servlet01

协议 ip 端口 /servlet /servlet01

tomcat 项目 url-pattern

url-pattern -> servlet-name -> servlet-class

【servlet生命周期】
    init 初始化方法（servlet被创建时，执行一次）
        servlet什么时候被创建
            默认情况下（load-on-startup属性数值为-1），servlet第一次被访问时，servlet被创建
            如果load-on-startup属性数值为0或整数，servlet将在服务器启动时被创建
            load-on-startup 属性 在 servlet 标签中配置

【servlet是单例的，多个线程同时访问时，可能存在线程安全问题】
【尽量不要再servlet中定义 成员变量】

    service 提供服务的方法（每次servlet被访问时，被执行一次）
    destory 销毁方法（服务器正常关闭时，执行一次）

【Servlet 3.0】支持注解（JDK1.6之后）

创建java ee项目，选择servlet 3.0以上，可以不创建web.xml
写一个类，实现servlet接口，复写接口的方法
类上使用 @WebServlet 注解:@WebServlet("访问路径")

【idea与tomcat的集成】
    01 idea会为每一个tomcat部署的项目单独建立一份配置文件
        Using CATALINA_BASE:
        "C:\Users\Administrator\.IntelliJIdea2017.3\system\tomcat\_HeGuanLin"
    02 idea工作空间 tomcat部署的web项目
        out/artifacts 下 存放的是：tomcat部署的web项目
        tomcat部署的web项目 对应的是 工作空间web文件夹下的资源
        web-info 下的资源 不能被浏览器直接访问


idea 新建 java-web 项目
    new 模块，java enterprise,java ee7,勾选 web application,version 3.0/3.1
    勾选 create web.xml



【xml】可扩展标记语言
    存储数据、配置文件、在网络中传输

xml vs html
    01 xml标签都是自定义的，html标签是预定义的
    02 xml语法严格，html语法松散
    03 xml是存储数据的，html是展示数据

xml基本语法
    01 文件名后缀：.xml
    02 xml第一行必须为文档声明
    03 xml文档中有且仅有一个根标签
    04 属性值，需要使用单引号或者双引号引起来
    05 标签必须正确的闭合
    06 xml标签名称区分大小写【】

DTD 简单的约束技术 (内部DTD 外部DTD)
    01 外部DTD引入：
        01 本地 <! DOCTYPE 根标签名 SYSTEM "dtd文件的位置">
        02 网络 <! DOCTYPE 根标签名 public "dtd文件名字" "dtd文件的位置URL">

Schema 复杂的约束技术

xml 解析（读取）/写入

dom:一次加载进内存，可以对文档进行CRUD
sax:逐行读取，基于时间驱动，只能读取，不能删除、修改、增加

xml常见的解析器:jaxp\dom4j\jsoup\pull

jsoup


【bootstrap】
入门：
        01 meta 引入三种信息：字符编码、兼容IE、确保适当的绘制和触屏缩放
        02 【依次引入】css jq bs

【栅格系统】       
        container 用于固定宽度并支持响应式布局的容器
    container-fluid 用于 100% 宽度，占据全部视口（viewport）的容器

01 container/container-fluid
        02 row
            03 col-xx-* (xs sm md lg)
               col-xx-offset-*
   一行中格子数目超过12，超过部分自动换行
       
css全局样式
        按钮 btn btn-default ..
        图片 img-responsive(响应式布局)
                 img-rounded img-circle img-thumbnail
        表格 table ...
       
工具
        导航栏、分页条、轮播图
       
【js-03】
事件监听机制
        事件源+事件+监听器+注册监听

常见的事件：
event.button
event.keyCode

        onclick \ ondblclick
        onblur \ onfocus 失去焦点、获得焦点
        onload 一个页面或一副图像加载
       
        onmousedown
        onmouseup
        onmousemove
        onmouseover
        onmouseout
       
        onkeydown
        onkeyup
        onkeypress
       
        onchange 【例如下拉列表之三级联动】
        onselect 文本域被选中
       
        onsubmit
        onreset

【form表单的验证】:为form表单的onclick属性注册函数
01 var form = document.getElementById("form");
   form.onsubmit = function () { return true/false; }
02 直接在html-form标签中，使用 ：
        <form action="#" method="post" id="form">
       
【js-02】
dom
    01 get id tag class name
    02 createElement

Element
    01 setAttribute
    02 removeAttribute

Node
    01 appendChild
    02 removeChild
    03 replaceChild
    parentNode

【window三种弹窗】

    var name = window.prompt("请输入用户名：");
    var b = window.confirm("你叫" + name + "?");
    if(b){
        window.alert("原来你真的叫" + name);
    }else{
        window.alert("你骗我");
    }


【window定时器】
var t2 = window.setInterval("fn();",1000);//每隔多少时间执行一次
window.clearInterval(t2);

var t1= window.setTimeout("fun();",1000);//过多少时间执行该函数
window.clearTimeout(t1);


【历史栏】

window.history.forward(); 等价于 window.history.go(1);

window.history.back(); 等价于 window.history.go(-1);

window.history.length; 记录的是历史栏的个数


【地址栏】

window.location.reload(true);

window.location.href = "http://www.baidu.com";


【window打开窗口、关闭窗口】
var newWindow = window.open("http://www.baidu.com");
newWindow.close();


【通过a标签删除当前行】
a.setAttribute("onclick","deleteTr(this);");

function deleteTr(obj) {
    var table = obj.parentNode.parentNode.parentNode;
    var tr = obj.parentNode.parentNode;
    table.removeChild(tr);
}


【元素样式定义】

var div1 = document.getElementById("div1");
【style每个标签都有的属性】
div1.style.border = "1px solid red";
div1.style.fontSize = "30px";

【预先定义样式，然后通过className指定class属性数值】
div1.className = "cls1 cls2";

【tomcat && servlet】
web相关概念回顾
    cs/bs
    静态资源/动态资源
    网络通信三要素：IP、端口、传输协议

服务器、服务器软件、web服务器软件

weblogic:oracle公司,大型 javaEE服务器 支持所有的javaEE规范 收费
websphere:IBM公司,大型 javaEE服务器 支持所有的javaEE规范 收费
jboss:jboss公司,大型 javaEE服务器 支持所有的javaEE规范 收费
tomcat:apache基金组织，小型 java EE服务器 支持少量的java EE规范，免费

tomcat目录结构
    bin 可执行文件
    conf 配置文件
    lib 依赖jar包
    logs 日志文件
    temp 临时文件
    webapps 存放web项目
    work 存放运行时数据

下载 http://tomcat.apache.org/
安装：解压压缩包
卸载：删除目录
启动: bin/startup.bat
【需要在系统环境变量中配置JAVA_HOME属性，属性值为JDK的安装目录】
关闭：bin/shutdown.bat    ctrl+c

找到 8080端口号对应的进程
netstat -ano
查看 8080 端口对应的 pid
打开 window 资源管理器，点击进程，根据 pid 结束对应的进程

conf/server.xml
line 69 port="8080" 修改为 port="8888"
redirectPort="8843" 修改为 redirectPort="8845"

一般将tomcat的端口号修改为80,对应的是http协议的默认端口

tomcat部署项目
    01 直接将项目放到webapps文件夹下
        /hello : 项目的访问目录 虚拟目录
        简化部署：将项目打包成一个war包，再将war包放到webapps中

    02 conf/server.xml
        最后一行 host标签中，定义 <Context docBase="d:\hello" path="/hhe" />
        docBase:项目存放的路径 path：虚拟目录

    03 conf/Catalina/localhost 【推荐、热部署】
        新建任意名称的xml ，内容：<Context docBase="d:\hello"/>
        虚拟目录为xml的文件名称

java动态项目的目录结构
项目名称
  -- WEB-INFO
     -- web.xml web项目的核心配置文件
     -- classes 存放字节码文件的目录
     -- lib  存放依赖的jar包

idea 集成 tomcat
    run/edit configuration defaults tomcat-server local configure
    指定tomcat的安装目录
    顺便可以指定打开的浏览器
    【热部署】
     on update action:update resources
     on frame deactication:update resources

     vm options: -Dfile.encoding=utf-8【如果启动服务器出现乱码问题】

【servlet】server applet:运行在服务器上的小程序
     一个接口，定义了java类被浏览器访问到的规则

快速入门
    创建java ee项目
    写一个类，实现servlet接口，复写接口的方法
    web.xml配置servlet

【servlet执行原理】

http://localhost:8080/servlet/servlet01

协议 ip 端口 /servlet /servlet01

tomcat 项目 url-pattern

url-pattern -> servlet-name -> servlet-class

【servlet生命周期】
    init 初始化方法（servlet被创建时，执行一次）
        servlet什么时候被创建
            默认情况下（load-on-startup属性数值为-1），servlet第一次被访问时，servlet被创建
            如果load-on-startup属性数值为0或整数，servlet将在服务器启动时被创建
            load-on-startup 属性 在 servlet 标签中配置

【servlet是单例的，多个线程同时访问时，可能存在线程安全问题】
【尽量不要再servlet中定义 成员变量】

    service 提供服务的方法（每次servlet被访问时，被执行一次）
    destory 销毁方法（服务器正常关闭时，执行一次）

【Servlet 3.0】支持注解（JDK1.6之后）

创建java ee项目，选择servlet 3.0以上，可以不创建web.xml
写一个类，实现servlet接口，复写接口的方法
类上使用 @WebServlet 注解:@WebServlet("访问路径")

【idea与tomcat的集成】
    01 idea会为每一个tomcat部署的项目单独建立一份配置文件
        Using CATALINA_BASE:
        "C:\Users\Administrator\.IntelliJIdea2017.3\system\tomcat\_HeGuanLin"
    02 idea工作空间 tomcat部署的web项目
        out/artifacts 下 存放的是：tomcat部署的web项目
        tomcat部署的web项目 对应的是 工作空间web文件夹下的资源
        web-info 下的资源 不能被浏览器直接访问


idea 新建 java-web 项目
    new 模块，java enterprise,java ee7,勾选 web application,version 3.0/3.1
    勾选 create web.xml



【xml】可扩展标记语言
    存储数据、配置文件、在网络中传输

xml vs html
    01 xml标签都是自定义的，html标签是预定义的
    02 xml语法严格，html语法松散
    03 xml是存储数据的，html是展示数据

xml基本语法
    01 文件名后缀：.xml
    02 xml第一行必须为文档声明
    03 xml文档中有且仅有一个根标签
    04 属性值，需要使用单引号或者双引号引起来
    05 标签必须正确的闭合
    06 xml标签名称区分大小写【】

DTD 简单的约束技术 (内部DTD 外部DTD)
    01 外部DTD引入：
        01 本地 <! DOCTYPE 根标签名 SYSTEM "dtd文件的位置">
        02 网络 <! DOCTYPE 根标签名 public "dtd文件名字" "dtd文件的位置URL">

Schema 复杂的约束技术

xml 解析（读取）/写入

dom:一次加载进内存，可以对文档进行CRUD
sax:逐行读取，基于时间驱动，只能读取，不能删除、修改、增加

xml常见的解析器:jaxp\dom4j\jsoup\pull

jsoup


【bootstrap】
入门：
        01 meta 引入三种信息：字符编码、兼容IE、确保适当的绘制和触屏缩放
        02 【依次引入】css jq bs

【栅格系统】       
        container 用于固定宽度并支持响应式布局的容器
    container-fluid 用于 100% 宽度，占据全部视口（viewport）的容器

01 container/container-fluid
        02 row
            03 col-xx-* (xs sm md lg)
               col-xx-offset-*
   一行中格子数目超过12，超过部分自动换行
       
css全局样式
        按钮 btn btn-default ..
        图片 img-responsive(响应式布局)
                 img-rounded img-circle img-thumbnail
        表格 table ...
       
工具
        导航栏、分页条、轮播图
       
【js-03】
事件监听机制
        事件源+事件+监听器+注册监听

常见的事件：
event.button
event.keyCode

        onclick \ ondblclick
        onblur \ onfocus 失去焦点、获得焦点
        onload 一个页面或一副图像加载
       
        onmousedown
        onmouseup
        onmousemove
        onmouseover
        onmouseout
       
        onkeydown
        onkeyup
        onkeypress
       
        onchange 【例如下拉列表之三级联动】
        onselect 文本域被选中
       
        onsubmit
        onreset

【form表单的验证】:为form表单的onclick属性注册函数
01 var form = document.getElementById("form");
   form.onsubmit = function () { return true/false; }
02 直接在html-form标签中，使用 ：
        <form action="#" method="post" id="form">
       
【js-02】
dom
    01 get id tag class name
    02 createElement

Element
    01 setAttribute
    02 removeAttribute

Node
    01 appendChild
    02 removeChild
    03 replaceChild
    parentNode

【window三种弹窗】

    var name = window.prompt("请输入用户名：");
    var b = window.confirm("你叫" + name + "?");
    if(b){
        window.alert("原来你真的叫" + name);
    }else{
        window.alert("你骗我");
    }


【window定时器】
var t2 = window.setInterval("fn();",1000);//每隔多少时间执行一次
window.clearInterval(t2);

var t1= window.setTimeout("fun();",1000);//过多少时间执行该函数
window.clearTimeout(t1);


【历史栏】

window.history.forward(); 等价于 window.history.go(1);

window.history.back(); 等价于 window.history.go(-1);

window.history.length; 记录的是历史栏的个数


【地址栏】

window.location.reload(true);

window.location.href = "http://www.baidu.com";


【window打开窗口、关闭窗口】
var newWindow = window.open("http://www.baidu.com");
newWindow.close();


【通过a标签删除当前行】
a.setAttribute("onclick","deleteTr(this);");

function deleteTr(obj) {
    var table = obj.parentNode.parentNode.parentNode;
    var tr = obj.parentNode.parentNode;
    table.removeChild(tr);
}


【元素样式定义】

var div1 = document.getElementById("div1");
【style每个标签都有的属性】
div1.style.border = "1px solid red";
div1.style.fontSize = "30px";

【预先定义样式，然后通过className指定class属性数值】
div1.className = "cls1 cls2";