小程序项目实战-基于微信小程序的自习室系统设计与实现，可作为毕业设计

女爷i 2023-10-15 07:55 22阅读 0赞

博主介绍：✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W+、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌  
![0ed5c0db98ab49dae0fa37434a0ac258.png][]

#### 文章目录 ####

*  1 简介
 *  2 技术栈
 *  3 需求分析
 *   *  3.1用户需求分析
     *   *  3.1.1 学生用户
         *  3.1.3 管理员用户
 *  4 数据库设计
 *   *   *  4.4.1 ER图设计
         *  4.4.2 数据库表设计
 *  \*\*第五章 系统实现\*\*
 *   *  5.1小程序功能的实现
     *  5.2管理员模块的实现
     *   *  5.2.1 留言管理
         *  5.2.2 学生信息管理
         *  5.2.3 公告管理
         *  5.2.4 高校自习室信息管理
         *  5.2.5 自习室预约审核管理
 *  6 源码下载

## 1 简介 ##

Java 基于微信小程序的自习室预约系统

本文研发的基于微信小程序的新乡学院自习室预约系统结合高校具体的实际，利用编程基础和数据库实现教务信息化管理。充分利用校园的现有资源，把目前落后的管理现状提升到信息化管理模式中，减轻自习室管理工作量，有助于教学工作规范。基于微信小程序的新乡学院自习室预约系统帮助教师有效的管理自习室信息，学生通过系统了解自习室的使用情况，变化情况。减少徒步到自习室查看状态的时间，并通过系统可以查看各种公告以及教学公告信息。在交流模块也可以和其他同学或者老师在线交流。获取校园生活中的问题和解决方法，有效提升在校时间利用情况，提高了学习效率

## 2 技术栈 ##

<table> 
 <thead> 
  <tr> 
   <th>说明</th> 
   <th>技术栈</th> 
   <th>备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>后台</td> 
   <td>Java</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>前端</td> 
   <td>小程序</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>数据库</td> 
   <td>MYSql</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>架构</td> 
   <td>B/S 结构</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

## 3 需求分析 ##

### 3.1用户需求分析 ###

基于微信小程序的新乡学院自习室预约系统的用户是系统最根本使用者，按需要分析系统包括两类用户：学生、管理员。这两类用户对系统的需求简要如下。

#### 3.1.1 学生用户 ####

学生用户只要实现了前台信息的查看，打开首页，查看网站介绍、自习室信息、在线留言、轮播图信息公告等，通过点击首页的菜单跳转到对应的功能页面菜单，包括网站首页、自习室信息、注册登录、个人中心、后台登录。

学生用户通过账户账号登录，登录后具有所有的操作权限，如果没有登录，不能在线预约。学生用户退出系统将注销个人的登录信息。

#### 3.1.3 管理员用户 ####

管理员通过后台的登录页面，选择管理员权限后进行登录，管理员的权限包括轮播公告管理、老师学生信息管理和信息审核管理，管理员管理后点击退出，注销登录信息。

管理员用户具有在线交流的管理，自习室信息管理、自习室预约管理。

在线交流是对前台用户留言内容进行管理，删除留言信息，查看留言信息。自习室类型管理，添加某一个自习室类型信息。高校自习室管理，用户添加高校自习室信息，包括高校自习室名称、最大容纳数、高校自习室的位置、高校自习室的状态、对应高校自习室的图片，添加后在高校自习室管理中对信息进行。操作后退出系统。

## 4 数据库设计 ##

#### 4.4.1 ER图设计 ####

本基于微信小程序的新乡学院自习室预约系统实体清晰，所以这里只绘制系统整体E-R图，其它的略去E—R图的绘制。

(1)管理员信息实体E-R图：

![img][]

图4.3管理员E-R图

(2)公告信息实体E-R图

![img][img 1]

图4.4公告信息实体E-R图

(3)类型信息实体E-R图

![img][img 2]

图4.5自习室类型信息E-R图

(4)学生信息实体E-R图

![img][img 3]

图4.6 学生信息实体E-R图

(5) 高校自习室信息E-R图

![img][img 4]

图4.7 高校自习室信息实体E-R图

(6)留言交流信息E-R图

![img][img 5]

图4.8 留言交流信息实体E-R图

#### 4.4.2 数据库表设计 ####

基于微信小程序的新乡学院自习室预约系统包括多个数据库表，下面对数据表进行详细的介绍，每个数据库表包括这个名称，对于类型是否逐渐、是否与空字段的备注信息等。

表: 自习室信息表

<table> 
 <thead> 
  <tr> 
   <th>编号</th> 
   <th>数据字段名称</th> 
   <th>对应类型</th> 
   <th>主键</th> 
   <th>允许空</th> 
   <th>字段的备注信息</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>No1</td> 
   <td>C_id</td> 
   <td>bigint(8)</td> 
   <td>PK</td> 
   <td>No</td> 
   <td>主键</td> 
  </tr> 
  <tr> 
   <td>No2</td> 
   <td>C_addtime</td> 
   <td>timestamp(8)</td> 
   <td>NO</td> 
   <td>No</td> 
   <td>创建时间</td> 
  </tr> 
  <tr> 
   <td>No3</td> 
   <td>C_bianhao</td> 
   <td>nvarchar(400)</td> 
   <td>NO</td> 
   <td>Null</td> 
   <td>编号</td> 
  </tr> 
  <tr> 
   <td>No4</td> 
   <td>C_jifanghao</td> 
   <td>nvarchar(400)</td> 
   <td>NO</td> 
   <td>Null</td> 
   <td>自习室类型</td> 
  </tr> 
  <tr> 
   <td>No5</td> 
   <td>C_tupian</td> 
   <td>nvarchar(400)</td> 
   <td>NO</td> 
   <td>Null</td> 
   <td>图片</td> 
  </tr> 
  <tr> 
   <td>No6</td> 
   <td>C_riqi</td> 
   <td>nvarchar(400)</td> 
   <td>NO</td> 
   <td>Null</td> 
   <td>日期</td> 
  </tr> 
  <tr> 
   <td>No7</td> 
   <td>C_shiduan</td> 
   <td>nvarchar(400)</td> 
   <td>NO</td> 
   <td>Null</td> 
   <td>时段</td> 
  </tr> 
  <tr> 
   <td>No8</td> 
   <td>C_kongxianzuowei</td> 
   <td>text(16)</td> 
   <td>NO</td> 
   <td>Null</td> 
   <td>楼栋</td> 
  </tr> 
  <tr> 
   <td>No9</td> 
   <td>C_xiangqing</td> 
   <td>text(16)</td> 
   <td>NO</td> 
   <td>Null</td> 
   <td>详情</td> 
  </tr> 
  <tr> 
   <td>No10</td> 
   <td>C_zhuangtai</td> 
   <td>nvarchar(400)</td> 
   <td>NO</td> 
   <td>Null</td> 
   <td>状态</td> 
  </tr> 
 </tbody> 
</table>

表: config信息表

表: quxiaoyuyue信息表

<table> 
 <thead> 
  <tr> 
   <th>编号</th> 
   <th>数据字段名称</th> 
   <th>对应类型</th> 
   <th>主键</th> 
   <th>允许空</th> 
   <th>字段的备注信息</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>No1</td> 
   <td>C_id</td> 
   <td>bigint(8)</td> 
   <td>PK</td> 
   <td>No</td> 
   <td>主键</td> 
  </tr> 
  <tr> 
   <td>No2</td> 
   <td>C_addtime</td> 
   <td>timestamp(8)</td> 
   <td>NO</td> 
   <td>No</td> 
   <td>创建时间</td> 
  </tr> 
  <tr> 
   <td>No3</td> 
   <td>C_bianhao</td> 
   <td>nvarchar(400)</td> 
   <td>NO</td> 
   <td>Null</td> 
   <td>编号</td> 
  </tr> 
  <tr> 
   <td>No4</td> 
   <td>C_jifanghao</td> 
   <td>nvarchar(400)</td> 
   <td>NO</td> 
   <td>Null</td> 
   <td>自习室类型</td> 
  </tr> 
  <tr> 
   <td>No5</td> 
   <td>C_riqi</td> 
   <td>nvarchar(400)</td> 
   <td>NO</td> 
   <td>Null</td> 
   <td>日期</td> 
  </tr> 
  <tr> 
   <td>No6</td> 
   <td>C_shiduan</td> 
   <td>nvarchar(400)</td> 
   <td>NO</td> 
   <td>Null</td> 
   <td>时段</td> 
  </tr> 
  <tr> 
   <td>No7</td> 
   <td>C_zuoweihao</td> 
   <td>nvarchar(400)</td> 
   <td>NO</td> 
   <td>Null</td> 
   <td>座位号</td> 
  </tr> 
  <tr> 
   <td>No8</td> 
   <td>C_quxiaoliyou</td> 
   <td>text(16)</td> 
   <td>NO</td> 
   <td>Null</td> 
   <td>取消理由</td> 
  </tr> 
  <tr> 
   <td>No9</td> 
   <td>C_xuehao</td> 
   <td>nvarchar(400)</td> 
   <td>NO</td> 
   <td>Null</td> 
   <td>学号</td> 
  </tr> 
  <tr> 
   <td>No10</td> 
   <td>C_xingming</td> 
   <td>nvarchar(400)</td> 
   <td>NO</td> 
   <td>Null</td> 
   <td>姓名</td> 
  </tr> 
  <tr> 
   <td>No11</td> 
   <td>C_shenfenzheng</td> 
   <td>nvarchar(400)</td> 
   <td>NO</td> 
   <td>Null</td> 
   <td>身份证</td> 
  </tr> 
  <tr> 
   <td>No12</td> 
   <td>C_sfsh</td> 
   <td>nvarchar(400)</td> 
   <td>NO</td> 
   <td>Null</td> 
   <td>是否审核</td> 
  </tr> 
  <tr> 
   <td>No13</td> 
   <td>C_shhf</td> 
   <td>text(16)</td> 
   <td>NO</td> 
   <td>Null</td> 
   <td>审核回复</td> 
  </tr> 
 </tbody> 
</table>

表: users信息表

表: shenqingyuyue信息表

<table> 
 <thead> 
  <tr> 
   <th>编号</th> 
   <th>数据字段名称</th> 
   <th>对应类型</th> 
   <th>主键</th> 
   <th>允许空</th> 
   <th>字段的备注信息</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>No1</td> 
   <td>C_id</td> 
   <td>bigint(8)</td> 
   <td>PK</td> 
   <td>No</td> 
   <td>主键</td> 
  </tr> 
  <tr> 
   <td>No2</td> 
   <td>C_addtime</td> 
   <td>timestamp(8)</td> 
   <td>NO</td> 
   <td>No</td> 
   <td>创建时间</td> 
  </tr> 
  <tr> 
   <td>No3</td> 
   <td>C_bianhao</td> 
   <td>nvarchar(400)</td> 
   <td>NO</td> 
   <td>Null</td> 
   <td>编号</td> 
  </tr> 
  <tr> 
   <td>No4</td> 
   <td>C_jifanghao</td> 
   <td>nvarchar(400)</td> 
   <td>NO</td> 
   <td>Null</td> 
   <td>自习室类型</td> 
  </tr> 
  <tr> 
   <td>No5</td> 
   <td>C_riqi</td> 
   <td>datetime(8)</td> 
   <td>NO</td> 
   <td>Null</td> 
   <td>日期</td> 
  </tr> 
  <tr> 
   <td>No6</td> 
   <td>C_shiduan</td> 
   <td>nvarchar(400)</td> 
   <td>NO</td> 
   <td>Null</td> 
   <td>时段</td> 
  </tr> 
  <tr> 
   <td>No7</td> 
   <td>C_zuoweihao</td> 
   <td>nvarchar(400)</td> 
   <td>NO</td> 
   <td>Null</td> 
   <td>座位号</td> 
  </tr> 
  <tr> 
   <td>No8</td> 
   <td>C_shenqingneirong</td> 
   <td>nvarchar(400)</td> 
   <td>NO</td> 
   <td>Null</td> 
   <td>申请内容</td> 
  </tr> 
  <tr> 
   <td>No9</td> 
   <td>C_xuehao</td> 
   <td>nvarchar(400)</td> 
   <td>NO</td> 
   <td>Null</td> 
   <td>学号</td> 
  </tr> 
  <tr> 
   <td>No10</td> 
   <td>C_xingming</td> 
   <td>nvarchar(400)</td> 
   <td>NO</td> 
   <td>Null</td> 
   <td>姓名</td> 
  </tr> 
  <tr> 
   <td>No11</td> 
   <td>C_shenfenzheng</td> 
   <td>nvarchar(400)</td> 
   <td>NO</td> 
   <td>Null</td> 
   <td>身份证</td> 
  </tr> 
  <tr> 
   <td>No12</td> 
   <td>C_sfsh</td> 
   <td>nvarchar(400)</td> 
   <td>NO</td> 
   <td>Null</td> 
   <td>是否审核</td> 
  </tr> 
  <tr> 
   <td>No13</td> 
   <td>C_shhf</td> 
   <td>text(16)</td> 
   <td>NO</td> 
   <td>Null</td> 
   <td>审核回复</td> 
  </tr> 
 </tbody> 
</table>

表: forum信息表

表: messages信息表

表: xuesheng信息表

<table> 
 <thead> 
  <tr> 
   <th>编号</th> 
   <th>数据字段名称</th> 
   <th>对应类型</th> 
   <th>主键</th> 
   <th>允许空</th> 
   <th>字段的备注信息</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>No1</td> 
   <td>C_id</td> 
   <td>bigint(8)</td> 
   <td>PK</td> 
   <td>No</td> 
   <td>主键</td> 
  </tr> 
  <tr> 
   <td>No2</td> 
   <td>C_addtime</td> 
   <td>timestamp(8)</td> 
   <td>NO</td> 
   <td>No</td> 
   <td>创建时间</td> 
  </tr> 
  <tr> 
   <td>No3</td> 
   <td>C_xuehao</td> 
   <td>nvarchar(400)</td> 
   <td>NO</td> 
   <td>No</td> 
   <td>学号</td> 
  </tr> 
  <tr> 
   <td>No4</td> 
   <td>C_mima</td> 
   <td>nvarchar(400)</td> 
   <td>NO</td> 
   <td>No</td> 
   <td>密码</td> 
  </tr> 
  <tr> 
   <td>No5</td> 
   <td>C_xingming</td> 
   <td>nvarchar(400)</td> 
   <td>NO</td> 
   <td>No</td> 
   <td>姓名</td> 
  </tr> 
  <tr> 
   <td>No6</td> 
   <td>C_xingbie</td> 
   <td>nvarchar(400)</td> 
   <td>NO</td> 
   <td>Null</td> 
   <td>性别</td> 
  </tr> 
  <tr> 
   <td>No7</td> 
   <td>C_touxiang</td> 
   <td>nvarchar(400)</td> 
   <td>NO</td> 
   <td>Null</td> 
   <td>头像</td> 
  </tr> 
  <tr> 
   <td>No8</td> 
   <td>C_zhuanye</td> 
   <td>nvarchar(400)</td> 
   <td>NO</td> 
   <td>Null</td> 
   <td>专业</td> 
  </tr> 
  <tr> 
   <td>No9</td> 
   <td>C_shoujihao</td> 
   <td>nvarchar(400)</td> 
   <td>NO</td> 
   <td>Null</td> 
   <td>手机号</td> 
  </tr> 
  <tr> 
   <td>No10</td> 
   <td>C_shenfenzheng</td> 
   <td>nvarchar(400)</td> 
   <td>NO</td> 
   <td>Null</td> 
   <td>身份证</td> 
  </tr> 
 </tbody> 
</table>

## **第五章 系统实现** ##

### 5.1小程序功能的实现 ###

5.1.1 学生注册界面

点击导航菜单中的注册即可打开注册页面，注册页面是由文本框、选择框、和注册按钮组成，在文本框中输入需要填写的基本注册信息，点击注册进行信息提交。

如下图所示：

![img][img 6]

图5-1学生注册界面

首先验证填写的信息是否为空，如果通过验证，才把信息构造为插入语句，调用数据库保存操作，插入信息到数据库，返回保存成功的信息到界面，进行登陆，或者返回到首页。

5.1.2 首页界面

搭建微信小程序环境后，进入到系统首页，首页包括头部的logo，导航条，中间为文章公告信息。

小程序首页如下图所示：

![img][img 7]

图5-2 首页

首页是在index页面中，该页面包括头部文件header、文章公告读取数据库中最新的信息，显示图片和对应的链接。在首页中先引入相关的JS和CSS样式。在对应模块中调用数据库操作方法，把读取的结果赋赋给RS数据集合对象，通过循环显示信息。

5.1.3 自习室列表界面

用户打开本系统后，可以查看自习室列表信息。如下图所示：

![img][img 8]

图5-4自习室界面

点击自习室，先打开自习室的列表界面，在列表界面读取信息，详细表达所有相关自习室信息，通过JAVA的数据库操作，把列表绑定到result数据集合中，使用while循环，把所有的信息显示到自习室界面。点击自习室，通过该条信息的ID值传递到自习室的详情页面，在详情页面根据当前的ID值查询对应的具体信息。包括标题名称和内容。

5.1.4 高校自习室预约界面

用户打开本系统后，可以查看高校自习室信息，并进行预约。如下图所示：

![img][img 9]

图5-5高校自习室预约界面

输入预约信息后，添加预约记录到数据库中，在个人中心可以查看预约记录，管理员对预约记录进行审核。

5.1.5 在线交流界面

用户登录本系统后，可以发表在线交流信息。如下图所示：

![img][img 10]

图5-6在线交流界面

在线交流包括评论信息的提交和查询显示，在线交流前需要先进行登录，如果没有登。录界面提示登录后才能进行评论，登陆后的信息是通过session进行判断。如果session存在登录信息，就说明已经登录，在评论中输入评论的内容，点击提交，把评论信息保存到数据库中，评论结束之后进行查询。查询通过当前信息的ID进行条件查询，查询的结果保存在数据集合中，对数据集合进行循环显示。

### 5.2管理员模块的实现 ###

#### 5.2.1 留言管理 ####

在系统主界面中的导航菜单中，有留言按钮，点击按钮，就可以在留言界面进行信息添加和管理。

其中，留言管理界面为5.7所示：

![img][img 11]

图5.7：留言管理页面

#### 5.2.2 学生信息管理 ####

在系统主界面中的导航菜单中，有学生信息按钮，点击按钮，就可以在学生信息界面进行信息添加和管理。

其中，学生信息管理界面为5.8所示：

![img][img 12]

图5.8：学生信息管理页面

在学生页面加载学生的信息列表，当执行该页面初始化的时候，调用业务逻辑层的学生查询方法。该方法先定义学生实体类，然后调用数据库中的学生查询方法，把查询结果绑定在list集合中。循环集合，把数据逐条绑定在学生实体对象，最终返回到界面。将得到的学生集合循环绑定到界面控件，根据字段名和数据结果进行映射，最终显示。

#### 5.2.3 公告管理 ####

管理员查看公告信息。其中，公告信息管理界面为5.9所示：

![img][img 13]

图5.9：公告页面

在公告页面加载公告的信息列表，当执行该页面初始化的时候，调用业务逻辑层的公告查询方法。该方法先定义公告实体类，然后调用数据库中的公告查询方法，把查询结果绑定在list集合中。循环集合，把数据逐条绑定在公告实体对象，最终返回到界面。将得到的公告集合循环绑定到界面控件，根据字段名和数据结果进行映射，最终显示。

#### 5.2.4 高校自习室信息管理 ####

在系统主界面中的导航菜单中，有高校自习室管理按钮，点击按钮，就可以在高校自习室管理界面进行高校自习室信息添加和管理。其中高校自习室添加的界面如下：

![img][img 14]

图5.6：高校自习室添加页面

首先对高校自习室页面进行布局，完成界面设计。在高校自习室页，输入高校自习室的内容，点击保存，执行保存事件，在该事件中进行数据保存操作。该事件方法先获取用户输入的高校自习室内容，把这些数据绑定到高校自习室实体方法中，对高校自习室的信息进行验证，包括是否为空，是否符合规范数据格式等。通过验证后，调用高校自习室的业务逻辑方法，业务逻辑层先执行高校自习室的唯一性验证，通过验证后，调用数据库操作方法。将在线保修的数据使用插入语句，提交到数据库中。数据库操作方法返回操作成功的信息到业务逻辑层，业务逻辑层再把结果返回到在线保修页面，完成插入操作。

#### 5.2.5 自习室预约审核管理 ####

在系统主界面中的导航菜单中，有自习室预约管理按钮，点击按钮，就可以在自习室预约管理界面进行信息审核和管理。

其中，自习室预约管理界面为5.7所示：

![img][img 15]

图5.7：自习室预约管理页面

在自习室预约页面加载自习室预约的信息列表，当执行该页面初始化的时候，调用业务逻辑层的自习室预约查询方法。该方法先定义自习室预约实体类，然后调用数据库中的自习室预约查询方法，把查询结果绑定在list集合中。循环集合，把数据逐条绑定在自习室预约实体对象，最终返回到界面。将得到的自习室预约集合循环绑定到界面控件，根据字段名和数据结果进行映射，最终显示。

点击自习室预约信息审核，在自习室预约信息页面中，先通过ID值查询对于的自习室预约信息，把自习室预约信息保存在临时对象中。把变量值绑定到页面中自习室预约信息栏，然后加载页面，把需要审核的信息完成编辑后点击保存，将对这些数据进行验证，如果通过将执行审核操作，验证失败将会提示具体的错误消息。执行审核语句，调用审核的业务逻辑方法，在审核的方法中判断是否存在该自习室预约，如果不存在该自习室预约，调用数据库操作层去执行审核操作，审核成功后返回。

点击自习室预约信息删除，通过ID值查询自习室预约信息是否存在外键关联，先删除外键关联的数据，然后调用删除的数据库方法，删除成功后返回自习室预约信息列表界面。

## 6 源码下载 ##

[0ed5c0db98ab49dae0fa37434a0ac258.png]: https://img-blog.csdnimg.cn/img_convert/0ed5c0db98ab49dae0fa37434a0ac258.png
[img]: https://img-blog.csdnimg.cn/img_convert/346d525fdd5835081178d4ed1c261ec7.png
[img 1]: https://img-blog.csdnimg.cn/img_convert/31aaddec606f5fe6ce7732d7fae3c414.png
[img 2]: https://img-blog.csdnimg.cn/img_convert/014ec536b94db314c2207fc0cd28e04a.png
[img 3]: https://img-blog.csdnimg.cn/img_convert/3f0e466b453510177ab2126e9030c010.png
[img 4]: https://img-blog.csdnimg.cn/img_convert/2dbc0ec52d311339d6ab501708d3deef.png
[img 5]: https://img-blog.csdnimg.cn/img_convert/595b22e70cacf2ae88fc1a4c03c53597.png
[img 6]: https://img-blog.csdnimg.cn/img_convert/1515f6e89e9a93fd9d99773cca2a8084.jpeg
[img 7]: https://img-blog.csdnimg.cn/img_convert/57279f4f706870672b87b7b3038e88ba.jpeg
[img 8]: https://img-blog.csdnimg.cn/img_convert/671b911c77153f5e8ae0e98397496f7a.jpeg
[img 9]: https://img-blog.csdnimg.cn/img_convert/e230a9e46c9d6524aa90d06966ccb138.jpeg
[img 10]: https://img-blog.csdnimg.cn/img_convert/e92b8eda276892656df6b6ab3ef47a7b.jpeg
[img 11]: https://img-blog.csdnimg.cn/img_convert/1e68fa920a9577629e4dfaed95e6022c.jpeg
[img 12]: https://img-blog.csdnimg.cn/img_convert/b8e5ec7c2a07efdfd924274b292fb165.jpeg
[img 13]: https://img-blog.csdnimg.cn/img_convert/fdd27b42e917cc20ee95facdcd67f618.jpeg
[img 14]: https://img-blog.csdnimg.cn/img_convert/d38845492d833deb8a01497803c32f2c.jpeg
[img 15]: https://img-blog.csdnimg.cn/img_convert/800f422f2df36ec483570e039644a20e.jpeg