概述:
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" >1</div>
<div class=" col-md-2 col-sm-3 col-xs-6" >2</div>
<div class=" col-md-2 col-sm-3 col-xs-6" >3</div>
<div class=" col-md-2 col-sm-3 col-xs-6" >4</div>
<div class=" col-md-2 col-sm-3 col-xs-6" >5</div>
<div class=" col-md-2 col-sm-3 col-xs-6" >6</div>
<div class=" col-md-2 col-sm-3 col-xs-6" >7</div>
<div class=" col-md-2 col-sm-3 col-xs-6" >8</div>
<div class=" col-md-2 col-sm-3 col-xs-6" >9</div>
<div class=" col-md-2 col-sm-3 col-xs-6" >10</div>
<div class=" col-md-2 col-sm-3 col-xs-6" >11</div>
<div class=" col-md-2 col-sm-3 col-xs-6" >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" >
<a href="#" class="btn btn-default">登录</a>
<a href="#" class="btn btn-default">登录</a>
<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" >
<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 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 © 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包
导入工具类