JavaWeb之JSP&MVC&EL&JSTL

知识回顾:
JavaWeb之Java基础知识增强
JavaWeb之JDBC
JavaWeb之数据库连接池
JavaWeb之HTML&CSS
JavaWeb之JavaScript
JavaWeb之Bootstrap
JavaWeb之XML
JavaWeb之web服务器软件
JavaWeb之Servlet
JavaWeb之http协议
JavaWeb之会话技术

1.JSP

1.1. 指令

  • 作用:用于配置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:前缀,自定义的

index.jsp

<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=gbk" errorPage="500.jsp"   pageEncoding="GBK" language="java" buffer="16kb" %>

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

<html>
  <head>
    <title>$Title$</title>
  </head>
  <body>

  <%
    List list = new ArrayList();
    int i = 3/0;
  %>
  </body>
</html>

500.jsp

<%@ page contentType="text/html;charset=UTF-8" isErrorPage="true" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>

    <h1>服务器正忙...</h1>
    <%
        String message = exception.getMessage();
        out.print(message);
    %>
</body>
</html>

top.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<h1>页面logo页面标题</h1>

1.2. 注释

  • html注释:
    • <!-- -->:只能注释html代码片段
  • jsp注释:推荐使用
    • <%-- --%>:可以注释所有
  • 上面两种注释的区别:使用<!-- -->注释的内容会发送到客户端,而使用<%-- --%>注释的内容不会发送到客户端

home.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java"  %>
<%@include file="top.jsp"%>

<html>
<head>
    <title>Title</title>
</head>
<body>

    <!--
        <h1>hello</h1>
    -->
    <%--
        <%
            System.out.println("hi~~~~");
        %>
    --%>
<%--
    <input>
--%>
    <%
       pageContext.setAttribute("msg","hello");
    %>
    <%=pageContext.getAttribute("msg")%>
</body>
</html>

1.3.内置对象

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

2.MVC:开发模式

  • jsp演变历史
    • 早期只有servlet,只能使用response输出标签数据,非常麻烦
    • 后来有了jsp,简化了Servlet的开发,如果过度使用jsp,在jsp中即写大量的java代码,又写html表,造成难于维护,难于分工协作
    • 再后来,java的web开发,借鉴mvc开发模式,使得程序的设计更加合理性
  • MVC:
字母的含义 对应技术 完成的功能
M:Model,模型 JavaBean 完成具体的业务操作,如:查询数据库,封装对象
V:View,视图 JSP 展示数据
C:Controller,控制器 Servlet 获取用户的输入;调用模型;将数据交给视图进行展示

在这里插入图片描述

  • 优缺点:
    • 优点:

      • 耦合性低,方便维护,可以利于分工协作
      • 重用性高
    • 缺点:

      • 使得项目架构变得复杂,对开发人员要求高

3.EL表达式

3.1. 概念

  • 概念:Expression Language 表达式语言

3.2.作用

  • 作用:替换和简化jsp页面中java代码的编写

3.3.语法

  • 语法:${表达式}

3.4.注意

  • jsp默认支持el表达式的。如果要忽略el表达式
    • 设置jsp中page指令中:isELIgnored="true" 忽略当前jsp页面中所有的el表达式
    • \${表达式} :忽略当前这个el表达式

3.5.使用

3.5.1.运算

  • 运算符:
    • 算数运算符: + - * /(div) %(mod)
    • 比较运算符: > < >= <= == !=
    • 逻辑运算符: &&(and) ||(or) !(not)
    • 空运算符: empty
      • 功能:用于判断字符串、集合、数组对象是否为null或者长度是否为0
      • ${empty list}:判断字符串、集合、数组对象是否为null或者长度为0
      • {not empty str}:表示判断字符串、集合、数组对象是否不为null 并且 长度>0
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>ELExpression</title>
</head>
<body>
    <h1>=====运算表达式=====</h1>
    <div>2+3=</div>${2+3}<br/>
    <div>5-3=</div>${5-3}<br/>
    <div>6/3=</div>${6/3}<br/>
    <div>6%3=</div>${6%3}<br/>

    <h1>=====比较表达式=====</h1>
    <div>2>3=</div>${2>3}<br/>
    <div>2!=3=</div>${2!=3}<br/>

    <h1>=====逻辑表达式=====</h1>
    <div>2>3 && 3 > 2 =</div>${2 > 3 && 3 > 2}<br/>


</body>
</html>

在这里插入图片描述

3.5.2.获取值

  • el表达式只能从域对象中获取值
  • 语法:
    • 语法1:${域名称.键名}从指定域中获取指定键的值
      • 域名称:(下面四个域的范围从小到大,查找访问是从小到大)
        • pageScope --> pageContext
        • requestScope --> request
        • sessionScope --> session
        • applicationScope --> application(ServletContext)
      • 举例:在request域中存储了name=张三
      • 获取:${requestScope.name}
    • 语法2:${键名}表示依次从最小的域中查找是否有该键对应的值,直到找到为止。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>EL表达式获取值</title>
</head>
<body>
    <%
        session.setAttribute("name", "李四");
        request.setAttribute("name", "张三");
        session.setAttribute("age", "18");
    %>

    ${requestScope.name}
    ${sessionScope.age}

    ${name}
    ${sessionScope.name}
</body>
</html>

在这里插入图片描述

  • 获取对象、List集合、Map集合的值
    • 对象:${域名称.键名.属性名}
      • 本质上会去调用对象的getter方法,将getXxxx方法的get去掉,将剩下的部分Xxxx的首字母改为小写xxxx作为属性名
    • List集合:${域名称.键名[索引]}
    • Map集合:
      • ${域名称.键名.key名称}
      • ${域名称.键名["key名称"]}

获取对象及属性值
User.java

package com.weeks.domain;

import java.text.SimpleDateFormat;
import java.util.Date;

public class User {
    
    
    private String name;
    private int age;
    private Date bri;

    public String getBriStr(){
    
    
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        return sdf.format(bri);
    }

    public String getName() {
    
    
        return name;
    }

    public void setName(String name) {
    
    
        this.name = name;
    }

    public int getAge() {
    
    
        return age;
    }

    public void setAge(int age) {
    
    
        this.age = age;
    }

    public Date getBri() {
    
    
        return bri;
    }

    public void setBri(Date bri) {
    
    
        this.bri = bri;
    }
}

eldemo3.jsp

<%@ page import="com.weeks.domain.User" %>
<%@ page import="java.util.Date" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>EL获取对象及对象属性</title>
</head>
<body>
    <%
        User user = new User();
        user.setName("张三");
        user.setAge(18);
        user.setBri(new Date());
        
        request.setAttribute("u", user);
    %>

    <%-- 
        获取对象和对象的属性值
         * 获取对象的属性值本质是通过对象的getter方法
         * 将getter方法的get去掉后剩余的部分首字母改为小写就是属性名
            * getXxxx --> Xxxx --> xxxx
    --%>
    ${requestScope.u}<br/>
    ${requestScope.u.name}<br/>
    ${requestScope.u.age}<br/>
    ${requestScope.u.bri}<br/>
    ${requestScope.u.briStr}<br/>
</body>
</html>

在这里插入图片描述
获取list、map集合的值

<%@ page import="com.weeks.domain.User" %>
<%@ page import="java.util.Date" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.HashMap" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>EL获取对象及对象属性</title>
</head>
<body>
    <%
        User user = new User();
        user.setName("张三");
        user.setAge(18);
        user.setBri(new Date());

        request.setAttribute("u", user);

        ArrayList<Object> list = new ArrayList<>();
        list.add("weeks");
        list.add("rising");
        list.add(user);
        request.setAttribute("list", list);

        HashMap<String, Object> map = new HashMap<>();
        map.put("name", "zhangSan");
        map.put("gender", "male");
        map.put("user", user);
        request.setAttribute("map", map);
    %>
    <h3>EL获取list集合的值</h3>
    ${requestScope.list[0]}<br/>
    ${requestScope.list[1]}<br/>
    ${requestScope.list[2]}<br/>
    ${requestScope.list[10]}<br/>
    ${requestScope.list[2].name}<br/>

    <h3>EL获取map集合的值</h3>
    ${requestScope.map.gender}<br/>
    ${requestScope.map["gender"]}<br/>
    ${requestScope.map.user.name}<br/>
</body>
</html>

在这里插入图片描述

3.5.3.隐式对象

  • el表达式中有11个隐式对象
  • pageContext:
    • 获取jsp其他八个内置对象
      • ${pageContext.request.contextPath}:动态获取虚拟目录
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <h3>EL内置对象</h3>
    ${pageContext.request}<br/>
    ${pageContext.request.contextPath}
</body>
</html>

在这里插入图片描述

4.JSTL

4.1.概念

  • 概念:JavaServer Pages Tag Library JSP标准标签库
  • 是由Apache组织提供的开源的免费的jsp标签

4.2.作用

  • 作用:用于简化和替换jsp页面上的java代码

4.3.使用步骤

  • 导入jstl相关jar包
    在这里插入图片描述
  • 引入标签库:taglib指令: <%@ taglib %>
  • 使用标签

4.4.常用的JSTL标签

4.4.1.if

  • if:相当于java代码的if语句
  • 属性:
    • test 必须属性,接受boolean表达式
      • 如果表达式为true,则显示if标签体内容,如果为false,则不显示标签体内容
      • 一般情况下,test属性值会结合el表达式一起使用
  • 注意:
    • c:if标签没有else情况,想要else情况,则可以在定义一个c:if标签
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>if标签</title>
</head>
<body>

    <%--
    c:if标签
        1. 属性:
            * test 必须属性,接受boolean表达式
                * 如果表达式为true,则显示if标签体内容,如果为false,则不显示标签体内容
                * 一般情况下,test属性值会结合el表达式一起使用
        2. 注意:c:if标签没有else情况,想要else情况,则可以在定义一个c:if标签
    --%>
    <c:if test="true">
        <h1>我是真...</h1>
    </c:if>
    <br/>
    <%
        //判断request域中的一个list集合是否为空,如果不为null则显示遍历集合
        List list = new ArrayList();
        list.add("weeks");
        request.setAttribute("list", list);
        request.setAttribute("number", 4);
    %>

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

    <c:if test="${requestScope.number % 2 == 0}">
        ${requestScope.number}为偶数
    </c:if>
    <br/>
    <c:if test="${requestScope.number % 2 != 0}">
        ${requestScope.number}为奇数
    </c:if>
</body>
</html>

在这里插入图片描述

4.4.2.choose

  • choose:相当于java代码的switch语句
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>choose标签</title>
</head>
<body>
    <%--
        完成数字编号对应星期几案例
            1.域中存储一数字
            2.使用choose标签取出数字         相当于switch声明
            3.使用when标签做数字判断         相当于case
            4.otherwise标签做其他情况的声明  相当于default
    --%>
    <%
        request.setAttribute("number", 1);
    %>
    <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>
</body>
</html>

在这里插入图片描述

4.4.3.foreach

  • foreach:相当于java代码的for语句
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <title>foreach标签</title>
</head>
<body>
    <%--

        foreach:相当于java代码的for语句
            1. 完成重复的操作
                for(int i = 0; i < 10; i ++){

                }
                * 属性:
                    begin:开始值
                    end:结束值
                    var:临时变量
                    step:步长
                    varStatus:循环状态对象
                        index:容器中元素的索引,从0开始
                        count:循环次数,从1开始
            2. 遍历容器
                List<User> list;
                for(User user : list){

                }

                * 属性:
                    items:容器对象
                    var:容器中元素的临时变量
                    varStatus:循环状态对象
                        index:容器中元素的索引,从0开始
                        count:循环次数,从1开始


    --%>

    <c:forEach begin="0" end="10" var="i" step="2" varStatus="s">
        当前值i=${i},当前的索引:${s.index},当前循环的次数:${s.count}<br/>
    </c:forEach>

    <%
        List list = new ArrayList();

        list.add("aaa");
        list.add("bbb");
        list.add("ccc");
        request.setAttribute("list", list);
    %>
    <hr/>
    <c:forEach items="${list}" var="li" varStatus="s">
        当前值li=${li},当前的索引:${s.index},当前的循环次数:${s.count}<br/>
    </c:forEach>
</body>
</html>

在这里插入图片描述

4.5.练习

  • 需求:在request域中有一个存有User对象的List集合。需要使用jstl+el将list集合数据展示到jsp页面的表格table中
package com.weeks.domain;

import java.text.SimpleDateFormat;
import java.util.Date;

public class User {
    
    
    private String name;
    private int age;
    private Date bri;

    public User(){
    
    }

    public User(String name, int age, Date bri) {
    
    
        this.name = name;
        this.age = age;
        this.bri = bri;
    }

    public String getBriStr(){
    
    
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        return sdf.format(bri);
    }

    public String getName() {
    
    
        return name;
    }

    public void setName(String name) {
    
    
        this.name = name;
    }

    public int getAge() {
    
    
        return age;
    }

    public void setAge(int age) {
    
    
        this.age = age;
    }

    public Date getBri() {
    
    
        return bri;
    }

    public void setBri(Date bri) {
    
    
        this.bri = bri;
    }
}
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.List" %>
<%@ page import="com.weeks.domain.User" %>
<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>test</title>
</head>
<body>
    <%
        List list = new ArrayList();

        list.add(new User("张三", 23, new Date()));
        list.add(new User("李四", 24, new Date()));
        list.add(new User("王五", 25, 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 % 2 == 0}">
                <tr bgcolor="aqua">
                    <td>${s.count}</td>
                    <td>${user.name}</td>
                    <td>${user.age}</td>
                    <td>${user.briStr}</td>
                </tr>
            </c:if>

            <c:if test="${s.count % 2 != 0}">
                <tr bgcolor="#ff1493">
                    <td>${s.count}</td>
                    <td>${user.name}</td>
                    <td>${user.age}</td>
                    <td>${user.briStr}</td>
                </tr>
            </c:if>

        </c:forEach>
    </table>
</body>
</html>

在这里插入图片描述

5.三层架构:软件设计架构

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

在这里插入图片描述

6.案例:用户信息列表展示

  1. 需求:用户信息的增删改查操作
  2. 设计:
    • 技术选型:Servlet+JSP+MySQL+JDBCTempleat+Duird+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(20),
	email VARCHAR(50)
);
  1. 开发:

    • 环境搭建
      • 创建数据库环境
      • 创建项目,导入需要的jar包
    • 编码
      在这里插入图片描述
  2. 测试

  3. 部署运维

代码汇总:下载连接

猜你喜欢

转载自blog.csdn.net/weixin_42284219/article/details/120619378