服务端渲染技术

一.JSP

1.jsp介绍,全称是java Server Pages ,java服务器页面,就是服务端渲染技术,html只能为用户提供静态数据,而JSP技术允许在页面中嵌套
java代码,jsp技术基于Servlet,Servlet很难对数据进行排版,而jsp就可以,可以理解为jsp就是对Servlet的包装.
2.jsp程序本质是java程序,无法直接用浏览器打开
3.jsp运行原理 第一次访问jsp页面的时候,tomcat服务器会把jsp页面解析成为一个java源文件,并且对它进行编译成为.class字节码程序,
编译成为的java源程序是jsp对应的servlet,因此可以直接使用servlet的内容,如request和response
4.脚本语法  ①声明脚本基本语法 格式:<%!  代码%> 作用定义jsp的需要属性,方法,静态代码块和内部类等  ②表达式脚本,格式<%=表达式%> 
作用是jsp页面上输出数据(即动态输出数据,html不具备),表达式不能以分号结束 ③代码脚本语法<% java代码%> 作用 :
可以在jsp页面中,编写我们需要的功能,可以由多个代码脚本块组合完成一个完整的java语句,还可以和表达式脚本一起组合使用,在jsp页面上输出数据

<%!  //声明脚本语法//属性private String name = "666";private static int age = 99;//方法public String  getName(){return name;}//静态代码块static {age = 11;}
%>

<h1>表达式脚本的应用</h1>
<%String name = "李华";String email= request.getParameter("email");
%>用户名:<%=name%><br>
年龄是:<%=request.getParameter("age")%><br>
工作:<%="洗盘子"%><br>
电邮:<%=email%>

<h1>演示代码脚本</h1><%ArrayList<Monster> monsterList = new ArrayList<>();monsterList.add(new Monster(1,"牛魔王","芭蕉扇"));monsterList.add(new Monster(2,"蜘蛛精","吐蛛丝"));%>
<table bgcolor ="#f0f8ff " border = "1px" width="300px" ><%for (int i = 0; i < monsterList.size(); i++) {%><tr><th><%= monsterList.get(i).getId()%></th><th><%=monsterList.get(i).getName()%></th><th><%=monsterList.get(i).getSkill()%></th></tr><%}%>
</table>

5.jsp内置对象(已经创建好的对象,可以直接使用),是指Tomcat在翻译jsp页面成为servlet之后,内部提供的九大对象

//1.out类型是JspWriter,父类就是Writerout.println("jsp999");//2.request是HttpServletRequestrequest.getParameter("name");//3.response是HttpServletResponse//response.sendRedirect("http://www.baidu.com");//4.session就是HttpSessionsession.setAttribute("job","php工程师");//5.application类型就是ServletContextapplication.setAttribute("name","黎明");//6.pageContext可以存放数据(属性),但是数据只能在本页使用pageContext.setAttribute("age",100);//7.page内置对象类似thisout.print("page"+page);//8.config的内置对象的类型就是ServletConfigString pwd = config.getInitParameter("pwd");//0,exception

6.jsp域对象
①pageContext(域对象,存放的数据只能在当前页面使用)
②request(域对象,存放的数据在一次request请求有效,即request相同就可以)
③session(域对象,存放的数据在一次会话有效,即只要session没有变化,那么存放的数据)
④application(域对象,存放的数据在服务器未重启就一直有效)

7.el表达式
介绍:全称为Expression language,是表达式语言,el表达式主要代替jsp页面的表达式脚本如<%=requst.getAttribute(“xx”)>

<%request.setAttribute("num1",90);request.setAttribute("num2",100);
%>
num1+num2=${num1+num2}

基本语法:${key}   ,运算表达式: ${运算表达式},即外面多了一个$符号和大括号

<%@ page import="java.util.List" %>
<%@ page import="java.util.Map" %>
<%@ page import="com.hspedu.entity.Book" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.HashMap" %><%--
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>el表达式输出演示</title>
</head>
<body>
<%//    private String name;//书名
//    private String[] writer;作者
//    private List<String> reader;//读者
//    private Map<String,String> topics;//评讲Book book = new Book();book.setName("昆虫总动员");book.setWriter(new String[]{"jake","tom"});ArrayList<String> readers = new ArrayList<>();readers.add("老汉");readers.add("老李");book.setReader(readers);HashMap<String, String> topics = new HashMap<>();topics.put("topics1","这是我看过的最好的动画片");topics.put("topics2","不错的电影");book.setTopics(topics);//把book放入request域中request.setAttribute("bookkey",book);
%>
book对象:${bookkey}<br>
book.name=${bookkey.name}<br>
book.writer=${bookkey.writer}<br>
book.writer[0]=${bookkey.writer[0]}<br>
book.reders=${bookkey.reader}<br>
book.topics=${bookkey.topics.get("topics1")}</body>
</html>

el判断是否为空的表达式: ${empty 变量},三元运算:$ {score >=60? “及格”:“不及格”}
el方式获取域的数据

<%request.setAttribute("k1","request域数据");pageContext.setAttribute("k1","pageContext中的数据");session.setAttribute("k1","session中的数据");application.setAttribute("k1","application当中的数据");
%>
request:${requestScope.k1}<br>
pageContext:${pageScope.k1}<br>
session:${sessionScope.k1}<br>
application${applicationScope.k1}

8.jstl标签库是指JSP Standard Tag Library Jsp,为了替换代码脚本,这样jsp页面变得更加简洁,由五个标签库组成,重点学习core核心库
①c:set标签的使用,用于代替代码脚本的部分内容

<c:set scope="request" var="name" value="小明"></c:set>
c:set-name的值为:${requestScope.name}

②c:if标签的使用,起到普通if的作用

<body>
<c:set scope="request" var="num1" value="20"></c:set>
<c:set scope="request" var="num2" value="30"></c:set>
<c:if test="${num1<num2}"><h1> ${num1}<${num2}</h1>
</c:if>
</body>

③c:choose标签的使用

<c:set scope="request" var="score" value="60"></c:set>
<c:choose><c:when test="${requestScope.score>80}"> <h1>成绩优秀</h1></c:when><c:when test="${requestScope.score>=60}"><h1>成绩一般,及格了</h1></c:when><c:otherwise><h1>没有及格,下次努力</h1></c:otherwise>
</c:choose>

④<c:foreach>的使用 ,就是for循环

<%request.setAttribute("sports",new String[]{"打篮球","打足球"});HashMap<String, Object> map = new HashMap<>();map.put("key1","北京");map.put("key2","上海");map.put("key3","天津");request.setAttribute("map",map);
%>
<%--第一种遍历方式--%>
<c:forEach begin="1" end="5" var="i"><h1>排名=${i}</h1>
</c:forEach>
<%--第二种遍历数组 item是遍历的集合,var是将遍历的数据放入到var中--%>
<c:forEach items="${requestScope.sports}" var="sport">运动名称=${sport}<br>
</c:forEach>
<%--第三种方式 遍历map--%>
<c:forEach items="${requestScope.map}" var="city">城市信息:${city.key}--${city.value}</c:forEach>