javaWeb核心技术第六篇之BootStrap

概述:
        bootstrap 是最受欢迎的 html、css 和 js 框架，用于开发响应式布局、移动设备优先的 web 项目。
        作用:
            开发响应式的页面
            响应式:就是一个网站能够兼容多个终端
            节约开发成本,提高开发效率
    入门:
        下载bootstrap
            www.bootcss.com 官网地址
        模版
            1.导入bootstrap的css
            2.导入jquery的js(1.8+)
            3.导入bootstrap的js
            4.设置视口(支持移动设备)
            <meta name="viewport" content="width=device-width, initial-scale=1">
            5.添加一个布局容器
                通过div设置一个 class
                    方式1:class="container"
                    方式2:class="container-fluid"
    核心:
        全局css
        设置全局 css 样式；基本的 html 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。
            媒体查询(了解)
            默认有一些分辨率临界点的阀值
                分辨率                    屏幕大小
                分辨率>=1200px            超大屏幕
                992<=分辨率<1200        中等屏幕
                768<=分辨率<992            小屏幕
                分辨率<768                超小屏幕
            栅格系统★
            在不同分辨率的屏幕下展示不同的效果,根据不同的上网设备,栅格系统将屏幕分成一系列的行(row)和列(column),由行和列来创建页面布局,注意栅格系统必须放在布局容器内使用
                行:
                通过class = "row"来设置一行
                列(最多将视口分为12列)
                通过class属性来设置在不同屏幕是所占的列    n表示每格占的份数
                    col-lg-n        大屏            分辨率>=1200
                    col-md-n        中屏            992<=分辨率<1200
                    col-sm-n        小屏            768<=分辨率<992px
                    col-xs-n        超小屏        分辨率<768px
                    
案例:
<div class="container">
            <div class=" col-md-2 col-sm-3 hidden-xs" style="border: solid 1px red;height: 20px;">1</div>
            <div class=" col-md-2 col-sm-3 col-xs-6" style="border: solid 1px red;height: 20px;">2</div>
            <div class=" col-md-2 col-sm-3 col-xs-6" style="border: solid 1px red;height: 20px;">3</div>
            <div class=" col-md-2 col-sm-3 col-xs-6" style="border: solid 1px red;height: 20px;">4</div>
            <div class=" col-md-2 col-sm-3 col-xs-6" style="border: solid 1px red;height: 20px;">5</div>
            <div class=" col-md-2 col-sm-3 col-xs-6" style="border: solid 1px red;height: 20px;">6</div>
            <div class=" col-md-2 col-sm-3 col-xs-6" style="border: solid 1px red;height: 20px;">7</div>
            <div class=" col-md-2 col-sm-3 col-xs-6" style="border: solid 1px red;height: 20px;">8</div>
            <div class=" col-md-2 col-sm-3 col-xs-6" style="border: solid 1px red;height: 20px;">9</div>
            <div class=" col-md-2 col-sm-3 col-xs-6" style="border: solid 1px red;height: 20px;">10</div>
            <div class=" col-md-2 col-sm-3 col-xs-6" style="border: solid 1px red;height: 20px;">11</div>
            <div class=" col-md-2 col-sm-3 col-xs-6" style="border: solid 1px red;height: 20px;">12</div>
        </div>
                    
            响应式工具:
                显示:
                    .visible-xs        超小屏可见
                    .visible-sm        小屏可见
                    .visible-md        中等屏幕可见
                    .visible-lg                大屏可见
                隐藏:
                    .hidden-xs        超小屏时隐藏
                    .hidden-sm        小屏幕时隐藏
                    .hidden-md        中等屏幕时隐藏
                    .hidden-lg        大屏幕时隐藏
            标题:
                .h1 -- .h6
            对齐方式:(文本)
                .text-left    左对齐
                .text-center居中
                .text-right    右对齐
            列表:
                .list-unstyled    移除默认的列表样式
                .list-inline    将所有列表项放置同一行
            表格:bootstrap给表格添加了默认样式
                .table        普通表格
                .table-striped         条纹表格(ie8不支持)
                .table-bordered        边框表格
                .table-hover         带有鼠标悬停的表格
                .table-condensed     紧缩表格
            表单:
                垂直表单:
                内联表单:(将所有内容放在同一行)
                水平表单:
            按钮:★
                .btn     为按钮添加基本样式
                .btn-default     默认/标准按钮
                .btn-primary    原始按钮样式（未被操作）
                .btn-success     表示成功的动作
                .btn-info 该样式可用于要弹出信息的按钮
            图片:
                .img-rounded     为图片添加圆角 (ie8 不支持)
                .img-circle     将图片变为圆形 (ie8 不支持)
                .img-responsive 图片响应式
        组件
        无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。
            下拉选:
            导航条:
        javascript插件
        jquery 插件为 bootstrap 的组件赋予了“生命”。可以简单地一次性引入所有插件，或者逐个引入到你的页面中。
            图片轮播

综合案例:

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title></title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script>
            $(function() {
                $('.carousel').carousel({
                    interval: 1000
                })
            });
        </script>
    </head>

    <body>
        <div class="container">
            <!--1.topbar-->
            <div class="row text-center">
                <!--img1:中等屏幕时占4份,在小屏时占6份,在超小屏时占12份
                    img2:中等屏幕时占4份,在小屏时隐藏,在超小屏时占12份
                    超链接:中等屏幕时占4份,在小屏时占6份,在超小屏时占12份-->
                <div class="col-md-4 col-sm-6">
                    <img src="img/logo2.png" />
                </div>
                <div class="col-md-4 hidden-sm">
                    <img src="img/header.jpg" />
                </div>
                <div class="col-md-4 col-sm-6 text-center" style="padding-top: 20px;">
                    <a href="#" class="btn btn-default">登录</a>&nbsp;&nbsp;
                    <a href="#" class="btn btn-default">登录</a>&nbsp;&nbsp;
                    <a href="#" class="btn btn-default">登录</a>
                </div>
            </div>
            <!--2.导航条-->
            <div class="row">
                <nav class="navbar navbar-inverse">
                    <div class="container-fluid">
                        <!-- brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                      </button>
                            <a class="navbar-brand" href="#">首页</a>
                        </div>
                        <!-- collect the nav links, forms, and other content for toggling -->
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav">
                                <li class="active">
                                    <a href="#">手机数码 <span class="sr-only">(current)</span></a>
                                </li>
                                <li>
                                    <a href="#">电脑办公</a>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">dropdown <span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="#">action</a>
                                        </li>
                                        <li>
                                            <a href="#">another action</a>
                                        </li>
                                        <li>
                                            <a href="#">something else here</a>
                                        </li>
                                        <li role="separator" class="divider"></li>
                                        <li>
                                            <a href="#">separated link</a>
                                        </li>
                                        <li role="separator" class="divider"></li>
                                        <li>
                                            <a href="#">one more separated link</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                            <form class="navbar-form navbar-right">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="search">
                                </div>
                                <button type="submit" class="btn btn-default">submit</button>
                            </form>
                        </div>
                        <!-- /.navbar-collapse -->
                    </div>
                    <!-- /.container-fluid -->
                </nav>

            </div>
            <!--3.轮播图-->
            <div class="row">
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                    <!-- indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                    </ol>

                    <!-- wrapper for slides -->
                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <img src="./img/1.jpg" alt="...">
                            <div class="carousel-caption">
                                欢迎你...
                            </div>
                        </div>
                        <div class="item">
                            <img src="./img/2.jpg" alt="...">
                            <div class="carousel-caption">
                            </div>
                        </div>
                        <div class="item">
                            <img src="./img/3.jpg" alt="...">
                            <div class="carousel-caption">
                            </div>
                        </div>
                    </div>

                    <!-- controls -->
                    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">previous</span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">next</span>
                    </a>
                </div>
            </div>
            <!--4.热门商品-->
            <div class="row">
                <div>
                    <span class="h2">热门商品</span><img src="img/title2.jpg" />
                </div>
                <!--下div:
            左div:中等屏幕时占2份,小屏和超小屏隐藏
                图片
            右div:中等屏幕时占10份,小屏和超小屏占12份
                middle div:中等屏幕时占6份,小屏和超小屏隐藏
                    图片
                商品div:中等屏幕时占2份,小屏占4份,超小屏时占6份
                    图片 2个p标签-->
                <div class="row">
                    <!--左div:中等屏幕时占2份,小屏和超小屏隐藏
                    图片-->
                    <div class="col-md-2 hidden-sm hidden-xs">
                        <img src="img/big01.jpg" width="100%" height="100%" />
                    </div>
                    <!--右div:中等屏幕时占10份,小屏和超小屏占12份
                        -->
                    <div class="col-md-10">
                        <!--middle div:中等屏幕时占6份,小屏和超小屏隐藏
                            图片-->
                        <div class="col-md-6 hidden-sm hidden-xs">
                            <img src="img/middle01.jpg" width="100%" height="180px" />
                        </div>
                        <!--商品div:中等屏幕时占2份,小屏占4份,超小屏时占6份
                            图片 2个p标签-->
                        <div class="col-md-2 col-sm-4 col-xs-6 text-center">
                            <img src="img/small08.jpg" />
                            <p>妹子</p>
                            <p>288</p>
                        </div>
                        <div class="col-md-2 col-sm-4 col-xs-6 text-center">
                            <img src="img/small08.jpg" />
                            <p>妹子</p>
                            <p>288</p>
                        </div>
                        <div class="col-md-2 col-sm-4 col-xs-6 text-center">
                            <img src="img/small08.jpg" />
                            <p>妹子</p>
                            <p>288</p>
                        </div>
                        <div class="col-md-2 col-sm-4 col-xs-6 text-center">
                            <img src="img/small08.jpg" />
                            <p>妹子</p>
                            <p>288</p>
                        </div>
                        <div class="col-md-2 col-sm-4 col-xs-6 text-center">
                            <img src="img/small08.jpg" />
                            <p>妹子</p>
                            <p>288</p>
                        </div>
                        <div class="col-md-2 col-sm-4 col-xs-6 text-center">
                            <img src="img/small08.jpg" />
                            <p>妹子</p>
                            <p>288</p>
                        </div>
                        <div class="col-md-2 col-sm-4 col-xs-6 text-center">
                            <img src="img/small08.jpg" />
                            <p>妹子</p>
                            <p>288</p>
                        </div>
                        <div class="col-md-2 col-sm-4 col-xs-6 text-center">
                            <img src="img/small08.jpg" />
                            <p>妹子</p>
                            <p>288</p>
                        </div>
                        <div class="col-md-2 col-sm-4 col-xs-6 text-center">
                            <img src="img/small08.jpg" />
                            <p>妹子</p>
                            <p>288</p>
                        </div>
                    </div>
                </div>
            </div>
            <!--5.图片-->
            <div class="row">
                <img src="img/ad.jpg" width="100%" />
            </div>
            <!--6.热门商品-->
            <div class="row">
                <div>
                    <span class="h2">热门商品</span><img src="img/title2.jpg" />
                </div>
                <!--下div:
            左div:中等屏幕时占2份,小屏和超小屏隐藏
                图片
            右div:中等屏幕时占10份,小屏和超小屏占12份
                middle div:中等屏幕时占6份,小屏和超小屏隐藏
                    图片
                商品div:中等屏幕时占2份,小屏占4份,超小屏时占6份
                    图片 2个p标签-->
                <div class="row">
                    <!--左div:中等屏幕时占2份,小屏和超小屏隐藏
                    图片-->
                    <div class="col-md-2 hidden-sm hidden-xs">
                        <img src="img/big01.jpg" width="100%" height="100%" />
                    </div>
                    <!--右div:中等屏幕时占10份,小屏和超小屏占12份
                        -->
                    <div class="col-md-10">
                        <!--middle div:中等屏幕时占6份,小屏和超小屏隐藏
                            图片-->
                        <div class="col-md-6 hidden-sm hidden-xs">
                            <img src="img/middle01.jpg" width="100%" height="180px" />
                        </div>
                        <!--商品div:中等屏幕时占2份,小屏占4份,超小屏时占6份
                            图片 2个p标签-->
                        <div class="col-md-2 col-sm-4 col-xs-6 text-center">
                            <img src="img/small08.jpg" />
                            <p>妹子</p>
                            <p>288</p>
                        </div>
                        <div class="col-md-2 col-sm-4 col-xs-6 text-center">
                            <img src="img/small08.jpg" />
                            <p>妹子</p>
                            <p>288</p>
                        </div>
                        <div class="col-md-2 col-sm-4 col-xs-6 text-center">
                            <img src="img/small08.jpg" />
                            <p>妹子</p>
                            <p>288</p>
                        </div>
                        <div class="col-md-2 col-sm-4 col-xs-6 text-center">
                            <img src="img/small08.jpg" />
                            <p>妹子</p>
                            <p>288</p>
                        </div>
                        <div class="col-md-2 col-sm-4 col-xs-6 text-center">
                            <img src="img/small08.jpg" />
                            <p>妹子</p>
                            <p>288</p>
                        </div>
                        <div class="col-md-2 col-sm-4 col-xs-6 text-center">
                            <img src="img/small08.jpg" />
                            <p>妹子</p>
                            <p>288</p>
                        </div>
                        <div class="col-md-2 col-sm-4 col-xs-6 text-center">
                            <img src="img/small08.jpg" />
                            <p>妹子</p>
                            <p>288</p>
                        </div>
                        <div class="col-md-2 col-sm-4 col-xs-6 text-center">
                            <img src="img/small08.jpg" />
                            <p>妹子</p>
                            <p>288</p>
                        </div>
                        <div class="col-md-2 col-sm-4 col-xs-6 text-center">
                            <img src="img/small08.jpg" />
                            <p>妹子</p>
                            <p>288</p>
                        </div>
                    </div>
                </div>
            </div>
            <!--7.图片-->
            <div class="row">
                <img src="img/footer.jpg" width="100%" />
            </div>
            <!--8-->
            <div class="row text-center">
                <p>
                    <ol class="list-unstyled list-inline">
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">联系我们</a></li>
                    </ol>
                </p>
                <p>copyright &copy; 2005-2016  版权所有</p>
            </div>
        </div>
    </body>

</html>



案例-将我们的项目发布出去
    需求分析:
        将我们编写好的(web项目)项目放到服务器上,这样以来用户就可以通过网络访问到我们的(web项目)项目了
    技术分析:
        web服务器
        web项目
        http协议
    //////////////////////////
    http://localhost/webdemo/html/hello.html   get

///////////////////
day33http&tomcat

- web服务器
  - 概念:
    - web资源:
      "英文直译"网"的意思
      资源:一切数据文件
      web资源:通过网络可以访问到的资源,通常指的是一切放在服务器上的文件"
    - web资源的分类:
      - 静态的web资源:
        "    内容是一成不变的"
      - 动态的web资源:
        "    内容有可能在不同的时间或者不同的人访问的时候会发生改变的"
    - web技术分类
      - 静态的web技术
        "    例如: html  css  js  ....."
      - 动态的web技术
        "    例如:servlet  jsp"
    - 软件的架构
      - c/s架构(client/server   客户端/服务器)
        "    例如:qq  迅雷  lol"
      - b/s架构(browser/server   浏览器/服务器)
        "    例如:京东  淘宝  "
      - 区别
        - c/s:需要客户下载客户端,页面比较炫,和服务器交互少,可以在客户端处理部分业务逻辑,可降低服务器的压力.需要维护客户端和服务器端
        - b/s:只需要客户有一个浏览器,一切页面从服务器加载,和服务器交互频繁,由服务器处理业务逻辑,服务器压力较大.只需要维护服务器端.
    - 通讯机制
      - 基于http协议
        - 浏览器发送给服务器的内容:请求(request)
        - 服务器返回给浏览器的内容:响应(response)
        - 注意:先有请求,后有响应,一次请求对应一次响应
  - web服务器
    - 作用:将我们编写好的网页发布出去,别人就可以通过网络访问
    - 常见的web服务器
      "名称        厂商            特点
      weblogic     oracle        大型的收费的支持javaee所有规范的web服务器(servlet和jsp)
      websphere     ibm            大型的收费的支持javaee所有规范的web服务器(servlet和jsp)
      tomcat     apache        小型的免费的支持servlet和jsp规范的"web服务器""
    - tomcat服务器★
    
        tomcat如何优化?    
            1: 优化连接配置.修改连接数,关闭客户端的dns查询(dns查询需要占用网络，再获取对方ip的时候会消耗一定的时间)
            2: 优化jdk,扩大tomcat使用的内存,默认为128m
      - 下载
        - http://tomcat.apache.org/download-70.cgi
        - core:
          - zip:可以在window上运行的(我们今天使用)
          - tar.gz:运行在linux上的
      - 安装
        - 解压缩即可
      - 目录结构
        - bin:存放可执行的文件
        - ★conf:存放配置文件
        - lib:存放的是tomcat运行时和项目运行时必须的jar包
        - logs:存放的是日志文件(catalina.out)
        - temp:存放临时文件(不用管)
        - ★★webapps:存放要发布的web项目
        - ★work:存放项目运行时产生的java文件和class文件
      - 启动
        "    双击 tomcat目录下/bin/startup.bat"
      - 关闭
        "    方式1:点 x
            方式2:ctrl + c
            (记住)方式3:双击 tomcat目录下/bin/shutdown.bat"
      - 配置
        - 常见问题
          - 一闪而过
            "查看java_home是否配置正确"
          - 端口占用: 可以修改tomcat的端口号
            "修改 tomcat目录下/conf/server.xml 大约70行
                             <connector port="8080" protocol="http/1.1"
                               connectiontimeout="20000"
                               redirectport="8443" />
                        需要将 8080 修改成其他的端口号
                        端口号:0~65535
                            0~1024:系统预留的端口号 一般不要使用 但是可以使用80端口
                            80端口是http协议的默认端口号,访问的时候可以不写端口号"
      - 访问格式
        - tomcat的访问路径(8080是tomcat的默认的端口号)
          "    http://localhost:8080"
        - 格式:http://ip地址:端口号/项目名/资源?参数名称=值&参数名称=值
- web项目
  - 目录结构:★
    "myweb(目录名:项目名)
                |
                |---资源文件  html img css js
                |---web-inf(目录:特点,通过浏览器直接访问不到)
                |        |
                |        |---lib(目录:项目运行的jar包)
                |        |---classes(目录:存放的class文件)
                |        |---web.xml(核心配置文件,在servlet2.5版本中必须有,serlvet3.0版本不是必须的)"
  - 项目访问路径:
    "http://localhost:80/myweb/1.html
    协议://ip地址:端口/项目名称/资源"
  - tomcat和eclipse整合  
- http协议:
  - 协议:规定内容的传输的格式
  - http协议:
    "用来制定互联网上数据的传输格式"
  - 包含:
    - 浏览器发送给服务器的内容  请求
      "规定请求数据的格式"
    - 服务器返回给浏览器的内容  响应
      "规定响应数据的格式"
  - 请求的格式:
    "请求行 请求头 请求体"
    - 请求行:请求的第一行
      - 格式:请求方式 请求资源 协议/版本
        "例如:  get /day33/1.html http/1.1"
      - 请求方式:
        "常见的两种 get和post
        get请求:请求参数会在地址栏上显示,参数大小有限制,不安全
              http://ip地址:端口号/项目名/资源?参数名称=值&参数名称=值
        post请求:请求参数不在地址栏上显示,参数大小不受限制.较为安全
            格式:
                参数名称=值&参数名称=值"
    - 请求头
      - 格式: key/value的格式 (value可以为多个值的)
      - 常见的请求头
        - accept: text/html,image/*        --支持数据类型
        - accept-charset: iso-8859-1    --字符集
        - accept-encoding: gzip        --支持压缩
        - accept-language:zh-cn         --语言环境
        - host: www.baidu.cn:80        --访问主机
        - if-modified-since: tue, 11 jul 2000 18:23:51 gmt      --缓存文件的最后修改时间
        - referer: http://www.baidu.com/index.jsp     --来自哪个页面、防盗链
        - user-agent: mozilla/4.0 (compatible; msie 5.5; windows nt 5.0)
          "扩展知识:
              trident内核代表产品internet explorer，又称其为ie内核
              gecko内核代表作品mozilla firefoxgecko,火狐
              chrome内核代表作品chrome,谷歌"
        - cookie
        - connection: close/keep-alive       --链接状态
      - 重要的头:
        - referer  user-agent cookie if-modified-since
    - 请求体
      "和请求头之间有一个空行
      post请求的参数:只有表单提交的时候明确了method="post"这时候是post请求,其他的都是get请求
      参数名称=值&参数名称=值
      username=jack&password=1234"
  - 响应的格式:
    "响应行 响应头 响应体"
    - 响应行:响应信息的第一行
      - 格式:
        - 协议/版本 响应的状态码 状态码说明
      - 例如:
        - http/1.1 200 ok
      - 状态码:
        - 1xx    :请求已发送
        - 2xx    :响应已完成
          - 200:响应成功(请求成功)
        - 3xx    :需要浏览器进一步操作才可以完成
          - 302:重定向(配合location头使用)
          - 304:读缓存(not modified表示没有改变)
        - 4xx :用户访问错误(not found 表示:路径写错了,你访问的路径不存在)
          - 404:用户访问的资源不存在
        - 5xx :服务器内部错误(其实就是代码有问题,改代码)
          - 500:服务器内部异常
    - 响应头
      - 格式: key/value的格式 (value可以为多个值的)
      - 常见的响应头
        - location: http://www.it315.org/index.jsp     --跳转方向
        - server:apache tomcat            --服务器型号
        - content-encoding: gzip             --数据压缩
        - content-length: 80             --数据长度
        - content-language: zh-cn         --语言环境
        - content-type: text/html; charset=gb2312         --数据类型(mime类型)  大类型/小类型 text/css  text/javascript  image/jpeg image/bmp
        - last-modified: tue, 11 jul 2000 18:23:51 gmt    --最后修改时间
        - refresh: 1;url=http://www.it315.org        --定时刷新
        - content-disposition: attachment; filename=aaa.zip    --下载
        - set-cookie:ss=q0=5lb_nq; path=/search
        - expires: -1                    --缓存
        - cache-control: no-cache              --缓存
        - pragma: no-cache                   --缓存
        - connection:keep-alive               --连接
      - 重点的头:
        - set-cookie location content-type refresh content-disposition last-modified
    - 响应体
      "和响应头之间有一个空行,
      浏览器解析的内容"
- servlet入门:
  "本质上就是一个运行在服务器上的类"
  - 作用:1.接受请求   2.调用service  处理业务逻辑   3.生成响应结果
  - 入门步骤:
    - 1.编写一个类
      - 必须实现servlet接口
      - 重写里面的方法
    - 2.编写配置文件(项目下 web-inf/web.xml)
      "注册servlet   绑定路径
                  <!-- 注册servlet 
                      servlet-name:给servlet起个名称 名称自定义,保证唯一
                      servlet-class:serlvet的全限定名(包名+类名)
                  -->
                  <servlet>
                      <servlet-name>helloservlet</servlet-name>
                      <servlet-class>cn.baidu.demo.helloservlet</servlet-class>
                  </servlet>
                  
                  <!-- 绑定路径
                      servlet-name:在servlet标签中给servlet起好的名称
                      url-pattern:路径  暂时都以"/"开头
                   -->
                  <servlet-mapping>
                      <servlet-name>helloservlet</servlet-name>
                      <url-pattern>/hello</url-pattern>
                  </servlet-mapping>"
    - 3.测试
      "            localhost/项目名/绑定的路径
                  localhost/day33/hello"

在服务器中,为什么需要项目部署?  为了让网络通过服务器访问到项目


回顾:
    tomcat服务器和http协议:
    web服务器:
        概念:
            web资源:
            web资源分类:
                静态的web资源:内容一层不变
                动态的web资源:根据不同的人和不同的时间,可能会发生变化
            web技术:
                静态的web技术:html css js...
                动态的web技术:servlet jsp
            结构:
                b/s(浏览器/服务器):
                c/s(客户端/服务器):
            通讯机制:
                基于http协议
                一次请求一次响应,先有请求后有响应
        web服务器:
            tomcat:
                下载:
                安装:
                目录结构:
                    bin:
                    conf:
                    webapps:
                    work:
                启动:
                    bin/startup.bat
                关闭:
                    x
                    ctrl + c
                    ★ bin/shutdown.bat
                访问:
                    协议://地址:端口/资源
        web项目:
            项目名称:
                |-------html
                |-------css
                |-------js
                |-------img
                |-------web-inf
                |-----------lib
                |-----------classes
                |-----------web.xml
        http:
            请求:浏览器发送给服务器的内容(request)
                请求行
                    请求信息的第一行
                        请求方式 请求的资源 协议/版本        http/1.0 http/1.1
                请求头 
                    格式:
                        key/value  (value可以为多个值)
                请求体
                    当请求是post的时候,存放post请求所携带的参数
            响应:服务器返回给浏览器的内容(response)
                响应行 
                    响应信息的第一行
                        协议/版本 状态码 说明
                响应头 
                    格式:
                        key/value  (value可以为多个值)
                响应体
                    浏览器解析的内容
////////////////////////////////////////////
servlet:
    
案例-使用servlet完成用户登录功能
    需求分析:
        用户在表单中填写完用户名和密码后,点击登录的时候,向服务器发送登录的请求,
        在服务器上处理请求,处理完毕后将处理信息响应到页面
            处理结果:
                登录成功:欢迎...登录...
                登录失败:用户名或密码错误
                异常:当前功能正在维护....
        技术分析:
            html:表单
                form
                    action:提交路径
                    method:提交方式
                        get
                        post
            servlet:
                request
                response
    ////////////////
    项目:
        com.baidu.web
        com.baidu.service
        com.baidu.dao
        com.baidu.domain
        com.baidu.utils
        
        导入jar包
        导入工具类