一.JSTL标签库
1.1 JSTL概述
JSTL(jsp standard tag library):JSP标准标签库,它是针对EL表达式一个扩展,通过JSTL标签库与EL表达式结合可以完成更强大的功能
JSTL它是一种标签语言,JSTL不是JSP内置标签
JSTL标签库主要包含:
****核心标签
格式化标签
SQL标签
XML标签
JSTL函数
1.2 JSTL标签库引入
a.JSTL如果要使用需要引入两个jar包:jstl.jar,standard.jar
b.我们在JSP中手动引入核心标签库
prefix:前缀(别名)
uri:uri指定的路径中定义了这些核心标签
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
1.3 if标签
<%--test属性中写即将做判断的EL表达式
如果test属性中EL表达式最终结果为true,将执行if标签中的内容
--%>
cpp
<%@ page import="bean.Person" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>JSTL标签if标签的使用</title>
</head>
<body>
<%
request.setAttribute("p1",new Person(18,"male"));
request.setAttribute("p2",new Person(20,"man"));
%>
<c:if test="${!empty p1}">
login success
</c:if><br>
<c:if test="${!empty p2}">
${p2.age}岁性别${p2.gender} login success
</c:if><br>
<c:if test="${empty p2.name && p2.gender=='man'}">
${p2.age}
</c:if>
</body>
</html>1.4 forEach标签
<%--forEach标签遍历List集合
items:通过EL表达式取出遍历的集合对象
var:把每次遍历到的对象,以及var对应值存储到pageContext域中
例如:var="user" pageContext.setAttribute("user",每次遍历到对象)
--%>
<%--var:当遍历map时,每次把遍历到entry对象(封装着key=value)存储到pageContext域--%>
<%-- 例如:var="entry" pageContext.setAttribute("entry",每次遍历到的entry对象)--%>
cpp
<%@ page import="bean.Person" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.Arrays" %>
<%@ page import="java.util.HashMap" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>forEach标签使用</title>
</head>
<body>
<%
//list集合
List<Person> peoples = Arrays.asList(
new Person("张三", 18, "man"),
new Person("李四", 20, "male")
);
request.setAttribute("peoples", peoples);
//map集合
HashMap<String, Person> map = new HashMap<>();
map.put("张三", new Person(18, "man"));
map.put("001", new Person(20, "male"));
session.setAttribute("map", map);
%>
<c:if test="${!empty peoples}">
<c:forEach items="${peoples}" var="people">
${people.name},${people.age},${people.gender}<br>
</c:forEach>
</c:if>
<c:if test="${!empty map}">
<c:forEach items="${map}" var="entry">
${entry.key},${entry.value.age},${entry.value.gender}<br>
</c:forEach>
</c:if>
</body>
</html>二.JavaEE三层架构
web层:JSP/Servlet 主要用于显示数据以及接收客户端的数据
service层:主要负责业务处理,存放业务逻辑相关的代码(数据验证,事务处理..)
dao层:负责跟数据库打交道,负责数据库访问,操作数据库相关代码
三.登录案例
web层
java
//登录判断
@WebServlet("/loginServlet")
public class loginServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取表单传过来的参数，并将参数封装为对象
String username = request.getParameter("username");
String password = request.getParameter("password");
//将用户输入的用户名和密码封装成User对象
User user = new User(username, password);
//最终在数据库中查询到的User对象
User finalyUser = UserServlet.getFinalyUser(user);
//判断finalyUser，若为空，则在数据库中查询不到，登录失败，反之登录成功
if (finalyUser!=null){
request.setAttribute("statusCode",100);
request.setAttribute("msg","登录成功");
//将正确的user用户信息存储在session域中
request.getSession().setAttribute("user",finalyUser);
}else {
request.setAttribute("statusCode",101);
request.setAttribute("msg","用户名或密码错误");
//将来在页面回显用户输入的错误信息，方便用户进行修改
request.setAttribute("user",user);
}
//转发到login页面，与login页面公用相同的request，response对象，方便回显信息
request.getRequestDispatcher("/login.jsp").forward(request,response);
}
}
java
//注销
@WebServlet("/loginoutServlet")
public class loginoutServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//注销
request.getSession().invalidate();
response.sendRedirect(request.getContextPath()+"/index.jsp");
}
}service层
java
//将dao层返回的User对象返回给web层
public class UserServlet {
public static User getFinalyUser(User user){
return Userdao.queryUser(user);
}
}dao层
java
//对数据库进行查询
public class Userdao {
User user=null;
public static User queryUser(User user) {
QueryRunner qr = new QueryRunner(JDBCUtils.getDataSource());
User queryuser;
try {
queryuser = qr.query("SELECT * FROM user WHERE username=? and password=?",
new BeanHandler<>(User.class), user.getUsername(), user.getPassword());
} catch (SQLException e) {
throw new RuntimeException(e);
}
return queryuser;
}
}Utils工具包
java
public class JDBCUtils {
/*构造函数私有化
不允许在类外创建对象*/
private JDBCUtils() {
}
private static BasicDataSource bs;
static {
Properties properties = new Properties();
InputStream is = JDBCUtils.class.getClassLoader().getResourceAsStream("db.properties");
try {
/*从流中将配置文件中的数据加载到集合中*/
properties.load(is);
//创建一个连接池
bs = new BasicDataSource();
//设置连接池参数
/*必备的四个参数*/
bs.setDriverClassName(properties.getProperty("DRIVER"));
bs.setUrl(properties.getProperty("URL"));
bs.setUsername(properties.getProperty("USER"));
bs.setPassword(properties.getProperty("PASSWORD"));
/*设置可选参数*/
bs.setInitialSize(12);
bs.setMaxTotal(12);
bs.setMaxIdle(2);
bs.setMinIdle(1);
bs.setMaxWaitMillis(30000);
} catch (Exception e) {
e.printStackTrace();
}
}
public static Connection getConnection() {
Connection con=null;//提升作用域
try {
con=bs.getConnection();
} catch (SQLException e) {
e.printStackTrace();
}
return con;
}
public static DataSource getDataSource() {
return bs;
}
}登录界面（利用bootstrap框架）
html
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v4.1.1">
<title>Signin Template · Bootstrap</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
<script src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.bundle.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/sign-in/">
<!-- Bootstrap core CSS -->
<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
<script>
window.onload = function () {
<c:if test="${!empty statusCode && statusCode==100}">
$('#success').modal('show');//将指定id的模态框弹出
window.setTimeout("window.location.href='${pageContext.request.contextPath}/index.jsp'",2000)
</c:if>
};
</script>
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="${pageContext.request.contextPath}/css/signin.css" rel="stylesheet">
</head>
<body class="text-center">
<form class="form-signin" action="${pageContext.request.contextPath}/loginServlet" method="post">
<img class="mb-4" src="${pageContext.request.contextPath}/img/bootstrap-solid.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">请登录</h1>
<c:if test="${empty statusCode || statusCode==100}">
<label for="inputUsername" class="sr-only">用户名</label> <!-- 修改label的for属性和文本 -->
<input type="text" name="username" id="inputUsername" class="form-control" placeholder="Username" required autofocus> <!-- 修改input的type和placeholder -->
</c:if>
<c:if test="${!empty statusCode && statusCode!=100}">
<label for="inputUsername" class="sr-only">用户名</label> <!-- 修改label的for属性和文本 -->
<input type="text" id="inputUsername" name="username" value="${user.username}" class="form-control is-invalid" placeholder="Username" required autofocus> <!-- 修改input的type和placeholder -->
</c:if>
<c:if test="${empty statusCode || statusCode==100}">
<label for="inputPassword" class="sr-only">密码</label>
<input type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required>
</c:if>
<c:if test="${!empty statusCode && statusCode!=100}">
<label for="inputPassword" class="sr-only">密码</label>
<input type="password" id="inputPassword" name="password" value="${user.password}" class="form-control is-invalid" placeholder="Password" required>
<div class="invalid-feedback">
${msg}
</div>
</c:if>
<%--弹出框--%>
<div class="modal fade" id="success" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
${msg}!正在进入首页
</div>
</div>
</div>
</div>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> 记住我
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
</form>
</body>
</html>主界面（利用bootstrap框架）
html
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v4.1.1">
<title>Blog Template · Bootstrap</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/blog/">
<!-- Bootstrap core CSS -->
<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:700,900" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="${pageContext.request.contextPath}/css/blog.css" rel="stylesheet">
</head>
<body>
<div class="container">
<header class="blog-header py-3">
<div class="row flex-nowrap justify-content-between align-items-center">
<div class="col-4 pt-1">
<a class="text-muted" href="#">Subscribe</a>
</div>
<div class="col-4 text-center">
<a class="blog-header-logo text-dark" href="#">Large</a>
</div>
<c:if test="${!empty user}">
<div class="col-4 d-flex justify-content-end align-items-center">
<a class="text-muted" href="#" aria-label="Search">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="mx-3" role="img" viewBox="0 0 24 24" focusable="false"><title>Search</title><circle cx="10.5" cy="10.5" r="7.5"/><path d="M21 21l-5.2-5.2"/></svg>
</a>
<a href="#" class="btn btn-sm btn-outline-secondary">${user.username}</a>
<a class="btn btn-sm btn-outline-secondary" href="${pageContext.request.contextPath}/loginoutServlet">Sign out</a>
</div>
</c:if>
<c:if test="${empty user}">
<div class="col-4 d-flex justify-content-end align-items-center">
<a class="text-muted" href="#" aria-label="Search">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="mx-3" role="img" viewBox="0 0 24 24" focusable="false"><title>Search</title><circle cx="10.5" cy="10.5" r="7.5"/><path d="M21 21l-5.2-5.2"/></svg>
</a>
<a class="btn btn-sm btn-outline-secondary" href="${pageContext.request.contextPath}/login.jsp">Sign up${statusCode}</a>
</div>
</c:if>
</div>
</header>
<div class="nav-scroller py-1 mb-2">
<nav class="nav d-flex justify-content-between">
<a class="p-2 text-muted" href="#">World</a>
<a class="p-2 text-muted" href="#">U.S.</a>
<a class="p-2 text-muted" href="#">Technology</a>
<a class="p-2 text-muted" href="#">Design</a>
<a class="p-2 text-muted" href="#">Culture</a>
<a class="p-2 text-muted" href="#">Business</a>
<a class="p-2 text-muted" href="#">Politics</a>
<a class="p-2 text-muted" href="#">Opinion</a>
<a class="p-2 text-muted" href="#">Science</a>
<a class="p-2 text-muted" href="#">Health</a>
<a class="p-2 text-muted" href="#">Style</a>
<a class="p-2 text-muted" href="#">Travel</a>
</nav>
</div>
<div class="jumbotron p-4 p-md-5 text-white rounded bg-dark">
<div class="col-md-6 px-0">
<h1 class="display-4 font-italic">Title of a longer featured blog post</h1>
<p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what's most interesting in this post's contents.</p>
<p class="lead mb-0"><a href="#" class="text-white font-weight-bold">Continue reading...</a></p>
</div>
</div>
<div class="row mb-2">
<div class="col-md-6">
<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-primary">World</strong>
<h3 class="mb-0">Featured post</h3>
<div class="mb-1 text-muted">Nov 12</div>
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="stretched-link">Continue reading</a>
</div>
<div class="col-auto d-none d-lg-block">
<svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-success">Design</strong>
<h3 class="mb-0">Post title</h3>
<div class="mb-1 text-muted">Nov 11</div>
<p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="stretched-link">Continue reading</a>
</div>
<div class="col-auto d-none d-lg-block">
<svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
</div>
</div>
</div>
</div>
</div>
<main role="main" class="container">
<div class="row">
<div class="col-md-8 blog-main">
<h3 class="pb-4 mb-4 font-italic border-bottom">
From the Firehose
</h3>
<div class="blog-post">
<h2 class="blog-post-title">Sample blog post</h2>
<p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>
<p>This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p>
<hr>
<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
<blockquote>
<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</blockquote>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
<h2>Heading</h2>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<h3>Sub-heading</h3>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<pre><code>Example code block</code></pre>
<p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
<h3>Sub-heading</h3>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<ul>
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
<li>Donec id elit non mi porta gravida at eget metus.</li>
<li>Nulla vitae elit libero, a pharetra augue.</li>
</ul>
<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
<ol>
<li>Vestibulum id ligula porta felis euismod semper.</li>
<li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
<li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
</ol>
<p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p>
</div><!-- /.blog-post -->
<div class="blog-post">
<h2 class="blog-post-title">Another blog post</h2>
<p class="blog-post-meta">December 23, 2013 by <a href="#">Jacob</a></p>
<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
<blockquote>
<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</blockquote>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div><!-- /.blog-post -->
<div class="blog-post">
<h2 class="blog-post-title">New feature</h2>
<p class="blog-post-meta">December 14, 2013 by <a href="#">Chris</a></p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<ul>
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
<li>Donec id elit non mi porta gravida at eget metus.</li>
<li>Nulla vitae elit libero, a pharetra augue.</li>
</ul>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
</div><!-- /.blog-post -->
<nav class="blog-pagination">
<a class="btn btn-outline-primary" href="#">Older</a>
<a class="btn btn-outline-secondary disabled" href="#" tabindex="-1" aria-disabled="true">Newer</a>
</nav>
</div><!-- /.blog-main -->
<aside class="col-md-4 blog-sidebar">
<div class="p-4 mb-3 bg-light rounded">
<h4 class="font-italic">About</h4>
<p class="mb-0">Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
<div class="p-4">
<h4 class="font-italic">Archives</h4>
<ol class="list-unstyled mb-0">
<li><a href="#">March 2014</a></li>
<li><a href="#">February 2014</a></li>
<li><a href="#">January 2014</a></li>
<li><a href="#">December 2013</a></li>
<li><a href="#">November 2013</a></li>
<li><a href="#">October 2013</a></li>
<li><a href="#">September 2013</a></li>
<li><a href="#">August 2013</a></li>
<li><a href="#">July 2013</a></li>
<li><a href="#">June 2013</a></li>
<li><a href="#">May 2013</a></li>
<li><a href="#">April 2013</a></li>
</ol>
</div>
<div class="p-4">
<h4 class="font-italic">Elsewhere</h4>
<ol class="list-unstyled">
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ol>
</div>
</aside><!-- /.blog-sidebar -->
</div><!-- /.row -->
</main><!-- /.container -->
<footer class="blog-footer">
<p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
<p>
<a href="${pageContext.request.contextPath}/login.jsp">Back to top</a>
</p>
</footer>
</body>
</html>最终效果
