JSP入門知識

1. 概念：

Java Server Pages： java服務器端頁面
可以理解爲：一個特殊的頁面，其中既可以指定定義html標籤，又可以定義java代碼
用於簡化書寫！！！

2. 原理

JSP本質上就是一個Servlet

3. JSP的腳本：JSP定義Java代碼的方式

1. <% 代碼 %>：定義的java代碼，在service方法中。service方法中可以定義什麼，該腳本中就可以定義什麼。
2. <%! 代碼 %>：定義的java代碼，在jsp轉換後的java類的成員位置。
3. <%= 代碼 %>：定義的java代碼，會輸出到頁面上。輸出語句中可以定義什麼，該腳本中就可以定義什麼。

4. 指令

作用：用於配置JSP頁面，導入資源文件
格式：

<%@ 指令名稱屬性名1=屬性值1 屬性名2=屬性值2 … %>

分類：

page： 配置JSP頁面的

contentType：等同於response.setContentType()

設置響應體的mime類型以及字符集

設置當前jsp頁面的編碼（只能是高級的IDE才能生效，如果使用低級工具，則需要設置pageEncoding屬性設置當前頁面的字符集）

import：導包

errorPage：當前頁面發生異常後，會自動跳轉到指定的錯誤頁面

isErrorPage：標識當前頁面是否是錯誤頁面。

true：是，可以使用內置對象exception

false：否。默認值。不可以使用內置對象exception

include ：頁面包含的。導入頁面的資源文件

<%@include file=“top.jsp”%>

taglib ：導入資源（標籤庫）

<%@ taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core” %>--------prefix：前綴，自定義的

5. 註釋:

1. html註釋：:只能註釋html代碼片段
2. jsp註釋：推薦使用<%-- --%>：可以註釋所有（瀏覽器看不見）

6. 內置對象:在jsp頁面中不需要創建，直接使用的對象（9個）

變量名	真實類型	作用
pageContext	PageContext	當前頁面共享數據，還可以獲取其他八個內置對象
request	HttpServletRequest	一次請求訪問的多個資源(轉發)
session	HttpSession	一次會話的多個請求間
application	ServletContext	所有用戶間共享數據
response	HttpServletResponse	響應對象
page	Object	當前頁面(Servlet)的對象 this
out	JspWriter	輸出對象，數據輸出到頁面上
config	ServletConfig	Servlet的配置對象
exception	Throwable	異常對象

response.getWriter()和out.write()的區別：

在tomcat服務器真正給客戶端做出響應之前，會先找response緩衝區數據，再找out緩衝區數據。
response.getWriter()數據輸出永遠在out.write()之前

MVC：開發模式

1. jsp演變歷史

1. 早期只有servlet，只能使用response輸出標籤數據，非常麻煩
2. 後來又jsp，簡化了Servlet的開發，如果過度使用jsp，在jsp中即寫大量的java代碼，有寫html表，造成難於維護，難於分工協作
3. 再後來，java的web開發，借鑑mvc開發模式，使得程序的設計更加合理性

2. MVC：

1. M：Model，模型。JavaBean

完成具體的業務操作，如：查詢數據庫，封裝對象

2. V：View，視圖。JSP

展示數據

3. C：Controller，控制器。Servlet

獲取用戶的輸入

調用模型

將數據交給視圖進行展示

優缺點：

1. 優點：

耦合性低，方便維護，可以利於分工協作

重用性高

2. 缺點：

使得項目架構變得複雜，對開發人員要求高

EL表達式

1. 概念：Expression Language 表達式語言

2. 作用：替換和簡化jsp頁面中java代碼的編寫

3. 語法：${表達式}

4. 注意：

jsp默認支持el表達式的。如果要忽略el表達式

設置jsp中page指令中：isELIgnored=“true” 忽略當前jsp頁面中所有的el表達式

${表達式} ：忽略當前這個el表達式

5. 使用：

1. 運算：

運算符：

算數運算符： + - * /(div) 、 %(mod)

比較運算符： > < >= <= == !=

邏輯運算符： &&(and)、 ||(or)、 !(not)

空運算符： empty

功能：用於判斷字符串、集合、數組對象是否爲null或者長度是否爲0

${empty list}:判斷字符串、集合、數組對象是否爲null或者長度爲0

${not empty str}:表示判斷字符串、集合、數組對象是否不爲null 並且長度>0

2. 獲取值 (當獲取爲空時，不會在頁面顯示null)

el表達式只能從域對象中獲取值

語法：

${域名稱.鍵名}：從指定域中獲取指定鍵的值
域名稱：

pageScope --> pageContext

requestScope --> request

sessionScope --> session

applicationScope --> application（ServletContext）

舉例：在request域中存儲了name=張三

獲取：${requestScope.name}

${鍵名}：表示依次從最小的域中查找是否有該鍵對應的值，直到找到爲止。

獲取對象、List集合、Map集合的值

對象：${域名稱.鍵名.屬性名}-------------本質上會去調用對象的getter方法

List集合：${域名稱.鍵名[索引]}

Map集合：

${域名稱.鍵名.key名稱}

${域名稱.鍵名[“key名稱”]}

3. 隱式對象：

el表達式中有11個隱式對象

pageContext：

獲取jsp其他八個內置對象 -------- ${pageContext.request.contextPath}：動態獲取虛擬目錄

JSTL

1. 概念：JavaServer Pages Tag Library JSP標準標籤庫------是由Apache組織提供的開源的免費的jsp標籤 <標籤>

2. 作用：用於簡化和替換jsp頁面上的java代碼

3. 使用步驟：

導入jstl相關jar包

引入標籤庫：taglib指令： <%@ taglib %>

使用標籤

4. 常用的JSTL標籤

if:相當於java代碼的if語句

屬性：

test 必須屬性，接受boolean表達式

如果表達式爲true，則顯示if標籤體內容，如果爲false，則不顯示標籤體內容

一般情況下，test屬性值會結合el表達式一起使用

注意：

c:if標籤沒有else情況，想要else情況，則可以在定義一個c:if標籤

<c:if test="${not empty list}">
        遍歷集合...
</c:if>

choose:相當於java代碼的switch語句
1. 使用choose標籤聲明相當於switch聲明
2. 使用when標籤做判斷相當於case
3. 使用otherwise標籤做其他情況的聲明相當於default

<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>

foreach:相當於java代碼的for語句

完成重複的操作
屬性：
begin：開始值
end：結束值
var：臨時變量
step：步長

遍歷容器
屬性：
items:容器對象
var:容器中元素的臨時變量
varStatus:循環狀態對象
index:容器中元素的索引，從0開始
count:循環次數，從1開始

<c:forEach begin="1" end="10" var="i" step="2" varStatus="s">
    ${i} <h3>${s.index}<h3> <h4> ${s.count} </h4><br>
</c:forEach>

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

三層架構：軟件設計架構

1. 界面層(表示層)：用戶看的得界面。用戶可以通過界面上的組件和服務器進行交互
2. 業務邏輯層：處理業務邏輯的。
3. 數據訪問層：操作數據存儲文件。

如下圖所示：

案例：用戶信息列表展示

1. 需求：用戶信息的增刪改查操作

2. 設計：

1. 技術選型：Servlet+JSP+MySQL+JDBCTempleat+Duird+BeanUtilS+tomcat
2. 數據庫設計：

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(20),
	email varchar(50)
);
INSERT INTO `day17`.`user` (`name`, `gender`, `age`, `address`, `qq`, `email`) VALUES ('zhangsan', 'female', '20', 'daada', '1111', '[email protected]'); 
INSERT INTO `day17`.`user` (`name`, `gender`, `age`, `address`, `qq`, `email`) VALUES ('lisi', 'male', '18', 'addad', '2222', '[email protected]');

創建User表：

public class User {
    private int id;
    private String name;
    private String gender;
    private int age;
    private String address;
    private String qq;
    private String email;
    /....後面省略
    }

前端jsp頁面：

index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ 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="${users}" 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>

list.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ 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="${users}" 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>

ListUserServlet

@WebServlet("/UserListServlet")
public class UserListServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //調用UserService實現查詢全部用戶的功能
        IUserService userService =  new UserServiceImpl();
        List<User> users = userService.findAll();

        //將用戶數據存入requeset域
        request.setAttribute("users",users);
        //轉發到list.jsp
        request.getRequestDispatcher("/list.jsp").forward(request,response);

    }

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

Service層

IUserService

package com.xzzz.service;
import com.xzzz.domain.User;
import java.util.List;

/**
 * 用戶管理的業務接口
 */
public interface IUserService {
    /**
     * 查詢所有的用戶信息
     * @return 所有的用戶信息
     */
    public List<User> findAll();

}

UserServiceImpl

public class UserServiceImpl implements IUserService {
    IUserDao userDao = new UserDaoImpl();
    @Override
    public List<User> findAll() {
        //調用Dao層查詢
        return userDao.findAll();
    }
}

DAO層

IUserDao

/**
 * 用戶操作的DAO
 */
public interface IUserDao {
    public List<User> findAll();

}

UserDaoImpl

public class UserDaoImpl implements IUserDao {
    JdbcTemplate template = new JdbcTemplate(JDBCUtil.getDataSource());
    @Override
    public List<User> findAll() {
        //使用JDBC操作數據庫
        String sql = "select * from user";
        List<User> users = template.query(sql, new BeanPropertyRowMapper<User>(User.class));
        return users;
    }
}

Web基礎--JSP