12_JSP&JSTL - 《Java Web 学习笔记》

JSP
MVC：开发模式
EL表达式
JSTL
三层架构：软件设计架构
案例：用户信息的列表展示

JSP：
1. 指令
2. 注释
3. 内置对象
MVC开发模式
EL表达式
JSTL标签
三层架构

JSP

指令：
- 作用：用于配置JSP页面，导入资源文件
- 格式：
  - <%@ 指令名称属性名1=属性值1 属性名2=属性值2...>
- 分类：
  1. page：配置JSP页面的。
    - contentType：等同于response.setContentType()
      1. 设置响应体的mime类型以及字符集
      2. 设置当前jsp页面的编码（高级开发工具才能生效，如果使用低级工具，则需要使用pageEncoding属性设置当前页面的字符集编码）
    - language：曾经想统一所有语言，但到如今还是只有一个值（java）
    - import：导入jar包
    - errorPage：当前页面发生异常后会跳转到指定的错误页面
    - isErrorPage：标识当前页面是不是错误页面
      - ture：是，可以使用内置对象exception
      - false：否。默认值，不可以使用内置对象exception
  2. include：页面包含的。导入页面的资源文件。
    <%@include file="top.jsp"%>
  3. taglib：导入资源
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    - prefix：前缀，自定义的
注释
1. html注释：
  ：只能注释html代码
2. jsp注释
  <%----%>：什么都能注释
内置对象
- 在jsp页面中不需要创建，直接使用的对象
- 一共有九个：
  变量名真实类型作用
  1. pageContext PageContext 当前页面共享数据，获取其他八个内置对象
  2. request HTTPServletRequest 一次请求访问多个资源（转发）
  3. session HttpSession 一次会话的多个请求间
  4. application ServletContext 所有用户间共享数据
  5. response HttpServletResponse 响应对象
  6. page Object 当前servlet的对象（this）
  7. out JspWriter 输出对象，数据输出到页面上
  8. config ServletConfig Servlet配置对象
  9. exception Throwable 异常对象

MVC：开发模式

jsp演变历史
1. 早期只有servlet，只能使用response输出标签数据，非常麻烦
2. 后来有了jsp，简化了Servlet的开发，如果过度使用jsp，在jsp中写了大量的java代码，有写html表，造成难以维护，难于分工协作
3. 再后来，java的web开发，借鉴mvc开发模式，使得程序的更加合理性
MVC：
1. M：Model，模型。JavaBean
  - 完成具体的业务操作，如：查询数据库，封装对象
2. V：View，视图。JSP
  - 展示数据
3. C：Controller，控制器。Servlet
  - 获取用户的输入
  - 调用模型
  - 将数据交给视图来进行展示
- 优缺点：
  1. 优点：
    1. 耦合性低，方便维护，可以利用于分工协作
    2. 重用性高
  2. 缺点：
    1. 使得项目架构变得复杂，对开发人员要求高

EL表达式

概念：Expression Language 表达式语言
作用：替换和简化jsp页面中java代码的编写
语法：${表达式}
注意：
- jsp默认是支持el表达式的。如果要忽略el表达式
  1. 设置jsp中page指令中：isELIgnored="true" 忽略当前jsp页面中所有的el表达式
  2. \${表达式}：忽略当前这个el表达式
使用：
1. 运算：
  - 运算符：
    1. 算数运算符：+ - * /(div) %(mod)
    2. 比较运算符：> < >= <= == !=
    3. 逻辑运算符：&&(and) ||(or) !(not)
    4. 空运算符：empty
      - 功能：用于判断字符串，集合，数组对象是否为null并且长度是否为0
      - ${empty list}：表示判断字符串，集合，数组对象是否为null，或者长度为0
      - ${not empty list}：表示判断字符串，集合，数组对象是否不为null，或者长度>0
2. 获取值
  1. el表达式只能从域对象中获取值
  2. 语法：
    1. ${域名称.键名}：从指定域中获取指定键的值
      - 域名称：
        
        pageScope --> pageContext
        `requestScope --> request
        sessionScope --> session
        applicationScope -> application(ServletContext)
      - 举例：在request域中存储量name=xj
      - 获取：${requestScope.name}
    2. ${键名}：表示依次从最小的域中查找是否有该键对应的值
      ${name}
    3. 获取对象，List集合，Map集合的值
      1. 对象：${域名称.键名.属性名}
        
        本质上会调用对象的getter方法
      2. List集合：${域名称.键名[索引]}
      3. Map集合：
        
        ${域名称.键名.key名称}
        ${域名称.键名["key名称"]}
3. 隐式对象
  - el表达式中有11个隐式对象
  - pageContext：
    1. 获取jsp其他八个内置对象
    2. ${pageContext.request.contextPath}：动态获取虚拟目录

JSTL

概念：JavaServer Pages Tag Library JSTL标准标签库
- 是由Apache组织提供的开源的免费的jsp标签
作用：用于简化和替换jsp页面上的java代码
使用步骤：
1. 导入jstl相关的jar包
2. 引入标签库：taglib指令 <%@ taglib %>
3. 使用标签
常用的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. 使用when标签做判断相当于case
  2. otherwise相当于default ```jsp <% request.setAttribute(“number”,3); %>
  星期一星期二星期三星期四星期五星期六星期天 ddd ```

foreach：相当于java的for语句
1. 完成重复的操作
  - 属性：
    - begin：开始值
    - end：结束值
    - var：临时变量
    - step：步长
    - varStatus：循环状态对象
      - index：容器中元素的索引，从0开始
      - count：循环次数
2. 遍历容器
  - 属性
    - items：容器对象
    - var：容器中元素的临时变量
    - varStatus：循环状态对象
      - index：容器中元素的索引，从0开始
      - count：循环次数 ```jsp <%@ page import=”java.util.ArrayList” %> <%@ page import=”java.util.List” %><%— Created by IntelliJ IDEA.5 User: Jay Date: 2020/11/3 Time: 8:14 To change this template use File | Settings | File Templates. —%> <%@ page contentType=”text/html;charset=UTF-8” language=”java” isELIgnored=”false” %> <%@taglib prefix=”c” uri=”http://java.sun.com/jsp/jstl/core“ %> ${i}${s.index}${s.count}

<% List list = new ArrayList(); list.add(“aaa”); list.add(“bbb”); list.add(“ccc”);

    request.setAttribute("list",list);
%>
<c:forEach items="${list}" var="str" varStatus="s">
    ${s.index} ${s.count} ${str} <br>
</c:forEach>


5. 
练习
   - 
学生对象存入list集合用foreach输出到页面上
```jsp
 <%
        List list = new ArrayList();
        list.add(new User("张三",12,new Date()));
        list.add(new User("李四",12,new Date()));
        list.add(new User("王五",12,new Date()));
        list.add(new User("赵六",12,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 mod 2 == 0}">
                <tr bgcolor="gray">
                    <td>${s.count}</td>
                    <td>${user.name}</td>
                    <td>${user.age}</td>
                    <td>${user.birthday}</td>
                </tr>
            </c:if>
            <c:if test="${s.count mod 2 == 1}">
                <tr bgcolor="#4169e1">
                    <td>${s.count}</td>
                    <td>${user.name}</td>
                    <td>${user.age}</td>
                    <td>${user.birthday}</td>
                </tr>
            </c:if>
        </c:forEach>
    </table>

三层架构：软件设计架构

界面层（表示层）：用户看的到的界面。用户可以通过界面上的组件和服务器进行交互
业务逻辑层：处理业务逻辑的。
数据访问层：操作数据存储文件。

案例：用户信息的列表展示

需求：用户信息的增删改查操作

设计：

技术选型：servlet+JSP+MySQL+JDBCTemplate+Druid+BeanUtils+tomcat

数据库的设计：

create database day17; -- 创建数据库
use day17;             -- 使用数据库
create table user(
id int primary key auto_increment,
name varchar(20) not null,
gender varchar(5),
age int,
address varchar(32),
qq varchar(32),
email varchar(32)
)

开发：
1. 环境搭建
  1. 创建数据库环境
  2. 创建项目，导入需要的jar包
2. 编码

package main.com.jie.domain;
public class Users {
    private int id;
    private String name;
    private String gender;
    private int age;
    private String address;
    private String qq;
    private String email;
    @Override
    public String toString() {
        return "Users{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", gender='" + gender + '\'' +
                ", age=" + age +
                ", address='" + address + '\'' +
                ", qq='" + qq + '\'' +
                ", email='" + email + '\'' +
                '}';
    }
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getGender() {
        return gender;
    }
    public void setGender(String gender) {
        this.gender = gender;
    }
    public int getAge() {
        return age;
    }
    public void setAge(int age) {
        this.age = age;
    }
    public String getAddress() {
        return address;
    }
    public void setAddress(String address) {
        this.address = address;
    }
    public String getQq() {
        return qq;
    }
    public void setQq(String qq) {
        this.qq = qq;
    }
    public String getEmail() {
        return email;
    }
    public void setEmail(String email) {
        this.email = email;
    }
}

package main.com.jie.service;
import main.com.jie.domain.Users;
import java.util.List;
/**
 * 用户管理的业务接口
 */
public interface UserService {
    /**
     * 查询所有用户信息
     */
    public List<Users> findAll();
}

package main.com.jie.service.impl;
import main.com.jie.dao.UserDao;
import main.com.jie.dao.impl.UserDaoImpl;
import main.com.jie.domain.Users;
import main.com.jie.service.UserService;
import java.util.List;
public class UserServiceImpl implements UserService {
    private UserDao dao = new UserDaoImpl();
    @Override
    public List<Users> findAll() {
        //调用dao
        return dao.findAll();
    }
}

package main.com.jie.dao;
import main.com.jie.domain.Users;
import java.util.List;
/**
 * 用户操作的dao
 */
public interface UserDao {
    public List<Users> findAll();
 }

package main.com.jie.dao.impl;
import main.com.jie.dao.UserDao;
import main.com.jie.domain.Users;
import main.com.jie.util.JDBCUtils;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import java.util.List;
public class UserDaoImpl implements UserDao {
    private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
    @Override
    public List<Users> findAll() {
        //使用JDBC操作数据库
        String sql = "select * from user";
        List<Users> users = template.query(sql, new BeanPropertyRowMapper<Users>(Users.class));
        return users;
    }
}

servlet层：

package main.com.jie.web.servlet;
import main.com.jie.domain.Users;
import main.com.jie.service.UserService;
import main.com.jie.service.impl.UserServiceImpl;
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.io.IOException;
import java.util.List;
@WebServlet("/userListServlet")
public class UserListServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.调用UserService完成查询
        UserService service = new UserServiceImpl();
        List<Users> list = service.findAll();
        //2.将list存入request域
        request.setAttribute("list",list);
        //3.转发
        request.getRequestDispatcher("/list.jsp").forward(request,response);
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

package main.com.jie.util;
import com.alibaba.druid.pool.DruidDataSourceFactory;
import javax.sql.DataSource;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.Properties;
/**
 * JDBC工具类  使用Durid连接池
 */
public class JDBCUtils {
    private static DataSource ds;
    static {
        try{
            //1.加载配置文件
            Properties pro = new Properties();
            //使用ClassLoader加载配置文件吗，获取字节输入流
            InputStream resourceAsStream = JDBCUtils.class.getClassLoader().getResourceAsStream("druid.properties");
            pro.load(resourceAsStream);
            //2.初始化连接池对象
            ds = DruidDataSourceFactory.createDataSource(pro);
        }catch (Exception e){
            e.printStackTrace();
        }
    }
    /**
     * 获取连接池对象
     */
    public static DataSource getDataSource(){
        return ds;
    }
    /**
     * 获取连接
     */
    public static Connection getConnection() throws SQLException {
        return  ds.getConnection();
    }
}

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>首页</title>
    <!-- 1. 导入CSS的全局样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="js/jquery-2.1.0.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
    </script>
</head>
<body>
<div align="center">
    <a
            href="${pageContext.request.contextPath}/userListServlet" style="text-decoration:none;font-size:33px">查询所有用户信息
    </a>
</div>
</body>
</html>

<%@page  contentType="text/html;charset=utf-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head>
    <!-- 指定字符集 -->
    <meta charset="utf-8">
    <!-- 使用Edge最新的浏览器的渲染方式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。
    width: 默认宽度与设备的宽度相同
    initial-scale: 初始的缩放比，为1:1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>用户信息管理系统</title>
    <!-- 1. 导入CSS的全局样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="js/jquery-2.1.0.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <script src="js/bootstrap.min.js"></script>
    <style type="text/css">
        td, th {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <h3 style="text-align: center">用户信息列表</h3>
    <table border="1" class="table table-bordered table-hover">
        <tr class="success">
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>籍贯</th>
            <th>QQ</th>
            <th>邮箱</th>
            <th>操作</th>
        </tr>
        <c:forEach items="${list}" var="user" varStatus="s">
            <tr>
                <td>${s.count}</td>
                <td>${user.name}</td>
                <td>${user.gender}</td>
                <td>${user.age}</td>
                <td>${user.address}</td>
                <td>${user.qq}</td>
                <td>${user.email}</td>
                <td><a class="btn btn-default btn-sm" href="update.html">修改</a>&nbsp;<a class="btn btn-default btn-sm" href="">删除</a></td>
            </tr>
        </c:forEach>
        <tr>
            <td colspan="8" align="center"><a class="btn btn-primary" href="add.html">添加联系人</a></td>
        </tr>
    </table>
</div>
</body>
</html>

测试
部署运维