Web基础--JSP

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

  • 分类：
  1. page： 配置JSP页面的
    • contentType：等同于response.setContentType()
      1. 设置响应体的mime类型以及字符集
      2. 设置当前jsp页面的编码（只能是高级的IDE才能生效，如果使用低级工具，则需要设置pageEncoding属性设置当前页面的字符集）
    • import：导包
    • errorPage：当前页面发生异常后，会自动跳转到指定的错误页面
    • isErrorPage：标识当前页面是否是错误页面。
      • true：是，可以使用内置对象exception
      • false：否。默认值。不可以使用内置对象exception
  1. include ： 页面包含的。导入页面的资源文件
  • <%@include file=“top.jsp”%>
  1. taglib ： 导入资源（标签库）
  • <%@ taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core” %>--------prefix：前缀，自定义的

5. 注释:

1. html注释：<!-- -->:只能注释html代码片段
2. jsp注释：推荐使用<%-- --%>：可以注释所有<mark>（浏览器看不见）</mark>

6. 内置对象:在jsp页面中不需要创建，直接使用的对象（9个）

变量名 真实类型 作用
pageContext PageContext 当前页面共享数据，还可以获取其他八个内置对象
request HttpServletRequest 一次请求访问的多个资源(转发)
session HttpSession 一次会话的多个请求间
application ServletContext 所有用户间共享数据
response HttpServletResponse 响应对象
page Object 当前页面(Servlet)的对象 this
out JspWriter 输出对象，数据输出到页面上
config ServletConfig Servlet的配置对象
exception Throwable 异常对象

<mark>response.getWriter()和out.write()的区别：</mark>

  • 在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. 优点：

  1. 耦合性低，方便维护，可以利于分工协作
  2. 重用性高

2. 缺点：

  1. 使得项目架构变得复杂，对开发人员要求高

EL表达式

1. 概念：Expression Language 表达式语言

2. 作用：替换和简化jsp页面中java代码的编写

3. 语法：${表达式}

4. 注意：

 jsp默认支持el表达式的。如果要忽略el表达式

  1. 设置jsp中page指令中：isELIgnored=“true” 忽略当前jsp页面中所有的el表达式
  2. ${表达式} ：忽略当前这个el表达式

5. 使用：

1. 运算：

  • 运算符：
    1. 算数运算符： + - * /(div) 、 %(mod)
    2. 比较运算符： > < >= <= == !=
    3. 逻辑运算符： &&(and)、 ||(or)、 !(not)
    4. <mark>空运算符： empty</mark>
      • 功能：用于判断字符串、集合、数组对象是否为null或者长度是否为0
      • ${empty list}:判断字符串、集合、数组对象是否为null或者长度为0
      • ${not empty str}:表示判断字符串、集合、数组对象是否不为null 并且 长度>0

<mark>2. 获取值</mark> (当获取为空时，不会在页面显示null)

  1. el表达式只能从<mark>域对象</mark>中获取值
  1. 语法：
    1. ${域名称.键名}：从指定域中获取指定键的值
      域名称：
      1. pageScope --> pageContext
      2. requestScope --> request
      3. sessionScope --> session
      4. applicationScope --> application（ServletContext）
  • 举例：在request域中存储了name=张三
  • 获取：${requestScope.name}
    1. ${键名}：表示依次从最小的域中查找是否有该键对应的值，直到找到为止。
  1. 获取对象、List集合、Map集合的值
    1. 对象：${域名称.键名.属性名}-------------本质上会去调用对象的getter方法
    2. List集合：${域名称.键名[索引]}
    3. Map集合：
      • ${域名称.键名.key名称}
      • ${域名称.键名[“key名称”]}

3. 隐式对象：

  • el表达式中有11个隐式对象
  • <mark>pageContext：</mark>
    • 获取jsp其他八个内置对象 -------- ${pageContext.request.contextPath}：动态获取虚拟目录

JSTL

1. 概念：JavaServer Pages Tag Library JSP标准标签库------是由Apache组织提供的开源的免费的jsp标签 <标签>

 2. 作用：用于简化和替换jsp页面上的java代码

 3. 使用步骤：

  1. 导入jstl相关jar包
  2. 引入标签库：taglib指令： <%@ taglib %>
  3. 使用标签

4. 常用的JSTL标签

  1. if:相当于java代码的if语句
    1. 属性：
      • test 必须属性，接受boolean表达式
        • 如果表达式为true，则显示if标签体内容，如果为false，则不显示标签体内容
        • 一般情况下，test属性值会结合el表达式一起使用
      1. 注意：
      • c:if标签没有else情况，想要else情况，则可以在定义一个c:if标签 
<c:if test="${not empty list}">
        遍历集合...
</c:if>
  1. 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>
  1. foreach:相当于java代码的for语句
    1. 完成重复的操作
      属性：
      begin：开始值
      end：结束值
      var：临时变量
      step：步长
    2. 遍历容器
      属性：
      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', '1111@qq.com'); 
INSERT INTO `day17`.`user` (`name`, `gender`, `age`, `address`, `qq`, `email`) VALUES ('lisi', 'male', '18', 'addad', '2222', '2222@qq.com');

创建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;
    }
}

结果

全部评论

相关推荐

头像
昨天 00:40
美团_后端开发(准入职员工)
点赞 评论 收藏
分享
09-25 10:15
西安电子科技大学 Java
点赞 评论 收藏
分享
11-20 23:34
中国海洋大学 FPGA工程师
点赞 评论 收藏
分享
点赞 收藏 评论
分享

全站热榜

正在热议
# 25届秋招总结 #
246065次浏览 2004人参与
# 学历or实习经历，哪个更重要 #
40956次浏览 298人参与
# 北方华创开奖 #
22702次浏览 257人参与
# 地方国企笔面经互助 #
2512次浏览 6人参与
# 你最想要的公司福利是？ #
39785次浏览 124人参与
# 选完offer后，你后悔学本专业吗 #
10197次浏览 75人参与
# 面试题刺客退退退 #
136958次浏览 2091人参与
# 国企/银行/研究所公司爆料 #
89643次浏览 411人参与
# 应届生被毁约被毁意向了怎么办 #
26983次浏览 238人参与
# 一觉醒来，我觉醒了超级打工人系统 #
2848次浏览 35人参与
# 机械应届生薪资要多少才合适？ #
12367次浏览 60人参与
# 查收我的offer竞争力报告 #
16590次浏览 227人参与
# 校招入职后的感受 #
156851次浏览 1960人参与
# 你觉得第一学历对求职有影响吗？ #
14863次浏览 121人参与
# 没有实习经历，还有机会进大厂吗 #
804879次浏览 13813人参与
# 我的工作日记 #
21130次浏览 270人参与
# 不给转正的实习，你还去吗 #
1516562次浏览 16964人参与
# 寒假躺平还是提前实习 #
58350次浏览 438人参与
# 总结:哪家公司面试体验感最差 #
25635次浏览 129人参与
# 秋招OC许愿 #
226368次浏览 1869人参与
# 如何写一份好简历 #
601738次浏览 8430人参与
牛客网
牛客企业服务