服务端渲染技术

一.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页面上输出数据

bash 复制代码

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

bash 复制代码

<h1>表达式脚本的应用</h1>
<%
  String name = "李华";
  String email= request.getParameter("email");
%>

用户名:<%=name%><br>
年龄是:<%=request.getParameter("age")%><br>
工作:<%="洗盘子"%><br>
电邮:<%=email%>

bash 复制代码

<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之后,内部提供的九大对象

bash 复制代码

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

6.jsp域对象

①pageContext(域对象,存放的数据只能在当前页面使用)

②request(域对象,存放的数据在一次request请求有效,即request相同就可以)

③session(域对象,存放的数据在一次会话有效,即只要session没有变化,那么存放的数据)

④application(域对象,存放的数据在服务器未重启就一直有效)

7.el表达式

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

bash 复制代码

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

复制代码

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

bash 复制代码

<%@ 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判断是否为空的表达式: e m p t y 变量 , 三元运算 : {empty 变量},三元运算: empty变量,三元运算:{score >=60? "及格":"不及格"}

el方式获取域的数据

bash 复制代码

<%
    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标签的使用,用于代替代码脚本的部分内容

bash 复制代码

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

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

bash 复制代码

<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标签的使用

bash 复制代码

<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循环

bash 复制代码

<%
    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>