一、Jsp定义

  1. Jsp全名 java server pages ，由sun公司装满为了解决动态生成HTML文档的技术。

  2. jsp主要作用是代替servlet程序回传html页面的数据，应为servlet程序回传的html页面数据是意见非常繁琐的事情，开发成本维护成本都比较高。

    后端传递什么前端就渲染什么。
    jsp的本质就是一个servlet程序。渲染数据效率很高。

二、jsp应用

2.1 通过servlet数据流输出信息

通过流的方式将标签一个个写到浏览器上。
image.png
将jsp的内容通过servlet文件以流的形式写出。
image.png

2.2 jsp头部的page指令（了解即可）

  • <%@page contentType=”text/html;charset=UTF-8”

    1.   language="java"%>

  • -i. language属性表示jsp翻译后是什么语言文件。暂时只支持java

  • ii.contentType属性表示jsp返回的数据类型是什么。也是源码中response.setContentType()参数值
  • iii. pageEncoding属性表示当前jsp页面文件本身的字符集。
  • iv. import属性跟java源代码中一样。用于导包，导类。
  • v.autoFlush属性设置当out输出流缓冲区满了之后，是否自动刷新冲级区。默认值是true。
  • vi. buffer属性设置out缓冲区的大小。默认是8kb

  • vii.errorPage属性设置当jsp页面运行时出错，自动跳转去的错误

    1.  页面路径

2.3 jsp脚本
  1. 声明脚本的格式:<%!声明java代码%> 用的不多

  2. 表达式脚本的格式:<%=表达式%> 取值脚本

    1. <body>
    2. 用户id：<%=user.getId()%><br>
    3. 用户名：<%=user.getUsername()%><br>
    4. 用户密码：<%=user.getPassword()%><br>
    5. </body>

  3. 代码脚本的格式:<% java语句%> 可以在这个脚本里正常的写代码。

2.4 jsp中的三种注释
  1. html注释
  2. java注释<%Ⅱ/单行java注释产多行java注释·%>
  3. jsp注释<%— jsp注释—%>

2.5 jsp九大内置对象

1、request
2、response
3、pageContext
4、exception
5、application 域对象
6、out输出流对象
7、page
8、session 域对象
9、servletConfig 上下文配置对象。

2. 6 jsp四大域对象 （较为重要）

2.6.1 分类：
  1. pageContext 需要导入jsp-api.jar包
  2. request
  3. session
  4. application

它们从小到大的顺序分别是: pageContext 、Request、Session 、application

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <%--引入jstl标签库--%>
  3. <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
  4. <html>
  5. <head>
  6.     <title>Title</title>
  7. </head>
  8. <body>
  9. <h1 align="center">用户页面</h1>
  10. <table align="center" border="1px">
  11.     <td>用户id</td>
  12.     <td>用户姓名</td>
  13.     <td>用户密码</td>
  14.     <c:forEach items="${users}" var="user">
  15.         <tr>
  16.             <td>${user.id}</td>
  17.             <td>${user.username}</td>
  18.             <td>${user.password}</td>
  19.     </c:forEach>
  20. </table>

2.6.2 域对象的取值范围
  1. pagecontext;只能在当前页面才继续取到到该域中的值
  2. request :一次请求范围内(只要地址不发生变化，对应的位就可以取到)
  3. session;会话对象，取值范围是浏览器的开启到关闭(只要浏览器不关闭，该域中的值一直可以取到)
  4. appLicotion:本质就是ServLetContext，取值范围是整个web 工程(只要tomcat服务器不关闭，该值就一直以取到)

2.7 el表达式

  1. el表达式：${域中的key} 

    1. el表达式可以替换表达式取值脚本<%=取值%>   取到域中的数据。<br />        el表达式还支持很多逻辑运算，判空处理。

    ```css <%@ page import=”java.util.ArrayList” %> <%@ page import=”java.util.HashMap” %> <%@ page contentType=”text/html;charset=UTF-8” language=”java” %> <% ArrayList arrayList = new ArrayList();

    arrayList.add(“jack”); arrayList.add(“tom”); arrayList.add(“black”);

    //创建map集合 HashMap hashMap = new HashMap<>();

    hashMap.put(“username”,”root”); hashMap.put(“password”,”123456”); hashMap.put(“age”,”1”);

    //将list集合对象和map集合对象存到域中 request.setAttribute(“list”,arrayList); request.setAttribute(“map”,hashMap);

%>

集合中的数据：${list}
根据下标索引取到list集合中的数据：${list[0]}
取出map集合中的数据：${map}
取出map集合中的数据：${map.username}
取出map集合中的数据：${map.password}
el表达式中的三目运算符：${map.age == 1 ? ‘男’ : ‘女’}
判断list集合是否为空：${not empty list}
判断list集合是否为空：${empty list}
<a name="fRdce"></a> ##### 2.8 XML <a name="St79X"></a> ###### 2.8.1 xml文件的定义 1. 文本标记性语言：具有自我描述性，在不指定约束和名称空间的情况下可以自定义标签，存放数据，当指定了约束和名称空间之后，则只能够使用名称空间提供标签。 1. xml可以当作语言和语言之间交互的桥梁。xml文件在不同的语言之间相通的。 <a name="Y6OTD"></a> ###### 2. 8.2 dom4j具体的步骤： 1、根据一个流对象来读取对应的xml文件，创建一个Document对象<br />2、根据Document对象获取xml中的根标签<br />3、获取根标签中的子标签，读取对应的数据 tomcat底层也是同dom4j来解析数据的。 4. 解析xml文件的案例：css <?xml version=”1.0” encoding=”UTF-8”?> jack1 21 男
南京市
 jack3 23 男
镇江市
 ```css import org.dom4j.DocumentException; import org.dom4j.Element; import org.dom4j.io.SAXReader; import java.util.ArrayList; import java.util.List; public class XmlTest { public static void main(String[] args) { //创建流对象 SAXReader saxReader = new SAXReader(); //读取xml配置文件 try { //文本对象 Document document = saxReader.read("src/xml/student.xml"); //获取根标签对象 Element rootElement = document.getRootElement(); //获取对应的子标签 List<Element> elements = rootElement.elements("student"); //创建学生集合 ArrayList<Student> students = new ArrayList<>(); //遍历自标签，读取标签中的数据 for (Element element : elements) { //读取标签中的文本 String name = element.elementText("name"); String age = element.elementText("age"); String sex = element.elementText("sex"); String address = element.elementText("address"); //创建学生实例 Student student = new Student(name, Integer.parseInt(age), sex, address); //添加学生对象到集合中 students.add(student); } for (Student student : students) { System.out.println(student); } } catch (DocumentException e) { e.printStackTrace(); } } } ### 三、案例 案例流程： 1. 建立数据库、表、填入信息。 1. 封装数据库的相关操作：连接数据库，写入静态方法，关闭数据库 1. 创立数据库表对应的对象，封装相应的数据。 1. 完成操作主要内容servlet： - 重写service方法（在实际开发中更规范的写法是重写doPost与doGet方法）；在doGet方法内部调用this.doPost（req，resp）： 在doPost方法中完成一下内容 - 处理中文乱码； - 利用封装的数据库操作对象，完成数据库的连接，获取数据库的内容，创建集合，将获取的数据库数据存入封装对象，将对象存入集合中。 5. 配置xml文件，①注册后端资源，②注册资源路径。 ### 四、编辑操作 案例：设计一个学生信息管理系统，可以使得数据库的信息可以显示在前端，通过前端页面可以完成以下工作： - 可以通过姓名完成模糊查询； - 可以点击编辑指定学生信息，并完成修改，被修改的数据可以回传到数据库； - 可以点击删除数据； 案例编写结构：
一、建立所需的数据库
二、核心逻辑结构主要文件：
1.使用规范的doGet和doPost方法（可以根据客户端的提交方式来执行不同的方法）
2. 在doPost方法中完成主要业务逻辑： - 设置：防止中文乱码； - 接收一个客户端传递过来的标识 String flag = request.getParameter(“flag”); 注意request.getParameter方法获取从客户端返回的数值。 - 更具不同的flag调用不同的方法。 3. 更具我们需要的方法完成方法的编写： - 方法需要借用JDBC工具类来链接数据库，完成数据的获取（基本格式） - 注意每个方法的数据获取以及数据赋值后转发出去。 ```css <%@ page contentType=”text/html;charset=UTF-8” language=”java” %> <%—引入jstl标签库—%> <%@ taglib prefix=”c” uri=”http://java.sun.com/jsp/jstl/core“ %>

学生列表页

根据姓名模糊查询：
学生姓名 学生性别 学生年纪 学生生日 学生地址 操作
${student.name} ${student.sex == 1? ‘男’ : ‘女’} ${student.age} ${student.birthday} ${student.address} 删除 <%—循环给每行的编辑按键赋予一个值，当点击该按键时就返回一个id，这个id在请求域中传给后端在进行掉用函数操作—%> <%—href属性是用于资源路径的一个跳转—%> 编辑 
  1. ```css
  2. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  4. <%--引入jstl标签库--%>
  5. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  6. <html>
  7. <head>
  8.     <title>学生列表</title>
  10.     <style>
  11.         body{
  12.             background-color: #257676;
  13.         }
  14.     </style>
  16. </head>
  17. <body>
  19.     <h1 align="center">学生编辑页面</h1>
  20.     <hr>
  22.     <form method="post" action="http://localhost:8080/web/student?flag=toUpdate">
  24.         <%--hidden 表示隐藏域的标签，该标签不会在客户端有任何的效果，但是真实存在的标签--%>
  25.         <input type="hidden" name="id" value="${student.id}">
  27.         <table align="center" border="1px">
  29.             <tr>
  30.                 <td>学生姓名</td>
  31.                 <td>
  32.                     <input type="text" name="name" value="${student.name}">
  33.                 </td>
  34.             </tr>
  36.             <tr>
  37.                 <td>学生性别</td>
  38.                 <td>
  39.                     <input type="text" name="sex" value="${student.sex == 1 ? '男' : '女'}">
  40.                 </td>
  41.             </tr>
  44.             <tr>
  45.                 <td>学生年纪</td>
  46.                 <td>
  47.                     <input type="text" name="age" value="${student.age}">
  48.                 </td>
  49.             </tr>
  51.             <tr>
  52.                 <td>学生生日</td>
  53.                 <td>
  54.                     <input type="date" name="birthday" value="${student.birthday}">
  55.                 </td>
  56.             </tr>
  58.             <tr>
  59.                 <td>学生地址</td>
  60.                 <td>
  61.                     <input type="text" name="address" value="${student.address}">
  62.                 </td>
  63.             </tr>
  65.             <tr>
  66.                 <td colspan="2" align="center">
  67.                     <input type="submit" value="修改">
  68.                 </td>
  69.             </tr>
  71.         </table>
  72.     </form>
  73. </body>
  74. </html>
  1. import javax.servlet.ServletException;
  2. import javax.servlet.http.HttpServlet;
  3. import javax.servlet.http.HttpServletRequest;
  4. import javax.servlet.http.HttpServletResponse;
  5. import java.io.IOException;
  6. import java.sql.Connection;
  7. import java.sql.JDBCType;
  8. import java.sql.PreparedStatement;
  9. import java.sql.ResultSet;
  10. import java.util.ArrayList;
  12. public class StudentServlet extends HttpServlet {
  14.     @Override
  15.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  17.         //处理中文乱码
  18.         request.setCharacterEncoding("utf-8");
  19.         response.setContentType("text/html;charset=utf-8");
  21.         //接收一个客户端传递过来的标识
  22.         String flag = request.getParameter("flag");
  24.         //根据标识来调用不同的方法
  25.         if (flag != null && flag.equals("list")){
  27.             //查询列表
  28.             getStudentList(request,response);
  30.         }else if (flag != null && flag.equals("showStudentById")){
  32.             showStudentById(request,response);
  34.         }else if (flag != null && flag.equals("toUpdate")){
  36.             toUpdate(request,response);
  38.         }
  40.     }
  42.     /**
  43.      * 修改数据 跟据id去修改
  44.      * @param request
  45.      * @param response
  46.      */
  47.     public void toUpdate(HttpServletRequest request, HttpServletResponse response) {
  49.         //接收客户端传递过来的值
  50.         String name = request.getParameter("name");
  51.         String sex = request.getParameter("sex");
  52.         String age = request.getParameter("age");
  53.         String birthday = request.getParameter("birthday");
  54.         String address = request.getParameter("address");
  55.         String id = request.getParameter("id");
  57.         Connection connection = null;
  58.         PreparedStatement preparedStatement = null;
  59.         ResultSet resultSet = null;
  61.         try {
  63.             //获取数据库连接对象
  64.             connection = JDBCUtils.getConnection();
  66.             //获取数据库操作对象并且预编译sql
  67.             preparedStatement = connection.prepareStatement
  69.                     ("update ts_student set name = ? , sex = ? , age = ? , birthday = ? ,address = ? where id = ?");
  71.             //给占位符赋值
  72.             preparedStatement.setString(1,name);
  73.             preparedStatement.setInt(2,sex.equals("男") ? 1 : 2);
  74.             preparedStatement.setInt(3,Integer.parseInt(age));
  75.             preparedStatement.setString(4,birthday);
  76.             preparedStatement.setString(5,address);
  77.             preparedStatement.setInt(6,Integer.parseInt(id));
  79.             //执行sql返回结果集
  80.             int num = preparedStatement.executeUpdate();
  82.             if (num == 1){
  84.                 //请求重定向列表页面
  85.                 response.sendRedirect("http://localhost:8080/web/student?flag=list");
  87.             }else {
  89.                 System.out.println("修改失败");
  90.             }
  96.         }catch (Exception e){
  98.             e.printStackTrace();
  100.         }finally {
  102.             //资源回收
  103.             JDBCUtils.close(connection,preparedStatement,resultSet);
  104.         }
  105.     }
  107.     /**
  108.      * 根据id来查询对应的用户数据
  109.      * @param request
  110.      * @param response
  111.      */
  112.     public void showStudentById(HttpServletRequest request, HttpServletResponse response) {
  114.         //接收客户端传递的id
  115.         String id = request.getParameter("id");
  117.         Connection connection = null;
  118.         PreparedStatement preparedStatement = null;
  119.         ResultSet resultSet = null;
  121.         try {
  123.             //获取数据库连接对象
  124.             connection = JDBCUtils.getConnection();
  126.             //获取数据库操作对象并且预编译sql
  127.             preparedStatement = connection.prepareStatement("select * from ts_student where id = ?");
  129.             //给占位符赋值
  130.             preparedStatement.setInt(1,Integer.parseInt(id));
  132.             //执行sql返回结果集
  133.             resultSet = preparedStatement.executeQuery();
  135.             Student student = null;
  137.             if (resultSet != null && resultSet.next()){
  139.                 //根据数据类型来取出对应的数据
  140.                 String name = resultSet.getString("name");
  141.                 int sex = resultSet.getInt("sex");
  142.                 int age = resultSet.getInt("age");
  143.                 String birthday = resultSet.getString("birthday");
  144.                 String address = resultSet.getString("address");
  146.                 //将数据封装成java对象
  147.                 student = new Student(Integer.parseInt(id), name, sex, age, birthday, address);
  149.             }
  152.             //将集合对象添加到域中
  153.             request.setAttribute("student",student);
  155.             //请求转发
  156.             request.getRequestDispatcher("./jsp/update.jsp").forward(request,response);
  159.         }catch (Exception e){
  161.             e.printStackTrace();
  163.         }finally {
  165.             //资源回收
  166.             JDBCUtils.close(connection,preparedStatement,resultSet);
  168.         }
  170.     }
  172.     @Override
  173.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  175.         this.doPost(request,response);
  177.     }
  179.     /**
  180.      * 实现学生列表
  181.      * @param request
  182.      * @param response
  183.      */
  184.     public void getStudentList(HttpServletRequest request, HttpServletResponse response){
  186.         Connection connection = null;
  187.         PreparedStatement preparedStatement = null;
  188.         ResultSet resultSet = null;
  190.         try {
  192.             //获取数据库连接对象
  193.             connection = JDBCUtils.getConnection();
  195.             //获取数据库操作对象并且预编译sql
  196.             preparedStatement = connection.prepareStatement("select * from ts_student");
  198.             //执行sql返回结果集
  199.             resultSet = preparedStatement.executeQuery();
  201.             //创建集合对象
  202.             ArrayList<Student> students = new ArrayList<>();
  204.             //遍历结果集
  205.             while (resultSet != null && resultSet.next()){
  207.                 //根据数据类型来取出对应的数据
  208.                 int id = resultSet.getInt("id");
  209.                 String name = resultSet.getString("name");
  210.                 int sex = resultSet.getInt("sex");
  211.                 int age = resultSet.getInt("age");
  212.                 String birthday = resultSet.getString("birthday");
  213.                 String address = resultSet.getString("address");
  215.                 //将数据封装成java对象
  216.                 Student student = new Student(id, name, sex, age, birthday, address);
  218.                 //将封装好的学生对象添加到集合中
  219.                 students.add(student);
  221.             }
  223.             //将集合对象添加到域中
  224.             request.setAttribute("students",students);
  226.             //请求转发
  227.             request.getRequestDispatcher("./jsp/list.jsp").forward(request,response);
  230.         }catch (Exception e){
  232.             e.printStackTrace();
  234.         }finally {
  236.             //资源回收
  237.             JDBCUtils.close(connection,preparedStatement,resultSet);
  238.         }
  239.     }
  240. }

五、添加“添加功能”

执行流程：

  1. 在主界面，body内选中一个位置，添加一个超链接。

    1. <td colspan="6" align="center">
    2.  <a href="http://localhost:8080/web/JSP/add.jsp"> 学生添加</a>
    3. </td>

    image.png

  2. 编写add.jsp：

  • 与update相似，主要就是添加超链接调用后端方法；
  • 逐个获取各个属性的值。
  • 加上一个submit提交数据的按键。 ```css <%@ page contentType=”text/html;charset=UTF-8” language=”java” %>

<%@ taglib prefix=”c” uri=”http://java.sun.com/jsp/jstl/core“ %>

  1. <style>
  2.     body{
  3.         background-color: cadetblue;
  4.     }
  5. </style>

学生添加页面

  1. <table align="center" border="1px">
  3.     <tr>
  4.         <td>学生姓名</td>
  5.         <td>
  6.             <input type="text" name="name" >
  7.         </td>
  8.     </tr>
  10.     <tr>
  11.         <td>学生性别</td>
  12.         <td>
  13.             <input type="text" name="sex" >
  14.         </td>
  15.     </tr>
  16.     <tr>
  17.         <td>学生年纪</td>
  18.         <td>
  19.             <input type="text" name="age" >
  20.         </td>
  21.     </tr>
  23.     <tr>
  24.         <td>学生生日</td>
  25.         <td>
  26.             <input type="date" name="birthday">
  27.         </td>
  28.     </tr>
  30.     <tr>
  31.         <td>学生地址</td>
  32.         <td>
  33.             <input type="text" name="address">
  34.         </td>
  35.     </tr>
  37.     <tr>
  38.         <td colspan="2" align="center">
  39.             <input type="submit" value="添加">
  40.         </td>
  41.     </tr>
  42. </table>

  1. ![image.png](https://cdn.nlark.com/yuque/0/2022/png/26800293/1650547986777-c68f8f7a-3b5a-4c4c-b324-7327767f0081.png#clientId=ufdfa15d9-269e-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=203&id=u533c5fe4&margin=%5Bobject%20Object%5D&name=image.png&originHeight=294&originWidth=409&originalType=binary&ratio=1&rotation=0&showTitle=false&size=12086&status=done&style=none&taskId=u3a4a199e-bc37-41a2-912d-8631e14f06a&title=&width=281.81817626953125)
  3. 3. 测试看前端界面成功部署后，编写后端逻辑。
  4. - 后端逻辑就是添加一个flag的判断；
  5. - 添加一个toAdd方法，向数据库中添加数据。
  6. ```css
  7. private void toAdd(HttpServletRequest request, HttpServletResponse response) {
  8.         String name = request.getParameter("name");
  9.         String sex = request.getParameter("sex");
  10.         String age = request.getParameter("age");
  11.         String birthday = request.getParameter("birthday");
  12.         String address = request.getParameter("address");
  14.         Connection connection = null;
  15.         PreparedStatement preparedStatement = null;
  16.         ResultSet resultSet = null;
  18.         try {
  20.             //获取数据库连接对象
  21.             connection = JDBCUtils.getconnection();
  23.             //获取数据库操作对象并且预编译sql
  24.             preparedStatement = connection.prepareStatement
  26.                     ("insert into ts_students(name,sex,age,birthday,address)values (?,?,?,?,?)");
  28.             //给占位符赋值
  29.             preparedStatement.setString(1, name);
  30.             preparedStatement.setInt(2, sex.equals("男") ? 1 : 2);
  31.             preparedStatement.setInt(3, Integer.parseInt(age));
  32.             preparedStatement.setString(4, birthday);
  33.             preparedStatement.setString(5, address);
  35.             //执行sql返回结果集
  36.             int num = preparedStatement.executeUpdate();
  38.             if (num == 1) {
  40.                 //请求重定向列表页面
  41.                 response.sendRedirect("http://localhost:8080/web/student?flag=list");
  43.             } else {
  45.                 System.out.println("修改失败");
  46.             }
  47.         } catch (Exception e) {
  49.             e.printStackTrace();
  50.         } finally {
  51.             //资源回收
  52.             JDBCUtils.close(connection, preparedStatement, resultSet);
  53.         }
  54.     }

image.png
查看数据库是否添加成功。

六、删除操作

  1. 在主界面，body内选中一个位置，添加一个超链接。

    1. <a href="http://localhost:8080/web/student?flag=deleteStudentById&id=${student.id}">删除</a>

  2. 测试看前端界面成功部署后，编写后端逻辑。

  • 后端逻辑就是添加一个flag的判断；
  • 添加一个deleteStudentById方法，从数据库中删除数据。

七、查询操作

  1. 在body内添加一个表单，表单内部添加跳转超链接

    1. <%--不用新封装方法，就直接用getStudentList--%>
    2. <form action="http://localhost:8080/web/student?flag=list" method="post">
    3.  根据姓名模糊查询：<input type="text" name="likename" value="${likename}">  <input type="submit" value="搜索">
    4. </form>

  2. 修改getStudentList方法，

  • 获取输入的likename

    String likename = request.getParameter(“likename”);

  • 根据是否有输入likename进行分类sql；

    if(likename != null){
    sql = “select from ts_students where name like ?”;
    }else{
    sql = “select     from ts_students”;
    }

  • 回显操作：通过把likename回传给request请求域

    if(likename != null){
    request.setAttribute(“likename”,likename);
    }

然后在 根据姓名模糊查询：
中添加value=”${likename}”语句回传likename

登陆、注册功能

  1. 设置登陆页面

  • 创建并编写login.jsp文件作为登陆页面

    1. <form method="post" action = "http://localhost:8080/web/student?flag=login">
    2.   <table align = "center">
    3.       <tr>
    4.           <td> 登陆用户名：</td>
    5.           <td><input type="text" name="username"></td>
    6.       </tr>
    7.       <tr>
    8.           <td> 登陆密码：</td>
    9.           <td><input type="password" name="password"></td>
    10.       </tr>
    11.       <tr>
    12.           <td colspan="2" align="center"><input type="submit" value="login"></td>
    13.       </tr>
    14.   </table>
    15. </form>

  • 以post的方式提交，跳转到http://localhost:8080/web/student?flag=login页面

  1. 编写后端逻辑，
  • 获取请求传递的username和password做查询判断。

  1. 在登陆页面添加注册链接

    1. <%--设置超链接按键，跳转到用户注册的界面。--%>
    2. <a  href="http://localhost:8080/web/JSP/reg.jsp">用户注册</a>

  2. 创建并编写reg.jsp文件

  • 注册页面与登陆页面相似除了跳转页面不同
    1. <form method="post" action = "http://localhost:8080/web/student?flag=toReg">
  1. 编写后端逻辑创建对应flag标签的if else分支。并编写toReg方法。
  • 与登陆方法相似，除了sql语句不同，和重定向到登陆页面。

结果验证
image.png
image.png