javaWeb核心技术第六篇之BootStrap
Posted haizai
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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> <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" 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 © 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包 导入工具类
以上是关于javaWeb核心技术第六篇之BootStrap的主要内容，如果未能解决你的问题，请参考以下文章