JavaWeb基础（2）：熟悉HTML&CSS、Servlet、JSP、EL、JSTL、会话控制、jQuery、JSON、Filter、Listener

最新推荐文章于 2023-08-04 20:36:41 发布

DougLeaMrConcurrency

最新推荐文章于 2023-08-04 20:36:41 发布

阅读量489

点赞数

分类专栏： # JavaWeb 文章标签： HTML CSS JSP EL JSTL

本文链接：https://blog.csdn.net/qq_43265673/article/details/98894797

版权

JavaWeb 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1.HTML&CSS

网页的组成
结构：HTML
表现：CSS
行为：JavaScript
一个良好的网页要求结构、表现、行为三者分离
HTML中常用的标签
标题标签：一共6个

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

超链接
通过a标签创建一个超链接
href属性：用来设置要跳转的页面的路径
关于路径：
绝对路径：以盘符开头的一个完整的路径
相对路径：相对于当前页面所在的路径
在相对路径中，通过 …/ 返回上一级目录，返回多级目录使用多个 …/
target属性：用来设置要跳转的页面在何处打开
_self：默认，在当前标签页打开
_blank：在新的标签页打开

<a href="../../target.html" target="_self">点我有惊喜！</a><br>

.

点我有惊喜！

表格
通过table标签创建一个表格

   <table border="1">
    <!-- 表格中的行使用tr标签来表示 -->
    <tr>
        <!-- 表格中的表头使用th标签来表示 -->
        <th>姓名</th>
        <th>阵营</th>
        <th>职业</th>
        <th>武器</th>
    </tr>
    <tr>
        <!-- 每行中的列（单元格）使用td标签来表示 -->
        <td>刘备</td>
        <!-- 跨行合并单元格使用rowspan属性来设置 -->
        <td rowspan="4">蜀</td>
        <td>蜀汉集团董事长</td>
        <td>双股剑</td>
    </tr>
    <tr>
        <!-- 每行中的列（单元格）使用td标签来表示 -->
        <td>诸葛亮</td>
<!--            <td>蜀</td> -->
        <!-- 跨列合并单元格使用colspan属性来设置 -->
        <td colspan="2" align="center">蜀汉集团CEO</td>
<!--            <td>羽扇</td> -->
    </tr>
    <tr>
        <!-- 每行中的列（单元格）使用td标签来表示 -->
        <td>关羽</td>
<!--            <td>蜀</td> -->
        <td>荆襄总裁</td>
        <td>青龙偃月刀</td>
    </tr>
    <tr>
        <!-- 每行中的列（单元格）使用td标签来表示 -->
        <td>张飞</td>
<!--            <td>蜀</td> -->
        <td>阆中销售经理</td>
        <td>丈八蛇矛</td>
    </tr>
</table>

. 在这里插入图片描述

表单

<!-- 通过form标签创建一个表单
    action属性：用来设置服务器的地址
    method属性：用来设置发送请求的请求方式
        get：默认值，会发送一个GET请求，表单中的数据会通过浏览器的地址栏进行传输
        post：会发送一个POST请求，表单中的数据会通过请求体进行传输
-->
<form action="../target.html" method="post">
    <!-- 表单中的表单项使用input标签来表示 ，不同的表单项通过type属性来指定-->
    <!-- 必须给每个表单项指定name属性值，用户输入的数据通过name属性值进行携带，并以键值对的形式发送到
        服务器，多个键值对之间通过 & 符合分隔，例如：user=admin&pwd=123456 -->
    用户名：<input type="text" name="user"><br>
    密码：<input type="password" name="pwd"><br>
    <!-- 提交按钮中显示的文本通过vlaue属性来设置 -->
    <input type="submit" value="登录">
</form>

在这里插入图片描述
CSS的基本选择器
标签选择器
格式：html标签
ID选择器
格式：#id属性值
类选择器
格式：.class属性值
分组选择器
格式：各个选择器通过逗号分隔

<!-- css样式写在style标签中 -->
<style type="text/css">
/* 标签选择器
    格式：html标签
 */
 h1{
    color: red
 }
 h2{
    color: green
 }
 /* ID选择器
    格式：#id属性值
  */
 #p1{
    color: blue;
 }
 /* 类选择器
    格式：.class属性值
  */
  .p2{
     color: pink;
  }
  /* 分组选择器
    格式：将各个选择器使用逗号分隔统一设置样式
   */
   #p1,.p2{
        font-size: 30px
   }

颜色的表示方式
1）使用英文单词
2）使用rgb值
3）使用十六进制数

<!--
    颜色的表示方式：
        1.使用英文单词
            例如：红色：red
        2.使用rgb值
            例如：红色：rgb(255,0,0)
        3.使用十六进制数
            例如：红色：#FF0000=#ff0000=#F00=#f00   
 -->

2.Servlet

作用：用来处理用户的请求并给用户响应
request的作用
1）获取请求参数
2）获取项目虚拟路径
3）转发

//request的作用：

    //1.获取请求参数
    String username = request.getParameter("username");
    String password = request.getParameter("password");
    System.out.println(username);
    System.out.println(password);
    //2.获取项目的虚拟路径
    String contextPath = request.getContextPath();
    System.out.println(contextPath);
    //3.转发
    //获取转发器
    RequestDispatcher requestDispatcher = request.getRequestDispatcher("WEB-INF/pages/success.html");
    //进行请求的转发
    requestDispatcher.forward(request, response);

response的作用
1）给浏览器响应一个字符串或一个页面
2）重定向
//response的作用

    //1.给浏览器响应一个字符串或者一个页面
    //解决响应中文乱码问题
    response.setContentType("text/html;charset=UTF-8");
    PrintWriter writer = response.getWriter();
//      writer.write("响应成功！");
//      writer.write("<!DOCTYPE html>");
//      writer.write("<html>");
//      writer.write("<head>");
//      writer.write("<meta charset=\"UTF-8\">");
//      writer.write("<title>Insert title here</title>");
//      writer.write("</head>");
//      writer.write("<body>");
//      writer.write("<h1>我是一个很漂亮的页面！</h1>");
//      writer.write("</body>");
    //2.重定向
    response.sendRedirect("WEB-INF/pages/success.html");

中文乱码问题
请求乱码
POST请求
在第一次获取请求参数之前设置字符集为UTF-8
//POST请求的请求乱码问题的解决方案：

request.setCharacterEncoding("UTF-8");
    request.setCharacterEncoding("UTF-8");

GET请求
在Tomcat的配置文件server.xml的第一个Connector标签中添加属性URIEncoding=“UTF-8”

 <Connector URIEncoding="UTF-8" connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443"/>

响应乱码
//解决响应中文乱码问题

response.setContentType("text/html;charset=UTF-8");

绝对路径

<!--
    以  / 开头的路径即为绝对路径
    / 代表的意义：
        如果地址由浏览器解析，那么 / 就代表http://localhost:8080/
            1）html标签中的路径
            2）重定向中的路径
        如果地址由服务器解析，那么 / 就代表http://localhost:8080/Web_Ex/
            1）web.xml中url-pattern标签中的路径
            2）转发中的路径
 -->

3.JSP

本质上就是一个Servlet
JSP基本语法
JSP脚步片段
作用：用来在里面写Java代码

<!-- 1.JSP脚本片段
    作用：用来在里面写Java代码
 -->
 <%
    for(int i = 0 ; i < 10 ; i ++ ){
        //out.print("今天天气好晴朗，处处好风光！");
 %>     
        <h1>今天天气好晴朗，处处好风光!</h1>
 <%
    }
 %

JSP表达式
作用：用来输出对象

<!-- 2.JSP表达式
    作用：用来输出对象
  -->
  <%="我是通过JSP表达式输出的" %>

四个域对象

<!--
    四个域
        page域
            范围：当前页面
            对应的域对象：pageContext
            域对象的类型：PageContext
        request域
            范围：当前请求（一次请求）
            对应的域对象：request
            域对象的类型：HttpServletRequest
        session域
            范围：当前会话（一次会话）
            对应的域对象：session
            域对象的类型：HttpSession
        application
            范围：当前Web应用
            对应的域对象：application
            域对象的类型：ServletContext
        四个域对象都有以下三个方法：
            void setAttribute(String key , Object value)   
            Object getAttribute(String key)
            void removeAttribute(String key)
        四个域对象的使用规则：能用小的就不用大的 
 -->
 <!-- 在当前页面中分别向四个域中添加四个属性 -->
 <%
    pageContext.setAttribute("pageKey", "pageValue");
     request.setAttribute("reqKey","reqValue");
    session.setAttribute("sessKey", "sessValue");
    application.setAttribute("appKey", "appValue");
 %>
 <h1>在当前页面中获取四个域中的属性值</h1>
 page域中的属性值是：<%=pageContext.getAttribute("pageKey") %><br>
 request域中的属性值是：<%=request.getAttribute("reqKey") %><br>
 session域中的属性值是：<%=session.getAttribute("sessKey") %><br>
 application域中的属性值是：<%=application.getAttribute("appKey") %><br>

4.EL

格式：${表达式}
作用：主要用来输出域对象中的属性值

 <%
    Date date = new Date();
    pageContext.setAttribute("date", date+"-");
    request.setAttribute("date", date+"--");
    session.setAttribute("date", date+"---");
    application.setAttribute("date", date+"----");
    //创建Employee对象
    Employee emp = new Employee(1,"刘强东",new Department(1001,"奶茶店"));
    //将emp返到page域中
    pageContext.setAttribute("emp", emp);
 %>
 通过EL表达式输出当前的时间：${date }<br>
 精确获取request域中的属性值：${requestScope.date }<br>
通过EL表达式输入Employee对象的lastName属性值：${emp.lastName }<br>
通过EL表达式输入Employee对象的dept属性的name属性值：${emp.dept.name }<br>
通过EL表达式获取getStatus方法的返回值：${emp.status }
通过EL表达式获取项目的虚拟路径：${pageContext.request.contextPath }

5.JSTL

JSP的标准标签库，使用它需要导入以下jar包
jstl.jar
standard.jar
使用c标签需要导入核心标签库

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

if标签

 <!-- if标签：相当于Java中的if条件判断语句
    test属性：用来接收一个布尔类型的值，通常通过EL表达式获取
        当值为true时才执行标签体中的内容
 -->
 <%
    int age = 19;
    pageContext.setAttribute("age", age);
 %>
 <c:if test="${age < 18 }">
    少儿不宜！
 </c:if>
 <c:if test="${age > 18 }">
    请尽情浏览！注意身体！！！
 </c:if>

forEach标签

 <%
    List<String> list = new ArrayList();
    list.add("文章");
    list.add("白百何");
    list.add("李小璐");
    list.add("陈赫");
    list.add("林丹");
    list.add("黄海波");
    list.add("房祖名");
    list.add("周立波");
    list.add("张默");
    //将list放到page域中
    pageContext.setAttribute("stars", list);
 %>
 <!-- forEach标签：相当于Java中的for循环
    items属性：用来接收一个要遍历的集合
    var属性：设置一个变量来接收遍历到的数据，并且会以变量的值为key将数据放到page域中
  -->
  <c:forEach items="${stars }" var="star">
    <a href="#">${pageScope.star }</a><br>
  </c:forEach>

empty运算符
用来判断一个字符串或一个集合是否为空

  <c:if test="${empty stars }">
    没有违法的明星！
  </c:if>
  <c:if test="${not empty stars }">
    什么都是别人的好！
  </c:if>
   <c:if test="${!empty stars }">
    佛海无边，回头是岸！！！
  </c:if>

6.会话控制

Cookie的运行原理

<!--
    Cookie的运行原理：
        1.第一次向服务器发送请求时在服务器端创建一个Cookie对象
        2.将Cookie对象发送给浏览器
        3.以后浏览器再发请求就会携带着该Coolie对象
        4.服务器通过不同的Cookie来区别不同的用户
 -->

Session的运行原理

<!--
    Session的运行原理：
        1.第一次向服务器发送请求时在服务器端创建一个Session对象，该对象有一个全球唯一的ID
        2.在创建Session对象的同时会创建一个特殊的Cookie对象，该Cookie对象的名字是一个固定值：JSESSIONID，
          该Cookie对象的值就是Session对象的ID值，并且将该Cookie对象发送给浏览器
        3.以后浏览器再发送请求就会携带着这个特殊的Cookie对象
        4.服务器获取Cookie对象的值之后寻找与之对应的Session对象，以此来区分不同的用户 
 -->

7.jQuery

jQuery是为了简化JavaScript开发而生的一个小型的框架，jQuery和 $是相等的，我们通常使用$ 代替jQuery这个单词
基本选择器
ID选择器
$("#id属性值")
类选择器
$(".class属性值")
标签选择器
$(" h t m l 标签 ") 常用的方法 a t t r () 获取或设置标签的属性值对象 . a t t r (" 属性名 ") ：获取属性值对象 . a t t r (" 属性名 ", " 属性值 ") ：设置属性值 t e x t () 和 h t m l () 方法获取或设置成对出现的标签中的文本值对象 . t e x t () ：获取文本值对象 . t e x t (" 新值 ") ：设置文本值 h t m l () 方法与 t e x t () 方法的唯一区别是 h t m l 方法可以解析 h t m l 标签 v a l () 获取或设置 i n p u t 标签的 v a l u e 属性值对象 . v a l () ：获取 v a l u e 属性值对象 . v a l (" 新值 ") ：设置 v a l u e 属性值事件 c l i c k () ：单击事件 c h a n g e () ：内容改变的事件通过 j Q u e r y 发送 A j a x 请求通过$ .ajax()发送Ajax请求
//给按钮绑定单击事件

    $("#btnId").click(function(){
        //通过$.ajax()方法发送Ajax请求
        /*
            url：必须的。用来设置请求地址
            type：可选的。用来设置请求方式，GET或POST，默认是get
            data：可选的。用来设置请求参数
            success：可选的。用来设置一个回调函数，响应成功之后系统会自动调用该函数，
                    响应数据会以参数的形式传入到该函数中
            dataType：可选的。设置响应数据的类型，默认是text       
        */
        $.ajax({
            url:"${pageContext.request.contextPath }/AjaxServlet",
            type:"get",
            data:"username=admin&password=123456",
            success:function(res){
                //将响应数据设置到span标签中
                $("#msg").text(res);
            },
            dataType:"text"
        });
    });

通过 $. g e t () 或$ .post()发送Ajax请求

$("#btnId2").click(function(){
        //通过$.get()/post()方法发送Ajax请求
        /*
            $.get/post(url, [data], [callback], [type])
            url：必须的。用来设置请求地址
            data：可选的。用来设置请求参数
            callback：可选的。用来设置一个回调函数，响应成功之后系统会自动调用该函数，
                    响应数据会以参数的形式传入到该函数中
            type：可选的。用来设置响应数据的类型，默认是text       
        */
        //设置请求地址
        var url = "${pageContext.request.contextPath }/AjaxServlet";
        //设置请求参数
        var params = "username=admin&password=666666";
        $.get(url,params,function(res){
            //将响应数据设置到span标签中
            $("#msg2").html(res);
        },"text");
    });

8.JSON

JavaScript的对象表示法，是一种跨平台、跨语言的数据交换格式
JSON格式
JSON对象
//1.JSON对象
//属性名必须使用双引号括起来；属性名和属性值之间使用冒号分隔；多个属性之间使用逗号分隔

var jsonObj = {"name":"孙悟空","age":520};
//创建一个稍微复杂的JSON对象
var fzJson = {
            "name":"唐僧",
            "age":18,
            "sons":[{"name":"孙悟空"},
                    {"name":"小白龙"},
                    {"name":"猪八戒","wives":[{"name":"嫦娥","age":16},
                                            {"name":"高翠兰","age":17},
                                            {"name":"白骨精","age":18}
                                            ]},
                    {"name":"沙和尚"}
                    ]
            };
//获取猪八戒的第二任夫人的名字
alert(fzJson.sons[2].wives[1].name);

JSON数组
//2.JSON数组

var jsonArray = ["八戒",1500,true,null,jsonObj];
//获取数组中JSON对象的age属性值
alert(jsonArray[4].age);

在JavaScript中JSON对象与JSON字符串之间的转换

//将JSON对象转换为JSON字符串
var objToStr = JSON.stringify(jsonObj);
//声明一个JSON字符串
var jsonStr = '{"name":"女儿国国王","age":35}';
//将JSON字符串转换为JSON对象

var strToObj = JSON.parse(jsonStr);

在Java中对象与JSON字符串之间的转换
导入Gson的jar包

    //假设从数据库中查询出来一个User对象
    User user = new User(1, "白骨精", 16);
    //创建Gson对象
    Gson gson = new Gson();
    //将User对象转换为JSON字符串
    String json = gson.toJson(user);
    System.out.println(json);

发送一个Ajax请求，接收JSON格式的响应数据

$(function(){
    //给按钮绑定单击事件
    $("#btnId").click(function(){
        //发送Ajax请求
        //设置请求地址
        var url = "JSONServlet";
        $.post(url,function(res){
            alert(res.id+"-"+res.name+"-"+res.age);
        },"json");
    });
});

当响应数据指定为json格式时，后台响应的JSON字符串jQuery会自动给我们转换为JSON对象

9.Filter

作用：用来拦截用户的请求，但是Filter只拦截请求不拦截响应
我们还可以为同一个资源设置多个过滤器，多个过滤器的拦截顺序由web.xml中的filter-mapping标签绝对，在前的先拦截，在后的后拦截
以拦截index.jsp页面为例创建两个拦截器
HelloFilter

/**
 * 拦截index.jsp的过滤器
 */
public class HelloFilter implements Filter {
    public HelloFilter() {
    }
    public void destroy() {
    }
    // 拦截请求的方法
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        System.out.println("①此山是我开此树是我栽，要想从此过，留下买路财！");
        //放行请求
        chain.doFilter(request, response);
        System.out.println("⑤小鬼，你又回来了！");
    }
    public void init(FilterConfig fConfig) throws ServletException {
    }
}

HelloFilter2

/**
 * 拦截index.jsp的过滤器
 */
public class HelloFilter2 implements Filter {
    public HelloFilter2() {
    }
    public void destroy() {
    }
    // 拦截请求的方法
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        System.out.println("②此山是我开此树是我栽，要想从此过，留下衣服来！");
        //放行请求
        chain.doFilter(request, response);
        System.out.println("④你又买新衣服了！");
    }
    public void init(FilterConfig fConfig) throws ServletException {
    }
}

index.jsp页面中的内容

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <%
        System.out.println("③到达目的地！");
    %>
    <h1>你能看到我吗？</h1>
</body>
</html>

web.xml中的配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaeehttp://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <filter>
    <filter-name>HelloFilter</filter-name>
    <filter-class>com.atguigu.filter.HelloFilter</filter-class>
  </filter>
  <filter>
    <filter-name>HelloFilter2</filter-name>
    <filter-class>com.atguigu.filter.HelloFilter2</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>HelloFilter2</filter-name>
    <url-pattern>/index.jsp</url-pattern>
  </filter-mapping>
    <filter-mapping>
    <filter-name>HelloFilter</filter-name>
    <url-pattern>/index.jsp</url-pattern>
  </filter-mapping>
</web-app>

10.Listener

监听器用来监听ServletRequest、HttpSession、ServletContext对象的生命周期和三个域中的属性变化
掌握ServletContext的生命周期监听器
ServletContextListener
通过该接口创建的监听器服务器已启动该对象就被创建
创建一个ServletContextListener的监听器
MyServletContextListener

/**
 * 监听ServletContext对象的生命周期的监听器
 *
 */
public class MyServletContextListener implements ServletContextListener {
    public void contextDestroyed(ServletContextEvent sce)  {
        System.out.println("ServletContext对象被销毁了");
    }
    public void contextInitialized(ServletContextEvent sce)  {
        System.out.println("ServletContext对象被创建了");
    }
    
}

web.xml中的配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaeehttp://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <listener>
    <listener-class>com.atguigu.listener.MyServletContextListener</listener-class>
  </listener>
</web-app>