1.JSP
1.Java Server Page:java服务页面,能够书写java代码的html
2.通过idea部署的web文件--->默认jsp文件存储路径:C:\Users\Administrator\.IntelliJIdea2019.1\system\tomcat\Tomcat_8_5_66_Web1\work\Catalina\localhost\Web1_war_exploded\org\apache\jsp
3.经历两个阶段:
翻译阶段:需要被web容器解析
将当前项目下的jsp文件转换为java文件
xxx.jsp--->xxx_jsp.java文件
编译阶段:将java文件转换为xxx_jsp.class文件(反射的方式)--->调用里面业务方法_jspService(请求对象,响应对象){
输出对象out.write("标签");
}
4.生命周期:
void _jspInit()
void _jspService(请求对象,响应对象)
void _jspDestory()
5.本质:就是一个Servlet
public final class index_jsp extends org.apache.jasper.runtime.HttpJspBase
导入tomcat解压目录lib目录的jasper.jar
public abstract class HttpJasBase extends HttpServlet
6.注释:
jsp的注释不会被web解析,而html注释在jsp是可以解析的
7.执行流程
8.三大内置指令:page指令,include指令,taglib指令(jstl中)
9.九大内置对象
10.el表达式和JavaBean规范三大内置指令:
page指令:<%@ page 属性名="属性值"%>
默认属性
contentType:页面的编码格式
language:只用java语言
isELIgnored:是否启用el表达式
buffer:默认缓冲区大小8KB
errorPage:错误页面,jsp页面出现异常
isErrorPage:当前页面是否为错误页面,如果是,true
extends:可以继承任意类型类
include指令:
静态导入指令,将公共的jsp页面抽取出来,让其他jsp把公共的jsp页面导入进来
<%@include file="jsp文件" %>:被静态导入的jsp文件,不会单独翻译和和编译,节省内存.实际将被导入的页面的内容写入当前页面
taglib指令:九大内置对象:
四个域对象:
PageContext pageContext对象:当前jsp页面有效
HttpServletRequest request:一次请求中有效
HttpSession session:一次会话中有效
ServletContext application:整个web工程中
五个普通对象:
ServletConfig config配置对象
JspWriter(继承自Writer,字符输出流) out:可以向浏览器输出内容,例如:out.write();
Object page:代表当前jsp对象
Throwable t:异常对象--->exception/error
HttpServletResponse response:响应对象1.JaveBean是一种规范:
是一个具体类
提供私有字段
提供访问方法setXXX()和getXXX()
2.el表达式引入:
1).el表达式的内置对象必须在${}里面去使用
域对象:
pageScope --->本质就是Map<String,对应的内容>
requestScope
SesstionScope
applicatScope
从域对象中获取数据:${域对象.属性},自动搜索,将前面的域对象省略了 2).
(1)${ }:代替jsp输出表达式
(2)javabean导航${对象名.bean属性}-->就是去掉get,首字母小写
(3)list存储String类型:获取list集合,${list[角标]}
list存储实体类:${userList[0].bean属性}
(4)Map存储两个String类型:
通过key取value:${map["key值"]}/${map.key值}
存储实体类型:${map.key.bean属性}2.Jsp的jstl(核心标签库)
1.需要到入jstl.jar包(核心包)
core:核心库
functions:函数库
sql:sql库
fmt:格式库
2.在jsp中使用这些核心标签,使用taglib指令
<%@taglib prefix="c" uri="http://xxx/jsp/jstl/core"%>
3.使用c标签:
test属性,true或者false
java中的运算符也可以使用
内置关键字:empty/not empty-->空/不为空
(1)<c:if test="${条件}">
内容
</c:if>:没有c:else标签
(2)<c:chose>
<c:when test="true/false">
</c:when>
<c:otherwise>
内容
</c:otherwise>
</c:chose>
(3)
第一种方式特殊用法:
items:从域对象中获取集合或者数组的数据
var:循环中的变量名
varStatus:循环中变量状态
他的属性值.固有属性(index):索引值从0开始
他的属性值.count:序号从一开始
<c:forEach items="${集合名称}" var="my" varStatus="status">
${status.index} - ${my}输出为从0开始的索引值以及对应的值
${status.count} - ${my}输出为从1开始的序号以及对应的值
</c:forEach>
第二种方式普通用法:
begin:角标的起始位置,默认从0开始
end:默认角标到末位置
var:循环中的变量
step:步长语句,默认自增一
<c:forEach begain="0" end="10" var="i" step="">
内容
</c:forEach>3.BootStrap(前端框架:主要是响应式布局)
1.bootstrap:建立于jquery之上
bootstrap框架就是一种提供给用户的一种响应式框架,随着浏览器的视口不断变化,网页自适应
三个文件夹:/css,/js,/fonts
2.(1)导入css文件:
<link href="css/bootstrap.min.css" rel="stylesheet">
(2)导入jquery的js库
<script src="js/jquery-3.4.1.min.js"></script>
(3)导入bootstrap的js库
<script src="js/bootstrap.min.js"></script>
详情见bootstrap官网3.1布局容器
布局容器(在盒子标签内的属性)
class = "container":固定宽度并支持响应式布局的容器
class = "container-fluid":用于100%宽度,占据全部视口的容器3.2栅格系统
进行具体布局的块的分析,一行12列
1.class="row":指定每一行
2.指定每一列:class="col-设备编号-占的列数"
设备编号:xs超小屏幕
sm小屏幕
md中等屏幕
lg大屏幕
3.class="list-inline":指定在同一行3.3全局表格样式
1.加入bootstrap的css样式:
表格基本样式:class="table"
条纹状表格:class="table-striped"
给单元格加入边框:class="table-bordered"
移动到每一行给做出的选中响应状态:class="table-hover"
紧缩表格:class="table-condensed"
2.响应式表格
class="table-responsive",随着分辨率的改变,自适应3.4表单样式
1.水平排列的表单
class="form-control":默认设置宽度属性为100%
<form class="form-horziontal"></form>:指定水平排列的表单
class="form-group":将input标签,select标签和label包裹起来,形成一行的组件3.5图片样式
为图片添加响应式:class="img-responsive"
指定四角圆角:class="img-rounded"
设置为圆的图片:class="img-cicle"
相框格式:class="img-thumbnail"3.6按钮
官网3.7组件
1.按钮组:class="btn-group"
单按钮下拉菜单:class="dropdown-menu"
2.导航条
3.轮播图插件
4.分页 day50
实例见:web_product
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
