概述:
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。
作用:
开发响应式的页面
响应式:就是一个网站能够兼容多个终端
节约开发成本,提高开发效率
入门:
下载BootStrap
www.bootcss.com 官网地址
模版
1.导入BootStrap的css
2.导入jquery的js(1.8+)
3.导入BootStrap的js
4.设置视口(支持移动设备)
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
案例:
响应式工具:
显示:
.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>
<head><br /> <meta charset="UTF-8"><br /> <meta name="viewport" content="width=device-width,initial-scale=1" /><br /> <title></title><br /> <link rel="stylesheet" href="css/bootstrap.css" /><br /> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script><br /> <script type="text/javascript" src="js/bootstrap.min.js"></script><br /> <script><br /> $(function() {<br /> $('.carousel').carousel({<br /> interval: 1000<br /> })<br /> });<br /> </script><br /> </head>
<body><br /> <div class="container"><br /> <!--1.topbar--><br /> <div class="row text-center"><br /> <!--img1:中等屏幕时占4份,在小屏时占6份,在超小屏时占12份<br /> img2:中等屏幕时占4份,在小屏时隐藏,在超小屏时占12份<br /> 超链接:中等屏幕时占4份,在小屏时占6份,在超小屏时占12份--><br /> <div class="col-md-4 col-sm-6"><br /> <img src="img/logo2.png" /><br /> </div><br /> <div class="col-md-4 hidden-sm"><br /> <img src="img/header.jpg" /><br /> </div><br /> <div class="col-md-4 col-sm-6 text-center" style="padding-top: 20px;"><br /> <a href="#" class="btn btn-default">登录</a> <br /> <a href="#" class="btn btn-default">登录</a> <br /> <a href="#" class="btn btn-default">登录</a><br /> </div><br /> </div><br /> <!--2.导航条--><br /> <div class="row"><br /> <nav class="navbar navbar-inverse"><br /> <div class="container-fluid"><br /> <!-- Brand and toggle get grouped for better mobile display --><br /> <div class="navbar-header"><br /> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><br /> <span class="sr-only">Toggle navigation</span><br /> <span class="icon-bar"></span><br /> <span class="icon-bar"></span><br /> <span class="icon-bar"></span><br /> </button><br /> <a class="navbar-brand" href="#">首页</a><br /> </div><br /> <!-- Collect the nav links, forms, and other content for toggling --><br /> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><br /> <ul class="nav navbar-nav"><br /> <li class="active"><br /> <a href="#">手机数码 <span class="sr-only">(current)</span></a><br /> </li><br /> <li><br /> <a href="#">电脑办公</a><br /> </li><br /> <li class="dropdown"><br /> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><br /> <ul class="dropdown-menu"><br /> <li><br /> <a href="#">Action</a><br /> </li><br /> <li><br /> <a href="#">Another action</a><br /> </li><br /> <li><br /> <a href="#">Something else here</a><br /> </li><br /> <li role="separator" class="divider"></li><br /> <li><br /> <a href="#">Separated link</a><br /> </li><br /> <li role="separator" class="divider"></li><br /> <li><br /> <a href="#">One more separated link</a><br /> </li><br /> </ul><br /> </li><br /> </ul><br /> <form class="navbar-form navbar-right"><br /> <div class="form-group"><br /> <input type="text" class="form-control" placeholder="Search"><br /> </div><br /> <button type="submit" class="btn btn-default">Submit</button><br /> </form><br /> </div><br /> <!-- /.navbar-collapse --><br /> </div><br /> <!-- /.container-fluid --><br /> </nav>
</div><br /> <!--3.轮播图--><br /> <div class="row"><br /> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><br /> <!-- Indicators --><br /> <ol class="carousel-indicators"><br /> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><br /> <li data-target="#carousel-example-generic" data-slide-to="1"></li><br /> <li data-target="#carousel-example-generic" data-slide-to="2"></li><br /> </ol>
<!-- Wrapper for slides --><br /> <div class="carousel-inner" role="listbox"><br /> <div class="item active"><br /> <img src="./img/1.jpg" alt="..."><br /> <div class="carousel-caption"><br /> 欢迎你...<br /> </div><br /> </div><br /> <div class="item"><br /> <img src="./img/2.jpg" alt="..."><br /> <div class="carousel-caption"><br /> </div><br /> </div><br /> <div class="item"><br /> <img src="./img/3.jpg" alt="..."><br /> <div class="carousel-caption"><br /> </div><br /> </div><br /> </div>
<!-- Controls --><br /> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><br /> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><br /> <span class="sr-only">Previous</span><br /> </a><br /> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><br /> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><br /> <span class="sr-only">Next</span><br /> </a><br /> </div><br /> </div><br /> <!--4.热门商品--><br /> <div class="row"><br /> <div><br /> <span class="h2">热门商品</span><img src="img/title2.jpg" /><br /> </div><br /> <!--下div:<br /> 左div:中等屏幕时占2份,小屏和超小屏隐藏<br /> 图片<br /> 右div:中等屏幕时占10份,小屏和超小屏占12份<br /> middle div:中等屏幕时占6份,小屏和超小屏隐藏<br /> 图片<br /> 商品div:中等屏幕时占2份,小屏占4份,超小屏时占6份<br /> 图片 2个p标签--><br /> <div class="row"><br /> <!--左div:中等屏幕时占2份,小屏和超小屏隐藏<br /> 图片--><br /> <div class="col-md-2 hidden-sm hidden-xs"><br /> <img src="img/big01.jpg" width="100%" height="100%" /><br /> </div><br /> <!--右div:中等屏幕时占10份,小屏和超小屏占12份<br /> --><br /> <div class="col-md-10"><br /> <!--middle div:中等屏幕时占6份,小屏和超小屏隐藏<br /> 图片--><br /> <div class="col-md-6 hidden-sm hidden-xs"><br /> <img src="img/middle01.jpg" width="100%" height="180px" /><br /> </div><br /> <!--商品div:中等屏幕时占2份,小屏占4份,超小屏时占6份<br /> 图片 2个p标签--><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> </div><br /> </div><br /> </div><br /> <!--5.图片--><br /> <div class="row"><br /> <img src="img/ad.jpg" width="100%" /><br /> </div><br /> <!--6.热门商品--><br /> <div class="row"><br /> <div><br /> <span class="h2">热门商品</span><img src="img/title2.jpg" /><br /> </div><br /> <!--下div:<br /> 左div:中等屏幕时占2份,小屏和超小屏隐藏<br /> 图片<br /> 右div:中等屏幕时占10份,小屏和超小屏占12份<br /> middle div:中等屏幕时占6份,小屏和超小屏隐藏<br /> 图片<br /> 商品div:中等屏幕时占2份,小屏占4份,超小屏时占6份<br /> 图片 2个p标签--><br /> <div class="row"><br /> <!--左div:中等屏幕时占2份,小屏和超小屏隐藏<br /> 图片--><br /> <div class="col-md-2 hidden-sm hidden-xs"><br /> <img src="img/big01.jpg" width="100%" height="100%" /><br /> </div><br /> <!--右div:中等屏幕时占10份,小屏和超小屏占12份<br /> --><br /> <div class="col-md-10"><br /> <!--middle div:中等屏幕时占6份,小屏和超小屏隐藏<br /> 图片--><br /> <div class="col-md-6 hidden-sm hidden-xs"><br /> <img src="img/middle01.jpg" width="100%" height="180px" /><br /> </div><br /> <!--商品div:中等屏幕时占2份,小屏占4份,超小屏时占6份<br /> 图片 2个p标签--><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> </div><br /> </div><br /> </div><br /> <!--7.图片--><br /> <div class="row"><br /> <img src="img/footer.jpg" width="100%" /><br /> </div><br /> <!--8--><br /> <div class="row text-center"><br /> <p><br /> <ol class="list-unstyled list-inline"><br /> <li><a href="#">联系我们</a></li><br /> <li><a href="#">联系我们</a></li><br /> <li><a href="#">联系我们</a></li><br /> <li><a href="#">联系我们</a></li><br /> <li><a href="#">联系我们</a></li><br /> <li><a href="#">联系我们</a></li><br /> </ol><br /> </p><br /> <p>Copyright © 2005-2016 版权所有</p><br /> </div><br /> </div><br /> </body>
案例-将我们的项目发布出去
需求分析:
将我们编写好的(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行
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 绑定路径
helloservlet
cn.baidu.demo.HelloServlet
“
helloservlet
/hello
- 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包
导入工具类