基于 JSP 实现,JSTL 和 EL 表达式操作

文章介绍：本篇文章主要是基于jsp使用其标签库（jstl）以及表达式语言（el）进行一个简单的任务训练，希望能帮到大家（内容以练习这些东西为主，因此并没有美观度，若有错误欢迎大家指出）

任务概述

某官网会不定时更新公司产品信息，并且潜在用户还可以注册账号成为公司的 VIP 用户，如何实现这些产品信息的动态更新和展示?

任务目标

业务目标：使用 JSP,JSTL 和 EL 实现页面数据的动态显示
技能目标: 熟悉 JSP 页面，使用 JSTL 和 EL 表达式

jsp：java server page（简单理解就是能实现java代码的html页面，具体的结尾我会附上jsp的博客介绍，大家感兴趣可以看看）

jstl：jsp standard tag library（jsp标准标签库）

EL：expression language（表达式语言）

需求理解

实现登陆功能，注册功能

代码

1、创建连接数据库的类（创建bean，创建接口，dao实现，factory调用）

bean

package com.kkb.JDBC;

import java.util.Objects;

public class User {

    private String uname;
    private String password;

    public User() {
    }

    public User(String uname, String password) {

        this.uname = uname;
        this.password = password;
    }


    public String getUname() {
        return uname;
    }

    public void setUname(String uname) {
        this.uname = uname;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    @Override
    public String toString() {
        return "User{" +

                ", uname='" + uname + '\'' +
                ", password='" + password + '\'' +
                '}';
    }

    @Override
    public boolean equals(Object o) {
        if (this == o) return true;
        if (o == null || getClass() != o.getClass()) return false;
        User user = (User) o;
        return Objects.equals(uname, user.uname) &&
                Objects.equals(password, user.password);
    }

    @Override
    public int hashCode() {
        return Objects.hash(uname, password);
    }
}

创建接口

package com.kkb.JDBC;

import java.util.List;

public interface BaseUserDao {
    /**
     * 向数据库插入内容
     * @param username
     * @param password
     * @return
     */
    boolean insert(String username, String password);
//根据账号密码查询是否在数据库中
    boolean findByPassword(String username, String password);
//获取user表行数
    int findCounts();
}

实现接口

package com.kkb.JDBC;

import java.sql.*;
import java.util.ArrayList;
import java.util.List;

public class MySqlUserDao implements BaseUserDao {
    //1、加载驱动（连接mysql的driver类）只需要实现一次，剩下的全部由工厂自行分配
    static {
        try {
            Class.forName("com.mysql.jdbc.Driver");
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }
    //直接初始化先
    Connection conn = null;
    Statement state = null;

    @Override
    public boolean insert(String username, String password) {
        //2、通过驱动得到连接(这个连接要是进入mysql),注意连接的时侯要说明操作或是读取时是否为unicode编码以及编码方式为什么
        try {
            conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/jdbc?useUnicode=true&characterEncoding=utf-8", "root", "");
            //3、通过连接对象获取执行对象
            state =  conn.createStatement();
            //4、通过对象执行sql语句
            //注意sql语句中的‘’代表加入的内容，但是java的字符串是要用”“的,而且如果直接用引号的话会导致直接加入所以还要用+连接
            int row = state.executeUpdate("insert into user values('" + username + "','" + password + "')");
            return row>0;
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }finally {
            try {
                state.close();
                conn.close();
            } catch (Exception throwables) {
                throwables.printStackTrace();
            }
        }
        return false;
    }

    /**
     * 预编译、先创建对象再编译
     * 预编译的区别在于预编译直接进行sql语句的预编译,同时由于是预编译因此要用？传参而不是直接传参
     * @param username
     * @param password
     * @return
     */
    @Override
    public boolean findByPassword(String username, String password) {
        ResultSet rs = null;
        try {
            conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/jdbc?useUnicode=true&characterEncoding=utf-8", "root", "");
            PreparedStatement state = conn.prepareStatement("select * from user where username=? and password=?");
            state.setString(1,username);
            state.setString(2,password);
            rs = state.executeQuery();
            return rs.next();
        } catch (Exception throwables) {
            throwables.printStackTrace();
        }finally {
            try {
                conn.close();
                state.close();
            } catch (Exception throwables) {
                throwables.printStackTrace();
            }
        }
        return false;
    }

    @Override
    public int findCounts() {
        int row=0;
        ResultSet rs=null;
        try {
            conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/jdbc?useUnicode=true&characterEncoding=utf-8", "root", "");
            state = conn.createStatement();
            rs = state.executeQuery("select count(*) from user");
            rs.next();
            row=rs.getInt("count(*)");
        } catch (Exception throwables) {
            throwables.printStackTrace();
        }finally {
            try {
                conn.close();
                state.close();
            } catch (Exception throwables) {
                throwables.printStackTrace();
            }
        }
        return row;
    }


}

工厂调用

package com.kkb.JDBC;

public class UserDaoFactory {
    public static BaseUserDao get() {
        return new MySqlUserDao();
    }
}

2、创建servlet实现类

登陆类

package com.kkb.servlet;


import com.kkb.JDBC.BaseUserDao;
import com.kkb.JDBC.UserDaoFactory;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class LoginServlet  extends HttpServlet {


    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //处理post请求
        System.out.println("处理");
        /**
         * 需要将请求的内容进行解码
         */
        req.setCharacterEncoding("utf-8");
        //1、接收参数
        String uname = req.getParameter("uname");
        String upass = req.getParameter("upass");
        BaseUserDao dao = UserDaoFactory.get();
        boolean flag = dao.findByPassword(uname, upass);
        int counts = dao.findCounts();
        //2、跳转页面
        if (flag) {
            resp.sendRedirect("/success.html");
        } else {
            req.getRequestDispatcher("/error.jsp").forward(req,resp);
        }
    }

    @Override
    public void destroy() {
        System.out.println("销毁");
    }

    @Override
    public void init() throws ServletException {
        System.out.println("初始化");
    }
}

注册类

package com.kkb.servlet;

import com.kkb.JDBC.BaseUserDao;
import com.kkb.JDBC.UserDaoFactory;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class RegisterServlet extends HttpServlet {


    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        String uname = req.getParameter("uname");
        String upass = req.getParameter("upass");
        if (uname.equals("")||upass.equals("")){
            return;
        }
        BaseUserDao dao = UserDaoFactory.get();
        boolean insert = dao.insert(uname, upass);
        if (insert) {
            req.getRequestDispatcher("/RegisterSuccess.jsp").forward(req, resp);
        } else {
            resp.sendRedirect("/error.jsp");
        }
    }

    @Override
    public void destroy() {
        super.destroy();
    }

    @Override
    public void init() throws ServletException {
        super.init();
    }
}

3、动态页面实现

登陆页面

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

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        margin-top: 50px;
        margin-left: 50px;
      }

      li{
        list-style: none;
        padding-top: 20px;
      }
    </style>

  </head>
  <body>
  <%
    request.setAttribute("now", new Date());
    
  %>
  <div>
    <h3>现在的时间为<fmt:formatDate value="${now}" pattern="yyyy-MM-dd HH:mm"></fmt:formatDate> </h3>
    <br><br>
    <h2>请登录您的账号</h2>
    <!--  声明表单的 提交方式 -->
    <!--    <a href="/tologin">测试</a>-->
    <form action="/login" method="post" name="myform" >
      <ul>
        <li>用户名:<input type="text" name="uname" ><br></li>
        <li>密&nbsp;&nbsp;&nbsp;码:<input type="text" name="upass"><br></li>
        <li><input type="submit"  value="登陆" >
          <button οnclick=window.open("register.jsp")>注册</button></li>
      </ul>
    </form>
  </div>


  </body>
</html>

注册页面

<%--
  Created by IntelliJ IDEA.
  Date: 2020/11/29
  Time: 13:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            margin-left: 40px;
            margin-top: 20px;
        }
        li{
            margin-top: 20px;
        }
        ul{
            list-style: none;
        }
    </style>
</head>
<body>
<div>

    <form action="/register" method="post">
        <h1>注册</h1>
        <ul>
            <li>请输入注册的用户名:<input name="uname" type="text"></li>
            <li>请输入注册的密码 ：<input name="upass" type="text"></li>
            <li><input type="submit" value="提交">
                <input type="reset" value="重置">
            </li>
            <li><button οnclick=window.open("index.jsp")>返回登陆界面</button> </li>
        </ul>

    </form>
</div>
</body>
</html>

各种成功失败页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>Title</title>
</head>
<body>
<a href="index.jsp">登陆失败，请输入正确的用户名密码</a>
</body>
</html>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="com.kkb.JDBC.UserDaoFactory" %>
<%@ page import="com.kkb.JDBC.BaseUserDao" %><%--
  Created by IntelliJ IDEA.
  User: 刘元汉
  Date: 2020/11/29
  Time: 14:10
  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>
<%
    BaseUserDao dao = UserDaoFactory.get();
    int counts = dao.findCounts();
    request.setAttribute("counts",counts);
%>
<c:set var="luck" value="${counts}"></c:set>
<h2>注册成功，您是第${counts}个用户
    <c:if test="${luck%6==0}">很可惜您不是第${counts}个注册用户，无法成为vip用户</c:if>
</h2>
<%@include file="error.jsp" %>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>恭喜你登录成功</h1>
</body>
</html>

效果图

遇到问题

1、jsp访问html页面乱码问题：

只能通过访问jsp页面解决

2、操作数据库获取用户人数出现问题：

就是对next理解不深而已，next游标对应行，然后再用getXXX()来获取某一个字段在这一行的值

注意：一定要记住写的时候加注释！！

jsp介绍

clude file=“error.jsp” %>

```

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>恭喜你登录成功</h1>
</body>
</html>

以后更新：
jsp介绍