CSS-JavaScript-Jquery-Servlet

_YikL_

已于 2022-09-22 10:38:40 修改

阅读量662

点赞数 3

文章标签： css html java tomcat idea

于 2022-09-19 18:40:33 首次发布

本文链接：https://blog.csdn.net/weixin_54100307/article/details/126932626

版权

CSS

Cascading Style Sheet 关联层叠样式表

我们想要给html标签进行渲染加入一些修饰，达到视觉效果，书写CSS样式
样式一定是计算机上系统本身的样式表

CSS的使用

方式一 --> 行内样式，每一个html标签都有style属性

    style="样式属性：样式属性值"
    
弊端：
    一次只能控制一个标签，如果有同名的标签需要被同时控制，很不方便，产生很大的代码冗余
    
使用环境：
    开发中，如果某个标签只需要设置一个样式属性就使用此方式

方式二 --> 内联样式（内部样式）

    在head标签中书写style标签
        style标签体
            选择器{
                样式属性：样式属性值 ；
            }
            
弊端：
    CSS样式代码与html标签代码混在一块，不方便查阅与管理
            
使用环境：
    如果有同名的标签，可以使用选择器控制所有标签

方式三 --> 外联样式（外部样式）

将CSS代码单独放在文件名后缀为.css的文件，放在指定的CSS文件夹中

用法：
    link
        属性 href="CSS文件路径"
        固定属性 rel="stylesheet" 关联层叠样式表

2.CSS选择器

常用选择器

1>标签选择器
    标签名称{
        样式属性：属性值；
    }
2>类选择器 class选择器
    在标签指定class属性="class属性值"
        .class属性值{
            样式属性：属性值 ；
        }
3>id选择器
    在标签指定id属性 id="id属性值"
    在同一个页面中，id属性值必须唯一，js中dom编程，使用id获取对象，重复则获取不到就会报错
        #id属性值{
            样式属性：属性值 ；
        }

其他选择器

4>子元素选择器（交集选择器）
    选择器1 选择器2{
        样式属性：属性值 ；
    }
  选择器2是选择器1的子标签
5>并集选择器
    选择器1，选择器2{
        样式属性：属性值 ；
    }
6>通配选择器（全部选中）
    *{
        样式属性：属性值 ；
    }

伪类选择器

CSS的伪类：是描述元素的一种状态
    状态分类：
        1>link状态：
            鼠标没有访问过的状态
        2>hover状态：
            鼠标悬停在元素上的一种状态（经过）
        3>active状态：
            获取元素焦点状态（点击元素了但是没有松开）
        4>visited状态：鼠标访问过的状态，点击并松开了
       
    书写写法：
        选择器：状态名称（不区分大小写）{
            样式属性：属性值 ；
        }

注意

想不断的出现效果：必须遵守先后顺序
    顺序 link -> visited -> hover -> active

a:hover必须在CSS定义中的 a:link和a:visited之后，才能生效!a:active必须在CSS定义中的a : hover之后才能生效!
伪类名称对大小写不敏感。

前端里面CSS样式，鼠标经过状态用的最多

3.CSS边框样式属性

div标签：块标签，四个边
    边框的颜色样式简写属性：
        border-color：
    边框的宽度样式简写属性：
        border-width
    边框的样式简写属性（必需）:
        border-style：
     
特点：
    1>这些简写属性默认方向：
        上-->右-->下-->左
    2>某一边如果没有设置边框的颜色、宽度、样式
        对边会补齐颜色、宽度、样式
        
边框的简写属性：   
    border:border-width border-style（必须） border-color ;

solid:单实线 double:双实线 dotted:点线 dashde:虚线

4.CSS字体样式

font-family: 设置字体文本效果

font-size:设置字体文本大小

font-style: 属性用于设置字体样式
    normal  字体不会倾斜（正常体）
    italic 斜体
    oblique 倾斜（与斜体很相似，但是程度较低）

font-weight: 属性用于字体加粗
    写法一：
        lighter: 细体
        normal：正常
        bold：加粗
        bolder：更粗
    写法二：
        100 -- 细体
        400 -- 正常字体
        700 -- 加粗
        900 -- 更粗

font-family: 属性用于设置字体
    font-family：字体1，字体2，...
    浏览器会优先使用字体1，若是没有字体1就用字体2，往后类推...
    网页默认中文字体为宋体，谷歌浏览器默认微软雅黑
    在字体是中文的时候需要加引号，当英文字体名称为多个单词或者单词之间有空格时也需要加引号

字体的简写属性
    将所有的字体属性在一个样式声明中写好，方便，但是必须按照以下顺序书写，中间用空格隔开
    font:font-style font-weight font-size/font-height font-family

5.CSS文本样式

color:文本颜色
    方式一：颜色名称：英文单词
    方式二：十六进制数据        
        #ff0000 红色
        #00ff00 绿色
        #0000ff 蓝色
    方式三：rgb颜色表单

text-align:属性用于设置文本的水平对齐方式
    left 靠左
    right 靠右
    center 居中
    justify 两端对齐

text-decoration: 属性用于设置或者删除文本装饰
    none 取消下划线 ，不设置任何修饰
    underline 下划线
    overline 上划线
    line-through 中划线

text-transform: 属性用于文本转换
    uppercase 大写
    lowercase 小写
    capitalize 首字母大写
    
text-indent: 属性用于指定第一行文本缩进

letter-spacing: 属性用于指定文本中字符之间的间距

word-spacing:属性用于指定文本中单词之间的间距

line-height:属性用于指定文本行的行高（多行文本）
        还可用于垂直居中（当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐）

6.CSS浮动

CSS浮动： 
    当为某个标签（div）设置浮动的时候，此时这个标签就表现的是块框不存在一样，它可以向左,向右浮动,直到碰到其它块框就停止了
    作用：让元素横向排列
    特点：
        1>如果给一个元素加了浮动，那么他就会漂浮起来，不占据位置，后面的元素会上去补位。（脱离文档流，简称脱标）浮动是半脱标，因为浮动覆盖不了文字和图片。
        2>如果元素都添加浮动的话,那么会横向显示。如果都是左浮动，会从左侧开始往右排，如果都是右浮动，会从右侧开始往左排
        3>如果元素都加了浮动，剩余空间不足以横向排列，那么久自动换行显示
    浮动属性 float：
        float：left/right
            left 左浮动
            right 右浮动
    消除浮动 clear：
        clear：left/right
            left 左边不浮动，当前元素不受上一个左浮动元素的影响
            right 右边不浮动，当前元素不受上一个右浮动元素的影响
            both 两边都不浮动，当前元素不受上一个左右浮动元素的影响
        作用：清除浮动是清除前面浮动的元素对后面的元素造成的一些不好的影响的，而不是取消浮动。
        注意：清的是影响。

7.CSS盒子模型

万物皆盒子

将任何标签都看成一个盒子，使用div块标签将标签包裹起来

盒子的容量大小

width * height  可以指定像素或者占整个分辨率的百分比

盒子的厚度

border的大小

盒子的padding

就是盒子的内边距
    控制盒子的内容和边框线之间的距离

简写padding：
    默认的方向  上 --> 右 --> 下 --> 左

盒子的margin

就是盒子的外边距
    控制盒子之间的距离
    
简写margin：
    默认的方向  上 --> 右 --> 下 --> 左

8.CSS定位属性

绝对定位

    position：absolute ；
使用
    top:将整个盒子向下移动
    left:向右移动

相对定位

position:relative ;

固定定位

position:fixed ；
使用：
    top:将整个盒子向下移动
    left：向右移动

Javascript

>简称“js”--- 之前叫“Livescript”

1.js使用方式

使用方式一

在head标签中,style标签之后,书写script标签,里面书写js代码
弊端：
    js代码和html代码混合到一块儿,不利于管理

使用方式二

在js文件夹里面创建.js文件,把js文件放进去，在当前html页面导入外部js文件
导入方式：
    srcipt src="js文件路径"

常见的函数

    document.write("xxx") : 想浏览器输出内容
    console.log(xxx):在浏览器中的控制台输出日志内容
    window.alert("浏览器中弹提示框"); window可以不写(省略)
    在浏览器总打开确认提示
    flag = window.confirm("您忍心删除吗?") ;                     if(flag){
                    alert("删除了")
                }else{ 
                    alert("取消删除")
                }

2.Js中定义变量以及数据类型

变量定义

1>在js中定义变量使用var定义,var可以忽略不写,var可以定义任何类型
2>在js中,一个变量可以重复定义,后面的值会将前面的值覆盖掉
3>在js中,查看数据类型使用的函数typeof(变量名):查看这个变量的数据类型
        var a = 10;
        var b = 10;
        var f = new Object();
        document.write("a的数据类型是" + typeof (f))

数据类型

number
    无论是小数还是整数,都是number类型(基本数据类型) -- 自动提升浏览器内置对象Number
String
    无论是字符还是字符串.都是string类型 -- 自动提升为浏览器内置对象String
boolean
    自动提升为浏览器内置对象Boolean
object
    自动提升为浏览器内置对象Object(代表所有js对象的模板 基类)
undefined
    未定义类型 没赋值,没有意义

3.js的运算符以及流程控制语句

运算符

js弱类型语言,true代表数字1,flase代表数字0

算术运算符
    //+  -  *  /  %
        var a = 3;
        var b = 4;
        document.write("(a+b):" + (a+b) + "<br />");
        document.write("(a-b):" + (a-b) + "<br />");
        document.write("(a*b):" + (a*b) + "<br />");
        document.write("(a/b):" + (a/b) + "<br />");
比较运算符
        var x = 3;
        var y = 4;
        var z = 5;
        document.write((x > y) + "<br />");
        document.write((x < y) + "<br />");
        document.write((x != y) + "<br />");
        document.write((x == z) + "<br />");
        document.write((x >= z) + "<br />");
逻辑运算符
    逻辑单与 --- &  
    逻辑双与 --- && 
    逻辑单或 --- | 
    逻辑双或 --- ||
    逻辑非 --- !
    逻辑异或 --- ^
    //表示并列关系:多个条件必须同时满足逻辑双与&& ,跟Java一样,左边为false,右边不执行!  
    //表示或的关系:多个条件满足一条件即可 ||, 跟Java一样,左边true,右边不执行!
        var m = 3 ;
        var n = 4 ;
        document.write("m:"+m+"<br/>") ;
        document.write("n:"+n+"<br/>") ;
        document.write(((++m)==3) && ((--n)==4)+"<br/>") ;
        document.write("m:"+m+"<br/>") ;
        document.write("n:"+n+"<br/>") ;
三元运算符
    (表达式)?执行true的结果:执行false的结果
        var age = 15 ;
        document.write((age>18)?"成年人":"未成年人") ;

流程控制语句

一、选择结构语句:
1>if语句:
    表示判断
        格式1:
                if(表达式){  //如果这个表达式是非空字符串，条件成立，否则不成立（null，空对象）
                     语句
                }
    针对多种情况
        格式2:
            针对多种情况
                if(表达式){
                    语句1;
                }else{
                    语句2;
                }
        格式3:
                if(表达式){
                    语句1;
                }else if(表达式2){
                    语句2;
                }else{
                    语句n;
                }
2>switch语句:
                switch(表达式){
                    case 值1:
                            语句1;
                            break;
                    case 值2:
                            语句2:
                            break;
                    ...
                    default:
                            语句n;
                    }
// 注：case语句的值可以是变量,也可以是常量
二、循环结构语句:
    1>for
    2>while
    3>do...while(循环体至少执行一次)
    4>for-in语句:用来遍历数组/自定义对象的属性(类似于Java中的增强for)
            js中创建一个数组
                var arr = new Array(5);  动态初始化
                var 对象名 = new Array()[元素1,元素2,...];
                for(var 变量名 in 数组对象名或者自定义对象名){
                            使用对象名[索引值];
                }

4. js中的函数定义以及调用

定义函数

function 函数名（形参1，形参2，...）{
      直接在函数里面完成逻辑并输出
}

调用

1> 单独调用
            函数名(实际参数列表) ；
2> 赋值调用
            var 结果变量 = 函数名称（实际参数列表）；

注意事项

1>定义函数的时候，函数名上的形式参数不能带var
2>定义函数的时候，虽然js没有返回值类型，但是函数依然可以用return关键字
3>在js中，没有方法重载的概念，后面定义的方法会将前面定义的方法覆盖
    当实际参数列表个数 < 形式参数列表个数的时候，函数依然会走，结果是NaN （没有值）
    当实际参数列表个数 > 形式参数列表个数的时候，函数会走，将前面的实际参数进行赋值然后进行运算，多的实际参数不会赋值和运算
4>函数内置一个数组，arguments 作用：就是将实际参数赋值给形参，可以进行遍历获取形参的值

5.事件三要素

1>事件源---就是html标签
2>编写监听器---就是编写一个函数
3>绑定事件监听器--- 就是在事件源上通过一些属性on事件名称=函数名称（）

<body>
    <!-- 1>事件源 -->
    <!-- 3>οnclick="myclick()" 绑定事件监听器  onclick 单击事件属性 -->
    <input type="button" value="查询" onclick="myclick()">
</body>
<script>
        //2>编写监听器
        function myclick() {
            alert("666")
        }
</script>

5.js内置对象

Stirng

创建字符串对象
    var 对象名 = new String（“字符串值”）
方法
    charAt(inded)返回指定索引处的字符
    concat（str）：拼接一个字符串，返回一个新的字符串
    fontcolor（颜色名）：对字符串进行颜色标记
    indexof（str）查询子字符串在大串第一次出现的索引值
    spilt（str）使用指定的分隔符将字符串拆分字符串数组
        不可用字符串接受 ，用数组 然后遍历
    join（str）：使用分隔符号，将数组的元素拼接成字符串

Array

创建数组（三种方式）
    1>没有指定长度
        arrayObj = new Array()  没有指定长度
    2>指定长度
        arrayObj = new Array([size])  指定长度
    3> 静态初始化
        arrayObj = new Array([element0[, element1[, ...[, elementN]]]])
            第三种方式可以简写为
                arrayObj = [元素1，元素2，元素3...]
注意事项：
        js中没有角标越界这么一说，可以不断扩容
       虽然js的数组可以任何类型元素，但是推荐存储同一种类型

6.面试题

InnerHTML和InnerText两者之间的区别

相同点：
    这两个都可以给任何标签设置文本
不同点：
    innerHTML属性:可以渲染html标签
    innerText属性:只是指定标签体中的文本内容

7.网页时钟

function time() {
        //1>创建日期对象
        var date = new Date();
        //2>拼接出日期时间
        var datestr = date.getFullYear() + "-" +
            (date.getMonth() + 1) + "-" +
            date.getDate() + "&ensp;&ensp;" +
            date.getHours() + ":"
            + date.getMinutes() + ":"
            + date.getSeconds() + "&ensp;&ensp;" +
            ("星期" + date.getDay());
        //3>dom操作
        //获取span标签对象
        var span = document.getElementById("s1");
        //4>设置span标签
        span.innerHTML = "<h2>" + datestr + "</h2>";
    }
        网页时钟两种
            window对象的方法(window可以不写)
            setInteval("函数()",时间毫秒值):每经过这个毫秒值,重复执行这个任务函数
            settimeout("函数()",时间毫秒值):经过毫秒值后,执行一次任务
    //设置每秒重新显示事件
    setInterval("time()", 1000);

8.自定义对象

自定义对象 : 格式和定义函数的格式一样

方式一: —> 类似于Java中的有参构造方法

    function 对象(形参列表){
            追加属性
            追加属性
        }
    创建对象
    var 对象名 = new 对象(实际参数列表) ;

方式二: —> 类似于Java中的无参构造方法

    function 对象(){
     }
创建对象
    var 对象名 = new 对象(){
    追加属性
        对象名.属性名 = "属性值"
    追加方法
        对象名.方法名 = function(形参){
    }

方式三: —> 利用Object:代表所有js对象的模板

    var 对象名 = new Object();
直接追加属性
        对象名.属性名 = 值;
直接追加功能
        对象名.方法名 = function(){
                ...
        }

方式四: —> 字面值的方式:json数据(重点)
{“key”:value}

普通格式:{}----代表json对象(描述类似于ava实体)
            var student=
            {
                //追加属性
                "name":"杨银礼",
                "age":20,
                //追加方法名
                "stydy":function(){
                    alert("学习JavaEE") ;
                }
            }
            //访问name属性: 对象名.key
            alert("姓名是:"+student.name) ;
            //访问方法
            studnet.study

复杂格式--类似数组格式
            var student =
                [
                    {"key":value,"key":value...},{"key":value}....
                ];
                //输出
                //对象名[索引值].key  获取value

Map 更复杂
            var 对象名 =
                {
                    "key":[
                        {"key":value,"key":value...},{"key":value}....
                    ]
                }
            //获取
            对象名.key索引值.key1

9.dom操作

1>标签中有唯一属性值获取
    document.getElementById("id属性值"):获取指定的标签对象
2>所有同名class属性值
    document.getElementsByClassName( "class属性值"):获取的是标签对象列表
3>通过同名name属性值(在一个html页面所有同名name属性值)
    document.getElementsByName("name属性值")
4>通过标签名称获取标签对象,返回的也是标签对象列表
    document.getElementsByTagName("标签属性值")

10.常用事件分类

点击相关的事件
        单击 onclick (频繁使用)
        双击 ondblclick
    和焦点相关的事件
        获取焦点 onfocus
        失去焦点 onblur
    和选项卡发生变化相关的事件
        onchange  经常用在下拉菜单
    鼠标经过事件
        onmouseover
    鼠标移出事件
        onmouseout
    页面载入事件
        onload 页面载入完成触发

11.正则表达式

使用正则表达式对象.test(获取用户输入的内容的字符串)
    var 正则表单对象名 = /正则表达式语法/ ;  基本格式
不完全匹配
    数量词相关的语法
        X+：X出现一次或者多次
        X？:X出现0次或1次
        X*：X出现0次或者多次
    范围相关的:
       X{n,m}:X字符至少出现n次不超过m次
       X{n,}:X字符至少出现n次
       X{n}:X字符恰好出现了n次
       X[A-Za-z0-9_] 匹配数字或者字母(不区分大小写)或下划线 --等价于\w
       X[0-9] 匹配纯数字 等价于\d
完全匹配(实际开发使用) 和java语言差不多  需要写上边界匹配符号
      边界符号: ^ -- 以什么开头
                  $ -- 以什么结尾
var 正则表达式对象名=/^正则表达式语法$/ ;
        
// 注：X字符本身就是. -- 必须要转义\.

JQuery

Jquery 丰富的js库，大量的api（ajax，dom操作，事件处理，都有自己的功能）

1>导入js库
        导入压缩js文件（Jquery-版本号-min.js）
    注：实际项目上线的时候，使用压缩格式
 2>Jquery的程序--
        需要有页面载入事件--
        body内容加载完毕，里面完成具体逻辑

1.js和jquery对象之间的转换

原生js标签对象–>jquery标签对象（重点）

     1>获取标签对象
            dom操作
     2>将js标签对象转换成Jquery对象
            var $(Jquery对象) = $(js标签对)
     3>改变文本框的value值
             $(Jquery对象).val("替换文本")

js标签对象–>jquery标签对象

   //页面载入事件
   $(function{
        //点击按钮--- 获取按钮的Jquery对象
        $("#id").click(function{
       //Jquery提供了一个方法get(index)--通过索引值获取第几个元素（index从0开始）
                var inputjs = $("#id").get(0);//Jquery对象转换成js
                inputjs.value = "替换文本"
            })
        }) ;

2.jquery的文本

原生写法

通过id获取标签对象
        var span = document.getElementById("span");
设置文本
        span.innerHTML/innerText="<h1>daa</h1>" ;

Jquery

将两者转化为了方法html()/text()
获取Jquery对象并使用函数设置文本
    $("#id").函数("设置文本")
获取标签文本
    var 对象名 = $("#id").函数()

3.jquery的选择器

基本选择器

Jquery的id选择器
    $("#id属性值")获取Jquery标签对象
        改变样式----Jquery提供css("样式属性名称"","属性值”);
        改变多个样式 -- Jquery提供css("样式属性名称":"属性值","样式属性名称":"属性值","样式属性名称":"属性值")
Jquery的element选择器
    $("标签名称") 获取标签对象
Jquery的class选择器-- 类选择器
    $(".class属性值") 获取Jquery的标签对象
Jquery的并集选择器
    $("标签名称,#id属性值,.class属性值...") 获取Jquery的标签对象

层级选择器

后代选择器
    在给定的祖先元素下匹配所有的后代元素
            不分层级关系
        $("祖先元素 后代元素")
子元素选择器
        $("父元素>子元素")

属性选择器

1>[attribute]匹配包含给定属性的元索 -- 获取带有指定属性的标签对象
        $("标签名[属性]")
2>[attribute = value]匹配包含给定属性以及属性值的元素 -- 获取带有指定属性以及指定属性值的标签对象
        $("标签名[属性=属性值]")
3>[attribute != value] 反选,匹配包含给定属性以及属性值的元素 -- 获取带有指定属性以及指定属性值的标签对象
        $("标签名[属性 != 属性值]")
4>[attribute ^= value] 匹配给定的属性是以某些值开始的元素
        $("标签名[属性 ^= 属性值]")
5>[attribute $= value] 匹配给定的属性是以某些值结尾的元素
        $("标签名[属性 $= 属性值]")
6>[attribute*=value] 匹配给定的属性是以包含某些值的元素
        $("标签名[属性 *= 属性值]")
7>[selector1][selector2][selectorN] 复合属性选择器，需要同时满足多个条件时使用。
        $("标签名[属性][属性 = 属性值]")

Servlet

简称Server Applet ，Java服务连接器，主要功能是交互式地浏览和生成数据，生成动态Web内容。
运行在Web服务器上
本质就是能够实现Servlet接口的普通的类
狭义：是一个接口
广义：要实现Servlet接口的类（需要下载servlet-api.jar）
开发服务器端程序需要有一个Web服务器（tomcat服务器）

Web服务器

tomcat--开源      Apache---理论并发访问量 500个
Nginx服务器----(处理高并发负载均衡去使用的)---支持5万个并发
tomcat下载地址：
    tomcat.apache.org

Servlet入门

1>导入servlet-api.jar包
2>在项目src下新建自定义类继承HttpServlet
3>配置servlet在web根目录中的WEB-INF文件夹的web.xml
4>访问后端接口地址

在项目src下新建自定义类继承HttpServlet

public class MyServlet_01 extends HttpServlet {
    //重写doGet和doPost

    /**
     *  get请求
     * @param request 请求对象
     * @param response 响应对象
     * @throws ServletException
     * @throws IOException
     */
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //实现自己的业务逻辑
        //向浏览器响应内容---如果有中文，解决中文乱码问题
        //tomcat8以后的版本get请求不需要解决中文乱码，但是浏览器响应需要解决中文乱码
       // "text/html;charset=utf-8"固定格式
        response.setContentType("text/html;charset=utf-8");
        //响应内容
        response.getWriter().write("这是第一个servlet项目");
    }

    /**
     *  Post请求
     * @param request   请求对象
     * @param response  响应对象
     * @throws ServletException
     * @throws IOException
     */
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //复用doGet，在doGet和doPost接收前端数据的时候，后端获取的方式一样
        doGet(request,response);
    }
}

配置servlet在web根目录中的WEB-INF文件夹的web.xml

配置servlet在web根目录中的WEB-INF文件夹的web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
<!-- 全局配置，因为涉及到项目全局 所以再更改的时候需要重启项目  -->
    <!-- Servlet基本配置 -->
    <servlet>
        <!-- Servlet名称可自定义，建议和当前自定义类名一致 -->
        <servlet-name>MyServlet_01</servlet-name>
        <!-- 当前自定义类的全限定名称 -->
        <servlet-class>test.demo.MyServlet_01</servlet-class>
    </servlet>
    <!-- servlet的映射配置 -->
    <servlet-mapping>
        <!-- 与上面servlet名称保持一致 -->
        <servlet-name>MyServlet_01</servlet-name>
        <!-- 访问的映射路径
            必须以“/”开头 不能用“/”结尾
            这个url-pattern必须唯一，映射的网页是唯一的
         -->
        <url-pattern>/index</url-pattern>
    </servlet-mapping>
</web-app>

访问后端接口地址

http://localhost:8080/ServletTest_Day5_war_exploded/index
    uri(统一资源标识符) : /ServletTest_Day5_war_exploded/index
    url(统一资源定位符) : http://localhost:8080/ServletTest_Day5_war_exploded/index
url是uri的子集 ，因为url的协议是确定的，而uri则可以配置不同的协议

Servlet执行流程

1>浏览器向服务器发送请求http://localhost:8080/ServletTest_Day5_war_exploded/index            
--------------------第一步需要我们自己操作-----------------
--------------------剩余则由服务器进行处理-----------------
2>tomcat服务器接收请求--->解析第一步url中的uri
3>找到web的上下文路径下面的WEB-INF中的资源文件web-xml
    3.1>顺序为由下到上：
            找到url-pattern--->找到Servlet名称
            通过映射配置里面的servlet-name找到基本配置里的servlet名称
            通过servlet名称找到全限定名称servlet-class
4>通过全限定名称，tomcat服务器通过反射获取这个类的字节码文件对象
            Class c = Class.forName("全限定名称")
5>创建自定义类对象（反射)
            Object obj = c.newIntance() ;
6>调用doXXX方法---通过字节码文件对象获取成员方法method
            Method m = c.getDeclaredMethod("doGet",HttpServletRequest.class, HttpServletResponse.class)
            //因为doXXX方法是受保护的，所以需要获取getDeclaredMethod有参构造获取方法
7>解析doXXX ---> 响应信息呈现给用户

Servlet层次结构(了解)

自定义类--extends-->
    HttpServlet--textends-->
        GenericServlet--implements-->
            Servlet 接口
Servlet定义了相关生命周期方法：
    init -- Servlet的初始化
    server -- 具体的业务服务方法
    destroy-- 销毁
GenericServlet 抽象类 
    完成了init初始化
HttpServlet 抽象类
    实现server方法
        服务器获取前端你的提交方式，根据不同的提交方式执行不同的doXXX方法
自定义类：
    覆盖doXXX方法实现我们自己的业务逻辑
    
注：
    destroy-- 销毁 这个方法在我们自己停止服务器时就会启动。

Servlet生命周期

Servlet是单例的！（单例设计模式===属于创建型设计模式（创建对象））

1>初始化阶段,调用构造方法生成Servlet实例
2>调用初始化方法：Servlet中的init()方法
3>响应客户端请求阶段，调用service()方法。由service()方法根据提交方式选择执行doGet()或者doPost()方法
4>终止阶段，调用destroy()方法

构造方法和初始化都只执行一次
server方法可以无限调用
关闭服务器调用destory()方法

单例模式

Java提供了Runtime—标准的单例模式之饿汉式–Java应用程序获得计算机相关环境的信息

单例设计模式是创建型设计模式的一种
单例设计模式思想：在内存中始终创建一个对象
两种模式

饿汉式：不会出现安全问题的单例模式

1>当前类的无参构造方法私有化
2>在类的成员位置，创建一个当前类的实例（实例变量）私有的,类一加载就立即创建当前类对象
3>对外提供一个静态的公共访问方法，返回值是当前类本身

class Student{

    //提供一个Student实例
    private static Student student = new Student;
    
    //私有化构造方法
    private Student(){}

   //提供静态公共方法
   public static Student getStudent(){
        return student;
   }
}

懒汉式：可能出现安全问题的单例模式

1>无参构造方法私有化
2>在当前类的成员位置提供一个私有的静态的 当前类型的变量
3>对外还有提供公共的静态方法，返回值是当前类本身
         懒加载：按需加载
             解决线程安全问题需要判断,类一加载不会立即去创建对象，而是去判断，如果为null，才去new

class Teacher{

    //声明一个Teacher类型变量
    private staic Teacher teacher;
    
    //私有化无参构造方法
    private Teacher(){}
    
    //对外提供公共方法,返回值类型为Teacher
    public static Teacher getTeacher(){
        synchronized(Teacher.class){
            if(teacher==null){ //判断teacher是否为空
                teacher = new Teacher();  //如果是,则创建对象
            }
        }
        return teacher;
    }
}