美文网首页
一、理解EL的特点

一、理解EL的特点

作者: lifeline张 | 来源:发表于2018-07-16 08:55 被阅读0次

一、问题引入

在做完分页功能之后,页面的html代码和java代码全混合到一起了,代码比较乱。

  • 代码结构混乱
  • 脚本与html混合,容易出错
  • 代码不易于维护

可以使用EL表达式来优化程序代码,增加程序可读性。

二、EL简介

2.1EL语法

image.png

2.2EL功能

image.png

2.3EL访问作用域

image.png

上面第三行写错了,后面不要那个news。
在用EL表达式之前,需要先将变量放到相应的作用域里面,也就是上面图片的第一行,这样才能使用EL表达式。
如果不写作用域的话,会从小到大依次去取值,比如上面要是只写个news的话,则会先去页面作用域里面找,然后是请求作用域,会话作用域,程序作用域,直至找到为止。

三、示例

修改前素材:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@page import="com.kgc.pojo.News"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="../common/common.jsp" %>
<html>
    <head>
        <link href="<%=request.getContextPath() %>/css/common.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="<%=request.getContextPath() %>/ckeditor/ckeditor.js"> </script>
    </head>
<body>
<%
    int id = Integer.parseInt(request.getParameter("id"));
    News news = newsService.getNewsById(id);
    
 %>
<div class="main-content-right">
      
        <div class="main-text-box">
            <div class="main-text-box-tbg">
                <div class="main-text-box-bbg">
                    <div class="article-box">
                        <!--新闻的标题-->
                        <h1><%=news.getTitle() %></h1>
                        <div class="source-bar">发布者:<%=news.getAuthor() %> 分类:新闻信息 更新时间:<%=news.getCreateDate() %></div>
                        <div class="article-content">
                            <span class="article-summary"><b>摘要:<%=news.getSummary() %></b></span>
                            <%
                                if(news.getPicPath() == null || news.getPicPath().equals("")){
                             %>
                             新闻图片:暂无<br/>
                             <%}else{ %>
                             <img src="<%=request.getContextPath() %>/upload/<%=news.getPicPath() %>"/><br/>
                             <%}%>
                             <%=news.getContent() %>
                         </div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</body>
</html>

修改后的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@page import="com.kgc.pojo.News"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="../common/common.jsp" %>
<html>
    <head>
        <link href="<%=request.getContextPath() %>/css/common.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="<%=request.getContextPath() %>/ckeditor/ckeditor.js"> </script>
    </head>
<body>
传递过来的新闻ID:${param.id }
<%
    int id = Integer.parseInt(request.getParameter("id"));
    News news = newsService.getNewsById(id);
    request.setAttribute("news", news);
 %>
<div class="main-content-right">
      
        <div class="main-text-box">
            <div class="main-text-box-tbg">
                <div class="main-text-box-bbg">
                    <div class="article-box">
                        <!--新闻的标题-->
                        <h1>${news.title }</h1>
                        <div class="source-bar">发布者:${news.author } 分类:新闻信息 更新时间:${news.createDate }</div>
                        <div class="article-content">
                            <span class="article-summary"><b>摘要:${news.summary }</b></span>
                            <%
                                if(news.getPicPath() == null || news.getPicPath().equals("")){
                             %>
                             新闻图片:暂无<br/>
                             <%}else{ %>
                             <img src="<%=request.getContextPath() %>/upload/<%=news.getPicPath() %>"/><br/>
                             <%}%>
                            ${news.content }
                         </div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</body>
</html>

EL常用的两种表达方式:
1、获取request的参数,方式如下:

传递过来的新闻ID:${param.id }

2、在页面中获取设置的变量的参数:

<h1>${news.title }</h1>
   <div class="source-bar">发布者:${news.author } 分类:新闻信息 更新时间:${news.createDate }</div>

四、删除新闻

newsDetailList.jsp页面:

<%@page import="com.kgc.util.PageSupport"%>
<%@page import="com.kgc.pojo.News"%>
<%@page import="java.util.List"%>
<%@page import="com.kgc.service.impl.NewsServiceImpl"%>
<%@page import="com.kgc.service.NewsService"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%--动态包含无法使用,页面报错,newsService无法使用 <jsp:include page="../common/common.jsp" /> --%>
<%@include file="../common/common.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>无标题文档</title>
<style type="text/css">
<!--

-->
</style>
<script>
    function addNews(){
        window.location="newsDetailCreateSimple.jsp";
    }
    function page_nav(frm,num){
        frm.pageIndex.value=num;
        frm.submit();
    }
    function jump_to(frm,pageno){
        //var regexp=/^\d+$/;
        var regexp=/^[1-9]\d*$/;
        var totalPage = document.getElementById("totalPage").value;
        if(!regexp.test(pageno)){
            alert("请输入 正确的数字!");
            return false;
        }else if((pageno-totalPage) > 0){
            alert("总页码一共"+totalPage+"页,请输入正确的页码!");
            return false;
        }else{
            page_nav(frm,pageno);
        }  
        
    }
    
    // 下面这段代码不用事件触发,只要进了这个脚本就会执行的
    var flag = ${param.flag};
    if (flag != null && flag != "" && undefined != flag){
        if (flag == "success") {
            alert("删除成功");
        } else {
            alert("删除失败");
        }
    }
</script>
</head>

<body>

<!--主体-->
    <div class="main-content-right">
        <!--即时新闻-->
        <div class="main-text-box">
            <div class="main-text-box-tbg">
                <div class="main-text-box-bbg">
                    <form name ="searchForm" id="searchForm" action="/news/jsp/admin/newsDetailList.jsp" method="post">
                      <div>
                        新闻分类:
                            <select name="categoryId">
                                <option value="0">全部</option>
                                
                                    <option value='1' >国内</option>
                                
                                    <option value='2' >国际</option>
                                
                                    <option value='3' >娱乐</option>
                                
                                    <option value='4' >军事</option>
                                
                                    <option value='5' >财经</option>
                                
                                    <option value='6' >天气</option>
                                
                            </select>
                        新闻标题<input type="text" name="title" id="title" value=''/>
                            <button type="submit" class="page-btn">GO</button>
                            <button type="button" onclick="addNews();" class="page-btn">增加</button>
                            <input type="hidden" name="pageIndex" value="1"/>
            </div>
            </form>
            <table cellpadding="1" cellspacing="1" class="admin-list">
                <thead >
                    <tr class="admin-list-head">
                        <th>新闻标题</th>
                        <th>作者</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                     <%
                    //获取当前页码
                    String currntPage=request.getParameter("pageIndex");
                    if(currntPage==null)
                        currntPage="1";
                    int pageIndex=Integer.parseInt(currntPage);
                    //获取新闻记录总数量
                    int totalCount=newsService.getTotalCount();
                    //每页显示记录数
                    int pageSize=2;
                    /*获取总页数*/
                    PageSupport pages=new PageSupport();
                    pages.setCurrentPageNo(pageIndex);
                    pages.setPageSize(pageSize);
                    pages.setTotalCount(totalCount);
                    int totalPage=pages.getTotalPageCount();
                    
                    //控制首页和末页
                    if(pageIndex<1)
                        pageIndex=1;
                    else if(pageIndex>totalPage)
                        pageIndex=totalPage;
                    
                    //每页显示的新闻列表
                    List<News> newsList=newsService.getPageNewsList(pageIndex, pageSize);
                    int i=0;
                    for(News news:newsList){
                        i++;
                %>
                     <input type="hidden" id="totalPage" value="<%=totalPage%>"/>
                    <tr <%if(i%2==0){ %>class="admin-list-td-h2"<%} %>>
                        <td><a href='newsDetailView.jsp?id=<%=news.getId()%>'><%=news.getTitle() %></a></td>
                        <td><%=news.getAuthor() %></td>
                        <td><%=news.getCreateDate() %></td>
                        <td><a href='adminNewsCreate.jsp?id=2'>修改</a>
                            <a href="javascript:if(confirm('确认是否删除此新闻?')) location='adminNewsDel.jsp?id=<%=news.getId() %>'">删除</a>
                        </td>
                    </tr> 
                    <%} %>
                </tbody>
            </table>
           <div class="page-bar">
            <ul class="page-num-ul clearfix">
                <li>共<%=totalCount %>条记录&nbsp;&nbsp; <%=pageIndex %>/<%=totalPage %>页</li>
                <%
                    if(pageIndex>1){
                %>
                <a href="javaScript:page_nav(document.forms[0],1)">首页</a>
                <a href="javaScript:page_nav(document.forms[0],<%=pageIndex-1%>)">上一页</a>
                <%
                    }if(pageIndex<totalPage){
                %>
                <a href="javaScript:page_nav(document.forms[0],<%=pageIndex+1%>)">下一页</a>
                <a href="javaScript:page_nav(document.forms[0],<%=totalPage%>)">最后一页</a>
                <%
                    }
                %>&nbsp;&nbsp;
            </ul>
         <span class="page-go-form"><label>跳转至</label>
         <input type="text" name="inputPage" id="inputPage" class="page-key" />页
         <button type="button" class="page-btn" onClick='jump_to(document.forms[0],document.getElementById("inputPage").value)'>GO</button>
        </span>
        </div> 
        </div>
       </div>
   </div>
   </div>
</body></html>

adminNewsDel.jsp页面:

<%@page import="com.kgc.pojo.News"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@include file="../common/common.jsp" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'MyJsp.jsp' starting page</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->

  </head>
  
  <body>
  <%
    // 该页面为删除新闻的处理页面
    // (1) 获取删除新闻的id
    // (2) 调用后台方法删除对应id的新闻
    int id = Integer.parseInt(request.getParameter("id"));
    News news = new News();
    news.setId(id);
    String flag = "failed";
    if (newsService.delete(news)){
        flag = "success";
    }
    response.sendRedirect("newsDetailList.jsp?flag=" + flag);
   %>
  </body>
</html>

相关文章

  • 一、理解EL的特点

    一、问题引入 在做完分页功能之后,页面的html代码和java代码全混合到一起了,代码比较乱。 代码结构混乱 脚本...

  • 前端表达式

    EL与JSTL表达式 EL介绍 什么是EL 表达式语言 EL的功能 替代JSP页面中数据访问时的复杂编码 EL特点...

  • 【转】${sessionScope.user}的使用方法

    EL 全名为Expression LanguageEL 语法很简单,它最大的特点就是使用上很方便。接下来介绍EL主...

  • Selenium

    Selenium 特点:简单使用 关键命令 find_element(s)_by_tag_name find_el...

  • EL&JSTL的理解

    EL 解决了什么问题?简化Jsp,把部分需要用<% >写的命令换成另一种较为方便的形式;也就是把——取域中的数据并...

  • Java基础-List集合以及其子类简介(ArrayList,V

    List特点: 有序可重复; 特有功能: A:添加功能:void add(int index, object el...

  • Options的入门属性

    1、el : 挂载点与 $mount 有替换关系 2、data : 内部数据特点:支持对象和函数,优先使用函数 (...

  • Mac:开关 Rootless 机制

    Apple 在全新的 OS X El Capitan 10.11 系统上已经使用了 Rootlees , 可以理解...

  • 二、理解JSTL的特点

    一、JSTL简介 1.1简介 最下面的两个指令是说我要在这个页面中使用jstl的标签了,第一行是指的core核心标...

  • Spring常见面试题

    1. 你对Spring框架的理解(特点)? Spring框架有哪些模块 ? 问题:你对Spring框架的理解(特点...

网友评论

      本文标题:一、理解EL的特点

      本文链接:https://www.haomeiwen.com/subject/ufjvpftx.html