1.JSP简介
在代码中java代码与HTML共同存在,其中HTML代码用于展示静态的内容,java代码用来展示动态的内容
对于servlet和Jsp技术的理解:
servlet:在java代码中嵌入html代码,更擅长编写Java业务代码
Jsp:在html中嵌入java代码,更擅长页面展示
2.JSP的运行原理
jsp在第一次被访问时会被Web容器翻译成servlet,即jsp本质上就是Servlet
过程:
第一次访问—>hellServlet.jsp---->helloServlet_jsp.java—>编译运行
被翻译后的servlet在Tomcat的work目录中可以找到,使用IDEA单独为项目维护一个目录
通过观察发现jsp会转换为java文件,并且间接的继承了HttpServlet,实现 其中的主要方法,Init、service、destory,并且将html代码通过java方式输出给浏览器
<%@ page import="java.util.HashMap" %><%--
Created by IntelliJ IDEA.
User: 86178
Date: 2021/4/23
Time: 13:43
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/include.jsp"%>
<html>
<head>
<title>Title</title>
</head>
<body>
<h2>hello jsp</h2>
<jsp:include page="/include1.jsp"></jsp:include>
<%
String str="hello jsp";
int j=0;
j++;
%>
<%="变量j="+j
%>
<%!
int x=0;
%>
</body>
</html>
3.JSP脚本与注释
JSP脚本:
1.<%Java代码%>
2.<%=java变量或表达式>
3.<%!java代码%>
JSP注释:
1.Html注释:
可见范围jsp源码,翻译后的servlet,页面显示Html源码
2.java注释://单行注释 /多行注释*/
课件范围jsp源码 翻译后的servlet
3.JSP注释:<%–注释内容–%>
可见范围jsp源码可见
4.JSP指令
- page指令
属性最多的指令(开发过程Page指令默认)
格式:<% page 属性名1=”属性值1“ 属性名2=”属性值2”…%>
常用属性如下:
language:jsp脚本中可以嵌入的语言种类
contentType:response.setContentType(text/html;charset=UTF-8)
session:是否Jsp在翻译时自动创建session
import:导入java的包
errorPage:当前页面出错后跳转到哪个页面 - include指令:
页面包含(静态包含)指令,可以将一个Jsp页面包含到另一个jsp页面中
格式:<%@ include file=“被包含的文件地址”%> - taglib指令:
在Jsp页面中引入标签库(jstl标签库,strus2标签库)
格式:<%@ taglib uri="标签库地址“ prefix="前缀” %>
5.JSP隐式对象概述
当Jsp被翻译成servlet的时候,service方法内部有九个对象定义并初始化,这九个对象称为隐式对象
1.out对象:
<%--
Created by IntelliJ IDEA.
User: 86178
Date: 2021/4/27
Time: 20:52
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" buffer="0kb" %>
<html>
<head>
<title>Title</title>
</head>
<body>
1111111
<%
response.getWriter().write("2222222");
out.write("333333333");//
%>
<%="44444444"
%>
</body>
</html>
2.PageContext对象:
PageContext对象就是jsp页面的上下文对象
1.pageContext是一个域对象
- setAttribute(String name,Object obj)
- getAttribute(String name)
- removeAttribute(String name)
2.PageContext可以向指定的其他域中存取数据
setAttribute(String name,Object obj,int scope)
getAttribute(String name,int scope)
removeAttribute(String name,int scope)
findAttribute(String name)//获取顺序依次从pageContext域,request域
<%--
Created by IntelliJ IDEA.
User: 86178
Date: 2021/4/27
Time: 20:56
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<%
pageContext.setAttribute("name","xiaoming");
pageContext.setAttribute("name","zhangsan",PageContext.REQUEST_SCOPE);
pageContext.setAttribute("name","lisi",PageContext.SESSION_SCOPE);
pageContext.setAttribute("name","wangwu",PageContext.APPLICATION_SCOPE);
%>
<%=pageContext.getAttribute("name",PageContext.REQUEST_SCOPE)%>
<%=pageContext.getAttribute("name",PageContext.APPLICATION_SCOPE)%>
<%=pageContext.findAttribute("name")%>
</body>
</html>
6.JSP标签
JSP标签用来控制JSP的行为,执行一些常用的JSP页面动作,通过标签可以实现很多行Java代码才能够实现的功能,比如请求转发的功能
- 页面包含(动态包含):<jsp:include page=“被包含的页面”/>
- 请求转发:<jsp:forward page=“要转发的资源” />
import:导入Java的包
errorPage:当前页面出错后跳转到哪个页面
7.JSTL标签库
7.1EL表达式获取域中数据
EL提供了在JSP中简化表达式的方法,让Jsp的代码更加简化,可以嵌入在jsp页面内部,减少Jsp脚本的编写;
jsp脚本:<%=request.getAttribute(name)%>
EL表达式替代上面的脚本:
r
e
q
u
e
s
t
S
c
o
p
e
.
n
a
m
e
E
L
最
主
要
的
作
用
是
获
取
四
大
域
中
的
数
据
,
格
式
{requestScope.name} EL最主要的作用是获取四大域中的数据,格式
requestScope.nameEL最主要的作用是获取四大域中的数据,格式{EL表达式}
EL获得pageContext域中的值,
p
a
g
e
S
c
o
p
e
.
k
e
y
E
L
获
得
r
e
q
u
e
s
t
域
中
的
值
,
{pageScope.key} EL获得request域中的值,
pageScope.keyEL获得request域中的值,{requestScope.key}
EL获得session域中的值,
s
e
s
s
i
o
n
S
c
o
p
e
.
k
e
y
E
L
获
得
a
p
p
l
i
c
a
t
i
o
n
域
中
的
值
:
{sessionScope.key} EL获得application域中的值:
sessionScope.keyEL获得application域中的值:{applicationScope.key}
El从四个域中获得某个值${key}:
–同样是依次从pageContext域,request域,session域,application域中获取属性,在某个域中获取后将不在向后寻找
<%@ page import="net.zixue.bean.User" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %><%--
Created by IntelliJ IDEA.
User: 86178
Date: 2021/4/27
Time: 21:12
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<%
request.setAttribute("name","小明");
User user=new User();
user.setName("小红");
user.setSex("女");
session.setAttribute("user",user);
List<User> list=new ArrayList<>();
User user1=new User();
user1.setName("小强");
user1.setSex("男");
User user2=new User();
user2.setName("小丽");
user2.setSex("女");
list.add(user1);
list.add(user2);
application.setAttribute("list",list);
%>
<%=request.getAttribute("name")%>
<%
User user3=(User)session.getAttribute("user");
String name=user3.getName();
out.write(name);
%>
<%
List<User> list1=(List<User>)application.getAttribute("list");
list1.get(0)
%>
</body>
</html>
7.2EL的内置对象
pageScope,requestScope,sessionScope,applicationScope—获取JSP中域的数据
param,paramValues-接收参数
相当于request.getParameter() request.getParameterValues()
header,headerValues-获取请求头信息
相当于request.getHeader(name)
initParam—获取全局初始化参数
相当于this.getServletContext().getInitParameter(name)
cookie-WEB开发中的cookie
相当于request.getCookies()—>cookie.getName()---->cookie.getValue()
pageContext–WEB开发中的pageContext.
7.3JSTL的简介与基本配置
JSTL,JSP标准签库,可以嵌入在jsp页面中使用标签的形式完成业务逻辑功能。
7.4JSTL的if标签
<c:if>标签专门用于完成JSP页面中的条件判断
<c:if test=“表达式”>
//表达式成立执行语句
</c:if>
其中test是返回boolean的条件
package net.zixue.JSP;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet(name = "FollowServlet")
public class FollowServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//关注的时候传一个参数follow=1 不关注的时候传follow=0
String follow = request.getParameter("follow");
request.setAttribute("follow",follow);
request.getRequestDispatcher("/jstl/jstl.jsp").forward(request,response);
}
}
7.5JSTL-forEach标签
<c:forEach>用来循环遍历集合对象中的元素,如List、Map、数组等和Java代码中的for循环一样,它也有两种形式
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %><%--
Created by IntelliJ IDEA.
User: 86178
Date: 2021/4/27
Time: 21:12
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<title>Title</title>
</head>
<body>
<%--使用JSTL的时候需要配合EL表达式--%>
<c:if test="${requestScope.follow eq 1}">
取消关注
<%--如果test等于true 则会执行内部代码,如果是false则不会执行内部代码--%>
</c:if>
<c:if test="${requestScope.follow eq 0}">
关注
<%--如果test等于true 则会执行内部代码,如果是false则不会执行内部代码--%>
</c:if>
<%
List<User> list=new ArrayList<>();
User user1=new User();
user1.setName("小强");
user1.setSex("男");
User user2=new User();
user2.setName("小丽");
user2.setSex("女");
list.add(user1);
list.add(user2);
for (int i = 0; i < list.size(); i++) {
System.out.println(i);
}
request.setAttribute("list",list);
for (User user : list) {
System.out.println(user.getName());
}
%>
<c:forEach begin="0" end="${list.size()-1}" var="i">
${list[i].name}
</c:forEach>
<%--items代表的是一个集合或者是数组--%>
<c:forEach items="${list}" var="user">
${user.name}
</c:forEach>
</body>
</html>
8.实现商品列表展示
phone_list.jsp:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>商品列表</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!-- 引入自定义css文件 style.css -->
</head>
<body>
<c:forEach items="${list}" var="phone">
<div class="col-md-2" style="height:250px">
<img src="${phone.image}" width="170" height="170" style="display: inline-block;">
</a>
<p>
<a href="product_info.html" style='color: green'>${phone.name}</a>
</p>
<p>
<font color="#FF0000">商城价:¥${phone.price}</font>
</p>
</div>
</c:forEach>
</body>
</html>
PhoneListServlet.java
package net.zixue.JSP;
import net.zixue.bean.Phone;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
@WebServlet(name = "PhoneListServlet",urlPatterns = "/phoneList")
public class PhoneListServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//通过servlet从数据库中获取数据,我们这里暂时通过手动创建数据
Phone phone=new Phone();
phone.setName("iphone6");
phone.setId(001);
phone.setImage("https://img10.360buyimg.com/n7/jfs/t277/193/1005339798/768456/29136988/542d0798N19d42ce3.jpg");
phone.setPrice("3900");
Phone phone1=new Phone();
phone1.setName("坚果pro");
phone1.setId(002);
phone1.setPrice("1799");
phone1.setImage("https://img13.360buyimg.com/n7/jfs/t5377/56/1578379545/209772/32105f74/5911bcbdN7afa707b.jpg");
Phone phone2=new Phone();
phone2.setName("vivo x9");
phone2.setPrice("2345");
phone2.setId(003);
phone2.setImage("https://img12.360buyimg.com/n7/jfs/t6067/340/2101390376/231820/750cc50e/593aa83fN8b0829fc.jpg");
Phone phone3=new Phone();
phone3.setName("oppo A57");
phone3.setId(004);
phone3.setPrice("1399");
phone3.setImage("https://img10.360buyimg.com/n7/jfs/t4978/185/135948089/78285/f6a84203/58db6fa4N354322d9.jpg");
Phone phone4=new Phone();
phone4.setName("诺基亚6");
phone4.setId(005);
phone4.setPrice("1699");
phone4.setImage("https://img11.360buyimg.com/n7/jfs/t4930/86/192598423/86027/36a57ccf/58dcbfa5N5c41cbfd.jpg");
Phone phone5=new Phone();
phone5.setName("小米MIX");
phone5.setId(006);
phone5.setPrice("3999");
phone5.setImage("https://img13.360buyimg.com/n7/jfs/t4264/215/455518113/309855/38fe41f1/58b4fc81N1d924112.jpg");
List<Phone> list=new ArrayList<>();
list.add(phone);
list.add(phone1);
list.add(phone2);
list.add(phone3);
list.add(phone4);
list.add(phone5);
request.setAttribute("list",list);
request.getRequestDispatcher("/phone_list.jsp").forward(request,response);
}
}
Phone.java
package net.zixue.bean;
public class Phone {
private int id;
private String name;
private String image;
private String price;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getImage() {
return image;
}
public void setImage(String image) {
this.image = image;
}
public String getPrice() {
return price;
}
public void setPrice(String price) {
this.price = price;
}
}