EL表达式、JSTL、java点击切换验证码实例

这只是一个记录,并不是总结性的文章

EL表达式

  1. 概念:Expression Language 表达式语言
  2. 作用:替换和简化jsp页面中java代码的编写
  3. 语法:${表达式}
  4. 注意:
    • jsp默认支持el表达式的。如果要忽略el表达式
      1. 设置jsp中page指令中:isELIgnored=“true” 忽略当前jsp页面中所有的el表达式
      2. ${表达式} :忽略当前这个el表达式
  5. 使用:
    1. 运算:
      • 运算符:
        1. 算数运算符: + - * /(div) %(mod)
        2. 比较运算符: > < >= <= == !=
        3. 逻辑运算符: &&(and) ||(or) !(not)
        4. 空运算符: empty
          • 功能:用于判断字符串、集合、数组对象是否为null或者长度是否为0
          • ${empty list}:判断字符串、集合、数组对象是否为null或者长度为0
          • ${not empty str}:表示判断字符串、集合、数组对象是否不为null 并且 长度>0
    2. 获取值
      1. el表达式只能从域对象中获取值
      2. 语法:
        1. ${域名称.键名}:从指定域中获取指定键的值

          • 域名称:
            1. pageScope --> pageContext
            2. requestScope --> request
            3. sessionScope --> session
            4. applicationScope --> application(ServletContext)
          • 举例:在request域中存储了name=张三
          • 获取:${requestScope.name}
        2. ${键名}:表示依次从最小的域中查找是否有该键对应的值,直到找到为止。

        3. 获取对象、List集合、Map集合的值

          1. 对象:${域名称.键名.属性名}

            • 本质上会去调用对象的getter方法
          2. List集合:${域名称.键名[索引]}

          3. Map集合:

            • ${域名称.键名.key名称}
            • ${域名称.键名[“key名称”]}
      3. 隐式对象:
        • el表达式中有11个隐式对象
        • pageContext:
        • 获取jsp其他八个内置对象
          • ${pageContext.request.contextPath}:动态获取虚拟目录

JSTL

  1. 概念:JavaServer Pages Tag Library JSP标准标签库

    • 是由Apache组织提供的开源的免费的jsp标签 <标签>
  2. 作用:用于简化和替换jsp页面上的java代码

  3. 使用步骤:

    1. 导入jstl相关jar包
    2. 引入标签库:taglib指令: <%@ taglib %>
    3. 使用标签
  4. 常用的JSTL标签

    1. if:相当于java代码的if语句

      1. 属性:
        • test 必须属性,接受boolean表达式
          • 如果表达式为true,则显示if标签体内容,如果为false,则不显示标签体内容
          • 一般情况下,test属性值会结合el表达式一起使用
      2. 注意:
        • c:if标签没有else情况,想要else情况,则可以在定义一个c:if标签
    2. choose:相当于java代码的switch语句

      1. 使用choose标签声明 相当于switch声明
      2. 使用when标签做判断 相当于case
      3. 使用otherwise标签做其他情况的声明 相当于default
    3. foreach:相当于java代码的for语句

  5. 练习:

    • 需求:在request域中有一个存有User对象的List集合。需要使用jstl+el将list集合数据展示到jsp页面的表格table中

  • 常用的JSTL标签练习
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
</head>
<body>

    <%--
        c:if标签

    --%>
    <c:if test="true">
        <h1>hello.....</h1>
    </c:if>
    <br>
    <%
        //判断request域中的一个list集合是否为空,如果不为null则显示遍历集合
        List list = new ArrayList();
        list.add("aaaaaaa");
        request.setAttribute("list",list);
        request.setAttribute("number",3);


    %>
    <c:if test="${not empty list}">
        遍历集合。。。。

    </c:if>
    <c:if test="${number % 2 != 0}">
        ${number} 为奇数
    </c:if>

    <%--
        完成数字编号对应星期几案例
            1. 域中存储一数字
            2. 使用choose标签取出数字         相当于switch
            3. 使用when标签做数字判断         相当于case
            4. otherwise标签坐其他情况的声明  相当于default
    --%>
    <% 
        request.setAttribute("number",3);
    %>
    
    <c:choose>
        <c:when test="${number == 1}">星期一</c:when>
        <c:when test="${number == 2}">星期二</c:when>
        <c:when test="${number == 3}">星期三</c:when>
        <c:when test="${number == 4}">星期四</c:when>
        <c:when test="${number == 5}">星期五</c:when>
        <c:when test="${number == 6}">星期六</c:when>
        <c:when test="${number == 7}">星期日</c:when>

        <c:otherwise>数字输入有误</c:otherwise>
    </c:choose>

    <%--for(int i = 0;i<= 10;i++){}--%>
    <c:forEach begin="1" end="10" var="i" step="1" varStatus="s">
        顺序打印i:
        ${i}  ${s.index}   <h4>${s.count}</h4><br>
    </c:forEach>

     <hr>
     <%
        List list1 = new ArrayList();
        list1.add("aaa");
        list1.add("bbb");
        list1.add("ccc");
        request.setAttribute("list",list1);

     %>

    <c:forEach items="${list}" var="str" varStatus="s">
        ${s.index} ${s.count} ${str}<br>
    </c:forEach>


</body>
</html>


  • 在request域中有一个存有User对象的List集合。需要使用jstl+el将list集合数据展示到jsp页面的表格table中
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="domain.User" %>
<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
</head>
<body>

<%
    List list = new ArrayList();
    list.add(new User("大头",23,new Date()));
    list.add(new User("大成",26,new Date()));
    list.add(new User("大王",24,new Date()));

    request.setAttribute("list",list);
%>

<table border="1" width="500" align="center">
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>生日</th>
    </tr>
   <%-- 数据行--%>
    <c:forEach items="${list}" var="user" varStatus="s">
        <c:if test="${s.count % 2 == 0}">

            <tr bgcolor="#ffe4c4">
                <td>${s.count}</td>
                <td>${user.name}</td>
                <td>${user.age}</td>
                <td>${user.birStr}</td>
            </tr>
        </c:if>
        <c:if test="${s.count % 2 != 0}">

            <tr bgcolor="#00ffff">
                <td>${s.count}</td>
                <td>${user.name}</td>
                <td>${user.age}</td>
                <td>${user.birStr}</td>
            </tr>
        </c:if>
    </c:forEach>
</table>
</body>
</html>

  • 把用户信息封装成实体类
package domain;/**
 * Copyright (C), 2019-2020
 * author  candy_chen
 * date   2020/9/24 19:54
 * version 1.0
 * Description: 测试
 */

import java.text.SimpleDateFormat;
import java.util.Date;

/**
 * 用户实体类 JavaBean
 */
public class User {
    
    
    private String name;
    private int age;
    private Date birthday;

    public User() {
    
    
    }

    public User(String name, int age, Date birthday) {
    
    
        this.name = name;
        this.age = age;
        this.birthday = birthday;
    }

    /**
     * 逻辑视图 只是为了得到一个更好看的视图
     * @return
     */

    public String getBirStr(){
    
    
        if (birthday != null){
    
    
            //1.格式化日期对象
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:m:ss");
            //2.返回字符串即可
            return sdf.format(birthday);
        }else {
    
    
            return "";
        }


    }

    public String getName() {
    
    
        return name;
    }

    public void setName(String name) {
    
    
        this.name = name;
    }

    public int getAge() {
    
    
        return age;
    }

    public void setAge(int age) {
    
    
        this.age = age;
    }

    public Date getBirthday() {
    
    
        return birthday;
    }

    public void setBirthday(Date birthday) {
    
    
        this.birthday = birthday;
    }

    @Override
    public String toString() {
    
    
        return "User{" +
                "name='" + name + '\'' +
                ", age=" + age +
                ", birthday=" + birthday +
                '}';
    }
}

验证码切换功能

  • 生成验证码图片的代码
package servlet; /**
 * Copyright (C), 2019-2020
 * author  candy_chen
 * date   2020/9/17 14:52
 * version 1.0
 * Description: 测试
 */

import javax.imageio.ImageIO;
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.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

/**
 *
 */
@WebServlet("/checkCodeServlet")
public class CheckCodeServlet extends HttpServlet {
    
    
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    

        int width = 100;//图片的宽
        int height = 50;//图片的长
        //1.创建一个对象,在内存中画图片(验证码的图片对象
        BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);

        //2.美化图片
        //2.1 填充背景色
        Graphics g = image.getGraphics();//画笔对象
        g.setColor(Color.GREEN);
        g.fillRect(0,0,width,height);

        //2.2
        g.setColor(Color.RED);
        g.draw3DRect(0,0,width-1,height-1,true);

        String str = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        //生成随机角标
        Random ran = new Random();
        //定义一个可变字符
        StringBuilder sb = new StringBuilder();
        for (int i = 0; i < 5; i++) {
    
    
            int index = ran.nextInt(str.length());
            //获取字符
            char ch = str.charAt(index);//随机字符
            //把生成的随机字符压入sb中
            sb.append(ch);
            //2.3 写验证码
            g.drawString(ch+"",5+width/5*i,height/2);
        }
        //定义一个变量存储验证码的内容
        String checkCode_session = sb.toString();
        //将验证码存入session
         request.getSession().setAttribute("checkCode_session",checkCode_session);
        //2.4 画干扰线
        g.setColor(Color.MAGENTA);

        for (int i = 0; i < 10; i++) {
    
    
            //随机生成坐标点
            int x1 = ran.nextInt(width);
            int x2 = ran.nextInt(width);

            int y1 = ran.nextInt(width);
            int y2 = ran.nextInt(width);

            g.drawLine(x1,y1,x2,y2);
        }



        //3.将图片输出到页面展示,验证码图片是jpg结尾的
        ImageIO.write(image,"jpg",response.getOutputStream());


    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
        this.doPost(request,response);
    }
}

  • 登录校验(验证码校验和用户密码校验)
package servlet; /**
 * Copyright (C), 2019-2020
 * author  candy_chen
 * date   2020/9/24 15:18
 * version 1.0
 * Description: 测试
 */

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 javax.servlet.http.HttpSession;
import java.io.IOException;
import java.util.Map;

/**
 *
 */
@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
    
    
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
        //1.设置request编码
        request.setCharacterEncoding("utf-8");
        //2.获取数据库中的参数,判断用户名和密码是否一致
//        Map<String,String[]> parameterMap = request.getParameterMap();        //Map操作数据库的方式封装
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        String checkCode = request.getParameter("checkCode");
        //3.先获取生成的验证码
        HttpSession session = request.getSession();
        String checkCode_session = (String) session.getAttribute("checkCode_session");
        //由于验证码不能一致有效,返回页面没有更新验证码,
        // 删除session中存储的验证码
        session.removeAttribute("checkCode_session");
        //3.先判断验证码是否正确
        if (checkCode.equalsIgnoreCase(checkCode_session)){
    
    
            //忽略大小写比较字符串
            //验证码正确
            //判断用户名和密码是否一致
            if ("candy".equals(username) && "123".equals(password)){
    
    //需要调用UserDao查询数据库
                 //登录成功
                //存储用户信息
                session.setAttribute("user",username);
                //重定向success.jsp
                response.sendRedirect(request.getContextPath() + "/success.jsp");

            }else {
    
    
                //登录失败
                //存储提示信息到request
                request.setAttribute("login_error","用户名或密码错误!~");
                //转发到登录页面
                request.getRequestDispatcher( "/login.jsp").forward(request,response);
            }
        }else {
    
    
            //验证码不一致
            //存储提示信息到request
            request.setAttribute("cc_error","验证码错误!~");
            //转发到登录页面
            request.getRequestDispatcher("/login.jsp").forward(request,response);
        }




    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
        this.doPost(request, response);
    }
}

  • 显示页面的jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title> login</title>
    <script>
        /*
        点击超链接或者图片,需要换一张
        1.给超链接和图片绑定单机事件
        2.重新设置图片的src属性值
         */
        /*
        window.onload = function () {

            //1.获取图片对象
            var img = document.getElementById("changeCheckCode");
            img.onclick = function () {
                //加时间戳
                var date = new Date().getTime();
                img.src = "/candy/checkCodeServlet?" + date;

            }
        }
        */

        window.onload = function () {
     
     
            document.getElementById("changeCheckCode").onclick = function () {
     
     
                this.src = "/candy/checkCodeServlet?" + new Date().getTime();
            }
        }

    </script>
    <style>
        div{
     
     
            color: blue;
        }
    </style>
</head>
<body>
    <form action="${pageContext.request.contextPath}/loginServlet" method="post">
        <table>
            <tr>
                <td>用户名</td>
                <td ><input type="text" name="username"></td>
            </tr>
            <tr>
                <td>密   码</td>
                <td><input type="text" name="password"></td>
            </tr>
            <tr>
                <td>验证码</td>
                <td><input type="text" name="checkCode"></td>
            </tr>
            <tr>
                <td colspan="2"> <img id="changeCheckCode" src="${pageContext.request.contextPath}/checkCodeServlet" ></td>
                <%--                不能点击--%>
                <%--  <td>  <a id="checkCode" href="/candy/checkCodeServlet">看不清换一张?</a> </td>--%>
            </tr>
            <tr>
                <td colspan="2"><input type="submit" value="登录"></td >
            </tr>

        </table>


    </form>

    ${requestScope.cc_error}

<%--    显示错误信息  cc_error已经使用setAttribute存到了request中,再使用getAttribute获取即可--%>
    <div><%= request.getAttribute("cc_error")  == null ? "" : request.getAttribute(("cc_error"))%></div>
    <div><%= request.getAttribute("login_error") == null ? "" : request.getAttribute("login_error")%></div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_35655602/article/details/108869042
今日推荐