JSP基础知识

Myth丶恋晨 2022-05-31 03:57 303阅读 0赞

#### 一、什么是JSP ####

![这里写图片描述][SouthEast]  
![这里写图片描述][SouthEast 1]

#### 二、Eclipse下动态Web项目的结构 ####

![这里写图片描述][SouthEast 2]

#### 三、JSP程序的执行过程 ####

![这里写图片描述][SouthEast 3]  
用户首先向服务器发起访问jsp文件的请求，web容器读取jsp文件后，生成对应的java文件（准确的说是Servlet源文件），web容器再将java文件编译成class文件，最后由web容器加载编译后的class文件并执行，把执行结果相应给客户端。

#### 四、JSP基本语法 ####

![这里写图片描述][SouthEast 4]  
**1、声明语法**  
![这里写图片描述][SouthEast 5]

<%@ 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=ISO-8859-1">
    <title>Insert title here</title>
    </head>
    <body>
    
    <%!
        String str = "hello world";
        String getStr(){
            return "hello world2";
        }
    %>
    <hr>
    
    <% out.println(this.str); %>
    <hr>
    
    <% out.println(this.getStr()); %>
    </body>
    </html>

**2、程序脚本**  
需要注意的是程序脚本里面声明的变量为局部变量，而不是成员变量。  
![这里写图片描述][SouthEast 6]

<%@ 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=ISO-8859-1">
    <title>Insert title here</title>
    </head>
    <body>
        <% int i = 10; %>
        <% if(i >10){
                out.println("i > 10");
            }
            else{
                out.println("i <= 10");
            }
        %>
        <hr>
        
        <% if(i > 10){ %>
        <span>i > 10</span>
        <% }else{ %>
        <span>i <= 10</span>
        <%} %>
    </body>
    </html>

运行效果如下图  
![这里写图片描述][SouthEast 7]

**3、JSP注释**  
![这里写图片描述][SouthEast 8]

**4、JSP内容输出表达式**  
![这里写图片描述][SouthEast 9]

![这里写图片描述][SouthEast 10]  
上题代码如下：

<%@ 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=ISO-8859-1">
    <title>居中</title>
    <style>
        div{
        text-align: center;
        }
    </style>
    </head>
    <body>
        <% 
            int x = -5;
            int y = 0;
        %>
        <%
            if(x < 0){
                y = -1;
            }else if(x == 0){
                y = 0;
            }else{
                y = 1;
            }
        %>
        <div>当x<0时，输出</div>
        <div>x= <%= x  %></div>
        <div>y= <%= y %></div>
    
    </body>
    </html>

**4、JSP包引入语法**  
![这里写图片描述][SouthEast 11]  
下面我们引入Java中的格式化时间和日期相关的类，并将获取的时期显示在页面上

<%@ page language="java" contentType="text/html; charset=utf-8"
        pageEncoding="utf-8"%>
    
    <%@ page import = "java.util.*" %>
    <%@ page import = "java.text.*" %>
    <!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=ISO-8859-1">
    <title>Insert title here</title>
    </head>
    <body>
    <%!
        public String getNow(){
            //获取日期格式化类
            SimpleDateFormat formatter = new SimpleDateFormat("yyyy/MM/dd hh:mm:ss");
            //获取日期
            Date currentTime = new Date();
            return formatter.format(currentTime);
        }
    %>
    
    <%= getNow() %>
    </body>
    </html>

运行效果如下：  
![这里写图片描述][SouthEast 12]  
下面再试着做一道习题：  
![这里写图片描述][SouthEast 13]  
上题代码如下：

<%@ page language="java" contentType="text/html; charset=utf-8"
        pageEncoding="utf-8"%>
    
    <%@ page import = "java.util.ArrayList" %>
    <!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=ISO-8859-1">
    <title>List</title>
    </head>
    <body>
        <%
            ArrayList<String> list = new ArrayList<String>();
        %>
        <%
            list.add("第一条:\t\t JSP基础入门");
            list.add("第二条:\t\t Servlet视频详解");
            list.add("第三条:\t\t EL表达式初识");
            list.add("第四条:\t\t JSTL标签库初识");
        %>
        <div>
            <% out.print(list.get(0)); %>
        </div>
        <br>
        <div>
            <% out.print(list.get(1)); %>
        </div>
        <br>
        <div>
            <% out.print(list.get(2)); %>
        </div>
        <br>
        <div>
            <% out.print(list.get(3)); %>
        </div>
    </body>
    </html>

#### 五、JSP内置对象 ####

![这里写图片描述][SouthEast 14]  
JSP一共有九大内置对象：

1.  输出输入对象:request对象、response对象、out对象
2.  通信控制对象:pageContext对象、session对象、application对象
3.  Servlet对象:page对象、config对象
4.  错误处理对象:exception对象

我们首先来通过一个人事管理系统学习输入输出对象：request、response以及out

**1、request、response、out**

1.  Request(Javax.servlet.ServletRequest)它包含了有关浏览器请求的信息.通过该对象可以获得请求中的头信息、Cookie和请求参数。
2.  Response(Javax.servlet.ServletResponse)作为JSP页面处理结果返回给用户的响应存储在该对象中。并提供了设置响应内容、响应头以及重定向的方法(如cookies,头信息等)
3.  Out(Javax.servlet.jsp.JspWriter)用于将内容写入JSP页面实例的输出流中,提供了几个方法使你能用于向浏览器回送输出结果。

人事管理系统需要实现这么一个功能，首先打开人事管理系统后需要输入用户名和密码进行登录，之后将登录的信息交由jsp程序判定是否能和数据库中的用户信息匹配，若匹配成功则显示出所有用户信息。

那么我们首先新建一个Java Web项目（IntelliJ idea），首先在src目录下新建如下的包和类，其中DBUtil是模拟数据库的一个类，Emp是用户类。  
![这里写图片描述][SouthEast 15]  
接着实现Emp用户类

package com.imooc.bean;
    
    //员工类
    public class Emp {
        private String account;
        private String name;
        private String passord;
        private String email;
    
        public Emp(String account, String name, String passord, String email) {
            this.account = account;
            this.name = name;
            this.passord = passord;
            this.email = email;
        }
    
        public String getAccount() {
            return account;
        }
    
        public void setAccount(String account) {
            this.account = account;
        }
    
        public String getName() {
            return name;
        }
    
        public void setName(String name) {
            this.name = name;
        }
    
        public String getPassord() {
            return passord;
        }
    
        public void setPassord(String passord) {
            this.passord = passord;
        }
    
        public String getEmail() {
            return email;
        }
    
        public void setEmail(String email) {
            this.email = email;
        }
    }

再实现DBUtil类

package com.imooc.db;
    
    import com.imooc.bean.Emp;
    
    import java.util.HashMap;
    import java.util.Map;
    
    public class DBUtil {
        //使用Map集合模拟数据库存储员工信息
        public static Map<String,Emp> map = new HashMap<String, Emp>();
        //使用静态代码块初始化Map集合，存储用户信息
        static {
            //Map集合初始化
            map.put("101", new Emp("101", "AA", "123456", "AA@imooc.com"));
            map.put("102", new Emp("102", "BB", "123456", "BB@imooc.com"));
            map.put("103", new Emp("103", "CC", "123456", "CC@imooc.com"));
            map.put("104", new Emp("104", "DD", "123456", "DD@imooc.com"));
        }
    
        //判断用户名和密码是否正确
        public static boolean selectEmpByAccountAndPassoword(Emp emp){
            boolean flag = false;
            for (String key : map.keySet()){
                //遍历Map集合判断输入的用户名和密码是否在集合中存在
                if (emp.getAccount().equals(map.get(key).getAccount())
                        && emp.getPassord().equals(map.get(key).getPassord())){
                    flag = true;
                }
            }
            return flag;
        }
    }

在web文件夹下创建JSP文件logon.jsp以及controller.jsp，前者用来显示登录页面，后者用来处理用户输出的登录信息是否正确。  
首先是logon.jsp

<%-- 人事管理系统登录页面 --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
        <head>
            <title>人事管理系统</title>
            <style>
                h3{
                    text-align: center;
                }
            </style>
        </head>
        <body>
            <h3>人事管理系统登录页面</h3>
            <hr>
    
            
            
            <form action="controller.jsp">
                <table align="center">
                    <tr>
                        <td>
                            账号：
                        </td>
                        <td>
                            
                            <input type="text" name="account"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            密码：
                        </td>
                        <td>
                            <input type="password" name="password"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="submit" value="登录"/>
                        </td>
                    </tr>
                </table>
            </form>
        </body>
    </html>

接着是controller.jsp，这里注意不要忘记导包

<%-- 处理登录请求的jsp --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" import="com.imooc.db.*,com.imooc.bean.*,java.util.*" %>
    <%@ page import="java.util.Map" %>
    <html>
        <head>
            <title>Title</title>
            <style>
                table{
                    border: 1px solid black;
                    width: 500px;
                }
            </style>
        </head>
        <body>
            
            <%
                String account = request.getParameter("account");
    
                String password = request.getParameter("password");
                //用Emp对象封装输入的用户信息
                Emp emp = new Emp(account, null, password, null);
                //
                boolean flag = DBUtil.selectEmpByAccountAndPassoword(emp);
    
                Map<String,Emp> map = DBUtil.map;
    
                if (flag == true){
            %>
                    <h3 align="center">欢迎来到人事管理系统首页！</h3>
                    <hr>
                    <table align="center">
                        <tr>
                            <td>
                                账号
                            </td>
                            <td>
                                姓名
                            </td>
                            <td>
                                邮箱
                            </td>
                        </tr>
                        <%
                            for (String key : map.keySet()){
                                Emp e = map.get(key);
                                %>
                        
                                    <tr>
                                        <td>
                                            <%= e.getAccount() %>
                                        </td>
                                        <td>
                                            <%= e.getName()%>
                                        </td>
                                        <td>
                                            <%= e.getEmail()%>
                                        </td>
                                    </tr>
                                <%
                            }
                        %>
                    </table>
            <%
                }else {
    
                }
            %>
    
        </body>
    </html>

这时如果我们输入正确的用户密码，点击登录后，页面就会从logon.jsp跳转到controller.jsp并且显示所有的用户信息了！  
![这里写图片描述][SouthEast 16]

**request作用域**  
![这里写图片描述][70]  
这样说可以还比较抽象，那么借用刚刚的人事管理系统来试验一次。先在logon.jsp中加入以下代码

<% requset.setAttribute("name", "imooc") %>

接着在controller.jsp中加入

<h3>name对应的值：<%= request.getAttribute %></h3>

那么按照我们正常的理解，应该是我们在logon.jsp中点击登录，跳转到controller.jsp后，会在页面上显示出imooc这个值，但实际上并未如此，我们在controller.jsp中获取的值为null。

原因是当我们第一次访问logon.jsp，首先会向服务器发起请求request，服务器将logon.jsp响应给我们之后，这时我们刚刚发起的请求request就会在logon.jsp中执行

requset.setAttribute("name", "imooc")

但是当我们点击登录之后，就相当于发送了一个新的request，因此controller.jsp接收到的request并不是在logon.jsp中执行了对应操作的request，因此这个新的request中存放的name对应的值自然为null。

**这里注意，表单内容封装到request中发送给controller.jsp和我们上面讲是不一样的，我们点击表单的提交按钮后，logon.jsp会将表单内容封装到一个新的request对象中发送给controller.jsp，而我们上面所说的使用了setAttribute方法的request是从上一级请求生成的request，这两个request并不是一个request对象**

如果我们要想让一个jsp页面和logon.jsp共享那个存放了imooc值的request对象的话，我们需要在logon.jsp中调用

request.getRequestDispatcher("result.jsp").forward(request, response);

这段代码的意思是将request对象直接转发给result.jsp，那么我们就能在result.jsp中获取到request对象中存放的imooc值了，*但需要注意的是，这时我们直接访问logon.jsp时，虽然地址是logon.jsp，但是显示的内容却直接是result.jsp的内容了*

result.jsp的代码如下

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
        <head>
            <title>Title</title>
        </head>
        <body>
            从logon.jsp中传来的request对象获取的数据：<%= request.getAttribute("name") %>
        </body>
    </html>

效果如下，注意地址和内容  
![这里写图片描述][70 1]

**2、pageContext、page**  
![这里写图片描述][70 2]  
**pageContext**

首先学习pageContext转发请求的功能

创建一个index.jsp，在jsp页面中调用pageContext的forward方法转发request请求到a.jsp，并且在request请求中以键值对的形式存放参数

//使用pageContext对象转发request请求,并通过key value的形式存放一个值,若有多个值可通过&分割
    pageContext.forward("a.jsp?name=imooc");

接着在a.jsp中获取这个request请求及其存放的参数

//注意这里不是使用getAttribute来获取值，而是getParameter
    //注意这里如果使用<% request.getParameter("name")的话，只会执行不会输出，只有使用<%= %>才会输出到页面上！ %>
    request.getParameter("name")

打开index.jsp，发现请求转发成功，页面上显示的是imooc。

接着学习pageContext包含其他jsp页面的功能，在index页面中使用如下代码（注释掉之前）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
        <head>
            <title>Title</title>
        </head>
        <body>
            
            <%
                pageContext.include("header.jsp");
                //使用pageContext对象转发request请求,并通过key value的形式存放一个值,若有多个值可通过&分割
                //pageContext.forward("a.jsp?name=imooc");
            %>
        </body>
    </html>

header.jsp的代码如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
        <head>
            <title>Title</title>
        </head>
        <body>
            这是一个Header头部分
        </body>
    </html>

这时我们运行index.jsp，发现header.jsp的内容已经被index.jsp包含进来了！  
![这里写图片描述][70 3]

至于pageContext的获取其他内置对象的方法就比较简单了，就是getSession、getRequest之类。

pageContext的作用域是当前jsp页面

**page**  
page对象代表的是当前正在运行的jsp文件产生的类对象，一般用this可以指代。

比方说我们在logon.jsp中运行下面这段代码，getServletInfo()方法的作用是显示当前Servlet的基本信息

<%=
                this.getServletInfo()
           %>

运行效果如下：说明我们用的是JSP2.3的引擎  
![这里写图片描述][70 4]

**3、session、config、exception**

**session**  
![这里写图片描述][70 5]  
![这里写图片描述][70 6]  
因此session可以用来实现这样一种功能：用户登录后，使用session保存用户数据，这样当用户在浏览其他页面时，因为session的作用域是整个会话期间，因此就可以在其他页面也显示出当前用户的信息，例如用户名、用户性别等。

而使用session进行保存和读取数据的方法也和前面一样：session.setAttribute和session.getAttribute()

此外，还可以修改session的有效时间，Session超时理解为：浏览器和服务器之间创建了一个Session，由于客户端长时间（休眠时间）没有与服务器交互，服务器将此Session销毁，客户端再一次与服务器交互时之前的Session就不存在了。

修改session的有效时间的方法为：  
![这里写图片描述][70 7]

**config**

config 对象代表当前JSP 配置信息，但JSP 页面通常无须配置，因此也就不存在配置信息。该对象在JSP 页面中非常少用，但在Servlet 则用处相对较大。因为Servlet 需要配置在web.xml 文件中，可以指定配置参数。

**exception**

exception：异常对象

我们在之前的controller.jsp页面中进行修改，在判断用户名和密码错误的情况下抛出一个异常：

throw new Exception("用户名和密码错误!");

如果我们直接运行，那么当我们输入错误的用户名和密码进入到controller.jsp时，页面会出现500报错。

那么我们现在为controller.jsp页面添加一个错误处理页面error.jsp，因此我们需要在jsp页面的头部分为page声明一个新属性

<%@ page errorPage="error.jsp" %>

接着我们完成error.jsp，注意错误处理页面也需要为page声明一个属性isErrorPage = “true”，否则无法调用exception对象

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

那么我们现在再输入错误的用户名和密码，跳转到controller.jsp的效果就是下面这样的了：  
![这里写图片描述][70 8]

**4、application**

application代表整个Web应用本身。  
![这里写图片描述][70 9]  
因为application的作用域是整个Web容器的生命周期，因此我们可以通过application统计web访问量。

进入controller.jsp，在用户名密码判断正确的逻辑中加入统计访问量的逻辑：

if (flag == true){
                    //使用session保存登录用户的信息
                    session.setAttribute("account", account);
                    //统计web应用访问量
                    Object o = application.getAttribute("count");
                    if (o == null){
                        //如果是该web应用是第一次访问，则将访问量置1
                        application.setAttribute("count", 1);
                    }
                    else {
                        //不是第一次被访问则访问量加一
                        int count = (int) application.getAttribute("count");
                        application.setAttribute("count", count + 1);
                    }

上面就实现了用户成功登录后访问量+1的功能。

最后我们来实现这个人事管理系统的修改信息功能，这里我们就不讲每一步的步骤了，单讲需要用到的技术知识点。

1、不同页面之间通过URL传递数据  
例如我要从controller.jsp点击修改按钮跳转到update.jsp的同时也将对应用户的信息传递到update.jsp并显示在对应的输入框中：  
![这里写图片描述][70 10]  
点击第一栏之后，跳转到update.jsp  
![这里写图片描述][70 11]  
那么我们这时就需要使用到URL来在两个页面之间传递数据了，具体实现方式如下：

<a href="update.jsp?account=<%= e.getAccount() %>&name=<%= e.getName() %>&email=<%= e.getEmail() %>">修改</a>

这种跳转规则就是：资源?key=value&key=value，可能有些人单看这一串代码不是很明白，那么我放上整个controller.jsp页面的代码

<%-- 处理登录请求的jsp --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" import="com.imooc.db.*,com.imooc.bean.*,java.util.*" %>
    <%@ page import="java.util.Map" %>
    
    <%@ page errorPage="error.jsp" %>
    <html>
        <head>
            <title>Title</title>
            <style>
                table{
                    border: 1px solid black;
                    width: 500px;
                }
            </style>
        </head>
        <body>
            
    
            <h3>响应的字符编码集：<%= response.getCharacterEncoding() %></h3>
            <%
                String account = request.getParameter("account");
    
                String password = request.getParameter("password");
    
                //用Emp对象封装输入的用户信息
                Emp emp = new Emp(account, null, password, null);
                //判断用户名和密码是否正确
                boolean flag = DBUtil.selectEmpByAccountAndPassoword(emp);
    
                Map<String,Emp> map = DBUtil.map;
    
                if (flag == true){
                    //使用session保存登录用户的信息
                    session.setAttribute("account", account);
                    //统计web应用访问量
                    Object o = application.getAttribute("count");
                    if (o == null){
                        //如果是该web应用是第一次访问
                        application.setAttribute("count", 1);
                    }
                    else {
                        //不是第一次被访问则访问量加一
                        int count = (int) application.getAttribute("count");
                        application.setAttribute("count", count + 1);
                    }
            %>
                    
                    <h3 align="right">访问量：<%= application.getAttribute("count") %></h3>
                    
                    <h3 align="right">登录账户：<%= session.getAttribute("account") %></h3>
                    <h3 align="center">欢迎来到人事管理系统首页！</h3>
                    <hr>
                    <table align="center">
                        <tr>
                            <td>
                                账号
                            </td>
                            <td>
                                姓名
                            </td>
                            <td>
                                邮箱
                            </td>
                            <td>
                                修改
                            </td>
                        </tr>
                        <%
                            for (String key : map.keySet()){
                                Emp e = map.get(key);
                                %>
                        
                                    <tr>
                                        <td>
                                            <%= e.getAccount() %>
                                        </td>
                                        <td>
                                            <%= e.getName()%>
                                        </td>
                                        <td>
                                            <%= e.getEmail()%>
                                        </td>
                                        <td>
                                            
                                            
                                            <a href="update.jsp?account=<%= e.getAccount() %>&name=<%= e.getName() %>&email=<%= e.getEmail() %>">修改</a>
                                        </td>
                                    </tr>
                                <%
                            }
                        %>
                    </table>
            <%
                }else{
                    //用户名密码错误则抛出异常,并传入message
                    throw new Exception("用户名和密码错误!");
                }
            %>
    
        </body>
    </html>

当我们点击了第一行的修改，跳转到update.jsp时，注意地址：  
![这里写图片描述][70 12]  
我们会发现我们要传递的数据出现在了url中，这就是所谓的通过url在不同资源（页面）之间传递数据，那么通过URL方式传递的数据我们需要使用request.getParameter(String key)来取得。

在update页面中，完成数据的获取

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
        <head>
            <title>Title</title>
        </head>
        <body>
            <h3 align="center">修改页面</h3>
            
            <h3 align="right">登录用户：<%= session.getAttribute("account") %></h3>
    
            <hr>
    
            <form action="update_control.jsp">
                <table align="center">
                    <tr>
                        <td>用户名</td>
                        <td><input type="text" name="account" value="<%= request.getParameter("account") %>"></td>
                    </tr>
                    <tr>
                        <td>名字</td>
                        <td><input type="text" name="name" value="<%= request.getParameter("name") %>"></td>
                    </tr>
                    <tr>
                        <td>邮箱</td>
                        <td><input type="text" name="email" value="<%= request.getParameter("email") %>"></td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center"><input type="submit" value="修改"></td>
                    </tr>
                </table>
            </form>
        </body>
    </html>

这样就完成一个数据从controller.jsp通过URL的方式传递到update.jsp并显示在页面上的效果了。最后我们还需要实现在update.jsp中点击修改后，用户的数据得到修改的效果。

我们注意到上面的update.jsp代码中的表单在点击修改按钮后，会将表单信息交由update\_control.jsp处理，因此我们创建update\_control.jsp，在里面完成相应的数据处理

<%@ page import="java.util.Map" %>
    <%@ page import="com.imooc.bean.Emp" %>
    <%@ page import="com.imooc.db.DBUtil" %>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
        <head>
            <title>Title</title>
        </head>
        <body>
            <%
                //获取到存放用户数据的集合
                Map<String,Emp> map = DBUtil.map;
                //获取到要修改的用户对象
                Emp emp = map.get(request.getParameter("account"));
                //修改用户信息
                emp.setAccount(request.getParameter("account"));
                emp.setName(request.getParameter("name"));
                emp.setEmail(request.getParameter("email"));
            %>
    
            <h3 align="center">修改员工信息成功</h3>
        </body>
    </html>

这样就完成了整个人事管理系统的用户信息修改功能！

[SouthEast]: /images/20220531/72aba63522024dd2947fe69da9e3db3c.png
[SouthEast 1]: /images/20220531/75198d2b663545288208c7d4d0384c98.png
[SouthEast 2]: /images/20220531/ea4be5db1dec42dc963b2595ac4f8e64.png
[SouthEast 3]: /images/20220531/6b05cca03ea5411eb90fc53f0afc3799.png
[SouthEast 4]: /images/20220531/cc1482c2dab04366b041b36b7b5daa4b.png
[SouthEast 5]: /images/20220531/cbf589c06076412eadedfebd060704bc.png
[SouthEast 6]: /images/20220531/c82b9779a2024059acaebd81c6998292.png
[SouthEast 7]: /images/20220531/7f530f28c7a441ed847baa19a1b2df6b.png
[SouthEast 8]: /images/20220531/f00b99ee7d5f40bcbcff4e74e9a36458.png
[SouthEast 9]: /images/20220531/2b25d8dc0f8f4678a9d9b7969e5fe622.png
[SouthEast 10]: /images/20220531/af677e62fac4442d85601f6a8f9e1d21.png
[SouthEast 11]: /images/20220531/e5ad0a04ec1f4efb91dad50fac643dc7.png
[SouthEast 12]: /images/20220531/bb01c228e618429eb9e73104c7837c4c.png
[SouthEast 13]: /images/20220531/c77c2f757e6d466fb0fff1307cbdc011.png
[SouthEast 14]: /images/20220531/e5f44c121b9341f7ac3ebece547a42a0.png
[SouthEast 15]: /images/20220531/21e932b263e948eb902577663bd74979.png
[SouthEast 16]: /images/20220531/f57b3d7f83f644a4858ad3d45a6652d5.png
[70]: /images/20220531/d9616ab64e334bb58a9f71423b35e0ee.png
[70 1]: /images/20220531/bb69dc9d5db949299f801f7804f119cb.png
[70 2]: /images/20220531/5384e3f3ba2d4166aa4c0acaca35f691.png
[70 3]: /images/20220531/683ba4feba3a42e3b7ec08813602ccda.png
[70 4]: /images/20220531/b2e7ad186a714871b5cb539229109f38.png
[70 5]: /images/20220531/2695b7ff61514d2981cdfd686d826d15.png
[70 6]: /images/20220531/aa95b184a646465193a131b6f4ac9f35.png
[70 7]: /images/20220531/69e73b86d1624d6d9b6416855231e1a8.png
[70 8]: /images/20220531/5f3749d61c57451893198369d1a0a6a9.png
[70 9]: /images/20220531/beea684b8d214664976ff4025b5462f5.png
[70 10]: /images/20220531/c2c3a4ad123b41e5b21704cea58f9fcb.png
[70 11]: /images/20220531/89e865423ff84716932969ada52f4dc9.png
[70 12]: /images/20220531/50a8b17b78384156b99f1aaa1a7fbeb5.png