专栏首页海仔技术驿站javaWeb核心技术第六篇之BootStrap

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包
		导入工具类

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • javaWeb技术第二篇之CSS、事件和案例

    海仔
  • Python爬虫之数据提取概述

    海仔
  • javaWeb核心技术第十一篇之Listener

    海仔
  • 根据select下拉框值判断验证条件

    根据select下拉框值判断当前选中的是哪个区域,并且判断当前选中区域里面的值是否为空,如果为空,则弹出弹框提示,请输入xx区域名称,以下只是一个小demo,随...

    王小婷
  • 腾讯云主机上测试BootStrap4编译FlexBox

    最近在开发一个移动端适配的网站,使用了materi-ui框架,基于React。使用materi-ui时,已经内置了许多样式,但是bootstrap的一些多余样式...

    崔庆才
  • 从零开始学 Web 之 移动Web(七)Bootstrap

    随着Web应用变的越来越复杂,在大量的开发过程中我们发现有许多功能模块非常相似,比如轮播图、分页、选项卡、导航栏等,开发中往往会把这些具有通用性的功能模块进行一...

    Daotin
  • 提交表单的时候验证手机号码和身份证号码

    需求:在提交表单的时候,验证手机号码和身份证号码,如果不填写手机号码和身份证号码,就无需验证,如果填写手机号码和身份证号码,必须要填写正确的格式,如果不正确,则...

    王小婷
  • jquery 选中某一行

    Dream城堡
  • Laravel创建产品-CRUD之Create and Store

      上一篇说了laravel用crud之index列出产品items,我们现在试着添加产品,用到CRUD的 Create 和 Store 方法,打开/app/H...

    ytkah

扫码关注云+社区

领取腾讯云代金券