03---项目后台项目搭建

- 日理万妓 2023-03-01 12:41 30阅读 0赞

> 需要项目资料的私信留言，留下邮箱或者发邮件到 daniel-work@qq.com（备注好哪个项目资料）

### 文章目录 ###

*  一、SpringBoot 整合JSP
 *   *  1.1 项目的创建
     *   *  1.1.1 创建项目
         *  1.1.2 编辑POM.xml文件 添加继承/依赖/插件
         *  1.1.3 导入相应的资源文件
         *  1.1.4 添加jsp相关的jar包文件
         *  1.1.5修改YML配置文件
     *  1.2 实现user列表展现
     *   *  1.2.1 编辑UserController
         *  1.2.2 页面效果展现
     *  1.3 SpringMVC调用流程
     *  1.4 Ajax展现用户列表
     *   *  1.4.1 Ajax原理
         *  1.4.2 跳转Ajax页面
         *  1.4.3 引入jQuery.js
         *  1.4.4 完成页面编辑
 *  二、京淘后台项目搭建
 *   *  2.1 分布式思想
     *   *  2.1.1 为什么分布式
         *  2.1.2 分布式系统
     *  2.2 集群
     *   *  2.2.1 什么是集群？
     *  2.3 京淘分布式项目架构设计
     *   *  2.3.1 如何管理JAR包
         *  2.3.2 如何管理工具API
         *  2.3.3 项目划分
     *  2.4 构建聚合工程
     *  2.5 创建jt-common
     *  2.6 创建jt-manage 商品后端管理系统
     *  2.7 聚合项目工程导入方法

# 一、SpringBoot 整合JSP #

## 1.1 项目的创建 ##

### 1.1.1 创建项目 ###

1.  **项目名称：** 自拟（例如：SpringBootDemo3）
2.  **打包方式：** 选择war
3.  **Group ID：** 自拟（例如：com.jt）
4.  **Finish**

### 1.1.2 编辑POM.xml文件 添加继承/依赖/插件 ###

### 1.1.3 导入相应的资源文件 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70_pic_center]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70_pic_center 1]

### 1.1.4 添加jsp相关的jar包文件 ###

<dependency>
    			<groupId>javax.servlet</groupId>
    			<artifactId>javax.servlet-api</artifactId>
    		</dependency>
    
    		
    		<dependency>
    			<groupId>javax.servlet</groupId>
    			<artifactId>jstl</artifactId>
    		</dependency>
    
    		
    		<dependency>
    			<groupId>org.apache.tomcat.embed</groupId>
    			<artifactId>tomcat-embed-jasper</artifactId>
    		</dependency>

### 1.1.5修改YML配置文件 ###

说明：配置视图解析器

server:
      port: 8090
      servlet:
        context-path: /
    spring:
      datasource:
        #数据库驱动 高版本   com.mysql.cj.jdbc.Driver   
        #低版本                       com.mysql.jdbc.Driver   
        #driver-class-name: com.mysql.cj.jdbc.Driver
        url: jdbc:mysql://127.0.0.1:3306/jtdb?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf8&autoReconnect=true&allowMultiQueries=true
        username: root
        password: root
        
      mvc:         #引入mvn配置
        view:
          prefix: /WEB-INF/     # /默认代表根目录 src/main/webapp
          suffix: .jsp
    
    #引入mybatisplus配置
    mybatis-plus:
      #定义别名包
      type-aliases-package: com.jt.pojo
      #添加映射文件
      mapper-locations: classpath:/mybatis/mappers/*.xml #开启驼峰映射 configuration: map-underscore-to-camel-case: true #添加日志 logging: level: #mybatis指定mapper接口 以debug的形式展现日志. com.jt.mapper: debug

## 1.2 实现user列表展现 ##

### 1.2.1 编辑UserController ###

**业务要求：** 用户通过http://localhost:8090/findAll请求,则可以跳转到userList.jsp页面中, 并且在页面中展现user表的所有记录.

@Controller
    public class UserController { 
    	
    	@Autowired
    	private UserMapper userMapper;
    	
    	/** * 查询user表的记录 * 1.url地址: localhost:8090/findAll * 2.参数: 无 * 3.返回值结果: 页面逻辑名称 * * jsp中页面取值信息 : ${userList} 同步查询 * * 2.作业2.利用ajax形式动态展现页面数据. * * 说明: * 1. @Controller + 返回值 String 表示跳转页面 * 必然经过视图解析器 拼接前缀和后缀 * * 2. @RestController +任意返回值 直接返回JSON数据,不经过视图解析器. * 或者 * @Controller +@ ResponseBody */
    	
    	@RequestMapping("/findAll")
    	public String  findAll(Model model) { 
    		List<User>  userList = userMapper.selectList(null);
    		model.addAttribute("userList", userList);
    		return "userList"; //jsp html js 
    		// /WEB-INF/userList.jsp 拼接页面真实路径
    	}
    	
    }

### 1.2.2 页面效果展现 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70]

## 1.3 SpringMVC调用流程 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 1]

## 1.4 Ajax展现用户列表 ##

### 1.4.1 Ajax原理 ###

*  Ajax特点: 局部刷新,异步访问.
 *  知识点: ajax为什么可以异步 源于ajax调用方式.(ajax引擎)

**同步特点:** 当服务器正忙时,用户处于等待状态；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 2]  
**异步特点：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 3]

### 1.4.2 跳转Ajax页面 ###

/** * 实现页面跳转 */
    	@RequestMapping("/ajax")
    	public String ajax() { 
    		return "ajax";
    	}

### 1.4.3 引入jQuery.js ###

请点击----[Jquery下载官网][Jquery]  
将JS放到项目中  
![在这里插入图片描述][20200725214857223.png]

### 1.4.4 完成页面编辑 ###

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>您好Springboot</title>
    
    <script type="text/javascript" src="/js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
    
    /* 2.发起ajax请求 1. $.get() 负责查询 返回数据任意 人工解析 2. $.post() 表单数据提交等 返回值类型任意 人工解析 3. $.getJSON() 查询获取json数据 4. $.getScript() 获取js代码片段 5. $.ajax({.....}) 万能用法 */
    	
    	/*发起ajax请求 */
    	$(function(){ 
    		//页面取值时,采用对象.属性的方式动态获取.
    		$.get("/findAjax",function(result){ 
    
    			 addTable("tab1",result);
    		})
    		
    		//常规ajax写法
    		$.ajax({ 
    			   type: "post",			//method
    			   url: "/findAjax",		//网址
    			   //data: "name=John&location=Boston", //传递数据
    			   dataType: "json",
    			   success: function(result){ 
    					//准备一个函数,实现表格数据的添加. 
    				    addTable("tab2",result);
    				    //提示成功信息
    			   },
    			   error :function(data){ 
    					alert("提示信息: 当前网络正忙,请稍后再试");
    			   },
    			   async : true,    //默认条件下都是异步. false表示请求同步.
    			   cache : false	//缓存页面信息 false表示不缓存
    			   
    			});
    
    		//定义ajax 展现数据函数
    		function addTable(eleId,data){ 
    			//遍历数据
    			var trs = "";
    			$(data).each(function(index,user){ 
    				var id = user.id;
    				var name = user.name;
    				var age = user.age;
    				var sex = user.sex;
    				trs += "<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"
    					  +age+"</td><td>"+sex+"</td></tr>"
    			});
    			//var id = '#'+eleId
    			$("#"+eleId).append(trs);
    		}
    	})
    </script>
    
    </head>
    <body>
    	<table id="tab1" border="1px" width="65%" align="center">
    		<tr>
    			<td colspan="6" align="center"><h3>学生信息</h3></td>
    		</tr>
    		<tr>
    			<th>编号</th>
    			<th>姓名</th>
    			<th>年龄</th>
    			<th>性别</th>
    		</tr>
    	</table>
    	
    	<hr>
    	<table id="tab2" border="1px" width="65%" align="center">
    		<tr>
    			<td colspan="6" align="center"><h3>学生信息</h3></td>
    		</tr>
    		<tr>
    			<th>编号</th>
    			<th>姓名</th>
    			<th>年龄</th>
    			<th>性别</th>
    		</tr>
    	</table>
    </body>
    </html>

# 二、京淘后台项目搭建 #

## 2.1 分布式思想 ##

### 2.1.1 为什么分布式 ###

**说明:** 由于程序将所有的功能模块放到同一台tomcat服务器中,那么如果服务器内部出现了问题,则直接导致整个服务器不能正常执行. 系统架构的耦合性高  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 4]

### 2.1.2 分布式系统 ###

核心理念: 按照指定的规则,将系统进行拆分.各自独立运行,减少架构的耦合性.

**（一）按照模块拆分**  
优点: 如果其中一个服务器出现了问题,则不会影响整个项目的正常运行.  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 5]  
**（二）按照层级拆分**  
说明:有时代码的业务逻辑特别的复杂.如何减少开发的耦合性.可以按照层级的方式进行拆分.  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 6]  
**（三）关于分布式总结**

*  **优点：** 可以将大型项目按照指定规则拆分.降低了系统架构的耦合性.方便开发和"维护".
 *  **弊端：** 拆分完成之后由于项目个数重点 运维不易. 可以接受!!!

分布式另外表现形式: 准备多台服务器一起为用户提供服务.  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 7]

## 2.2 集群 ##

### 2.2.1 什么是集群？ ###

**说明：** 采用多台服务器部署项目,共同为用户提供服务的.同时可以满足\*\*高可用(HA)\*\*的需求时,称之为集群.  
什么是高可用: 当服务器发生宕机的现象时,可以自动的实现故障迁移.保证服务运算能力.  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 8]

## 2.3 京淘分布式项目架构设计 ##

### 2.3.1 如何管理JAR包 ###

**问题说明：** 由于分布式的项目构建,导致服务器中jar包维护的份数变多.如果长时间按照该方式运行,则必然导致jar包管理混乱.  
**解决方案：** 准备一个公共的项目,由该项目管理所需要的jar包文件. 其它项目继承该项目即可.  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 9]

### 2.3.2 如何管理工具API ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 10]

### 2.3.3 项目划分 ###

1.父级工程    jt     				 项目打包类型:  pom
    2.工具API     jt-common       打包类型:jar
    3.业务系统   jt-manage		 打包类型:war

## 2.4 构建聚合工程 ##

**（一）编译器改造**

**说明：** 修改IDE配置,让new的选项中出现maven相关信息.  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 11]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 12]  
**（二）创建父级项目JT**

（1）创建父级工程  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 13]  
（2）添加jar包文件

<parent>
    		<groupId>org.springframework.boot</groupId>
    		<artifactId>spring-boot-starter-parent</artifactId>
    		<version>2.3.1.RELEASE</version>
    		<relativePath /> 
    	</parent>
    
    	<properties>
    		<java.version>1.8</java.version>
    		
    		<maven-jar-plugin.version>3.1.1</maven-jar-plugin.version>
    		
    		<skipTests>true</skipTests>
    	</properties>
    
    	<dependencies>
    		
    		<dependency>
    			<groupId>org.springframework.boot</groupId>
    			<artifactId>spring-boot-starter-web</artifactId>
    		</dependency>
    
    		<dependency>
    			<groupId>org.springframework.boot</groupId>
    			<artifactId>spring-boot-starter-test</artifactId>
    			<scope>test</scope>
    			<exclusions>
    				<exclusion>
    					<groupId>org.junit.vintage</groupId>
    					<artifactId>junit-vintage-engine</artifactId>
    				</exclusion>
    			</exclusions>
    		</dependency>
    
    		
    		<dependency>
    			<groupId>org.springframework.boot</groupId>
    			<artifactId>spring-boot-configuration-processor</artifactId>
    			<optional>true</optional>
    		</dependency>
    
    		
    		<dependency>
    			<groupId>org.springframework.boot</groupId>
    			<artifactId>spring-boot-devtools</artifactId>
    		</dependency>
    
    		
    		<dependency>
    			<groupId>org.projectlombok</groupId>
    			<artifactId>lombok</artifactId>
    		</dependency>
    
    		
    		<dependency>
    			<groupId>mysql</groupId>
    			<artifactId>mysql-connector-java</artifactId>
    			<scope>runtime</scope>
    		</dependency>
    
    		
    		<dependency>
    			<groupId>org.springframework.boot</groupId>
    			<artifactId>spring-boot-starter-jdbc</artifactId>
    		</dependency>
    
    		
    		<dependency>
    			<groupId>com.baomidou</groupId>
    			<artifactId>mybatis-plus-boot-starter</artifactId>
    			
    			<version>3.3.2</version>
    		</dependency>
    		
    		
    		
    		<dependency>
    			<groupId>javax.servlet</groupId>
    			<artifactId>javax.servlet-api</artifactId>
    		</dependency>
    
    		
    		<dependency>
    			<groupId>javax.servlet</groupId>
    			<artifactId>jstl</artifactId>
    		</dependency>
    
    		
    		<dependency>
    			<groupId>org.apache.tomcat.embed</groupId>
    			<artifactId>tomcat-embed-jasper</artifactId>
    		</dependency>
    		
    		
    		<dependency>
    			<groupId>org.springframework.boot</groupId>
    			<artifactId>spring-boot-starter-aop</artifactId>
    		</dependency>
    		
    		
    		<dependency>
    			<groupId>redis.clients</groupId>
    			<artifactId>jedis</artifactId>
    		</dependency>
    		<dependency>
    			<groupId>org.springframework.data</groupId>
    			<artifactId>spring-data-redis</artifactId>
    		</dependency>
    		
    		
    		<dependency>
    			<groupId>org.apache.httpcomponents</groupId>
    			<artifactId>httpclient</artifactId>
    		</dependency>
    		
    		
    		
    		
    		
    		
    	</dependencies>

## 2.5 创建jt-common ##

（1） 创建项目，选择Maven Module  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 14]  
（2）编辑项目名称  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 15]  
（3）导入相应的资源文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 16]

## 2.6 创建jt-manage 商品后端管理系统 ##

（一）创建项目，选择Maven Module  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 17]  
（2）打包方式选择war  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 18]  
（3）添加继承/依赖/插件

<project xmlns="http://maven.apache.org/POM/4.0.0"
    	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    	<modelVersion>4.0.0</modelVersion>
    	<artifactId>jt-manage</artifactId>
    	<packaging>war</packaging>
    
    	
    	<parent>
    		<groupId>com.jt</groupId>
    		<artifactId>jt</artifactId>
    		<version>0.0.1-SNAPSHOT</version>
    	</parent>
    	
    	<dependencies>
    		
    		<dependency>
    			<groupId>com.jt</groupId>
    			<artifactId>jt-common</artifactId>
    			<version>0.0.1-SNAPSHOT</version>
    		</dependency>
    	</dependencies>
    
    	
    	
    	<build>
    		<plugins>
    			<plugin>
    				<groupId>org.springframework.boot</groupId>
    				<artifactId>spring-boot-maven-plugin</artifactId>
    			</plugin>
    		</plugins>
    	</build>
    
    </project>

（4）导入静态资源文件  
说明:复制src文件到项目中  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 19]  
（5）修改YML配置

server:
      port: 8091     
      servlet:
        context-path: /
    spring:
      datasource:
        #引入druid数据源
        #type: com.alibaba.druid.pool.DruidDataSource
        #driver-class-name: com.mysql.cj.jdbc.Driver
        url: jdbc:mysql://127.0.0.1:3306/jtdb?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf8&autoReconnect=true&allowMultiQueries=true
        username: root
        password: root
    
      mvc:
        view:
          prefix: /WEB-INF/views/
          suffix: .jsp
    #mybatis-plush配置
    mybatis-plus:
      type-aliases-package: com.jt.pojo
      mapper-locations: classpath:/mybatis/mappers/*.xml configuration: map-underscore-to-camel-case: true logging: level: com.jt.mapper: debug

## 2.7 聚合项目工程导入方法 ##

步骤1: 将项目导入本地工作空间中  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 20]  
步骤2: 通过maven的方式导入  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 21]  
步骤3：导入项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 22]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20230208/8212ebe5be0d4368baec0b3384f16aca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230208/a78c762f5f0a47c897641468453ce3e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70]: /images/20230208/3524524cf9f04164bc38c2a8a322db26.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 1]: /images/20230208/c323167c1d034e3d95244a2b4a0ed1cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 2]: /images/20230208/a9cadc7e5a1844e78c73a1d119ae1ab1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 3]: /images/20230208/8a3ce51adced469f99004afbfd8de1bc.png
[Jquery]: https://jquery.com/download/
[20200725214857223.png]: /images/20230208/e5b4dddd719345febbedef3e31804a17.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 4]: /images/20230208/613ac3d6fba44559ac8db116b807441f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 5]: /images/20230208/9b6aeebceedf4f0181288a7db79fbb2d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 6]: /images/20230208/eb06718e71bc4d8eb12506bf63775ea9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 7]: /images/20230208/38210a36eb674fb980ecec0b355a8c1f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 8]: /images/20230208/2a8136afac0f49988d9fe42bb488c924.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 9]: /images/20230208/41f9261da64b41f79c7dad9f2d642c3f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 10]: /images/20230208/9bf2723daabc44db92bd1c32cf463deb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 11]: /images/20230208/03ee8075946b4045b19cc46769241be0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 12]: /images/20230208/7ecbdfb150f5482092f3c26cd797f682.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 13]: /images/20230208/7fed60ea351c497c8e6f411856615d29.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 14]: /images/20230208/b1d748cdfc754f18ace70d4da1e5bf36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 15]: /images/20230208/3df08c7c936e4cb49878aeb6eff1a73c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 16]: /images/20230208/f774739e51e347deba39c2d5ffb5692d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 17]: /images/20230208/e57a1180e05645959f20a100dabfa74c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 18]: /images/20230208/b69e5e8afc0c472986dfe182edadcad0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 19]: /images/20230208/c86ade4dc92c4519bbe92835ef092fab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 20]: /images/20230208/df906de5b13749abba3fc52069ac8fd7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 21]: /images/20230208/2f9a14c0f2574d00b5f385e46ffc0263.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 22]: /images/20230208/d6b1e28a8a824fbbb12e88236312c546.png