深入了解EL表達式

L表達式

1、EL概述

1.1 引入

問題：

按照前面文章中提到的代碼實現方式，如果用戶登錄失敗，我們不用再單獨書寫一個LoginErrorServlet,直接新創鍵一個login.jsp頁面即可。

但是我們先訪問login.html，然后錯誤在跳轉到login.jsp頁面，那么我們是否可以直接訪問login.jsp頁面，而不用再使用login.html頁面。這樣更為簡單。

在瀏覽器中直接訪問login.jsp頁面：

我們發現最開始訪問jsp頁面，頁面顯示null,原因是最開始訪問request中的msg沒有任何數據，所以是null。那么有的同學就會想在login.jsp頁面中使用java代碼對request中的msg進行判斷。雖然可以實現，但是腳本表達式在JSP頁面上書寫起來比較麻煩。而在頁面上取值在開發中使用的又比較多，所以Sun公司為了簡化在頁面上的取值操作。我們這里有更為簡單的方案，就是我們下面要講解的EL表達式。

【需求】使用EL表達式改造login.jsp頁面的取值操作

提示：EL表達式從request域對象中取值：${request域對象中的key}

溫馨提示：

原來JSP頁面中的腳本表達式<%=msg%>被EL表達式取代。

【代碼示例】login.jsp

xml復制代碼<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登錄頁面</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/login.css" rel="stylesheet">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
</head>
<body>
<%
//    String msg = (String) request.getAttribute("msg");
%>
<div class="container text-center">
    <form class="form-signin" action="/loginInterServlet" method="get">
        <h2 class="form-signin-heading">登錄頁面</h2>
        <%--<font color="red"><%=msg%></font>--%>
        <font color="red">${msg}</font>
        <input type="text"  name="username" class="form-control" placeholder="用戶名" required autofocus>
        <input type="password"  name="password" class="form-control" placeholder="密碼" required>
        <button class="btn btn-lg btn-primary btn-block" type="submit">登錄</button>
    </form>
</div>

</body>
</html>

說明：

1）在jsp頁面中使用EL表達式可以簡化Java代碼。

2）EL表達式從域對象取值，如果域對象中有值則獲取，沒有值則不獲取。

1.2 EL簡介

bash復制代碼EL全稱： Expression Language 中文的意思是EL表達式。
作用：代替jsp中腳本表達式<%=輸出內容%>的功能，簡化對java代碼的操作，從【域對象】中取值。 EL表達式簡化<%= %>方式取值   
EL語法表達式的格式：${域對象中的key}

2、EL取值

2.1 JSP的四大域對象

JSP的四大域對象指的是：page域，request域，session域，application域。我們通常使用EL表達式從這4個域對象中取值。以下是這4個域對象的詳細信息：

域對象	在EL中的對象名稱	在servlet中的對象名	說明
page域	pageScope	pageContext，屬于javax.servlet.jsp.PageContext類的對象	page域指的是當前JSP頁面，其中存儲的數據只在當前頁面有效，因為jsp本質是servlet，所以page域只在一個servlet中有效。
request域	requestScope	request，屬于javax.servlet.http.HttpServletRequest接口的對象	request域：一次請求或請求鏈中request域
session域	sessionScope	session,屬于javax.servlet.http.HttpSession接口的對象	session域：一次會話過程中，session域
application域	applicationScope	application，屬于javax.servlet.ServletContext接口的對象	application域：服務啟動后整個項目對應的ServletContext域

2.2 EL表達式從四大域中取值

EL表達式從指定的域中取值的方式如下：

域對象	取值方式
page域	${pageScope.key}
request域	${requestScope.key}
session域	${sessionScope.key}
application域	${applicationScope.key}

【需求】

在一個JSP頁面中，使用腳本片段分別向page域、request域，session域，application域和中存儲數據；
使用EL表達式從這4個域中取值；

【參考代碼】

bash復制代碼<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <%--
             EL表達式 page  request  session  application 四大域對象
             【需求】
            1. 在一個JSP頁面中，使用腳本表達式分別向page域、request域，session域，application域和中存儲數據；
            2. 使用EL表達式從這4個域中取值；
    --%>
    <%
        //page域，對一servlet中的pageContext對象
        pageContext.setAttribute("pageValue","page的值");
        //request域
        request.setAttribute("requestValue","request的值");
        //session域
        request.getSession().setAttribute("sessionValue","session的值");
        //application域，屬于ServletContext類的對象
        application.setAttribute("applicationValue","application的值");
    %>
    <%--
        EL表達式來域對象中取值
    --%>
    page中取值：${pageScope.pageValue}<br>
    request中取值：${requestScope.requestValue}<br>
    session中取值${sessionScope.sessionValue}<br>
    application中取值${applicationScope.applicationValue}<br>
</body>
</html>

2.3 EL表達式搜索數據

EL表達式取值的時候也可以不指定域，如果取值的時候不指定域對象。就會按照從page域--->request域--->session域--->application域從小到大逐級根據key值查找。

bash復制代碼<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <%--
             EL表達式 page  request  session  application 四大域對象
             【需求】
            1. 在一個JSP頁面中，使用腳本表達式分別向page域、request域，session域，application域和中存儲數據；
            2. 使用EL表達式從這4個域中取值；
    --%>
    <%
        //page域，對一servlet中的pageContext對象
        pageContext.setAttribute("pageValue","page的值");
        //request域
        request.setAttribute("requestValue","request的值");
        //session域
        request.getSession().setAttribute("sessionValue","session的值");
        //application域，屬于ServletContext類的對象
        application.setAttribute("applicationValue","application的值");
        //向域對象中存儲值，key值一樣，則先從小向大的域中查找
        pageContext.setAttribute("value","page的值");
        request.setAttribute("value","requst的值");
    %>
    <%--
        EL表達式來域對象中取值
    --%>
    page中取值：${pageScope.pageValue}<br>
    request中取值：${requestScope.requestValue}<br>
    session中取值${sessionScope.sessionValue}<br>
    application中取值${applicationScope.applicationValue}<br>
    相同的key:${value}
</body>
</html>

2.4 EL表達式從cookie中取值

之前我們在學習cookie的時候，做過記住用戶名和密碼的案例，但是前端頁面我們并沒有實現。因為我們還沒有學習使用什么技術在前端如何將cookie中的數據取出，而今天我們學習了EL表達式，我們就可以實現前端記住用戶名和密碼的案例了。

new Cookie(name,value)

使用EL表達式獲取cookie中的值格式：(掌握)

ini復制代碼cookie.cookie的name名.value
例如：
 Cookie cookieName = new Cookie("username","鎖哥");
 cookie.username.value獲取的值是鎖哥。

創建一個登陸的jsp頁面：

xml復制代碼<%--
  Created by IntelliJ IDEA.
  Time: 16:52
  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>
    <form action="/login2Servlet">
        <input name="username" type="text" placeholder="請輸入賬號"><br>
        <input name="password" type="password" placeholder="請輸入密碼"><br>
        <input type="submit" value="登錄">
        <br>
        <input type="checkbox" name="ck" class="checkbox">記住用戶名和密碼
    </form>
</body>
</html>

xml復制代碼<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
  <form action="/loginServlet" method="post">
        <%--
            ${cookie.username.value} 表示從瀏覽器存儲的cookie中獲取值
            cookie表示對象名
            username 表示cookie中的名，看服務器端給的什么名字，這里就寫什么名字，不固定。可以理解為key
            value屬于固定屬性。表示獲取值
        --%>
        用戶名：<input type="text" name="username" value="${cookie.username.value}"><br>
        密碼：<input type="password" name="password" value="${cookie.password.value}"><br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

在servlet生成cookie LoginServlet.java

scala復制代碼@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //獲取用戶名和密碼
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        //創建cookie
        Cookie cookieName = new Cookie("username",username);
        Cookie cookiePsw = new Cookie("password",password);
        response.addCookie(cookieName);
        response.addCookie(cookiePsw);
    }
}

溫馨提示：要去訪問Java代碼LoginServlet，才能將cookie存儲到瀏覽器中

效果圖：

先訪問：http://localhost:8080/login.jsp也面，點擊登錄按鈕，訪問了LoginServlet，在LoginServlet中生成cookie。

再訪問login.jsp頁面，使用EL表達式獲取用戶名和密碼

http://localhost:8080/login.jsp

3、EL運算符

EL表達式獲取到值之后可以直接通過運算符進行運算。EL表達式的運算符主要有以下幾類：算術運算，關系運算，邏輯運算，三元運算，empty運算符。

【素材】頁面數據準備demo08.jsp

vbscript復制代碼<%
    request.setAttribute("n1",40);
    request.setAttribute("n2",30);
    request.setAttribute("n3","20");
    request.setAttribute("n4","10");
%>

3.1 算術運算

顧名思義，算術運算是進行算術運算的符號，和java中的一致。主要包括：加，減，乘，除，取余。具體使用如下表：

運算符	說明	使用示例	結果
+	加	${n1+n2}	70
-	減	${n1-n2}	10
*	乘	${n1*n2}	1200
/或div	除	${n1/n4}	4
%或mod	取余	${n1%n4}	0

【代碼示例】demo08.jsp代碼片段

xml復制代碼算數運算：<br>
    n1+n2:${n1 + n2}<br>
    n1-n3:${n1 - n3}<br>
    n3-n4:${n3-n4}<br>
    n2*n3:${n2 * n3}<br>

效果圖：

注意：在進行算術運算的時候，EL表達式會對字符串中的內容進行判斷，如果都是數值，那么會轉化為數值再進行算術運算，如果含有非數字類型，則會報異常。

3.2 關系運算

vbscript復制代碼<%
    request.setAttribute("n1",40);
    request.setAttribute("n2",30);
    request.setAttribute("n3","20");
    request.setAttribute("n4","10");
%>

關系運算符是判斷兩個數據的大小關系的，關系運算符有：==，!=，<，<=，>，>=。具體使用方法如下：

運算符	說明	使用示例	結果
== 或 eq	等于 equal	${n1 == n2}	false
!= 或ne	不等于 not equal	${n1 != n2}	true
> 或 gt	大于 greater than	${n1 > n2}	true
>= 或ge	大于等于 greater than or equal	${n1 >= n2}	true
< 或 lt	小于 less than	${n1 < n2}	false
<= 或le	小于等于 less than or equal	${n1 <= n2}	false

【代碼示例】demo08.jsp

xml復制代碼關系運算符：<br>
n1==n2:${n1==n2}<br>
n3>=n4:${n3>=n4}<br>
n1!=n2:${n1 ne n2}<br>

效果：

3.3 邏輯運算

邏輯運算符包括：&& ，||，! 使用方法如下：

運算符	說明	使用示例	結果
&& 或 and	邏輯與,一假即假	${true && false}	false
	或 or	邏輯或，一真即真	`${true	false}`	true
! 或 not	非，取反	${!false}	true

參考代碼demo08.jsp

arduino復制代碼邏輯運算符：<br>
false && true:${false && true}<br>
false || true:${false || true}<br>
!false:${!false}<br>

3.4 三元運算

EL表達式也支持三元運算符：如，判斷n1是否大于等于n2，可以寫成如下：參考代碼demo08.jsp

lua復制代碼<%--
    表達式1?表達式2：表達式3
--%>
三元運算符：<br>
${n1>=n2?"正確":"錯誤！"}<br>

3.5 empty運算

empty運算符表示判斷數據是否為空，如果為空返回true。對以下數據運算返回true：

字符串：""；
空集合（size=0）：List list = new ArrayList();
空對象(null)：Student stu = null；String s=null;Object obj=null;

【代碼示例】 demo08.jsp

vbscript復制代碼<%
        String str = "";
        request.setAttribute("str",str);
        Student student=null;
        request.setAttribute("student",student);
        List<String> list = new ArrayList<>();
        request.setAttribute("list",list);
 %>
    empty:<br>
    ${empty str}<br>
    ${empty student}<br>
    <%--
        not empty list :表示對empty的結果取反，由于list.size()等于0，所以empty list的結果是true,
        但是這里加了一個not，結果變為了false
    --%>
    ${not empty list}<br>

頁面效果：

demo08.jsp完整代碼

ruby復制代碼<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.List" %>
<%@ page import="com.ithea.sh.el.cookie_01.Student" %><%--
  Created by IntelliJ IDEA.
  Time: 8:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>運算符</title>
</head>
<body>
    <%
        //向request域對象中存儲數據
        request.setAttribute("n1",40);
        request.setAttribute("n2",30);
        request.setAttribute("n3","20");
        request.setAttribute("n4","10");
    %>
    算數運算：<br>
    n1+n2:${n1 + n2}<br>
    n1-n3:${n1 - n3}<br>
    n3-n4:${n3-n4}<br>
    n2*n3:${n2 * n3}<br>
    關系運算符：<br>
    n1==n2:${n1==n2}<br>
    n3>=n4:${n3>=n4}<br>
    n1!=n2:${n1 ne n2}<br>
    邏輯運算符：<br>
    false && true:${false && true}<br>
    false || true:${false || true}<br>
    !false:${!false}<br>
    <%--
     表達式1?表達式2：表達式3
    --%>
    三元運算符：<br>
    ${n1>=n2?"正確":"錯誤！"}<br>
    <%
        String str = "";
        Student student=null;
        List<String> list = new ArrayList<>();
    %>
    empty:<br>
    ${empty str}<br>
    ${empty student}<br>
    <%--
        not empty list :表示對empty的結果取反，由于list.size()等于0，所以empty list的結果是true,
        但是這里加了一個not，結果變為了false
    --%>
    ${not empty list}<br>
</body>
</html>

效果圖：

【注】not empty可以用在EL表達式中，判斷非空的情況。

EL表達式小結：

EL：Expression Language；
EL語法：${ }
作用：簡化腳本表達式的取值，簡化<%= request.getAttribute("name") %> ===> ${name}
jsp的四大域對象

page域：pageContext pageContext.setAttrubute() pageContext.getAttribute() JSP特有作用范圍：當前的JSP頁面
requst域：request request.setAttribute() request.getAttribute() 作用范圍：一次請求和響應之間
session域： session session.setAttribute() session.getAttribute() 作用范圍：會話期間（多次請求和響應）
servletContext域：application application.setAttribute() application.getAttribute() 作用范圍：整個項目；

jsp從四大域中取值（指定域對象）：

${pageScope.name}
${requestScope.name}
${sessionScope.name}
${applicationScope.name}

JSP搜索域對象中的值：page --- request --- session --- servletContext

${name}

運算

算術運算
關系運算
邏輯運算：&& || ！
三元運算
empty運算：empty not empty

空字符串：""
空對象：null
空集合：list.size = 0;

作者：also_lucky
鏈接：https://juejin.cn/post/7241760513205059639

L表達式

JSTL標簽

EL（Expression Language）表達式語言

EL的作用是簡化JSP的開發，讓我們更方便的進行數據的讀取（從application、session、request、pageContext)

語法：

${表達式}

如：讀取session中的name屬性

Java腳本輸出：

<%= session.getAttribute("name")%>

EL:

${name}

讀取對象屬性的方法：

Java腳本：

<%= user.getName()%>

EL:

${user.name} 或

${user["name"]}

問題：如果在JSP的application、session、request、pageContext對象中都保存了num參數

那么EL表達式${num}會讀取哪個num呢？

EL表達式的查找順序是從最小范圍開始找：

pageContext -> request -> session -> application -> null

域對象：可以指定讀取數據的范圍

域對象對應的JSP對象

pageScope pageContext

requestScope request

sessionScope session

applicationScope application

${域對象.表達式}

如：

讀取頁面中的num參數：

${pageScope.num}

JSTL（Java Standard Tag Library）Java標準標簽庫

作用是將JSP中的Java腳本和HTML代碼分開，將Java封裝到標簽中，在頁面調用。

使用方法：

1、導入jar包

2、在JSP頁面中加入taglib指令

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

3、使用標簽

<c:標簽名屬性=”值">

核心標簽的使用：

輸出標簽

<c:out value=“輸出內容”></c:out>

賦值標簽

<c:set var="變量名" value=“值”></c:set>

示例：

<c:set var="num" value="999"></c:set>

<c:out value="num=${num}"></c:out>

刪除變量標簽

<c:remove var="變量名">

異常處理標簽

<c:catch var="ex">

可能有異常出現的內容

</c:catch>

示例：

<c:catch var="ex">

<%int n = 6 / 0; %>

</c:catch>

<br>

<c:if test="${ex != null}">

</c:if>

if標簽

<c:if test="EL表達式">

HTML代碼

</c:if>

示例：

<c:if test="${num > 500}">

</c:if>

choose標簽

多重判斷

<c:choose>

<c:when test="${條件}">

HTML代碼

</c:when>

<c:when test="${條件}">

HTML代碼

</c:when>

...

<c:otherwise>

HTML代碼

</c:otherwise>

</c:choose>

示例：

<c:choose>

<c:when test="${score>=90 }">

${score }屬于A級

</c:when>

<c:when test="${score>=80 }">

${score }屬于B級

</c:when>

<c:when test="${score>=70 }">

${score }屬于C級

</c:when>

<c:when test="${score>=60 }">

${score }屬于D級

</c:when>

<c:otherwise>

${score }屬于E級

</c:otherwise>

</c:choose>

forEach標簽

實現循環的標簽

用法1：

<c:forEach var="循環變量" begin="初始值" end="結束值" step="增長量">

HTML代碼

</c:forEach>

示例：

<c:forEach var="i" begin="1" end="10" step="1">

</c:forEach>

用法2：

<c:forEach var="循環變量" items="${集合或數組名}">

HTML代碼

</c:forEach>

示例：

<c:forEach var="user" items="${users}">

</c:forEach>

總結：本章我們學習了JSP開發的兩個強大工具，EL表達式讓我們能用簡潔的語法讀取JSP對象中的值；而JSTL標簽庫讓HTML代碼和Java代碼實現了分離，從而提高了JSP代碼的可維護性，也讓JSP開發變得更加簡單。

、VueJS生命周期

1.1 每個 Vue 實例在被創建之前都要經過一系列的初始化過程

vue在生命周期中有這些狀態，created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed。Vue 在實例化的過程中，會調用這些生命周期的鉤子，給我們提供了執行自定義邏輯的機會。

1.2 vue對象初始化過程中會執行到鉤子的內容：

beforeCreate ：數據還沒有監聽，沒有綁定到vue對象實例，同時也沒有掛載對象

created ：數據已經綁定到了對象實例，但是還沒有掛載對象

beforeMount：模板已經編譯好了，根據數據和模板已經生成了對應的元素對象，將數據對象關聯到了對象的 el屬性，el屬性是一個HTMLElement對象，也就是這個階段，vue實例通過原生的createElement等方法來創建這個html片段，準備注入到我們vue實例指明的el屬性所對應的掛載點

mounted：將el的內容掛載到了el，相當于我們在jquery執行了(el).html(el),生成頁面上真正的dom，上面我們就會發現dom的元素和我們el的元素是一致的。在此之后，我們能夠用方法來獲取到el元素下的dom對象，并進行各種操作，當我們的data發生改變時，會調用beforeUpdate和updated方法

beforeUpdate ：數據更新到dom之前，我們可以看到$el對象已經修改，但是我們頁面上dom的數據還沒有發生改變

updated：dom結構會通過虛擬dom的原則，找到需要更新頁面dom結構的最小路徑，將改變更新到 dom上面，完成更新

beforeDestroy,destroed：實例的銷毀，vue實例還是存在的，只是解綁了事件的監聽還有watcher對象數據與view的綁定，即數據驅動

二、VueJS ajax

2.1 vue-resource：

vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP進行Web請求和處理響應的服務。當vue更新到2.0之后，作者就宣告不再對vue-resource更新，而是推薦的axios，在這里大家了解一下vue-resource就可以。 vue-resource的github: https://github.com/pagekit/vue-resource

2.2 axios

Axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中 axios的github:https://github.com/axios/axios

2.2.1 引入axios

首先就是引入axios,如果你使用es6，只需要安裝axios模塊之后：

import axios from 'axios';

//安裝方法

npm install axios

當然也可以用script引入：

2.2.2 get請求

2.2.3 post請求

2.2.4 為方便起見，為所有支持的請求方法提供了別名：

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

在線咨詢

上一篇：微信小程序學習筆記_02模板與配置
下一篇：JavaScript精通到深入

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

深入了解EL表達式

L表達式

1、EL概述

1.1 引入

1.2 EL簡介

2、EL取值

2.1 JSP的四大域對象

2.2 EL表達式從四大域中取值

2.3 EL表達式搜索數據

2.4 EL表達式從cookie中取值

3、EL運算符

3.1 算術運算

3.2 關系運算

3.3 邏輯運算

3.4 三元運算

3.5 empty運算

您的項目需求