java web jsp jstl練習

JSP 的學習。

核心功能模塊
1.
源代碼層（ src ）

HelloWorld ：主程序入口
領域模型： domain 包含User.java和ceshi.java
控制器： servlet 包含登錄驗證和驗證碼相關Servlet

Web表現層（ web ）
- JSP頁面：包含首頁(index.jsp)、登錄頁(login.jsp)等
- 技術組件：
  - EL表達式： el 目錄下4個示例頁面
  - JSTL標簽庫： jstl 目錄下4個示例頁面
- 依賴庫： lib 包含Servlet和JSTL相關jar包
構建輸出（ out ）
- 編譯產物：production目錄下為編譯后的class文件
- 部署包：artifacts目錄包含Web應用的 exploded 部署版本

后端：Java + Servlet
前端：JSP + EL + JSTL
構建工具：IntelliJ IDEA內置構建工具
服務器：Java Web容器 Tomcat

項目包含：

用戶登錄驗證功能（LoginServlet）
驗證碼生成功能（CheckCodeServlet）
基礎的頁面跳轉和數據展示功能
EL與JSTL標簽庫的學習示例頁面

├── .idea\
│   ├── .gitignore
│   ├── libraries\
│   │   └── lib.xml
│   ├── misc.xml
│   ├── modules.xml
│   └── workspace.xml
├── day22.iml
├── src\
│   └── com\
│       └── demo\
│           ├── HelloWorld.java
│           ├── domain\
│           │   ├── User.java
│           │   └── ceshi.java
│           └── servlet\
│               ├── CheckCodeServlet.java
│               └── LoginServlet.java
└── web\├── 500.jsp├── WEB-INF\│   └── lib\│       ├── javax.servlet.jsp.jstl.jar│       └── jstl-impl.jar.│       └── javax.servlet.jar├── el\│   ├── el1.jsp│   ├── el2.jsp│   ├── el3.jsp│   └── el4.jsp├── home.jsp├── index.jsp├── jstl\│   ├── jstl1.jsp│   ├── jstl2.jsp│   ├── jstl3.jsp│   └── jstl4.jsp├── login.jsp├── success.jsp└── top.jsp

登錄html


<!-- 登錄頁 login.jsp -->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>login</title><style>span{color: #62c6ff;}</style><script>window.onload = function(){document.getElementById("img").onclick = function(){this.src = "/checkCodeServlet?" + new Date().getTime();}}</script>
</head>
<body>
<form action="/loginServlet"><table><tr><td>用戶名：</td><td><input type="text" name="username"/><span><%=request.getAttribute("login_error") == null ? "" : request.getAttribute("login_error")%></span></td></tr><tr><td>密 碼：</td><td><input type="password" name="pwd"/></td></tr><tr><td>驗證碼：</td><td><input type="text" name="checkCode"/><span><%=request.getAttribute("cc_error") == null ? "" : request.getAttribute("cc_error")%></span></td></tr><tr><td colspan="2"><img id="img" src="/checkCodeServlet"><a href="">看不清，換一張</a></td></tr><tr><td colspan="2"><input type="submit" value="登錄"/></td></tr></table>
</form></body>
</html><!-- 登錄成功后跳轉的頁面 -->
<%@ page contentType="text/html;charset=UTF-8" language="java" %><html>
<head><title>success</title>
</head>
<body>
<h1><%=request.getSession().getAttribute("user")%>,歡迎您！</h1>
</body>
</html><!-- jsp組件概念 top.jsp -->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<h1>首頁logo的位置</h1><!-- jsp組件概念 home.jsp 使用 top.jsp -->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page trimDirectiveWhitespaces="true" %>
<%@ include file="top.jsp" %>
<html>
<head><title>首頁</title><style>span {color: red;}</style>
</head>
<body><h3> 這是home.jsp</h3>
<span><%=pageContext.getAttribute("msg")%></span></body>
<%out.println("hello QQ!");%><!-- jsp組件概念 index.jsp 使用 home.jsp -->
<%@ page import="java.util.*" %><%--<%@ page contentType="text/html;charset=UTF-8" errorPage="500.jsp" language="java" buffer="16kb" %>--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" buffer="16kb" %><html><head><title>$Title$</title><style>span{color: red;}</style></head><body><%List list = new ArrayList();
//          int a = 3 / 0;%><%pageContext.setAttribute("msg","hello jsp!");%><span><%=pageContext.getAttribute("msg")%></span><%request.getRequestDispatcher("/home.jsp").forward(request,response);%>$END$111</body>
</html></html><!-- 異常頁面 500.jsp -->
<%@ page contentType="text/html;charset=UTF-8" isErrorPage="true" language="java" %><html>
<head><title>Title</title>
</head>
<body><h1>服務器正忙... ...</h1>
<%String message = exception.getMessage();out.println(message);
%></body>
</html>

后端實現

import java.text.SimpleDateFormat;
import java.util.Date;public class User {private String name;private int age;private Date birthday;public User(String name, int age, Date birthday) {this.name = name;this.age = age;this.birthday = birthday;}/*** 邏輯視圖* @return*/public String getStrDate(){if(birthday != null){SimpleDateFormat sdf = new SimpleDateFormat("yyyy年MM月dd日 hh:mm:ss");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;}
}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 javax.servlet.http.HttpSession;
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 bufferedImage = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);//2、美化//2.1填充背景顏色Graphics graphics = bufferedImage.getGraphics();//畫圖對象graphics.setColor(Color.PINK);graphics.fillRect(0,0,width,height);//2.2畫邊框graphics.setColor(Color.BLUE);graphics.drawRect(0,0,width-1,height-1);//2.3實現驗證碼隨機生成String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";//隨機生成角標Random random = new Random();//存儲生成的驗證碼StringBuilder stringBuilder = new StringBuilder();for (int i = 1; i <=4 ; i++) {int index = random.nextInt(str.length());char c = str.charAt(index);stringBuilder.append(c);graphics.drawString(c+"",width/5 * i,height/2);}String checkCode_session = stringBuilder.toString();//存儲驗證碼到session中HttpSession session = request.getSession();session.setAttribute("checkCode_session",checkCode_session);//2.4畫干擾線graphics.setColor(Color.GREEN);for (int i = 0; i < 10 ; i++) {int x1 = random.nextInt(width);int x2 = random.nextInt(width);int y1 = random.nextInt(height);int y2 = random.nextInt(height);graphics.drawLine(x1,y1,x2,y2);}//3、輸出驗證碼到瀏覽器ImageIO.write(bufferedImage,"jpg", response.getOutputStream());}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request,response);}
}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;@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1、設置request的編碼方式request.setCharacterEncoding("utf-8");//2、獲取參數String username = request.getParameter("username");String password = request.getParameter("pwd");//用戶輸入的驗證碼String checkCode = request.getParameter("checkCode");//3、獲取驗證碼HttpSession session = request.getSession();String checkCode_session = (String)session.getAttribute("checkCode_session");//移除驗證碼session.removeAttribute("checkCode_session");//4、判斷用戶輸入的驗證碼和生成的驗證碼是否一致//判斷輸入的驗證碼不能為空if(checkCode != null && checkCode.equalsIgnoreCase(checkCode_session)){//驗證碼正確//判斷用戶名和密碼發是否正確if("zhangsan".equals(username) && "123".equals(password)) {  //應該使用UserDao訪問數據庫得到的//用戶名和密碼正確//存儲數據session.setAttribute("user",username);//跳轉頁面  success.jsp  重定向response.sendRedirect(request.getContextPath() + "/success.jsp");}else{//返回提示信息request.setAttribute("login_error","用戶名或密碼錯誤！");//跳轉頁面   轉發request.getRequestDispatcher("/login.jsp").forward(request,response);}}else{//驗證碼錯誤，給用戶返回提示信息request.setAttribute("cc_error","驗證碼錯誤！");//跳轉頁面(轉發)request.getRequestDispatcher("/login.jsp").forward(request,response);}}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}
}

jsp 練習

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>el表達式</title>
</head>
<body><%boolean a = 3 > 4;out.println(a);String str = "123";request.setAttribute("str",str);request.setAttribute("a",null);
%>
<hr>\${ 3 > 4}
<h3>運算符</h3>
${ 3 + 4}<br>
${ 3 - 4}<br>
${ 3 * 4}<br>
${ 3 / 4}<br>
${ 3 div 4}<br>
${ 3 % 4}<br>
${ 3 mod 4}<br><h3>比較運算符</h3>
${ 3 == 3 }<h3>邏輯運算符</h3>
${ 4 > 3 and 5 > 4 ? "ok" : "no"}
${ 4 > 3 && 5 > 4 ? "ok" : "no"}<h3>空運算符</h3>${ str }
${ empty str }${ a }
${ not empty a }</body>
</html><%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head><title>el獲取值</title>
</head>
<body><%request.setAttribute("name","張三");session.setAttribute("ok","別瞌睡！");session.setAttribute("name","李四");%><h1>${ requestScope.name }</h1><h1>${ sessionScope.ok }</h1><h1>${ sessionScope.name }</h1><h1>${ name }</h1></body>
</html><%@ page import="com.demo.domain.User" %>
<%@ page import="java.util.*" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>el獲取對象、List集合、Map集合的值</title>
</head>
<body>
<%User user = new User();user.setName("喬丹");user.setAge(57);user.setBirthday(new Date());request.setAttribute("user", user);List list = new ArrayList();list.add("aaa");list.add("bbb");list.add(user);request.setAttribute("list",list);Map map = new HashMap();map.put("a","aaa");map.put("b","bbb");map.put("u",user);request.setAttribute("map",map);%><h3>el獲取對象的值</h3>
<%--獲取對象的值的規則是：1）通過setter或getter方法，然后去掉set或者get，然后首字母小寫2）getName -- >   Name -- > name
--%>${ requestScope.user }
${ requestScope.user.name }
${ requestScope.user.age }${ requestScope.user.strDate }<hr>
<h3>el獲取List的值</h3>
${ requestScope.list }
${ requestScope.list[0] }
${ requestScope.list[1] }
${ requestScope.list[2].name }<hr>
<h3>el獲取Map的值</h3>
${ requestScope.map }
${ requestScope.map.a }
${ requestScope.map["b"] }
${ requestScope.map.u.name }</body>
</html><%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head><title>el的隱式對象</title>
</head>
<body>${ pageContext.request.contextPath }</body>
</html>

JSTL練習

<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head><title>c:if的學習</title>
</head>
<body>
<%--
常用的JSTL標簽
1. if:相當于java代碼的if語句1. 屬性：* test 必須屬性，接受boolean表達式* 如果表達式為true，則顯示if標簽體內容，如果為false，則不顯示標簽體內容* 一般情況下，test屬性值會結合el表達式一起使用2. 注意：* c:if標簽沒有else情況，想要else情況，則可以在定義一個c:if標簽--%>
<%//獲取request域中的list集合，并判斷是否為null，如果不為null則輸出“遍歷集合”List list = new ArrayList();list.add("a");request.setAttribute("list",list);request.setAttribute("number", 4);%><c:if test="${ not empty list }">遍歷集合... ...</c:if>
<c:if test="${number % 2 == 0}">${number}是偶數
</c:if><c:if test="${number % 2 != 0}">${number}是奇數
</c:if></body>
</html><%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head><title>c:choose的學習</title>
</head>
<body><%//根據一個數字來顯示對應的星期幾/*** 1、存儲一個數字；* 2. 使用choose標簽聲明         			相當于switch聲明* 3. 使用when標簽做判斷         			相當于case* 4. 使用otherwise標簽做其他情況的聲明    	相當于default*/request.setAttribute("number",50);%><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></body>
</html><%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<html>
<head><title>c:forEach的學習</title>
</head>
<body><%
//         1. 完成重復的操作
//         for(int i = 0; i < 10; i ++){
//
//         }
//         * 屬性：
//         begin：開始值
//         end：結束值
//         var：臨時變量
//         step：步長
//         varStatus:循環狀態對象
//         index:容器中元素的索引，從0開始
//         count:循環次數，從1開始
//         2. 遍歷容器
//         List<User> list;
//         for(User user : list){
//
//         }
//
//         * 屬性：
//         items:容器對象
//         var:容器中元素的臨時變量
//         varStatus:循環狀態對象
//         index:容器中元素的索引，從0開始
//         count:循環次數，從1開始List list = new ArrayList();list.add("aaa");list.add("bbb");list.add("ccc");request.setAttribute("list",list);%><c:forEach begin="1" end="10" var="i" step="2" varStatus="s">${i} <h3>${ s.index }</h3> ${ s.count } <hr></c:forEach><hr>
<%--遍歷集合--%><c:forEach items="${ list }" var="ltt" varStatus="str">${ str.index } <h3>${ str.count }</h3> ${ ltt }<br></c:forEach></body>
</html><%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.List" %>
<%@ page import="com.demo.domain.User" %>
<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head><title>c標簽練習</title>
</head>
<body><%//需求：在request域中有一個存有User對象的List集合。//      需要使用jstl+el將list集合數據展示到jsp頁面的表格table中，并且偶數行顯示紅色，奇數行顯示綠色List list = new ArrayList();list.add(new User("張三", 20, new Date()));list.add(new User("李四", 20, new Date()));list.add(new User("王五", 20, new Date()));//將list集合存儲在request域中request.setAttribute("list", list);%>
<table border="1" width="500" align="center"><tr><td>編號</td><td>姓名</td><td>年齡</td><td>生日</td></tr><c:if test="${ not empty list }"><c:forEach items="${ list }" var="haha" varStatus="s"><c:if test="${ s.count % 2 != 0 }"><tr style="background: red;"><td>${ s.count }</td><td>${ haha.name }</td><td>${ haha.age }</td><td>${ haha.strDate }</td></tr></c:if><c:if test="${ s.count % 2 == 0 }"><tr style="background: green;"><td>${ s.count }</td><td>${ haha.name }</td><td>${ haha.age }</td><td>${ haha.strDate }</td></tr></c:if></c:forEach></c:if><c:if test="${ empty list }"><%--<%--%><%--if(list == null || list.size() == 0){--%><%--%>--%><tr><td>無數據</td><td>無數據</td><td>無數據</td><td>無數據</td></tr><%--<%--%><%--}--%><%--%>--%></c:if></table></body>
</html>

使用到的jar
javax.servlet.jar
javax.servlet.jsp.jstl.jar
jstl-impl.jar

訪問：
http://localhost:8081/login.jsp
http://localhost:8081/index.jsp
http://localhost:8081/el/el1.jsp
http://localhost:8081/el/el2.jsp
http://localhost:8081/el/el3.jsp
http://localhost:8081/el/el4.jsp
http://localhost:8081/jstl/jstl1.jsp
http://localhost:8081/jstl/jstl2.jsp
http://localhost:8081/jstl/jstl3.jsp
http://localhost:8081/jstl/jstl4.jsp