@TOC
ssm051网上医院预约挂号系统+jsp
第一章 绪论
1.1 选题背景
如今的信息时代，对信息的共享性，信息的流通性有着较高要求，尽管身边每时每刻都在产生大量信息，这些信息也都会在短时间内得到处理，并迅速传播。因为很多时候，管理层决策需要大量信息作为参考依据，也有些时候，各大企业或学校也需要使用工具宣传自身的文化理念等等，所以信息能够得到迅速传播并带给人们一定的参考价值，充分发挥信息本身的作用是很有必要的，而这些恰恰是传统模式所不能相比的。因此，借助工具让信息系统化，流程化，规范化是最终的发展结果，而这个工具则是计算机软件。本次设计实现的计算机软件网上医院预约挂号系统，让其遵循实际操作流程的情况下，对医院预约挂号信息实施规范化处理，让医院预约挂号信息通过电子的方式进行保存，无论是管理人员检索医院预约挂号信息，维护医院预约挂号信息都可以便利化操作，真正缩短信息处理时间，节省人力和信息管理的成本。
1.2 选题意义
为了让医院预约挂号信息的管理模式进行升级，也为了更好的维护医院预约挂号信息，网上医院预约挂号系统的开发运用就显得很有必要，因为它不仅可以让医院预约挂号信息的管理人员统一完成信息管理，而且还会在保证医院预约挂号信息处于安全状态的情况下，让医院预约挂号信息的处理流程缩短，让信息的管理工作量减少，让医院预约挂号信息的录入和后期维护缩短时间，以及节省管理医院预约挂号信息需要投入的精力与资金。由于网上医院预约挂号系统运用的技术比较成熟，所以它本身就具备了稳定的性能，连续24小时运行都毫无压力。而且还可以保证数据处理的质量。另外，网上医院预约挂号系统为了满足易用性的用户需求，特意在页面的设计上合理布局各元素，让重要内容和导航功能在关键区域展示，让操作系统的用户可以毫不费力的完成系统的操作。总的说来，网上医院预约挂号系统实现了信息资源的共享，让信息可以以更好的方式进行传播，让管理员的管理水平得到提升的同时，也让医院预约挂号信息计算机化。
1.3 研究内容
根据网上医院预约挂号系统设计与实现的流程来对整个系统进行说明。本文将从下述6个部分介绍系统。
第一部分：介绍选题的动因，包括介绍课题背景和意义等。
第二部分：介绍本系统选用的开发手段，包括编程语言，后台支持的数据库，开发类技术等。
第三部分：介绍系统的分析内容，包括投资决策必须的可行性研究，用户对功能的要求，系统运行的性能要求等知识。
第四部分：介绍系统的设计。包括对系统功能结构的设计，数据表结构设计等。
第五部分：介绍系统的实现。包括各模块实现的具体运行效果。
第六部分：介绍系统测试。包括检查系统功能，测试知识点的介绍等。
第二章 开发环境
对网上医院预约挂号系统进行开发，需要了解开发技术的理论与实际运用，对开发工具，尤其是数据库的使用方法需要进行掌握。
2.1 SSM框架
SSM框架是三个框架的合称，分别是Spring框架和SpringMVC框架以及MyBatis框架。三个框架随着时间的发展，越来越变成了当今Java语言的开发主流，帮助程序开发人员专注于业务逻辑以及配置相关操作，能自动生成的都支持自动生成，避免了很多耦合性出错，通过控制反转和依赖注入，让程序开发变成配置文件开发，简单明了，让创建的Java对象都能通过自身来进行创建。面向切面的操作让程序开发也变成了部门协同，公共事务都交给了SpringAOP来操作，让程序开发变得更加专注。MyBatis越来越智能，可以用配置文件和SQL语句混合开发，可以像操作Java语言一样操作数据库。
2.2 JSP技术
JSP开发技术，是Java开发网站必须要学习的一门技术。JSP不能单单说是一种语言，是Java语言诞生的公司为动态网页技术制定的一个网页技术标准。学习JSP技术之前肯定是要学习Java语言和一些HTML语言，并且要对Servlet容器进行学习，这些都属于架构上面的学习，在学校学习了基础的语言之后，再去理解架构也不过是用熟悉的Java语言重新造句而已，让学习更加容易，学习的难度也就大幅度的降低了。JSP编程过程中，可以在HTML代码中插入Java的相关代码，只需要用标签标记即可。JSP主要是用于实现用户界面方面的部分，前端开发人员只需要结合HTML的代码对页面进行布局之后，嵌入JSP操作，JSP可以获取数据库相关数据，通过Java的列表遍历方法就可以使JSP编译之后，浏览器显示的数据界面是动态化的，每次操作都可以让页面布局不乱而数据进行合理的更改显示。选择JSP技术进行网页应用程序的开发会达到很高的效率。
2.3 MYSQL数据库
MYSQL数据库起源于瑞典，但是经营不善被数据库行业老大甲骨文公司给收购了，收购了之后本以为只是为了发展Oracle数据库，然后MySQL数据库就会被雪藏，但是没想到甲骨文公司收购后对MySQL数据库进行了支持，并且让之前Oracle占据不了的中小型市场让MySQL占用，完全实现了甲骨文公司的利润增长，不管是从大型数据库还是中小型数据库，都有了自己的产品，并且可以对两种数据库的优势尽量的发挥，取长补短，MySQL数据库反而发展的越来越好。
最新版本的MYSQL数据库配备上了管理工具，因为甲骨文公司属于老牌的数据库厂商，对数据库的客户端工具自然有其他下线厂商进行研发配套，这些旁枝末节的事情并没有投入很大的精力，造成的结果就是程序开发人员还是习惯使用传统的Navicat for MySQL或者SQLyog这些MySQL数据库管理工具，大部分数据库开发调试人员还是习惯于视窗情况下看到相关数据。不管是越来越强的MySQL数据库还是市面上广泛流传的各种MySQL数据库客户端，MySQL数据库能实现本课题的开发，那么选择MySQL作为数据库是没有问题的。
第三章 系统分析
提前通过各种渠道，比如图书馆，电脑上的网站等渠道获取跟本系统有关联的资料，同时设计调查问卷，让系统的使用者参与调查，了解其对系统的需求，然后进行系统的分析，确定本系统的开发可行性，确定本系统的功能等内容。
3.1可行性分析
这部分内容主要从开发的角度和运行使用的角度等层面研究系统，确定是否投资系统，为进一步开展工作提供理论依据。
3.1.1技术可行性
本系统采用的技术和开发类语言都具备丰厚的理论基础，同时这些开发技术和开发语言在市面上都得到了广泛运用，很多功能实现的源码都以模块化的方式通过网络进行了公开，所以本系统可以参考这些代码实现功能。因此，系统开发技术可行。
3.1.2操作可行性
网上医院预约挂号系统根据用户阅读习惯对系统内容进行排版布局，把系统页面中的关键位置用来设置导航条，可以方便用户第一时间找到需要的内容，同时，页面中也会设置一些提示，用于帮助用户操作系统，因此，系统操作可行。
3.1.3经济可行性
本系统需要在硬件设备上配置开发环境，就可以开展系统的开发工作。由于本系统并不是商业化程序，所以本人学习用的笔记本，或机房电脑都符合要求。对于开发环境的配置问题，可以通过网络直接下载安装，期间并不收取费用。因此，系统经济可行。
以上就是从技术，操作，经济的层面研究系统，最终确定系统可以开展。
3.2系统流程分析
要访问网上医院预约挂号系统，需要符合要求的身份，证明访问者身份的信息就是在登录界面需要填写的信息，其中有用户名，有密码。在登录界面，系统后台也有专门编写的安全验证机制，只有信息匹配的访问者才有资格进入系统。具体流程见下图。如果访问者提供的信息在数据库中没有记录，就表明该访问者没有权限，也就无法享受系统提供的服务。
图3-1 操作流程图
在网上医院预约挂号系统里面，任何填充的数据都要经过合法性验证，具体流程见下图。只有符合条件的数据才可以保存。
图3-2 添加信息流程图
经过时间的改变，系统里面的很多数据也需要更新，更新时，同样需要检查更新的数据是否合法，具体流程见下图。只有判断符合要求的数据最终才可以保存。
图3-3 修改信息流程图
为了避免操作者大意误删数据，任何需要删除的数据，都需要反复确认，具体流程见下图。删除的数据将不会在页面中显示。
图3-4 删除信息流程图
3.3系统性能分析
用户使用系统，一是为了阅读需要的信息；二是为了享受系统提供的服务。因此一个质量较好的系统就更容易让用户频繁使用。而能够反馈系统的质量的信息就是系统的性能。常见的能够表示系统性能的指标有安全性，系统可扩展性，数据完整性等。接下来就对这些指标进行介绍。
3.3.1数据完整性
只要是系统中的数据，其长期保存在数据库里面，就要求其具备可靠性。这样才能发挥出数据具备的参考价值。一般来说，为了保证数据信息是准确的，并且可靠的，在数据处理上，包括录入数据，编辑数据等，都要求数据信息是完整登记的。同时，系统中的数据其自身需要具备完整性外，也要求数据之间产生的关系也要具备完整性。另外，在数据库中填充信息时，同样的信息应该以同样的方式出现在不同的表中。对于数据进行完整性定义，也是方便后期对数据的使用和查看。
3.3.2系统可扩展性
站在当前用户需求的角度考虑问题具有一定的局限性，由此设计的系统也一样。为了保护开发系统的财产，同时也为了让系统长远立足市场，系统开发人员就需要充分预留系统的空间，让系统在未来的日子里可以扩充功能，并进行更新和升级。这就是系统具备可扩展性的表现。
3.3.3系统安全性
系统在投入使用中，用户与系统的交互会产生数据，比如插入数据，编辑数据等操作都会产生数据。而作为系统的后台支持的数据库，主要任务就是保存这些数据。为了不让数据信息被窃取或者泄露，也是为了对系统的安全性进行保证，所以市面上也出现了很多的加密技术，其中MD5单向加密技术在系统中运用得最多。其原因有三点：
第一点，面对任意两段明文，在经过MD5加密处理后，它们的密文不一样；
第二点，面对任意一段明文，进行MD5加密处理后，其密文不变；
第三点，破解MD5加密的数据非常困难；
目前，关于MD5加密技术的代码已经可以从网站上下载，可以直接将模块化的代码在系统中直接引用。一般来说，用户注册的数据还有管理员登录系统使用的数据都是很重要的资源，所以这部分数据常常会经过加密处理，这样也就消除了系统安全上的隐患。
3.4系统功能分析
这部分内容在系统分析环节比较重要，它直接关系本系统开发的进展。无论是设计，还是实现，都是在本系统调研的功能的基础上进行。
为了直观显示系统的功能，运用用例图这样的工具显示分析的结果。分析的管理员功能如下。管理员除了管理医生，科室和用户外，也能管理用户预约挂号信息，下载用户病例，发布健康资讯，管理客服聊天信息。
图3-5 管理员用例图
为了直观显示系统的功能，运用用例图这样的工具显示分析的结果。分析的医生功能如下。医生管理本人的坐诊信息，审核预约挂号，管理用户就诊病例。
图3-6 医生用例图
为了直观显示系统的功能，运用用例图这样的工具显示分析的结果。分析的用户功能如下。用户在前台查看医生坐诊，对医生预约挂号，评价并收藏医生，查看健康资讯，联系客服，用户在后台支付挂号价格，下载病例。
图3-7 用户用例图
第四章 系统设计
设计一个系统不单单是设计系统的页面，可以说系统设计其本质是一个结合了众多设计过程的比较复杂的系统工程。一般来说，在完成系统设计时，需要了解和掌握很多设计的知识，有界面布局技术的知识，页面采用的字体和颜色的运用，还有页面空白的规范使用等，如何将这些元素进行组合，让页面可以直观表达信息内容的同时，也能维持页面整体的美观。
4.1 系统设计思想
系统开发必然需要统一设计思想。根据这个设计思想指导系统的开发，可以加快系统开发进程。根据目前用户对网上医院预约挂号系统的需求，确定下述原则即为本系统的设计思想。
（1）实用性：本系统依照用户需求设计功能，遵循用户使用方便的原则，把用户在实际工作中的各个操作细节也充分考虑进来，让使用者在没有系统操作说明书的情况下，也能很容易的完成系统的操作。
（2）先进性：为了让本系统具备高性能，设计时，需要把目前的各种成熟技术加以考虑，比如软件开发技术也要考虑进去，比如计算机技术也需要进行考虑。对于系统结构的选择，本系统将毫不犹豫的选择成熟先进的B/S结构，方便开发的同时，对于后期的维护也提供了便利。
（3）高安全性：设计本系统时，对于一些系统的关键数据要严加看管，比如管理员本人的账号和密码，一定要加密保存在数据库里面。除此以外，也需要充分使用安全措施对用户的共享资源进行保护。
（4）可维护性：设计时，要提前考虑本系统的可维护性，因为一个便于维护的系统在后期产生的维护成本将会大大降低。维护一般包括软硬件的维护还有对于网络的维护等。
（5）可扩展性：重新开发一个新系统相比在原有系统上升级，会花费大量的资金和精力，由此，一个好的系统必定具备良好的可扩展性。在用户需求变动的情况下，可以通过系统的更新和升级来持续满足用户需求，这样的系统就具备了可扩展性。
4.2功能结构设计
这部分内容使用结构图这样的工具，显示设计结果，设计的管理员功能见下图。管理员除了管理医生，科室和用户外，也能管理用户预约挂号信息，下载用户病例，发布健康资讯，管理客服聊天信息。
图4-1 管理员功能结构图
设计的医生功能见下图。医生管理本人的坐诊信息，审核预约挂号，管理用户就诊病例。
图4-2 医生功能结构图
设计的用户功能见下图。用户在前台查看医生坐诊，对医生预约挂号，评价并收藏医生，查看健康资讯，联系客服，用户在后台支付挂号价格，下载病例。
图4-3 用户功能结构图
4.3数据库设计
现如今，关系数据库已经广泛占据了市场。其具有坚实的理论基础，并且它可以很好的支持SQL这样的查询语言。所以，大部分程序的后台数据库几乎都是关系数据库。它们被用于长期对程序数据进行保存，采用的方式就是正确使用SQL语句在数据库中完成数据的插入，修改，删除等操作。
4.3.1 数据库E-R图
系统设计的内容不仅仅是对功能进行模块设计，它也包括了对数据库进行设计。功能设计这部分内容已经完成了，接下来进行的数据库设计也要根据规定的流程进行。
数据库设计这部分内容也需要参照用户的需求来完成。同时为了方便展示数据库中存在的各种关系，需要使用到E-R图，并运用E-R图中常见的符号来表示用户需求中的数据内容。所以，在建立E-R模型前，需要把用户需求的数据信息进行拆分并分析，并确定实体，实体特征，还有它们之间的关联，然后选择某个绘制E-R模型的工具比如Visio,亿图，Navicat等，用规定的符号去表示这些数据。这些常用的符号分别是矩形，菱形，椭圆，它们表示的内容分别是实体，关系，属性。
（1）设计的医生实体，还有其属性见下图。
图4-3 医生实体属性图
（2）设计的医生坐诊实体，还有其属性见下图。
图4-4 医生坐诊实体属性图
（3）设计的用户实体，还有其属性见下图。
图4-5 用户实体属性图
- 设计的用户病例实体，还有其属性见下图。
图4-6 用户病例实体属性图
- 设计的预约挂号实体，还有其属性见下图。
图4-7 预约挂号实体属性图
（6）设计上述实体间关系见下图。
图4-8 实体间关系E-R图
4.3.2 数据库表结构
很多时候，在进行数据表的存储结构的设计时，都会遇到一些困扰，比如每张数据表如何命名，如何设计每张数据表里面的字段，如何为各个字段进行命名，以及如何设置字段的取值范围等信息。很多初学者，在进行表结构设计时，无论是对表进行命名，还是对字段进行命名，都是采用中文的方式，导致在编码阶段，在对数据进行操作时，总是报错，影响编码人员的开发速度，而且一旦数据表结构建立之后，后期进行修改也比较麻烦。因为设计数据表的结构，就意味着程序中需要长期保存的数据都是根据这样的结构进行保存的，在后面的使用中，无论是程序数据往数据表中写入，还是需要编辑或删除数据，都是按照这个规则进行。如此说来，设计数据库也是非常重要的任务，它关系到后面程序的开发，也关系到程序的运行使用。
通常在设计数据表结构时，会把前面设计的E-R图进行表结构的转化。把实体用来代表数据表，把其属性，也就是椭圆形代表的内容用来表示数据表中的字段，然后根据程序对于数据的存储要求，设计字段的类型和长度。比如用户的年龄可以用int（整数型），设置其长度为4或者6等。总之，数据表结构一旦建立，就可以往里面填充数据了。
表4-1 客服聊天信息表
| 字段 | 类型 | 空 | 默认 | 注释 |
|---|---|---|---|---|
| id | bigint(20) | 否 | 主键 | |
| addtime | timestamp | 否 | CURRENT_TIMESTAMP | 创建时间 |
| userid | bigint(20) | 否 | 用户id | |
| adminid | bigint(20) | 是 | NULL | 管理员id |
| ask | longtext | 是 | NULL | 提问 |
| reply | longtext | 是 | NULL | 回复 |
| isreply | int(11) | 是 | NULL | 是否回复 |
表4-2 科室信息表
| 字段 | 类型 | 空 | 默认 | 注释 |
|---|---|---|---|---|
| id | bigint(20) | 否 | 主键 | |
| addtime | timestamp | 否 | CURRENT_TIMESTAMP | 创建时间 |
| keshi | varchar(200) | 否 | 科室 | |
表4-3 医生信息表
| 字段 | 类型 | 空 | 默认 | 注释 |
|---|---|---|---|---|
| id | bigint(20) | 否 | 主键 | |
| addtime | timestamp | 否 | CURRENT_TIMESTAMP | 创建时间 |
| yishenggonghao | varchar(200) | 否 | 医生工号 | |
| mima | varchar(200) | 否 | 密码 | |
| yishengxingming | varchar(200) | 否 | 医生姓名 | |
| xingbie | varchar(200) | 是 | NULL | 性别 |
| touxiang | varchar(200) | 是 | NULL | 头像 |
| zhicheng | varchar(200) | 是 | NULL | 职称 |
| keshi | varchar(200) | 是 | NULL | 科室 |
| lianxidianhua | varchar(200) | 是 | NULL | 联系电话 |
| youxiang | varchar(200) | 是 | NULL | 邮箱 |
| money | float | 是 | 0 | 余额 |
表4-4 医生坐诊信息表
| 字段 | 类型 | 空 | 默认 | 注释 |
|---|---|---|---|---|
| id | bigint(20) | 否 | 主键 | |
| addtime | timestamp | 否 | CURRENT_TIMESTAMP | 创建时间 |
| yishenggonghao | varchar(200) | 否 | 医生工号 | |
| yishengxingming | varchar(200) | 否 | 医生姓名 | |
| xingbie | varchar(200) | 是 | NULL | 性别 |
| touxiang | varchar(200) | 是 | NULL | 头像 |
| zhicheng | varchar(200) | 是 | NULL | 职称 |
| keshi | varchar(200) | 是 | NULL | 科室 |
| youxiang | varchar(200) | 是 | NULL | 邮箱 |
| shanzhanglingyu | varchar(200) | 是 | NULL | 擅长领域 |
| zuozhenshijian | varchar(200) | 是 | NULL | 坐诊时间 |
| guahaojiage | int(11) | 否 | 挂号价格 | |
| gerenjieshao | longtext | 是 | NULL | 个人介绍 |
表4-5 用户信息表
| 字段 | 类型 | 空 | 默认 | 注释 |
|---|---|---|---|---|
| id | bigint(20) | 否 | 主键 | |
| addtime | timestamp | 否 | CURRENT_TIMESTAMP | 创建时间 |
| yonghuming | varchar(200) | 否 | 用户名 | |
| mima | varchar(200) | 否 | 密码 | |
| xingming | varchar(200) | 否 | 姓名 | |
| xingbie | varchar(200) | 是 | NULL | 性别 |
| touxiang | varchar(200) | 是 | NULL | 头像 |
| shouji | varchar(200) | 是 | NULL | 手机 |
| money | float | 是 | 0 | 余额 |
| blacklist | int(11) | 是 | 0 | 是否拉黑 |
表4-6 用户病例信息表
| 字段 | 类型 | 空 | 默认 | 注释 |
|---|---|---|---|---|
| id | bigint(20) | 否 | 主键 | |
| addtime | timestamp | 否 | CURRENT_TIMESTAMP | 创建时间 |
| binglibianhao | varchar(200) | 是 | NULL | 病例编号 |
| binglimingcheng | varchar(200) | 是 | NULL | 病例名称 |
| yonghuming | varchar(200) | 是 | NULL | 用户名 |
| xingming | varchar(200) | 是 | NULL | 姓名 |
| shouji | varchar(200) | 是 | NULL | 手机 |
| bingqing | varchar(200) | 是 | NULL | 病情 |
| jianchaxiangmu | varchar(200) | 是 | NULL | 检查项目 |
| jianchajieguo | varchar(200) | 是 | NULL | 检查结果 |
| yaodan | varchar(200) | 是 | NULL | 药单 |
| yizhu | longtext | 是 | NULL | 医嘱 |
| zhuyishixiang | varchar(200) | 是 | NULL | 注意事项 |
| binglifujian | varchar(200) | 是 | NULL | 病例附件 |
| riqi | date | 是 | NULL | 日期 |
| yishenggonghao | varchar(200) | 是 | NULL | 医生工号 |
| zhicheng | varchar(200) | 是 | NULL | 职称 |
表4-7 预约挂号信息表
| 字段 | 类型 | 空 | 默认 | 注释 |
|---|---|---|---|---|
| id | bigint(20) | 否 | 主键 | |
| addtime | timestamp | 否 | CURRENT_TIMESTAMP | 创建时间 |
| yuyuebianhao | varchar(200) | 是 | NULL | 预约编号 |
| yuyuemingcheng | varchar(200) | 否 | 预约名称 | |
| yishenggonghao | varchar(200) | 是 | NULL | 医生工号 |
| yishengxingming | varchar(200) | 是 | NULL | 医生姓名 |
| touxiang | varchar(200) | 是 | NULL | 头像 |
| yuyueshijian | datetime | 是 | NULL | 预约时间 |
| guahaojiage | varchar(200) | 是 | NULL | 挂号价格 |
| yuyueneirong | longtext | 是 | NULL | 预约内容 |
| beizhu | varchar(200) | 是 | NULL | 备注 |
| yonghuming | varchar(200) | 是 | NULL | 用户名 |
| xingming | varchar(200) | 是 | NULL | 姓名 |
| shouji | varchar(200) | 是 | NULL | 手机 |
| sfsh | varchar(200) | 是 | 否 | 是否审核 |
| shhf | longtext | 是 | NULL | 审核回复 |
| ispay | varchar(200) | 是 | 未支付 | 是否支付 |
第五章 系统实现
前面做的所有工作，都是为了给系统实现做准备。在系统实现期间，需要根据设计方案执行，通过运用编码技术实现一个可以处理事务的系统。
5.1管理员功能实现
5.1.1 客服管理
实现管理员权限的客服管理功能，其运行效果见下图。管理员管理客服聊天信息，一旦接收到用户提交的咨询信息，管理员即可回复。
图5-1 客服管理页面
5.1.2 医生管理
实现管理员权限的医生管理功能，其运行效果见下图。医生的基本资料，包括医生的联系电话，工号以及科室等可以让管理员增删改查管理。
图5-2 医生管理页面
5.1.3 用户管理
实现管理员权限的用户管理功能，其运行效果见下图。用户通过注册提交个人信息，管理员可以拉黑用户，也能对用户取消拉黑。
图5-3 用户管理页面
5.1.4 用户病例管理
实现管理员权限的用户病例管理功能，其运行效果见下图。用户病例附件可以让管理员下载查看，管理员也能查询用户的病例信息。
图5-4 用户病例管理页面
5.2医生功能实现
5.2.1 医生坐诊管理
实现医生权限的医生坐诊管理功能，其运行效果见下图。医生在个人后台增删改查本人的坐诊信息，坐诊信息描述了坐诊时间，挂号价格等。
图5-5 医生坐诊管理页面
5.2.2 预约挂号管理
实现医生权限的预约挂号管理功能，其运行效果见下图。用户对医生进行预约挂号，医生只需审核挂号，对前来就诊的用户登记病例信息。
图5-6 预约挂号管理页面
5.2.3 用户病例管理
实现医生权限的用户病例管理功能，其运行效果见下图。医生登记的用户病例资料都会显示在本页面，医生可以下载病例附件。
图5-7 用户病例管理页面
5.3用户功能实现
5.3.1 查看医生坐诊
实现用户权限的查看医生坐诊功能，其运行效果见下图。用户在本页面查看坐诊时间和挂号价格信息，点击预约挂号即可提交资料进行挂号，用户也能评价本页面显示的医生，或者点击红色五角星收藏医生。
图5-8 查看医生坐诊页面
5.3.2 联系客服
实现用户权限的联系客服功能，其运行效果见下图。用户在操作系统期间有疑问可以向客服进行咨询。
图5-9 联系客服页面
5.3.3 预约挂号
实现用户权限的预约挂号功能，其运行效果见下图。用户在前台提交了预约挂号信息之后，可以进入用户后台支付挂号的价格，查看挂号明细。
图5-10 预约挂号页面
5.3.4 用户病例
实现用户权限的用户病例功能，其运行效果见下图。用户就诊之后，医生会登记用户的病例，用户在本人的后台可以下载病例附件。
图5-11 用户病例页面
StoreupController.java
package com.controller;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Calendar;
import java.util.Map;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Date;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import com.utils.ValidatorUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.mapper.Wrapper;
import com.annotation.IgnoreAuth;
import com.entity.StoreupEntity;
import com.entity.view.StoreupView;
import com.service.StoreupService;
import com.service.TokenService;
import com.utils.PageUtils;
import com.utils.R;
import com.utils.MPUtil;
import com.utils.CommonUtil;
/**
* 收藏表
* 后端接口
* @author
* @email
* @date 2020-12-24 11:35:16
*/
@RestController
@RequestMapping("/storeup")
public class StoreupController {
@Autowired
private StoreupService storeupService;
/**
* 后端列表
*/
@RequestMapping("/page")
public R page(@RequestParam Map<String, Object> params,StoreupEntity storeup, HttpServletRequest request){
if(!request.getSession().getAttribute("role").toString().equals("管理员")) {
storeup.setUserid((Long)request.getSession().getAttribute("userId"));
}
EntityWrapper<StoreupEntity> ew = new EntityWrapper<StoreupEntity>();
PageUtils page = storeupService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, storeup), params), params));
request.setAttribute("data", page);
return R.ok().put("data", page);
}
/**
* 前端列表
*/
@RequestMapping("/list")
public R list(@RequestParam Map<String, Object> params,StoreupEntity storeup, HttpServletRequest request){
if(!request.getSession().getAttribute("role").toString().equals("管理员")) {
storeup.setUserid((Long)request.getSession().getAttribute("userId"));
}
EntityWrapper<StoreupEntity> ew = new EntityWrapper<StoreupEntity>();
PageUtils page = storeupService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, storeup), params), params));
request.setAttribute("data", page);
return R.ok().put("data", page);
}
/**
* 列表
*/
@RequestMapping("/lists")
public R list( StoreupEntity storeup){
EntityWrapper<StoreupEntity> ew = new EntityWrapper<StoreupEntity>();
ew.allEq(MPUtil.allEQMapPre( storeup, "storeup"));
return R.ok().put("data", storeupService.selectListView(ew));
}
/**
* 查询
*/
@RequestMapping("/query")
public R query(StoreupEntity storeup){
EntityWrapper< StoreupEntity> ew = new EntityWrapper< StoreupEntity>();
ew.allEq(MPUtil.allEQMapPre( storeup, "storeup"));
StoreupView storeupView = storeupService.selectView(ew);
return R.ok("查询收藏表成功").put("data", storeupView);
}
/**
* 后端详情
*/
@RequestMapping("/info/{id}")
public R info(@PathVariable("id") Long id){
StoreupEntity storeup = storeupService.selectById(id);
return R.ok().put("data", storeup);
}
/**
* 前端详情
*/
@RequestMapping("/detail/{id}")
public R detail(@PathVariable("id") Long id){
StoreupEntity storeup = storeupService.selectById(id);
return R.ok().put("data", storeup);
}
/**
* 后端保存
*/
@RequestMapping("/save")
public R save(@RequestBody StoreupEntity storeup, HttpServletRequest request){
storeup.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
//ValidatorUtils.validateEntity(storeup);
storeup.setUserid((Long)request.getSession().getAttribute("userId"));
storeupService.insert(storeup);
return R.ok();
}
/**
* 前端保存
*/
@RequestMapping("/add")
public R add(@RequestBody StoreupEntity storeup, HttpServletRequest request){
storeup.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
//ValidatorUtils.validateEntity(storeup);
storeup.setUserid((Long)request.getSession().getAttribute("userId"));
storeupService.insert(storeup);
return R.ok();
}
/**
* 修改
*/
@RequestMapping("/update")
public R update(@RequestBody StoreupEntity storeup, HttpServletRequest request){
//ValidatorUtils.validateEntity(storeup);
storeupService.updateById(storeup);//全部更新
return R.ok();
}
/**
* 删除
*/
@RequestMapping("/delete")
public R delete(@RequestBody Long[] ids){
storeupService.deleteBatchIds(Arrays.asList(ids));
return R.ok();
}
/**
* 提醒接口
*/
@RequestMapping("/remind/{columnName}/{type}")
public R remindCount(@PathVariable("columnName") String columnName, HttpServletRequest request,
@PathVariable("type") String type,@RequestParam Map<String, Object> map) {
map.put("column", columnName);
map.put("type", type);
if(type.equals("2")) {
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
Calendar c = Calendar.getInstance();
Date remindStartDate = null;
Date remindEndDate = null;
if(map.get("remindstart")!=null) {
Integer remindStart = Integer.parseInt(map.get("remindstart").toString());
c.setTime(new Date());
c.add(Calendar.DAY_OF_MONTH,remindStart);
remindStartDate = c.getTime();
map.put("remindstart", sdf.format(remindStartDate));
}
if(map.get("remindend")!=null) {
Integer remindEnd = Integer.parseInt(map.get("remindend").toString());
c.setTime(new Date());
c.add(Calendar.DAY_OF_MONTH,remindEnd);
remindEndDate = c.getTime();
map.put("remindend", sdf.format(remindEndDate));
}
}
Wrapper<StoreupEntity> wrapper = new EntityWrapper<StoreupEntity>();
if(map.get("remindstart")!=null) {
wrapper.ge(columnName, map.get("remindstart"));
}
if(map.get("remindend")!=null) {
wrapper.le(columnName, map.get("remindend"));
}
if(!request.getSession().getAttribute("role").toString().equals("管理员")) {
wrapper.eq("userid", (Long)request.getSession().getAttribute("userId"));
}
int count = storeupService.selectCount(wrapper);
return R.ok().put("count", count);
}
}
CommonController.java
package com.controller;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import org.apache.commons.lang3.StringUtils;
import org.json.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.ResourceUtils;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import com.annotation.IgnoreAuth;
import com.baidu.aip.face.AipFace;
import com.baidu.aip.face.MatchRequest;
import com.baidu.aip.util.Base64Util;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.mapper.Wrapper;
import com.entity.ConfigEntity;
import com.service.CommonService;
import com.service.ConfigService;
import com.utils.BaiduUtil;
import com.utils.FileUtil;
import com.utils.R;
/**
* 通用接口
*/
@RestController
public class CommonController{
@Autowired
private CommonService commonService;
@Autowired
private ConfigService configService;
private static AipFace client = null;
private static String BAIDU_DITU_AK = null;
@RequestMapping("/location")
public R location(String lng,String lat) {
if(BAIDU_DITU_AK==null) {
BAIDU_DITU_AK = configService.selectOne(new EntityWrapper<ConfigEntity>().eq("name", "baidu_ditu_ak")).getValue();
if(BAIDU_DITU_AK==null) {
return R.error("请在配置管理中正确配置baidu_ditu_ak");
}
}
Map<String, String> map = BaiduUtil.getCityByLonLat(BAIDU_DITU_AK, lng, lat);
return R.ok().put("data", map);
}
/**
* 人脸比对
*
* @param face1 人脸1
* @param face2 人脸2
* @return
*/
@RequestMapping("/matchFace")
public R matchFace(String face1, String face2, HttpServletRequest request) {
if(client==null) {
/*String AppID = configService.selectOne(new EntityWrapper<ConfigEntity>().eq("name", "AppID")).getValue();*/
String APIKey = configService.selectOne(new EntityWrapper<ConfigEntity>().eq("name", "APIKey")).getValue();
String SecretKey = configService.selectOne(new EntityWrapper<ConfigEntity>().eq("name", "SecretKey")).getValue();
String token = BaiduUtil.getAuth(APIKey, SecretKey);
if(token==null) {
return R.error("请在配置管理中正确配置APIKey和SecretKey");
}
client = new AipFace(null, APIKey, SecretKey);
client.setConnectionTimeoutInMillis(2000);
client.setSocketTimeoutInMillis(60000);
}
JSONObject res = null;
try {
File file1 = new File(request.getSession().getServletContext().getRealPath("/upload")+"/"+face1);
File file2 = new File(request.getSession().getServletContext().getRealPath("/upload")+"/"+face2);
String img1 = Base64Util.encode(FileUtil.FileToByte(file1));
String img2 = Base64Util.encode(FileUtil.FileToByte(file2));
MatchRequest req1 = new MatchRequest(img1, "BASE64");
MatchRequest req2 = new MatchRequest(img2, "BASE64");
ArrayList<MatchRequest> requests = new ArrayList<MatchRequest>();
requests.add(req1);
requests.add(req2);
res = client.match(requests);
System.out.println(res.get("result"));
} catch (FileNotFoundException e) {
e.printStackTrace();
return R.error("文件不存在");
} catch (IOException e) {
e.printStackTrace();
}
return R.ok().put("data", com.alibaba.fastjson.JSONObject.parse(res.get("result").toString()));
}
/**
* 获取table表中的column列表(联动接口)
* @param table
* @param column
* @return
*/
@RequestMapping("/option/{tableName}/{columnName}")
@IgnoreAuth
public R getOption(@PathVariable("tableName") String tableName, @PathVariable("columnName") String columnName,String level,String parent) {
Map<String, Object> params = new HashMap<String, Object>();
params.put("table", tableName);
params.put("column", columnName);
if(StringUtils.isNotBlank(level)) {
params.put("level", level);
}
if(StringUtils.isNotBlank(parent)) {
params.put("parent", parent);
}
List<String> data = commonService.getOption(params);
return R.ok().put("data", data);
}
/**
* 根据table中的column获取单条记录
* @param table
* @param column
* @return
*/
@RequestMapping("/follow/{tableName}/{columnName}")
@IgnoreAuth
public R getFollowByOption(@PathVariable("tableName") String tableName, @PathVariable("columnName") String columnName, @RequestParam String columnValue) {
Map<String, Object> params = new HashMap<String, Object>();
params.put("table", tableName);
params.put("column", columnName);
params.put("columnValue", columnValue);
Map<String, Object> result = commonService.getFollowByOption(params);
return R.ok().put("data", result);
}
/**
* 修改table表的sfsh状态
* @param table
* @param map
* @return
*/
@RequestMapping("/sh/{tableName}")
public R sh(@PathVariable("tableName") String tableName, @RequestBody Map<String, Object> map) {
map.put("table", tableName);
commonService.sh(map);
return R.ok();
}
/**
* 获取需要提醒的记录数
* @param tableName
* @param columnName
* @param type 1:数字 2:日期
* @param map
* @return
*/
@RequestMapping("/remind/{tableName}/{columnName}/{type}")
@IgnoreAuth
public R remindCount(@PathVariable("tableName") String tableName, @PathVariable("columnName") String columnName,
@PathVariable("type") String type,@RequestParam Map<String, Object> map) {
map.put("table", tableName);
map.put("column", columnName);
map.put("type", type);
if(type.equals("2")) {
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
Calendar c = Calendar.getInstance();
Date remindStartDate = null;
Date remindEndDate = null;
if(map.get("remindstart")!=null) {
Integer remindStart = Integer.parseInt(map.get("remindstart").toString());
c.setTime(new Date());
c.add(Calendar.DAY_OF_MONTH,remindStart);
remindStartDate = c.getTime();
map.put("remindstart", sdf.format(remindStartDate));
}
if(map.get("remindend")!=null) {
Integer remindEnd = Integer.parseInt(map.get("remindend").toString());
c.setTime(new Date());
c.add(Calendar.DAY_OF_MONTH,remindEnd);
remindEndDate = c.getTime();
map.put("remindend", sdf.format(remindEndDate));
}
}
int count = commonService.remindCount(map);
return R.ok().put("count", count);
}
/**
* 单列求和
*/
@RequestMapping("/cal/{tableName}/{columnName}")
@IgnoreAuth
public R cal(@PathVariable("tableName") String tableName, @PathVariable("columnName") String columnName) {
Map<String, Object> params = new HashMap<String, Object>();
params.put("table", tableName);
params.put("column", columnName);
Map<String, Object> result = commonService.selectCal(params);
return R.ok().put("data", result);
}
/**
* 分组统计
*/
@RequestMapping("/group/{tableName}/{columnName}")
@IgnoreAuth
public R group(@PathVariable("tableName") String tableName, @PathVariable("columnName") String columnName) {
Map<String, Object> params = new HashMap<String, Object>();
params.put("table", tableName);
params.put("column", columnName);
List<Map<String, Object>> result = commonService.selectGroup(params);
return R.ok().put("data", result);
}
/**
* （按值统计）
*/
@RequestMapping("/value/{tableName}/{xColumnName}/{yColumnName}")
@IgnoreAuth
public R value(@PathVariable("tableName") String tableName, @PathVariable("yColumnName") String yColumnName, @PathVariable("xColumnName") String xColumnName) {
Map<String, Object> params = new HashMap<String, Object>();
params.put("table", tableName);
params.put("xColumn", xColumnName);
params.put("yColumn", yColumnName);
List<Map<String, Object>> result = commonService.selectValue(params);
return R.ok().put("data", result);
}
}
CommonServiceImpl.java
package com.service.impl;
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.dao.CommonDao;
import com.service.CommonService;
/**
* 系统用户
* @author yangliyuan
* @date 2019年10月10日 上午9:17:59
*/
@Service("commonService")
public class CommonServiceImpl implements CommonService {
@Autowired
private CommonDao commonDao;
@Override
public List<String> getOption(Map<String, Object> params) {
return commonDao.getOption(params);
}
@Override
public Map<String, Object> getFollowByOption(Map<String, Object> params) {
return commonDao.getFollowByOption(params);
}
@Override
public void sh(Map<String, Object> params) {
commonDao.sh(params);
}
@Override
public int remindCount(Map<String, Object> params) {
return commonDao.remindCount(params);
}
@Override
public Map<String, Object> selectCal(Map<String, Object> params) {
return commonDao.selectCal(params);
}
@Override
public List<Map<String, Object>> selectGroup(Map<String, Object> params) {
return commonDao.selectGroup(params);
}
@Override
public List<Map<String, Object>> selectValue(Map<String, Object> params) {
return commonDao.selectValue(params);
}
}
background.js
(function () {
var onlineImage,
backupStyle = editor.queryCommandValue('background');
window.onload = function () {
initTabs();
initColorSelector();
};
/* 初始化tab标签 */
function initTabs(){
var tabs = $G('tabHeads').children;
for (var i = 0; i < tabs.length; i++) {
domUtils.on(tabs[i], "click", function (e) {
var target = e.target || e.srcElement;
for (var j = 0; j < tabs.length; j++) {
if(tabs[j] == target){
tabs[j].className = "focus";
var contentId = tabs[j].getAttribute('data-content-id');
$G(contentId).style.display = "block";
if(contentId == 'imgManager') {
initImagePanel();
}
}else {
tabs[j].className = "";
$G(tabs[j].getAttribute('data-content-id')).style.display = "none";
}
}
});
}
}
/* 初始化颜色设置 */
function initColorSelector () {
var obj = editor.queryCommandValue('background');
if (obj) {
var color = obj['background-color'],
repeat = obj['background-repeat'] || 'repeat',
image = obj['background-image'] || '',
position = obj['background-position'] || 'center center',
pos = position.split(' '),
x = parseInt(pos[0]) || 0,
y = parseInt(pos[1]) || 0;
if(repeat == 'no-repeat' && (x || y)) repeat = 'self';
image = image.match(/url[\s]*\(([^\)]*)\)/);
image = image ? image[1]:'';
updateFormState('colored', color, image, repeat, x, y);
} else {
updateFormState();
}
var updateHandler = function () {
updateFormState();
updateBackground();
}
domUtils.on($G('nocolorRadio'), 'click', updateBackground);
domUtils.on($G('coloredRadio'), 'click', updateHandler);
domUtils.on($G('url'), 'keyup', function(){
if($G('url').value && $G('alignment').style.display == "none") {
utils.each($G('repeatType').children, function(item){
item.selected = ('repeat' == item.getAttribute('value') ? 'selected':false);
});
}
updateHandler();
});
domUtils.on($G('repeatType'), 'change', updateHandler);
domUtils.on($G('x'), 'keyup', updateBackground);
domUtils.on($G('y'), 'keyup', updateBackground);
initColorPicker();
}
/* 初始化颜色选择器 */
function initColorPicker() {
var me = editor,
cp = $G("colorPicker");
/* 生成颜色选择器ui对象 */
var popup = new UE.ui.Popup({
content: new UE.ui.ColorPicker({
noColorText: me.getLang("clearColor"),
editor: me,
onpickcolor: function (t, color) {
updateFormState('colored', color);
updateBackground();
UE.ui.Popup.postHide();
},
onpicknocolor: function (t, color) {
updateFormState('colored', 'transparent');
updateBackground();
UE.ui.Popup.postHide();
}
}),
editor: me,
onhide: function () {
}
});
/* 设置颜色选择器 */
domUtils.on(cp, "click", function () {
popup.showAnchor(this);
});
domUtils.on(document, 'mousedown', function (evt) {
var el = evt.target || evt.srcElement;
UE.ui.Popup.postHide(el);
});
domUtils.on(window, 'scroll', function () {
UE.ui.Popup.postHide();
});
}
/* 初始化在线图片列表 */
function initImagePanel() {
onlineImage = onlineImage || new OnlineImage('imageList');
}
/* 更新背景色设置面板 */
function updateFormState (radio, color, url, align, x, y) {
var nocolorRadio = $G('nocolorRadio'),
coloredRadio = $G('coloredRadio');
if(radio) {
nocolorRadio.checked = (radio == 'colored' ? false:'checked');
coloredRadio.checked = (radio == 'colored' ? 'checked':false);
}
if(color) {
domUtils.setStyle($G("colorPicker"), "background-color", color);
}
if(url && /^\//.test(url)) {
var a = document.createElement('a');
a.href = url;
browser.ie && (a.href = a.href);
url = browser.ie ? a.href:(a.protocol + '//' + a.host + a.pathname + a.search + a.hash);
}
if(url || url === '') {
$G('url').value = url;
}
if(align) {
utils.each($G('repeatType').children, function(item){
item.selected = (align == item.getAttribute('value') ? 'selected':false);
});
}
if(x || y) {
$G('x').value = parseInt(x) || 0;
$G('y').value = parseInt(y) || 0;
}
$G('alignment').style.display = coloredRadio.checked && $G('url').value ? '':'none';
$G('custom').style.display = coloredRadio.checked && $G('url').value && $G('repeatType').value == 'self' ? '':'none';
}
/* 更新背景颜色 */
function updateBackground () {
if ($G('coloredRadio').checked) {
var color = domUtils.getStyle($G("colorPicker"), "background-color"),
bgimg = $G("url").value,
align = $G("repeatType").value,
backgroundObj = {
"background-repeat": "no-repeat",
"background-position": "center center"
};
if (color) backgroundObj["background-color"] = color;
if (bgimg) backgroundObj["background-image"] = 'url(' + bgimg + ')';
if (align == 'self') {
backgroundObj["background-position"] = $G("x").value + "px " + $G("y").value + "px";
} else if (align == 'repeat-x' || align == 'repeat-y' || align == 'repeat') {
backgroundObj["background-repeat"] = align;
}
editor.execCommand('background', backgroundObj);
} else {
editor.execCommand('background', null);
}
}
/* 在线图片 */
function OnlineImage(target) {
this.container = utils.isString(target) ? document.getElementById(target) : target;
this.init();
}
OnlineImage.prototype = {
init: function () {
this.reset();
this.initEvents();
},
/* 初始化容器 */
initContainer: function () {
this.container.innerHTML = '';
this.list = document.createElement('ul');
this.clearFloat = document.createElement('li');
domUtils.addClass(this.list, 'list');
domUtils.addClass(this.clearFloat, 'clearFloat');
this.list.id = 'imageListUl';
this.list.appendChild(this.clearFloat);
this.container.appendChild(this.list);
},
/* 初始化滚动事件,滚动到地步自动拉取数据 */
initEvents: function () {
var _this = this;
/* 滚动拉取图片 */
domUtils.on($G('imageList'), 'scroll', function(e){
var panel = this;
if (panel.scrollHeight - (panel.offsetHeight + panel.scrollTop) < 10) {
_this.getImageData();
}
});
/* 选中图片 */
domUtils.on(this.container, 'click', function (e) {
var target = e.target || e.srcElement,
li = target.parentNode,
nodes = $G('imageListUl').childNodes;
if (li.tagName.toLowerCase() == 'li') {
updateFormState('nocolor', null, '');
for (var i = 0, node; node = nodes[i++];) {
if (node == li && !domUtils.hasClass(node, 'selected')) {
domUtils.addClass(node, 'selected');
updateFormState('colored', null, li.firstChild.getAttribute("_src"), 'repeat');
} else {
domUtils.removeClasses(node, 'selected');
}
}
updateBackground();
}
});
},
/* 初始化第一次的数据 */
initData: function () {
/* 拉取数据需要使用的值 */
this.state = 0;
this.listSize = editor.getOpt('imageManagerListSize');
this.listIndex = 0;
this.listEnd = false;
/* 第一次拉取数据 */
this.getImageData();
},
/* 重置界面 */
reset: function() {
this.initContainer();
this.initData();
},
/* 向后台拉取图片列表数据 */
getImageData: function () {
var _this = this;
if(!_this.listEnd && !this.isLoadingData) {
this.isLoadingData = true;
var url = editor.getActionUrl(editor.getOpt('imageManagerActionName')),
isJsonp = utils.isCrossDomainUrl(url);
ajax.request(url, {
'timeout': 100000,
'dataType': isJsonp ? 'jsonp':'',
'data': utils.extend({
start: this.listIndex,
size: this.listSize
}, editor.queryCommandValue('serverparam')),
'method': 'get',
'onsuccess': function (r) {
try {
var json = isJsonp ? r:eval('(' + r.responseText + ')');
if (json.state == 'SUCCESS') {
_this.pushData(json.list);
_this.listIndex = parseInt(json.start) + parseInt(json.list.length);
if(_this.listIndex >= json.total) {
_this.listEnd = true;
}
_this.isLoadingData = false;
}
} catch (e) {
if(r.responseText.indexOf('ue_separate_ue') != -1) {
var list = r.responseText.split(r.responseText);
_this.pushData(list);
_this.listIndex = parseInt(list.length);
_this.listEnd = true;
_this.isLoadingData = false;
}
}
},
'onerror': function () {
_this.isLoadingData = false;
}
});
}
},
/* 添加图片到列表界面上 */
pushData: function (list) {
var i, item, img, icon, _this = this,
urlPrefix = editor.getOpt('imageManagerUrlPrefix');
for (i = 0; i < list.length; i++) {
if(list[i] && list[i].url) {
item = document.createElement('li');
img = document.createElement('img');
icon = document.createElement('span');
domUtils.on(img, 'load', (function(image){
return function(){
_this.scale(image, image.parentNode.offsetWidth, image.parentNode.offsetHeight);
}
})(img));
img.width = 113;
img.setAttribute('src', urlPrefix + list[i].url + (list[i].url.indexOf('?') == -1 ? '?noCache=':'&noCache=') + (+new Date()).toString(36) );
img.setAttribute('_src', urlPrefix + list[i].url);
domUtils.addClass(icon, 'icon');
item.appendChild(img);
item.appendChild(icon);
this.list.insertBefore(item, this.clearFloat);
}
}
},
/* 改变图片大小 */
scale: function (img, w, h, type) {
var ow = img.width,
oh = img.height;
if (type == 'justify') {
if (ow >= oh) {
img.width = w;
img.height = h * oh / ow;
img.style.marginLeft = '-' + parseInt((img.width - w) / 2) + 'px';
} else {
img.width = w * ow / oh;
img.height = h;
img.style.marginTop = '-' + parseInt((img.height - h) / 2) + 'px';
}
} else {
if (ow >= oh) {
img.width = w * ow / oh;
img.height = h;
img.style.marginLeft = '-' + parseInt((img.width - w) / 2) + 'px';
} else {
img.width = w;
img.height = h * oh / ow;
img.style.marginTop = '-' + parseInt((img.height - h) / 2) + 'px';
}
}
},
getInsertList: function () {
var i, lis = this.list.children, list = [], align = getAlign();
for (i = 0; i < lis.length; i++) {
if (domUtils.hasClass(lis[i], 'selected')) {
var img = lis[i].firstChild,
src = img.getAttribute('_src');
list.push({
src: src,
_src: src,
floatStyle: align
});
}
}
return list;
}
};
dialog.onok = function () {
updateBackground();
editor.fireEvent('saveScene');
};
dialog.oncancel = function () {
editor.execCommand('background', backupStyle);
};
})();
声明
本博客适用于广泛的学术和教育用途，包括但不限于个人学习、开发设计，产品设计。仅供学习参考，旨在为读者提供深入理解和学术研究的材料。
扫一扫
1033
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
