Java Web可视化实践项目

梦里梦外; 2023-09-24 22:12 49阅读 0赞

> Java Web可视化实践指导书

### 文章目录 ###

*  实验过程
 *  一、准备工作
 *  二、创建 Java Web 工程
 *  三、添加 JSON 支持
 *  四、Servlet 返回 JSON 信息
 *  五、使用 Ajax 请求 Servlet，处理 Servlet 返回的 JSON 信息
 *  六、通过 ajax 访问数据库动态信息
 *  七、Echarts 使用
 *  八、把 ajax 得到的数据显示在 Echarts 的折线图中
 *   *  数据可视化
 *  九、添加自动刷新功能
 *  十、实现自己数据的展示
 *  十一、可能遇到的问题
 *   *  eclipse新建jsp文件或servlet文件报错
     *  找不到 jar 包
     *  如果 Servers 窗口不见了
     *  提示 JDK 相关的错误信息
     *  代码修改后不起作用

--------------------

# 实验过程 #

①、配置 Tomcat，在 Eclipse 中添加 Tomcat，并能够启动和关闭 Tomcat；

②、创建 Java Web 工程，能够创建 Java Web 工程，能够部署工程到 Tomcat 上，能够编写JSP 和 Servlet 并测试；

③、添加 JSON 支持，能够把 Java 对象转换为字符串；

④、Servlet 返回 JSON 信息，在同步模式下 Servlet 返回的是 HTML 网页，而异步方式下Servlet 这是返回数据，而多数情况下都是 JSON 数据，测试介绍如何通过 Servlet 返回 JSON数据；

⑤、使用 Ajax 请求 Servlet 得到 JSON 信息，在页面中发送 Ajax 请求，请求 Servlet，然后得到 Servlet 返回的 JSON 数据；

⑥、通过 Ajax 得到数据库的动态信息，在上一步的基础上，Servlet 返回的数据是从数据库中查询的结果。

⑦、Echarts 的使用，介绍如何在网页中嵌入 Echarts 的图表来显示图形；

⑧、使用Echarts显示动态数据，结合前两步，把Ajax调用Servlet返回的数据显示在Echarts图表中；

⑨、添加自动刷新功能，定时从数据库中重新加载数据，这样当数据库中的数据发生变化的时候能够在网页上显示这种变化。

⑩、实现自己的数据展示

--------------------

`提示：以下是本篇文章正文内容，下面案例可供参考`

# 一、准备工作 #

`提示：Eclipse 和 Tomcat 需要 JDK 的支持，所以需要先安装 JDK`

安装 JDK、MySQL、Tomcat 和 Eclipse的 Java EE 版本；

确认Eclipse的版本：（右上角也可以更改）  
![在这里插入图片描述][f5ef568219044914afa1423527654306.png]

此链接目录中最后一个[Eclipse配置 Tomcat][Eclipse_ Tomcat]

# 二、创建 Java Web 工程 #

**（1）** File→New→Other，选择 Web→Dynamic Web Project，点击【Next】  
![在这里插入图片描述][f5f7df37313043b6accba99efed1ec75.png]  
**（2）** 设置项目信息：在 Project name 中输入项目名称 FirstWeb，Target runtime 中选择 Apache Tomcat v9.0  
如果没有服务器，可以通过 New Runtime 配置服务器 Tomcat  
输入信息之后点击【Next】  
![在这里插入图片描述][f2158c98ecf54591bb502bfccd191c76.png]  
**（3）** 设置默认输出文件的位置（编译后的 class 文件存储的位置），此处采用默认值即可，  
点击【Next】  
![在这里插入图片描述][93112f0d38864c398c8be98cb22f3479.png]

**（4）** 设置 Web 模块信息，Context root 表示确定网站路径，默认情况下与工程名相同，具体用法后面详细介绍，Content directory 表示网页文件存放的位置，这里都采用默认值即可。

“Generate web.xml deployment descriptor”选中表示生成 web.xml，该文件是 Web 应用的部署描述符文件。点击【Finish】完成文件的创建。  
![在这里插入图片描述][92e289850da440548fadb630823e15e3.png]  
创建后的工程文件夹结构如图所示，src 用于存放 Java 文件，WebContent 用于存放 html 文件、JSP 文件以及其他的资源文件，例如图片、音频、视频、CSS 文件、JS 文件。  
![在这里插入图片描述][c4b7fe54284341e4882af9e8939a7728.png]

**（5）** 创建第一个 JSP 文件：在 WebContent 上右键单击，在弹出式菜单中选择 New→JSP File

![在这里插入图片描述][b59deef800ef43cc887747d94487899b.png]

在弹出的窗口中输入文件的名字 hello.jsp，点击【Next】  
在弹出的窗口中选择模板，这里采用默认值，点击【Finish】  
![在这里插入图片描述][10a55976b0f545868f560fded60d12fb.png]  
生成的 JSP 文件如下：  
![在这里插入图片描述][ed7976a9559b40128acd806e3566b098.png]  
修改 hello.jsp 文件，修改后的内容如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Java Web</title>
    </head>
    <body>
    欢迎访问
    </body>
    </html>

运行后 body 中的内容显示在网页中，地址栏上方是标题（title）  
![在这里插入图片描述][bd9074ba2998445ba160b47ffbe01309.png]

到此为止，说明 Web 应用的环境好用了

**（6）** 测试 Servlet  
创建包：在 src 上右键单击，在弹出式菜单中选New→Package  
在出现的界面中输入包的名字“servlet”，点击【Finish】按钮完成创建。

![在这里插入图片描述][0b589fcdea9b4252b16709c9a2cba336.jpeg]

**创建 Servlet类**  
在 servlet 包上右键单击，在弹出式菜单中选择New→Servlet，如果没有Servlet，选择 Other，然后在弹出的窗口中选择 Web 下面的 Servlet，然后点击【Next】  
在出现的窗口中输入 Servlet 类的名字，这里输入 FirstServlet，然后点击【Finish】  
![在这里插入图片描述][f9826bfa187e4268a711e9dbdc7c4695.jpeg]

创建好后的Servlet页面：[eclipse 新建 servlet文件如果报错点击此链接解决][eclipse _ servlet]  
![在这里插入图片描述][22e05a41df3d4aea92ea24ecc66f58e0.png]

修改 FirstServlet 的 doGet 方法，修改后的代码如下：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
    		PrintWriter out = response.getWriter(); 
    		out.print("Hello,Servlet!");
    	}

运行结果如下：  
![在这里插入图片描述][7b76164bb9a44e328afc8c3e8015926c.png]  
地址栏中的`_FirstWeb` 就是在创建 Web 工程的时候设置 Context Root，之所以我前面有个下划线是因为我在创建的时候前面有个空格

# 三、添加 JSON 支持 #

`这里使用阿里巴巴的 jar 包，具体过程如下：需要此jar包可以联系我也可去网站下载`

添加类库；  
编写一个简单类；  
测试 JSON。

**（1）** 创建文件夹，名字为 lib，在工程上右键单击，选择 New→Folder，在弹出的对话框中输入文件夹的名字 lib，点击 Finish 完成创建。（有lib文件夹的不需要再创建）

**（2）** 把 json jar 包复制到 lib 下面  
**（3）** 把 jar 包配置到构建路径中，选择压缩包，然后右键单击，选择 Build Path→Add to Build Path，完成添加。  
![在这里插入图片描述][650344f8c7304d76b38d417eacb2a390.png]  
**（4）** 创建一个表示信息的类，这里使用 Student，包含sid 和 sname 两个属性。创建过程如下：在 src 上右键单击，选择 New→Class  
在弹出的对话框中，分别输入包名【bean】和类名【Student】，main 方法不用选，点击 Finish 完成类的创建  
![在这里插入图片描述][b4df7c07e6c54c8787487493931dcd8c.png]  
创建后的类的代码如图所示：  
![在这里插入图片描述][0f2a850ed8f14050af2495597345df77.png]  
**（5）** 修改 Student 类，[添加属性和访问器方法][Link 1]，修改后的代码如下：

package bean;
    //在eclipse中右键→source→format可规范代码
    public class Student {
        
    	String sid;
    	String sname;
    	public Student(String sid, String sname) {
        
    		super();
    		this.sid = sid;
    		this.sname = sname;
    	}
    	public String getSid() {
        
    		return sid;
    	}
    	public void setSid(String sid) {
        
    		this.sid = sid;
    	}
    	public String getSname() {
        
    		return sname;
    	}
    	public void setSname(String sname) {
        
    		this.sname = sname;
    	}
    
    }

类中包含了两个属性 sid 和 sname，对属性进行操作的 set 和 get 方法，两个构造方法。

**（6）** 创建 TestJson 来测试 JSON，先创建包，包的名字是 test，然后再 test 上创建类，类的名字是 TestJson，点击【Finish】完成创建。  
![在这里插入图片描述][564933377514440dae17ba7790d7e95d.png]  
修改 TestJSON 的代码，修改后的代码如下：

package test;
    
    import com.alibaba.fastjson.JSON;
    import bean.Student;
    
    public class TestJson {
        
    	public static void main(String[] args) {
        
    		Student s1 = new Student(null, null);
    		s1.setSid("0111");
    		s1.setSname("zhangsan");
    		String jsonString = JSON.toJSONString(s1);
    		System.out.println(jsonString);
    	}
    }

运行该程序  
在类上右键单击，在弹出菜单中选择 【Run As】→【2 Java Application】  
![在这里插入图片描述][25c621a233954f5786eebbb2b1d9df76.png]  
**（7）** 代码的主要功能说明如下。  
创建 Student 对象，并为两个属性赋值。也可以通过 new Student(“0111”,“zhangsan”)创建对象。

Student s1 = new Student(); 
    s1.setSid("0111"); 
    s1.setSname("zhangsan");

把对象转换为 JSON 字符串并输出。

String jsonString = JSON.toJSONString(s1); 
     System.out.println(jsonString);

# 四、Servlet 返回 JSON 信息 #

主要内容：  
创建表示信息的类 Student；

创建 Servlet，在 Servlet 中创建 Student 对象，然后把对象转换为 JSON 字符串，通过 Servlet 的 response 响应客户端浏览器。

通过浏览器进行测试。

**（1）** 前面已经创建好了 Stduent 类，接下来创建 Servlet：  
先创建 servlet 包，然后在 servlet 包上右键单击，选择【New】→【Servlet】  
![在这里插入图片描述][cc37a4e1b87b4413899c60eceb9e7f40.png]  
在创建 Servlet 的向导中输入 Servlet 的名字JSonServlet  
因为不需要设置 Servlet 的其它信息，可以直接点击 Finish 完成 Servlet 的创建  
![在这里插入图片描述][e36f31dab2c24309b5c40faf13b7c4e9.jpeg]  
**（2）** 修改 Servlet 代码内的`doGet方法`，修改后的代码如下：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
    		// TODO Auto-generated method stub
    		response.setContentType("text/html;charset=utf-8"); 
    		PrintWriter out = response.getWriter(); 
    		Student student = new Student("20110320","王飞"); 
    		String studentInfo = JSON.toJSONString(student); 
    		out.print(studentInfo); 
    	}

**（3）** 主要代码介绍如下。  
设置响应内容的类型和编码：

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

得到一个输出对象，对用户响应信息通过该对象输出：

PrintWriter out = response.getWriter();

创建学生对象：

Student student = new Student("20110320","王飞");

使用 JSON 的 toJSONString 方法把对象转换为字符串：

String studentInfo = JSON.toJSONString(student);

通过 out 对象把字符串发送给客户端：

out.print(studentInfo);

**（4）** 运行测试：在 JSONServl运行测试：在JSONServlet 上点击右键，选择 Run As→【1 Run on Server】  
![在这里插入图片描述][ed72622e341e4a07a66b02f9d75b760b.png]

# 五、使用 Ajax 请求 Servlet，处理 Servlet 返回的 JSON 信息 #

![在这里插入图片描述][2c1c1fb7839846c3b4eb6f5421aaf68a.png]

**（1）** 创建 ajax.html 文件并编写进行测试  
添加显示学生信息的标签

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Ajax 测试</title>
    </head>
    <body>
    学号：<label id="sid">00001</label> 
    姓名：<label id="sname">默认值</label>
    </body>
    </html>

![在这里插入图片描述][3b5321c0004b4a098dfd48e9530a015f.png]  
**（2）** 添加 ajax 支持，通过 jQuery 库来使用 ajax，jQuery 主要是一个 js 库的使用。  
有两种使用方式：  
直接从官网引用 js 文件，复制到工程中使用。  
直接从官网引用（也可以引用其他地方的）：

代码如下所示：

运行前后的效果如图所示：  
![请添加图片描述][5be69251d8924350b95b8f00a55fe3d8.gif]  
**（3）** 继续修改上面的代码  
增加一个新的按钮

<button id="btn2">改变学生（服务器信息）</button>

增加对按钮的点击事件的处理代码：

$("#btn2").click(function(){ 
    	 $.ajax({ 
    		 type : "get", 
    		 async : true, 
    		 url : "JSonServlet", 
    		 data : {}, 
    		 dataType : "json",
    	success : function(result) { 
    		 $("#sid").text(result.sid); 
    		 $("#sname").text(result.sname); 
    	 }, 
    	 error : function(errorMsg) { 
    			 alert("请求失败!"); 
    		 } 
     	}) 
     });

至此 **ajax.html 代码完整展示**：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
    	$(document).ready(function() {
          
    		$("#btn").click(function() {
          
    			$("#sid").text("00025");
    			$("#sname").text("李四");
    		});
    
    		$("#btn2").click(function() {
          
    			$.ajax({
          
    				type : "get",
    				async : true,
    				url : "JsonServlet",
    				data : {
          },
    				dataType : "json",
    				success : function(result) {
          
    					$("#sid").text(result.sid);
    					$("#sname").text(result.sname);
    				},
    				error : function(errorMsg) {
          
    					alert(errorMsg[0]);
    					alert("请求失败!");
    				}
    			});
    		});
    	});
    </script>
    </head>
    <body>
    	学号：
    	<label id="sid">00001</label> 姓名：
    	<label id="sname">默认值</label>
    	<button id="btn">改变学生</button>
    	<button id="btn2">改变学生（服务器信息）</button>
    </body>
    </html>

运行前后的效果如图所示：  
![在这里插入图片描述][ad6dffcf80b8473e9fb6c8fab364cf4f.gif]  
**代码介绍如下：**

为 btn2 按钮添加点击事件处理，代码中的省略号表示当点击 btn2 时候的处理代码，这里是要向服务器发送请求获取数据：

$("#btn2").click(function(){ 
     … 
     });

向服务器发送请求使用了$.ajax 方式，格式如下，需要先设置一些属性，然后编写成功响应之后的处理代码，以及访问失败时候的处理代码。

$.ajax({ 
     …属性
     success : function(result) { 
     // 正常响应执行的代码
     }, 
     error : function(errorMsg) { 
     // 访问出错执行的代码
     	} 
     })

请求时候的主要属性如下：  
`type : "get"` 表示请求方式是 get，常用的还有 post  
`async : true` 表示采用异步方式请求，不影响浏览器的工作，从后台发送请求  
`url : "JSonServlet"` 表示要访问的服务器端的 Servlet 的地址  
`data : {}` 发送请求时候的参数信息，get 方式通常不需要  
`dataType : "json"` 表示响应内容的格式是 json

# 六、通过 ajax 访问数据库动态信息 #

首先需要先[创建一个数据库][Link 2]

（1）连接到数据库

mysql -uroot -p123456

root 和 123456 分别是你的数据库的用户名和密码

（2）创建数据库

create database practice2020;

practice2020 是数据库的名字

（3）使用 practice2020 数据库

use practice2020

（4）创建表

create table ncov2020( 
    id int primary key auto_increment, 
    quantity int, 
    editdate datetime 
    );

（5）插入数据

insert into ncov2020 values(null,77,'2020-1-20'); 
    insert into ncov2020 values(null,149,'2020-1-21');
    insert into ncov2020 values(null,131,'2020-1-22');
    insert into ncov2020 values(null,259,'2020-1-23');
    insert into ncov2020 values(null,444,'2020-1-24');
    insert into ncov2020 values(null,688,'2020-1-25');
    insert into ncov2020 values(null,769,'2020-1-26');
    insert into ncov2020 values(null,1771,'2020-1-27');
    insert into ncov2020 values(null,1459,'2020-1-28');
    insert into ncov2020 values(null,1736,'2020-1-29');
    insert into ncov2020 values(null,1979,'2020-1-30');
    insert into ncov2020 values(null,2101,'2020-1-31');
    insert into ncov2020 values(null,2586,'2020-2-1');

（6）查看数据

select * from ncov2020;

![在这里插入图片描述][6b970e212a0a4468b417f6b2d197343f.png]

**（7）** 使用 DBBean 封装访问数据库的代码，代码如何使用见后面的代码。

package util;
    
    import java.sql.Connection;
    import java.sql.DriverManager;
    import java.sql.PreparedStatement;
    import java.sql.ResultSet;
    import java.sql.SQLException;
    import java.util.List;
    
    public class DBBean {
        
    	private String url = "jdbc:mysql://localhost:3306/practice2020?useSSL=false";  
        // 数据库信息，旧版本中不用useSSL=false
    	private String username = "root";
    	private String password = "123456";
    	private String driverName = "com.mysql.jdbc.Driver";
    	
    	private Connection con=null;  //连接对象
    	private PreparedStatement pstmt = null; //语句对象 
    	private ResultSet rs = null; //结果集对象
    	
    	public DBBean() throws ClassNotFoundException, SQLException{
        
    		Class.forName(driverName);
    		con = DriverManager.getConnection(url,username,password);
    	}
    	
    	/*
    	 * sql:要执行的SQL语句
    	 * params：SQL语句中需要的变量
    	 */
    	public int executeUpdate(String sql,List<Object> params) throws SQLException{
        
    		pstmt = con.prepareStatement(sql);
    		if(params!=null && params.size()>0){
        
    			for(int i=0;i<params.size();i++){
        
    				pstmt.setObject(i+1, params.get(i));
    			}
    		}
    		return pstmt.executeUpdate();
    	}
    	
    	public ResultSet executeQuery(String sql,List<Object> params) throws SQLException{
        
    		pstmt = con.prepareStatement(sql);
    		if(params!=null && params.size()>0){
        
    			for(int i=0;i<params.size();i++){
        
    				pstmt.setObject(i+1, params.get(i));
    			}
    		}
    		return pstmt.executeQuery();
    	}
    	
    	public void close(){
        
    		if(rs!=null){
        
    			try{
        rs.close();}catch(Exception ee){
        }
    		}
    		if(pstmt!=null){
        
    			try{
        pstmt.close();}catch(Exception ee){
        }
    		}
    		if(con!=null){
        
    			try{
        con.close();}catch(Exception ee){
        }
    		}
    	}
    }

**（8）** 在工程中加入 mysql 的 jdbc 驱动程序，这里直接把 jar 文件复制到 WEB-INF 下面的 lib下面。  
注意驱动程序的版本应该与安装的数据库匹配[选择对应版本号→点击jar进行下载][jar]

**（9）** 测试数据库

package dao;
    
    import java.sql.ResultSet;
    import util.DBBean;
    
    public class DBTest {
        
    	public static void main(String args[]) {
        
    		new DBTest().test("ncov2020");
    	}
    
    	public void test(String tableName) {
        
    		String sql = "select count(1) from " + tableName;
    		DBBean bean = null;
    		try {
        
    			bean = new DBBean();
    			ResultSet rs = bean.executeQuery(sql, null);
    			if (rs.next()) {
        
    				int count = rs.getInt(1);
    				System.out.print("表中记录数为:" + count);
    			}
    		} catch (Exception e) {
        
    			e.printStackTrace();
    		} finally {
        
    			bean.close();
    		}
    
    	}
    }

运行结果：  
![在这里插入图片描述][d9dd2ece4d9a4f4893662c6a477f9f08.jpeg]  
**（10）** 创建表示新冠病毒信息的类 NcovData

package bean;
    
    import java.util.Date;
    
    public class NcovData {
        
    	private int id;
    	private int quantity;
    	private Date editDate;
    
    	public NcovData() {
        
    	}
    
    	public NcovData(int id, int quantity, Date editDate) {
        
    		this.id = id;
    		this.quantity = quantity;
    		this.editDate = editDate;
    	}
    
    	public int getId() {
        
    		return id;
    	}
    
    	public void setId(int id) {
        
    		this.id = id;
    	}
    
    	public int getQuantity() {
        
    		return quantity;
    	}
    
    	public void setQuantity(int quantity) {
        
    		this.quantity = quantity;
    	}
    
    	public Date getEditDate() {
        
    		return editDate;
    	}
    
    	public void setEditDate(Date editDate) {
        
    		this.editDate = editDate;
    	}
    }

**（11）** 创建访问数据库的 NcovDao 类

package dao;
    
    import java.util.Date;
    import java.sql.ResultSet;
    import java.util.ArrayList;
    import java.util.List;
    import bean.NcovData;
    import util.DBBean;
    
    public class NcovDao {
        
    	public static void main(String[] args) {
        
    		List<NcovData> datas = new NcovDao().list();
    		for (NcovData data : datas) {
        
    			System.out.println(data.getId() + "\t" + data.getQuantity() + "\t" + data.getEditDate());
    		}
    	}
    
    	public List<NcovData> list() {
        
    		List<NcovData> datas = new ArrayList<NcovData>();
    		String sql = "select * from ncov2020";
    		DBBean bean = null;
    		try {
        
    			bean = new DBBean();
    			ResultSet rs = bean.executeQuery(sql, null);
    			while (rs.next()) {
        
    				int id = rs.getInt(1);
    				int quantity = rs.getInt(2);
    				Date editdate = rs.getDate(3);
    				NcovData data = new NcovData(id, quantity, editdate);
    				datas.add(data);
    			}
    		} catch (Exception e) {
        
    			e.printStackTrace();
    		} finally {
        
    			bean.close();
    		}
    		return datas;
    	}
    }

运行结果如下：  
![在这里插入图片描述][56bb960cbee247dc8df3f4d06938f1fd.png]  
**（12）** 编写业务类 NcovService，在 service 包中创建该类，提供 list 方法获取所有新冠病毒数据，方法中直接把 Dao 的数据返回给 Servlet

package servlet;
    
    import java.util.List;
    import bean.NcovData;
    import dao.NcovDao;
    
    public class NcovService {
        
    	NcovDao dao = new NcovDao();
    
    	public List<NcovData> list() {
        
    		return dao.list();
    	}
    }

**（13）** 对用户响应的 Servlet，在 servlet 包中创建 NcovServlet，代码如下：

package servlet;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    import java.util.List;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import com.alibaba.fastjson.JSON;
    
    import bean.NcovData;
    
    /**
     * Servlet implementation class NcovServlet
     */
    @WebServlet("/NcovServlet")
    public class NcovServlet extends HttpServlet {
        
    	private static final long serialVersionUID = 1L;
    
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
    		response.setContentType("text/html;charset=utf-8"); 
    		 PrintWriter out = response.getWriter(); 
    		 NcovService service = new NcovService(); 
    		 List<NcovData> datas = service.list(); 
    		 String info = JSON.toJSONString(datas); 
    		 out.print(info); 
    		 } 
    
    	/**
    	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
    	 */
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
    		// TODO Auto-generated method stub
    		doGet(request, response);
    	}
    
    }

运行结果如下：  
![在这里插入图片描述][09badd3d98cf488da09ee59fe94b828e.png]  
**（14）** 编写界面从 Servlet 请求数据显示，在 WebContent 上点击右键，选择 New→HTML 文件，输入文件名 ncov.html，代码如下：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
    	function refreshTable(result) {
          
    		var $tab = $("#ncovTable");
    		$tab.empty();
    		for (var i = 0; i < result.length; i++) {
          
    			//从 json 数组得到 json 对象
    			var data = result[i];
    			var info = "<tr><td>" + data.id + "</td><td>" + data.quantity
    					+ "</td><td>" + data.editDate + "</td></tr>";
    			$tab.append(info);
    		}
    	}
    
    	$(document).ready(function() {
          
    		$.ajax({
          
    			type : "get",
    			async : true,
    			url : "NcovServlet",
    			data : {
          },
    			dataType : "json",
    			success : function(result) {
          
    				refreshTable(result);
    			},
    			error : function(errorMsg) {
          
    				alert("请求失败!");
    			}
    		});
    	});
    </script>
    </head>
    <body>
    	<table id="ncovTable"></table>
    </body>
    </html>

运行结果如下：  
![在这里插入图片描述][24463e754e2a4c4686505df2d1ab8599.png]  
**（15）** 处理时间问题。从上面的结果我们看到一个问题，就是时间的显示有问题，这里是有因为 jQuery 把表示时间的数字按照数字来输出了，一个简单的方法是直接把日期当字符串来使用。  
修改 NcovData 的代码，修改后如下：

package bean;
    
    import java.text.DateFormat;
    import java.text.SimpleDateFormat;
    import java.util.Date;
    
    public class NcovData {
        
    	private int id;
    	private int quantity;
    	// private Date editDate;
    	private String editDate;
    
    	public NcovData() {
        
    	}
    
    	public NcovData(int id, int quantity, Date editDate) {
        
    		this.id = id;
    		this.quantity = quantity;
    		try {
        
    			DateFormat df = new SimpleDateFormat("yyyy-MM-dd");
    			this.editDate = df.format(editDate);
    		} catch (Exception e) {
        
    		}
    	}
    
    	public int getId() {
        
    		return id;
    	}
    
    	public void setId(int id) {
        
    		this.id = id;
    	}
    
    	public int getQuantity() {
        
    		return quantity;
    	}
    
    	public void setQuantity(int quantity) {
        
    		this.quantity = quantity;
    	}
    
    	public String getEditDate() {
        
    		return editDate;
    	}
    
    	public void setEditDate(String editDate) {
        
    		this.editDate = editDate;
    	}
    }

修改之后再访问 ncov.html，得到下面的结果：  
![在这里插入图片描述][bfce097953dd407b9bf3a5932a8cb1aa.png]

# 七、Echarts 使用 #

ECharts是一个基于JavaScript的开源可视化库，可以用来制作交互式的图表和地图。  
它支持多种图表类型，包括折线图、柱状图、饼图和散点图等等。ECharts还提供了丰富的图表选项和交互功能，可以让用户自定义和控制图表的样式和行为。  
ECharts可以在Web端和Node.js环境中使用，是一个非常强大和灵活的数据可视化工具。

ECHARTS[参考文件][Link 3]

**（1）** 下载 JS 库（echarts.min.js）  
**（2）** 把 JS 库添加工程中，复制到 WebContent 下面的 js 文件夹中  
**（3）** 新建一个 html 文件 echarts.html  
**（4）** 引入 echarts 的 js 文件，加入下面的代码

**（5）** 为 Echarts 准备一个 DOM，就是显示图形的位置

**（6）** 生成图形  
通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>Insert title here</title>
    	<script src="js/echarts.min.js"></script>
    </head>
    <body>
    	<div id="main" style="width: 600px; height: 400px;"></div>
    	<script type="text/javascript">
    		var chartDom = document.getElementById('main');
    		var myChart = echarts.init(chartDom);
    		var option;
    
    		option = {
          
    			xAxis : {
          
    				type : 'category',
    				data : [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ]
    			},
    			yAxis : {
          
    				type : 'value'
    			},
    			series : [ {
          
    				data : [ 120, 200, 150, 80, 70, 110, 130 ],
    				type : 'line',
    				showBackground : true,
    				backgroundStyle : {
          
    					color : 'rgba(180, 180, 180, 0.2)'
    				}
    			}, {
          
    				data : [ 220, 300, 250, 180, 170, 210, 230 ],
    				type : 'line',
    				showBackground : true,
    				backgroundStyle : {
          
    					color : 'rgba(80, 80, 80, 0.2)'
    				}
    			} ]
    		};
    
    		option && myChart.setOption(option);
    	</script>
    </body>
    </html>

效果如下所示：  
![在这里插入图片描述][e432068f79e14ef8b63e400ad65c1cbc.png]

# 八、把 ajax 得到的数据显示在 Echarts 的折线图中 #

## 数据可视化 ##

推荐网站：[https://echarts.apache.org/zh/index.html][https_echarts.apache.org_zh_index.html]

点击【示例】  
![在这里插入图片描述][bd5cbe5bb2d44fe5a0d5637384a3c2d6.png]  
随便选择一个图形  
![在这里插入图片描述][fc70df6bcb3148c3a6b076f7219b87f1.png]  
左边放入代码后，左上角运行  
![在这里插入图片描述][80b00a1b607745f8ab55900c0f56cae3.png]

--------------------

（1）选择图形：echarts 官方网站提供了很多样例，我们可以根据需要选择合适的图形，然后为图形提供数据即可。  
[https://echarts.apache.org/examples/zh/index.html][https_echarts.apache.org_examples_zh_index.html]  
![在这里插入图片描述][47bbc54d4cda4d66819998edd2947e02.png]  
如果想使用折线图，直接选择第一个图形，单击打开。画面中左侧是代码，右侧试效果，直接复制左侧的代码修改即可  
![在这里插入图片描述][4d8138df0f1e4c53be9c82408ee9a0a6.png]

**（2）** 根据选择的图形，确定需要提供的数据。例如上面的折线图的代码如下：

option = {
         
    	xAxis: {
         
    		type: 'category', 
    		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] 
    	}, 
    	yAxis: {
         
     		type: 'value' 
    	}, 
        series: [{
         
     		data: [820, 932, 901, 934, 1290, 1330, 1320], 
    		type: 'line' 
    	}] 
    };

上面的代码中核心的两行代码使用阴影表示出来了，分别表示 x轴的数据和y 轴的数据。  
接下来我们以新冠肺炎数据为例介绍如何使用折线图。  
**（3）** 创建显示新冠肺炎数据的 html 文件，文件名为 ncovEcharts.html。  
**（4）** 加入 jQuery 类库和 echarts 类库

**（5）** 提供显示折线图的 div

**（6）** 提供加载或者刷新数据的按钮

**（7）** 编写更新折线图数据的 JS 函数，调用该函数的时候需要提供 dates 和 quantities 数据，前者表示时间，后者表示对应的数量：

**（8）** 编写初始化 jQuery 代码，以及按钮的事件处理代码，在按钮事件处理代码中获取数据之后调用更新折线图的函数 updateLine

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <title>Insert title here</title>
    </head>
    <body>
    <button id="btn">加载/刷新数据</button><br>
    <div id="mainLine" style="width: 600px;height:400px;"></div>
    <div id="mainBar" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
    function updateLine(dates,quantities){
          
    	var chartDom = document.getElementById('mainLine');
    	var myChart = echarts.init(chartDom);
    	var option;
    	
    	option = {
          
    	  xAxis: {
          
    	    type: 'category',
    	    data: dates
    	  },
    	  yAxis: {
          
    	    type: 'value'
    	  },
    	  series: [
    	    {
          
    	      data: quantities,
    	      type: 'line',
    	      smooth: true,
    	      showBackground: true,
    	      backgroundStyle: {
          
    	        color: 'rgba(180, 180, 180, 0.2)'
    	      }
    	    }
    	  ]
    	};
    	
    	option && myChart.setOption(option);
    }
    
    function updateBar(dates,quantities){
          
    	var chartDom = document.getElementById('mainBar');
    	var myChart = echarts.init(chartDom);
    	var option;
    	
    	option = {
          
    	  xAxis: {
          
    	    type: 'category',
    	    data: dates
    	  },
    	  yAxis: {
          
    	    type: 'value'
    	  },
    	  series: [
    	    {
          
    	      data: quantities,
    	      type: 'bar',
    	      showBackground: true,
    	      backgroundStyle: {
          
    	        color: 'rgba(180, 180, 180, 0.2)'
    	      }
    	    }
    	  ]
    	};
    	
    	option && myChart.setOption(option);
    }
    
    function refreshEcharts(result){
          
    	var dates = []; //表示日期（X 轴数据）
    	var quantities = []; // 表示数量（y 轴数据）
    	for (var i=0;i<result.length;i++){
          
    		//从 json 数组得到 json 对象
    		var data = result[i];
    		// 把数据分别存储到时间数组和数量数组
    		dates.push(data.editDate);
    		quantities.push(data.quantity);
    	}
    	updateLine(dates,quantities);
    	updateBar(dates,quantities);
    }
    $(document).ready(function(){
          
    	$("#btn").click(function(){
          
    		$.ajax({
          
    			type : "get",
    			async : true,
    			url : "NcovServlet",
    			data : {
          },
    			dataType : "json",
    			success : function(result) {
          
    				refreshEcharts(result);
    			},
    			error : function(errorMsg) {
          
    				alert("请求失败!");
    			}
    		})
    	});
    });
    </script>
    </body>
    </html>

![请添加图片描述][65ccbebcdb4d4e74965b2a448851e059.gif]  
**（9）** 增加柱状图，需要一个显示柱状图的 div，和更新柱状图数据的函数，div 代码如下：

更新柱状图数据的函数如下：

点击按钮得到数据之后，需要调用该函数：

updateBar(dates,quantities);

**（10）** 修改后的完整代码如下：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript">
    	function updateBar(dates, quantities) {
          
    		var myChart = echarts.init(document.getElementById('mainBar'));
    		// 指定图表的配置项和数据
    		var option = {
          
    			title : {
          
    				text : '新冠肺炎每日确诊数量'
    			},
    			tooltip : {
          },
    			legend : {
          
    				data : [ '新增数量' ]
    			},
    			xAxis : {
          
    				data : dates
    			},
    			yAxis : {
          },
    			series : [ {
          
    				name : '新增数量',
    				type : 'bar',
    				data : quantities
    			} ]
    		};
    		// 使用刚指定的配置项和数据显示图表。
    		myChart.setOption(option);
    	}
    	function updateLine(dates, quantities) {
          
    		var myChart = echarts.init(document.getElementById('mainLine'));
    		// 指定图表的配置项和数据
    		option = {
          
    			xAxis : {
          
    				type : 'category',
    				data : dates
    			},
    			yAxis : {
          
    				type : 'value'
    			},
    			series : [ {
          
    				data : quantities,
    				type : 'line'
    			} ]
    		};
    
    		// 使用刚指定的配置项和数据显示图表。
    		myChart.setOption(option);
    	}
    	function refreshEcharts(result) {
          
    		var dates = []; //表示日期（X 轴数据）
    		var quantities = []; // 表示数量（y 轴数据）
    		for (var i = 0; i < result.length; i++) {
          
    			//从 json 数组得到 json 对象
    			var data = result[i];
    			// 把数据分别存储到时间数组和数量数组
    			dates.push(data.editDate);
    			quantities.push(data.quantity);
    		}
    		updateLine(dates, quantities);
    		updateBar(dates, quantities);
    	}
    	$(document).ready(function() {
          
    		$("#btn").click(function() {
          
    			$.ajax({
          
    				type : "get",
    				async : true,
    				url : "NcovServlet",
    				data : {
          },
    				dataType : "json",
    				success : function(result) {
          
    					refreshEcharts(result);
    				},
    				error : function(errorMsg) {
          
    					alert("请求失败!");
    				}
    			})
    		});
    	});
    </script>
    </head>
    <body>
    	<button id="btn">加载/刷新数据</button>
    	<br>
    	<div id="mainLine" style="width: 600px; height: 400px;"></div>
    	<div id="mainBar" style="width: 600px; height: 400px;"></div>
    </body>
    </html>

效果展示：  
![请添加图片描述][6ad37149846445c1be12674bb8d41144.gif]

# 九、添加自动刷新功能 #

**（1）** 在 jQuery 初始化的时候使用 setInterval(getDataFromServer,“1000”)启动一个定时器，该定时器定时调用服务器端获取最新数据，然后更新图表。第一个参数是执行更新功能的函数名，第二个参数是定时时间间隔，1000 表示 1 秒。  
**（2）** 在 ncovEcharts.html 基础上修改，复制该文件并粘贴修改为 ncovEcharts2.html，需要修改的代码主要：

把原来的点击事件处理代码：

$(document).ready(function(){
         
    	$("#btn").click(function(){
         
    		$.ajax({
         
    			type : "get", 
    			async : true, 
    			url : "NcovServlet", 
    			data : {
        }, 
    			dataType : "json", 
    			success : function(result) {
         
    				refreshEcharts(result); 
    			}, 
    			error : function(errorMsg) {
         
     				alert("请求失败!"); 
     			} 
     		}) 
     	}); 
    });

修改为定时事件处理代码：

并且删除按钮：

**（3）** 运行测试程序，启动之后没有数据，1 秒以后加载数据，然后试着修改数据库中的数据，可以看到图形随着发生变化。这样就能实时显示数据库中的数据了。

小结：各文件之间的调用关系如下  
![在这里插入图片描述][6ce6ea62e4b641a2a98be145459d54e4.png]

# 十、实现自己数据的展示 #

基本过程：  
（1）创建 Web 工程；  
（2）创建表示信息的实体类；  
（3）添加两个类库：json 和 mysql 驱动程序；  
（4）复制 DBBean，修改数据库信息；  
（5）创建 DAO，从数据库中获取信息；  
（6）创建 Service，调用 DAO 得到数据；  
（7）创建 Servlet，调用 Service，对用户返回 JSON 数据；  
（8）创建页面文件，获取 Servlet 的数据并显示。

# 十一、可能遇到的问题 #

## eclipse新建jsp文件或servlet文件报错 ##

[https://blog.csdn.net/rej177/article/details/125275672][https_blog.csdn.net_rej177_article_details_125275672]

## 找不到 jar 包 ##

如果出现类似这样的错误，需要把类库 jar 包部署到服务器上。  
![在这里插入图片描述][3c950e74ae8a4ffd90ac76eddb4d4ac8.png]  
错误中的典型信息是 HTTP Status 500—Internal Server Error，表示服务器端程序运行出错，另外一个错误信息 java.lang.NoClassDefFoundError，表示错误的类型，这个错误表示某个类没有找到，这里的报错信息表示 com/alibaba/fastjson/JSON 没有找到。

错误的解决方法：把对应的 jar 包添加到构建路径中

**有两种方法**  
**第一种方法**：直接把 jar 包放到 WEB-INF 下面的 lib 下面：  
![在这里插入图片描述][38538d6bfb1d4a818912abb62efcc374.png]  
**第二种方法**是配置 Build Path，具体操作如下：  
工程上点击右键，选择 Build Path→Configure Build Path…，然后在弹出的对话框中操作。  
![在这里插入图片描述][bc713edfe2c948c89a1e52f32ae234ef.png]  
查看 Libraries选项卡，看看需要的jar包是否存在，如果不存在，可以通过右侧的 【Add JARs】或 【Add External JARs 】把 jar 加入构建路径。  
两者区别：  
Add JARs 用于添加工程内部某个文件夹下的 jar包  
Add External JARs 可以添加文件系统中任何地方的 jar 包  
![在这里插入图片描述][194bbc65a5284eda8a01e5db7dfd0c95.png]  
如果 jar 包已经存在，则查看 【Order and Export】选项卡，然后选中对应 jar 包前面的复选框，然后点击右下角的【Apply and Close】按钮  
![在这里插入图片描述][eeabadb4876f4f688788d69e04d102b2.png]

## 如果 Servers 窗口不见了 ##

![在这里插入图片描述][1b27e576a3564791943642850c7d3ddc.png]  
导入工程：  
![在这里插入图片描述][2161a0a0a25a4f4fac6b5ba42749e0c8.png]  
![在这里插入图片描述][42f25e99f1a949d8ae4f8cacb6f901a1.png]

## 提示 JDK 相关的错误信息 ##

![在这里插入图片描述][7b4e44ce29304f65b563851d94cec24e.png]  
![在这里插入图片描述][88580a8e868544eca1f843f721c158cb.png]

## 代码修改后不起作用 ##

如果出现修改后代码不起作用，可以重新构建工程，选择 Project→Build，然后选择对应的工程，默认已经选中，系统会把原来编译部署好的应用删除，重新编译部署

操作如图所示。  
![在这里插入图片描述][c137aa685ecd4044ac8e7b2e93c247fb.png]  
如果出现 servlet 相关的包不好用，例如：  
![在这里插入图片描述][abfd9bcca4f94a4c9d4064724b8e6889.jpeg]  
解决方案，查看如下位置的信息：  
![在这里插入图片描述][f232e14830c944cc988ae877f076ada7.png]  
![在这里插入图片描述][1a24f654fcdc4345af1031a1c8ee8b7c.png]  
![在这里插入图片描述][bf241a0923014ef8a173aba01a62d722.png]

[f5ef568219044914afa1423527654306.png]: https://img-blog.csdnimg.cn/f5ef568219044914afa1423527654306.png
[Eclipse_ Tomcat]: https://blog.csdn.net/rej177/article/details/126135033
[f5f7df37313043b6accba99efed1ec75.png]: https://img-blog.csdnimg.cn/f5f7df37313043b6accba99efed1ec75.png
[f2158c98ecf54591bb502bfccd191c76.png]: https://img-blog.csdnimg.cn/f2158c98ecf54591bb502bfccd191c76.png
[93112f0d38864c398c8be98cb22f3479.png]: https://img-blog.csdnimg.cn/93112f0d38864c398c8be98cb22f3479.png
[92e289850da440548fadb630823e15e3.png]: https://img-blog.csdnimg.cn/92e289850da440548fadb630823e15e3.png
[c4b7fe54284341e4882af9e8939a7728.png]: https://img-blog.csdnimg.cn/c4b7fe54284341e4882af9e8939a7728.png
[b59deef800ef43cc887747d94487899b.png]: https://img-blog.csdnimg.cn/b59deef800ef43cc887747d94487899b.png
[10a55976b0f545868f560fded60d12fb.png]: https://img-blog.csdnimg.cn/10a55976b0f545868f560fded60d12fb.png
[ed7976a9559b40128acd806e3566b098.png]: https://img-blog.csdnimg.cn/ed7976a9559b40128acd806e3566b098.png
[bd9074ba2998445ba160b47ffbe01309.png]: https://img-blog.csdnimg.cn/bd9074ba2998445ba160b47ffbe01309.png
[0b589fcdea9b4252b16709c9a2cba336.jpeg]: https://img-blog.csdnimg.cn/0b589fcdea9b4252b16709c9a2cba336.jpeg
[f9826bfa187e4268a711e9dbdc7c4695.jpeg]: https://img-blog.csdnimg.cn/f9826bfa187e4268a711e9dbdc7c4695.jpeg
[eclipse _ servlet]: https://rej177.blog.csdn.net/article/details/125275672
[22e05a41df3d4aea92ea24ecc66f58e0.png]: https://img-blog.csdnimg.cn/22e05a41df3d4aea92ea24ecc66f58e0.png
[7b76164bb9a44e328afc8c3e8015926c.png]: https://img-blog.csdnimg.cn/7b76164bb9a44e328afc8c3e8015926c.png
[650344f8c7304d76b38d417eacb2a390.png]: https://img-blog.csdnimg.cn/650344f8c7304d76b38d417eacb2a390.png
[b4df7c07e6c54c8787487493931dcd8c.png]: https://img-blog.csdnimg.cn/b4df7c07e6c54c8787487493931dcd8c.png
[0f2a850ed8f14050af2495597345df77.png]: https://img-blog.csdnimg.cn/0f2a850ed8f14050af2495597345df77.png
[Link 1]: https://blog.csdn.net/rej177/article/details/125457432
[564933377514440dae17ba7790d7e95d.png]: https://img-blog.csdnimg.cn/564933377514440dae17ba7790d7e95d.png
[25c621a233954f5786eebbb2b1d9df76.png]: https://img-blog.csdnimg.cn/25c621a233954f5786eebbb2b1d9df76.png
[cc37a4e1b87b4413899c60eceb9e7f40.png]: https://img-blog.csdnimg.cn/cc37a4e1b87b4413899c60eceb9e7f40.png
[e36f31dab2c24309b5c40faf13b7c4e9.jpeg]: https://img-blog.csdnimg.cn/e36f31dab2c24309b5c40faf13b7c4e9.jpeg
[ed72622e341e4a07a66b02f9d75b760b.png]: https://img-blog.csdnimg.cn/ed72622e341e4a07a66b02f9d75b760b.png
[2c1c1fb7839846c3b4eb6f5421aaf68a.png]: https://img-blog.csdnimg.cn/2c1c1fb7839846c3b4eb6f5421aaf68a.png
[3b5321c0004b4a098dfd48e9530a015f.png]: https://img-blog.csdnimg.cn/3b5321c0004b4a098dfd48e9530a015f.png
[5be69251d8924350b95b8f00a55fe3d8.gif]: https://img-blog.csdnimg.cn/5be69251d8924350b95b8f00a55fe3d8.gif
[ad6dffcf80b8473e9fb6c8fab364cf4f.gif]: https://img-blog.csdnimg.cn/ad6dffcf80b8473e9fb6c8fab364cf4f.gif
[Link 2]: https://rej177.blog.csdn.net/article/details/122727753
[6b970e212a0a4468b417f6b2d197343f.png]: https://img-blog.csdnimg.cn/6b970e212a0a4468b417f6b2d197343f.png
[jar]: https://mvnrepository.com/artifact/mysql/mysql-connector-java
[d9dd2ece4d9a4f4893662c6a477f9f08.jpeg]: https://img-blog.csdnimg.cn/d9dd2ece4d9a4f4893662c6a477f9f08.jpeg
[56bb960cbee247dc8df3f4d06938f1fd.png]: https://img-blog.csdnimg.cn/56bb960cbee247dc8df3f4d06938f1fd.png
[09badd3d98cf488da09ee59fe94b828e.png]: https://img-blog.csdnimg.cn/09badd3d98cf488da09ee59fe94b828e.png
[24463e754e2a4c4686505df2d1ab8599.png]: https://img-blog.csdnimg.cn/24463e754e2a4c4686505df2d1ab8599.png
[bfce097953dd407b9bf3a5932a8cb1aa.png]: https://img-blog.csdnimg.cn/bfce097953dd407b9bf3a5932a8cb1aa.png
[Link 3]: https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
[e432068f79e14ef8b63e400ad65c1cbc.png]: https://img-blog.csdnimg.cn/e432068f79e14ef8b63e400ad65c1cbc.png
[https_echarts.apache.org_zh_index.html]: https://echarts.apache.org/zh/index.html
[bd5cbe5bb2d44fe5a0d5637384a3c2d6.png]: https://img-blog.csdnimg.cn/bd5cbe5bb2d44fe5a0d5637384a3c2d6.png
[fc70df6bcb3148c3a6b076f7219b87f1.png]: https://img-blog.csdnimg.cn/fc70df6bcb3148c3a6b076f7219b87f1.png
[80b00a1b607745f8ab55900c0f56cae3.png]: https://img-blog.csdnimg.cn/80b00a1b607745f8ab55900c0f56cae3.png
[https_echarts.apache.org_examples_zh_index.html]: https://echarts.apache.org/examples/zh/index.html
[47bbc54d4cda4d66819998edd2947e02.png]: https://img-blog.csdnimg.cn/47bbc54d4cda4d66819998edd2947e02.png
[4d8138df0f1e4c53be9c82408ee9a0a6.png]: https://img-blog.csdnimg.cn/4d8138df0f1e4c53be9c82408ee9a0a6.png
[65ccbebcdb4d4e74965b2a448851e059.gif]: https://img-blog.csdnimg.cn/65ccbebcdb4d4e74965b2a448851e059.gif
[6ad37149846445c1be12674bb8d41144.gif]: https://img-blog.csdnimg.cn/6ad37149846445c1be12674bb8d41144.gif
[6ce6ea62e4b641a2a98be145459d54e4.png]: https://img-blog.csdnimg.cn/6ce6ea62e4b641a2a98be145459d54e4.png
[https_blog.csdn.net_rej177_article_details_125275672]: https://blog.csdn.net/rej177/article/details/125275672
[3c950e74ae8a4ffd90ac76eddb4d4ac8.png]: https://img-blog.csdnimg.cn/3c950e74ae8a4ffd90ac76eddb4d4ac8.png
[38538d6bfb1d4a818912abb62efcc374.png]: https://img-blog.csdnimg.cn/38538d6bfb1d4a818912abb62efcc374.png
[bc713edfe2c948c89a1e52f32ae234ef.png]: https://img-blog.csdnimg.cn/bc713edfe2c948c89a1e52f32ae234ef.png
[194bbc65a5284eda8a01e5db7dfd0c95.png]: https://img-blog.csdnimg.cn/194bbc65a5284eda8a01e5db7dfd0c95.png
[eeabadb4876f4f688788d69e04d102b2.png]: https://img-blog.csdnimg.cn/eeabadb4876f4f688788d69e04d102b2.png
[1b27e576a3564791943642850c7d3ddc.png]: https://img-blog.csdnimg.cn/1b27e576a3564791943642850c7d3ddc.png
[2161a0a0a25a4f4fac6b5ba42749e0c8.png]: https://img-blog.csdnimg.cn/2161a0a0a25a4f4fac6b5ba42749e0c8.png
[42f25e99f1a949d8ae4f8cacb6f901a1.png]: https://img-blog.csdnimg.cn/42f25e99f1a949d8ae4f8cacb6f901a1.png
[7b4e44ce29304f65b563851d94cec24e.png]: https://img-blog.csdnimg.cn/7b4e44ce29304f65b563851d94cec24e.png
[88580a8e868544eca1f843f721c158cb.png]: https://img-blog.csdnimg.cn/88580a8e868544eca1f843f721c158cb.png
[c137aa685ecd4044ac8e7b2e93c247fb.png]: https://img-blog.csdnimg.cn/c137aa685ecd4044ac8e7b2e93c247fb.png
[abfd9bcca4f94a4c9d4064724b8e6889.jpeg]: https://img-blog.csdnimg.cn/abfd9bcca4f94a4c9d4064724b8e6889.jpeg
[f232e14830c944cc988ae877f076ada7.png]: https://img-blog.csdnimg.cn/f232e14830c944cc988ae877f076ada7.png
[1a24f654fcdc4345af1031a1c8ee8b7c.png]: https://img-blog.csdnimg.cn/1a24f654fcdc4345af1031a1c8ee8b7c.png
[bf241a0923014ef8a173aba01a62d722.png]: https://img-blog.csdnimg.cn/bf241a0923014ef8a173aba01a62d722.png