@TOC
springboot287基于javaEE的校园二手书交易平台的设计与实现
第1章 绪论
1.1 研究背景
互联网概念的产生到如今的蓬勃发展，用了短短的几十年时间就风靡全球，使得全球各个行业都进行了互联网的改造升级，标志着互联网浪潮的来临。在这个新的时代，各行各业都充分考虑互联网是否能与本行业进行结合，是否能解决本行业或者本行业中某些方面的自古以来的痛点。长期以来，数据内容，数据传播，数据储存等都是一门门专业的内容，因为需要记住的内容很多，造成古人的言简意赅，如今互联网的到来让数据更加的清晰好认不复杂，一目了然不出错，毕竟在整个历史上数据的丢失，传承的断代，都是因为数据不能好好的保存，不能好好的流传。当年的年代用互联网思维和互联网技术，对大量数据的录入更新，存储汇总，备份分析方面，使得远远的超过传统的数据管理技术。在这样的时代潮流下，采用新技术开发新软件，对传统行业进行革命性的改造成为了当今的主流。本次开发校园二手书交易平台，解决了图书信息信息管理关于数据方面的管理分析，存储传输的痛点，不仅仅对管理员提供了便利，还能提高用户的满意度。
1.2目的和意义
此次校园二手书交易平台的开发，需要用到的知识不仅涉及到界面设计与功能设计方面的知识，还需要涉及到数据库与编程语言上面的知识，这些知识点对于一个即将毕业的学生来说，一是为了巩固在校所学相关专业知识；二是为了让学生学会如何将专业理论知识运用于现实软件的开发过程；三是让学生明白知识是无穷无尽的，要时刻明白活到老学到老的真正含义，让学生要养成时刻学习的习惯，同时也要相信通过此次程序的开发，会让学生对于专业知识的理解与软件开发水平的提高有着极大的帮助。
1.3 论文研究内容
论文设计的结构也是依照程序开发的流程进展的，也涉及到功能需求分析，功能设计与实现，程序测试等流程。
绪论：讲解课题的背景与意义，展示论文结构。
程序开发技术：讲解程序运用到的工具与技术知识。
系统分析：讲解程序的功能需求与开发可行性问题。
系统设计：讲解程序的功能与数据库的设计。
系统实现：讲解程序功能与界面实现。
系统测试：讲解程序的功能测试。
第2章 程序开发技术
2.1 Mysql数据库
为了更容易理解Mysql数据库，接下来就对其具备的主要特征进行描述。
（1）首选Mysql数据库也是为了节省开发资金，因为网络上对Mysql的源码都已进行了公开展示，开发者根据程序开发需要可以进行下载，并做一些改动就可以使用在程序中，可以推动开发者开发此程序的开发进度。
（2）SQL数据语言在Mysql里面也同样适用
（3）Mysql不仅可以支持多种编程语言，比如在校期间学到的C语言，Java语言，以及课后接触的PHP语言，C++语言等编程语言，它都能很好的支持，而且Mysql的安装与使用还不挑剔使用平台。
（4）Mysql可以支持具有千万条数据记录的数据库，电脑操作系统在进行首次安装或者是重装时，可以根据需要选择安装32位或64位操作系统，这两种操作系统对表文件的支持力度不一样，32位的操作系统最多可以存放4GB的表文件，64位操作系统最多可以存放8TB的表文件。
（5）Mysql数据库可以通过GPL协议进行个性化定制，需要开发者自己对数据库的源代码进行修改，以此开发出属于自己的Mysql。
2.2 Java语言
程序开发语言有很多，但是截至目前，Java语言在IT领域内，仍然是最被认可，以及被广泛运用的编写语言之一，因此在选择此程序的编写语言上，果断选择这门编程语言进行程序开发。可以说经过了这么多年的发展，Java语言不仅在Web开发领域有了突出性贡献，而且在大数据开发领域以及Android开发领域都得到了广泛运用。由于Java语言拥有较强的扩展性能，并且表现出的稳定性能，让其成为大型后端系统开发语言首选，现如今，Java语言也成为了一种常用的互联网平台的解决方案。
作为一种源码在网络上开源的面向对象的程序开发Java语言，由它开发完成的程序是不可能直接运行在各大平台的，Java程序的运行，需要在操作平台上配置其运行的环境，包括数据库软件与Java程序开发软件等工具的安装与配置。在Win7，Win10或其它操作平台上配置Java程序运行环境，只要环境配置成功，Java程序都可以运行起来。
第3章 系统分析
在进行系统分析之前，需要从网络上或者是图书馆的开发类书籍中收集大量的资料，因为这个环节也是帮助即将开发的程序软件制定一套最优的方案，一旦确定了程序软件需要具备的功能，就意味着接下来的工作和任务都是围绕着这个方案执行的，所以系统分析需要对程序功能反复进行思考和研究。
3.1可行性分析
开发一款系统软件之前，用户都会思考这个软件程序值不值得去开发，把开发软件过程中可能涉及到的问题罗列出来，并一个个分析解决，以此来确定开发这款程序软件是否有必要，这样的分析方法也能帮助用户降低损失，不至于开发者开发进度进行到一半之后，突然遇到问题就放弃对软件的开发，到那时，资金损失，人力投入等方面就损耗太大了。
3.1.1技术可行性分析
此次开发程序使用到的开发工具有：Eclipse，Mysql等工具，使用的开发语言是Java，选择的开发工具和开发语言都是在大学课堂接触并学习过，后期因为自己也比较感兴趣，所以也通过网络渠道，或借助图书馆的开发类书籍进行过软件开发知识的系统学习，让自己有了一定的知识积累，加上自己在校期间也独立开发过一些软件作品，也积累了一定的开发经验，所以这次毕设作品的制作在技术上无须担忧过多。
3.1.2经济可行性分析
目前的信息时代，对信息的管理趋于高效化，便捷化，这也是计算机大力普及所带来的便利，此程序软件在设备选用上，依靠的是比较大众的电脑设备，对电脑的配置没有过多要求，一般学校的计算机机房的电脑都可以满足程序开发需求，另外，开发出此款程序，让信息处理变得高效率，其所带来的高效益是远超程序开发的低成本的，因此程序开发的资金投入是可以忽略不计的。
3.1.3操作可行性分析
程序软件的操作界面是符合大众审美的需求，功能模块的布局也是类似于社会上同种类型的软件，因此使用者操作该软件可以无需培训就上手。加上现在计算机入驻各家各户，大部分人的计算机操作水平都比较高，这样的局面也表明开发出来的程序在操作性问题上也是不用担心的。
综合上面的可行性论证，基本可以确定程序开发完全可行。
3.2系统运行环境
程序经过编码可以实现对程序设计的功能。但是编码实现时需要一定的配置环境，包括了电脑上的硬件环境，也包括在电脑操作系统上安装的软件环境。
硬件环境：一台可以正常使用并能够上网的笔记本或者是电脑，电脑内存最低要求4个G，电脑的中央处理器可以配置i5CPU。
软件环境：运用的微软操作系统是比较稳定的win7旗舰版系统，采用比较熟练360安全浏览器，并在此系统上通过浏览器下载安装好Eclipse软件，下载安装好MYSQL软件等。
3.3系统流程分析
分析程序的流程，涉及到程序的整体操作流程，通过分析与设计，绘制的程序操作流程图见下图。此程序为了确保安全，会让使用者通过登录模块验证信息，符合要求的使用者才有权限操作程序。
图3-1 程序操作流程图
程序处理数据会涉及到数据的录入环节，绘制的添加流程见下图。程序录入数据过程中，始终与数据库保持同步。
图3-2 信息添加流程图
程序里面的数据也会出现错误，因此就有相应的修改数据的功能，绘制的程序修改流程见下图。此过程也是跟后台数据库进行数据同步显示。
图3-3信息修改流程图
程序数据存放于数据仓库，有时也会涉及到数据删除，此过程对应的流程图见下图。数据信息被删除之后，数据库里面也就没有了该数据信息了。
图3-4 信息删除流程图
第4章 系统设计
4.1 系统设计的原则
在系统设计过程中，也需要遵循相应的设计原则，这些设计原则可以帮助设计者在短时间内设计出符合设计规范的设计方案。设计原则主要有可靠性，安全性，可定制化，可扩展性，可维护性，可升级性以及客户体验等原则。下面就对这些原则进行简要阐述。
可靠性：一个软件是否可靠决定了其是否被用户使用，设计不可靠的软件，用户很容易就遗弃；
安全性：程序软件承担了信息的保存与管理等事务，安全性不足的软件会导致使用者承担巨大的损失；所以系统安全也是需要考虑进入的；
可定制化：市场环境从来都不是一直固定不变，面对客户群体的改变，以及使用环境的改变，市场需求的改变等因素，程序软件也要易于调整以适应各种变化；
可扩展性：程序软件在运行使用期间，也需要及时引进当下的新技术来进行系统优化，主要就是在系统功能层面，系统性能层面上进行相应的扩展，只有这样才能让系统在实际生活中继续占有市场；
可维护性：程序软件的维护需要一定量的资金，不管是排除现有程序错误，还是变更软件的现有需求，都需要在软件技术上投入一定资金，所以易于维护的软件程序就可以降低技术层面的资金消耗；
可升级性：程序软件的投入使用，会面临用户数量增多的情况，用户对软件的使用率也会提升，所以系统面临这种情况，仍然需要通过升级保持性能的合理，这样才能够适应市场；
客户体验：设计出来的程序软件在界面上不能够太复杂，要遵循界面设计的原理设计出简单，方便操作的功能操作界面，让用户易于接受软件，并乐于使用软件提供的功能。
4.2 系统结构设计
在系统结构设计上，经综合考虑还是选择比C/S更省资金的B/S结构模式，现如今浏览器已经实现了普及，并在技术上逐渐完善和成熟，它在节约软件开发成本的基础上，还能实现原本用专业软件操作才能实现的强大功能。总之，B/S结构是当下全新的，认可度高的系统构造技术。系统结构设计图通过绘制，效果展示如下：
图4-1 系统结构设计图
4.3功能结构设计
在管理员功能模块确定下来的基础上，对管理员各个功能进行设计，确定管理员功能的详细模块。绘制的管理员功能结构见下图。
校园二手书交易平台
系个人信息管理
j公告类型管管理
管图书信息管理
管图书类型管理
大用户信息管理
修个人信息修改
密
修改密码
新用户信息新增
是用户信息修改
删用户信息删除
删图书类型删除
申
图书类型新增
申
图书类型修改
删公告类型删除
新公告类型新增
修公告类型修改
用图书信息新增
用图书信息修改
用图书信息删除
管公告管理
新公告新增
吸公告修改
删公告删除 
图4.3 管理员功能结构图
4.4数据库设计
与功能结构设计一样，数据库设计也是程序开发不可避免的设计环节，数据库设计最主要的目的就是帮助运行程序存储相应的数据信息。数据库设计包含的内容有数据表结构的设计，也包含了数据库E-R图的设计。
4.4.1 数据库E-R图
在绘制E-R图之前，先要找出数据库的实体，明确各个实体具有的属性，比如用户信息这个实体，它具备的属性包括了用户的姓名属性，用户的密码属性，用户的创建时间属性等，所以明确了用户这个实体，以及用户实体具备的属性之后，就需要根据这些信息绘制用户实体对应的实体属性图了。绘制软件选用当下认可度高，使用范围广，操作便利的微软旗下的Visio工具。
4.4.2 数据库表结构
在进行这部分设计之前，需要明白和掌握数据类型以及各个数据类型的长度范围等知识，因为在一张具体的数据表中，为了方便理解，这里就举个简单的例子。比如用户信息表，这个表格的字段就是用户这个实体具备的属性，这时就需要对字段进行数据类型，以及字段长度的设置，也要设置一个主键来作为用户信息表的唯一标识。这些都是数据库表结构设计需要完成的内容。根据校园二手书交易平台的功能设计以及数据库设计要求，展示该系统的数据表结构。
表4.1收货地址表
| 序号 | 列名 | 数据类型 | 说明 | 允许空 |
|---|---|---|---|---|
| 1 | Id | Int | id | 否 |
| 2 | yonghu_id | Integer | 创建用户 | 是 |
| 3 | address_name | String | 收货人 | 是 |
| 4 | address_phone | String | 电话 | 是 |
| 5 | address_dizhi | String | 地址 | 是 |
| 6 | isdefault_types | Integer | 是否默认地址 | 是 |
| 7 | insert_time | Date | 添加时间 | 是 |
| 8 | update_time | Date | 修改时间 | 是 |
| 9 | create_time | Date | 创建时间 | 是 |
表4.2购物车表
| 序号 | 列名 | 数据类型 | 说明 | 允许空 |
|---|---|---|---|---|
| 1 | Id | Int | id | 否 |
| 2 | yonghu_id | Integer | 所属用户 | 是 |
| 3 | tushu_id | Integer | 图书 | 是 |
| 4 | buy_number | Integer | 购买数量 | 是 |
| 5 | create_time | Date | 添加时间 | 是 |
| 6 | update_time | Date | 更新时间 | 是 |
| 7 | insert_time | Date | 创建时间 | 是 |
表4.3用户反馈表
| 序号 | 列名 | 数据类型 | 说明 | 允许空 |
|---|---|---|---|---|
| 1 | Id | Int | id | 否 |
| 2 | yonghu_id | Integer | 提问用户 | 是 |
| 3 | chat_issue | String | 问题 | 是 |
| 4 | issue_time | Date | 问题时间 | 是 |
| 5 | chat_reply | String | 回复 | 是 |
| 6 | reply_time | Date | 回复时间 | 是 |
| 7 | zhuangtai_types | Integer | 状态 | 是 |
| 8 | chat_types | Integer | 数据类型 | 是 |
| 9 | insert_time | Date | 创建时间 | 是 |
表4.4字典表
| 序号 | 列名 | 数据类型 | 说明 | 允许空 |
|---|---|---|---|---|
| 1 | Id | Int | id | 否 |
| 2 | dic_code | String | 字段 | 是 |
| 3 | dic_name | String | 字段名 | 是 |
| 4 | code_index | Integer | 编码 | 是 |
| 5 | index_name | String | 编码名字 | 是 |
| 6 | super_id | Integer | 父字段id | 是 |
| 7 | beizhu | String | 备注 | 是 |
| 8 | create_time | Date | 创建时间 | 是 |
表4.5公告信息表
| 序号 | 列名 | 数据类型 | 说明 | 允许空 |
|---|---|---|---|---|
| 1 | Id | Int | id | 否 |
| 2 | news_name | String | 公告标题 | 是 |
| 3 | news_photo | String | 公告图片 | 是 |
| 4 | news_types | Integer | 公告类型 | 是 |
| 5 | news_content | String | 公告详情 | 是 |
| 6 | create_time | Date | 创建时间 | 是 |
表4.6图书表
| 序号 | 列名 | 数据类型 | 说明 | 允许空 |
|---|---|---|---|---|
| 1 | Id | Int | id | 否 |
| 2 | yonghu_id | Integer | 用户 | 是 |
| 3 | tushu_name | String | 图书名称 | 是 |
| 4 | tushu_photo | String | 图书图片 | 是 |
| 5 | tushu_zuozhe | String | 作者 | 是 |
| 6 | tushu_chubanshe | String | 出版社 | 是 |
| 7 | tushu_types | Integer | 图书类型 | 是 |
| 8 | tushu_kucun_number | Integer | 图书库存 | 是 |
| 9 | tushu_old_money | BigDecimal | 图书原价 | 是 |
| 10 | tushu_new_money | BigDecimal | 现价 | 是 |
| 11 | tushu_clicknum | Integer | 点击次数 | 是 |
| 12 | shangxia_types | Integer | 是否上架 | 是 |
| 13 | tushu_delete | Integer | 逻辑删除 | 是 |
| 14 | tushu_content | String | 图书简介 | 是 |
| 15 | create_time | Date | 创建时间 | 是 |
表4.7图书留言表
| 序号 | 列名 | 数据类型 | 说明 | 允许空 |
|---|---|---|---|---|
| 1 | Id | Int | id | 否 |
| 2 | tushu_id | Integer | 图书 | 是 |
| 3 | yonghu_id | Integer | 用户 | 是 |
| 4 | tushu_liuyan_text | String | 留言内容 | 是 |
| 5 | reply_text | String | 回复内容 | 是 |
| 6 | insert_time | Date | 留言时间 | 是 |
| 7 | update_time | Date | 回复时间 | 是 |
| 8 | create_time | Date | 创建时间 | 是 |
表4.8图书订单表
| 序号 | 列名 | 数据类型 | 说明 | 允许空 |
|---|---|---|---|---|
| 1 | Id | Int | id | 否 |
| 2 | tushu_order_uuid_number | String | 订单号 | 是 |
| 3 | address_id | Integer | 送货地址 | 是 |
| 4 | tushu_id | Integer | 图书 | 是 |
| 5 | yonghu_id | Integer | 用户 | 是 |
| 6 | buy_number | Integer | 购买数量 | 是 |
| 7 | tushu_order_courier_number | String | 快递单号 | 是 |
| 8 | tushu_order_courier_name | String | 快递公司 | 是 |
| 9 | tushu_order_true_price | BigDecimal | 实付价格 | 是 |
| 10 | tushu_order_types | Integer | 订单类型 | 是 |
| 11 | tushu_order_payment_types | Integer | 支付类型 | 是 |
| 12 | insert_time | Date | 订单创建时间 | 是 |
| 13 | create_time | Date | 创建时间 | 是 |
表4.9图书求购表
| 序号 | 列名 | 数据类型 | 说明 | 允许空 |
|---|---|---|---|---|
| 1 | Id | Int | id | 否 |
| 2 | yonghu_id | Integer | 用户 | 是 |
| 3 | tushuqiugou_name | String | 图书名称 | 是 |
| 4 | tushuqiugou_photo | String | 图书图片 | 是 |
| 5 | tushuqiugou_zuozhe | String | 作者 | 是 |
| 6 | tushuqiugou_chubanshe | String | 出版社 | 是 |
| 7 | tushu_types | Integer | 图书类型 | 是 |
| 8 | tushuqiugou_types | Integer | 图书求购状态 | 是 |
| 9 | tushuqiugou_content | String | 图书详情 | 是 |
| 10 | create_time | Date | 创建时间 | 是 |
表4.10用户表
| 序号 | 列名 | 数据类型 | 说明 | 允许空 |
|---|---|---|---|---|
| 1 | Id | Int | id | 否 |
| 2 | yonghu_name | String | 用户姓名 | 是 |
| 3 | yonghu_phone | String | 用户手机号 | 是 |
| 4 | yonghu_id_number | String | 用户身份证号 | 是 |
| 5 | yonghu_photo | String | 用户头像 | 是 |
| 6 | yonghu_email | String | 电子邮箱 | 是 |
| 7 | create_time | Date | 创建时间 | 是 |
表4.11用户表表
| 序号 | 列名 | 数据类型 | 说明 | 允许空 |
|---|---|---|---|---|
| 1 | Id | Int | id | 否 |
| 2 | username | String | 用户名 | 是 |
| 3 | password | String | 密码 | 是 |
| 4 | role | String | 角色 | 是 |
| 5 | addtime | Date | 新增时间 | 是 |
系统实现
系统实现这个章节的内容主要还是展示系统的功能界面设计效果，在实现系统基本功能，比如修改，比如添加，比如删除等管理功能的同时，也显示出系统各个功能的界面实现效果，该部分内容一方面与前面提到的系统分析，系统设计的内容相呼应，另一方面也是一个实际成果的展示。
5.1管理员功能实现
5.1用户信息管理
如图5.1显示的就是用户信息管理页面，此页面提供给管理员的功能有：用户信息的查询管理，可以删除用户信息、修改用户信息、新增用户信息，
还进行了对用户名称的模糊查询的条件
图5.1 用户信息管理页面
5.2 图书类型管理
如图5.2显示的就是图书类型管理页面，此页面提供给管理员的功能有：查看已发布的图书类型数据，修改图书类型，图书类型作废，即可删除，还进行了对图书类型名称的模糊查询 图书类型信息的类型查询等等一些条件。
图5.2 图书类型管理页面
5.3图书信息管理
如图5.3显示的就是图书信息管理页面，此页面提供给管理员的功能有：根据图书信息进行条件查询，还可以对图书信息进行新增、修改、查询操作等等。
图5.3 图书信息管理页面
5.1公告信息管理
如图5.4显示的就是公告信息管理页面，此页面提供给管理员的功能有：根据公告信息进行新增、修改、查询操作等等。
图5.4 公告信息管理页面
第6章 系统测试
程序软件的开发阶段也包括了系统测试，这个部分就是程序质量评定的一个重要环节，如果说程序通过编码实现功能之后，不通过测试检查程序中出现的错误，那么程序一旦投入生活中运行使用时，就会产生许多大大小小的错误，这个时候去解决问题已经晚了，所以一个程序在被交付给使用者使用之前，开发者就需要使用多种测试方法反复进行测试，也是对程序的一个负责表现。程序进入系统测试阶段，在讲究策略进行测试时，也需要对时效性进行把控。当开发者测试完程序，并解决完测试期间程序产生的各种错误时，就需要程序的验收方来对程序进行验收测试，这也是程序测试的最后一个操作步骤。验收测试也是对程序的质量以及可交付性方面起到关键的作用。
CartServiceImpl.java
package com.service.impl;
import com.utils.StringUtil;
import org.springframework.stereotype.Service;
import java.lang.reflect.Field;
import java.util.*;
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.impl.ServiceImpl;
import org.springframework.transaction.annotation.Transactional;
import com.utils.PageUtils;
import com.utils.Query;
import org.springframework.web.context.ContextLoader;
import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import com.dao.CartDao;
import com.entity.CartEntity;
import com.service.CartService;
import com.entity.view.CartView;
/**
* 购物车 服务实现类
*/
@Service("cartService")
@Transactional
public class CartServiceImpl extends ServiceImpl<CartDao, CartEntity> implements CartService {
@Override
public PageUtils queryPage(Map<String,Object> params) {
if(params != null && (params.get("limit") == null || params.get("page") == null)){
params.put("page","1");
params.put("limit","10");
}
Page<CartView> page =new Query<CartView>(params).getPage();
page.setRecords(baseMapper.selectListView(page,params));
return new PageUtils(page);
}
}StringUtil.java
package com.utils;
public class StringUtil {
public static boolean isEmpty(String s){
if(s==null || s.equals("") || s.equals("null")){
return true;
}
return false;
}
public static boolean isNotEmpty(String s){
return !StringUtil.isEmpty(s);
}
}TushuOrderServiceImpl.java
package com.service.impl;
import com.utils.StringUtil;
import org.springframework.stereotype.Service;
import java.lang.reflect.Field;
import java.util.*;
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.impl.ServiceImpl;
import org.springframework.transaction.annotation.Transactional;
import com.utils.PageUtils;
import com.utils.Query;
import org.springframework.web.context.ContextLoader;
import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import com.dao.TushuOrderDao;
import com.entity.TushuOrderEntity;
import com.service.TushuOrderService;
import com.entity.view.TushuOrderView;
/**
* 图书订单 服务实现类
*/
@Service("tushuOrderService")
@Transactional
public class TushuOrderServiceImpl extends ServiceImpl<TushuOrderDao, TushuOrderEntity> implements TushuOrderService {
@Override
public PageUtils queryPage(Map<String,Object> params) {
if(params != null && (params.get("limit") == null || params.get("page") == null)){
params.put("page","1");
params.put("limit","10");
}
Page<TushuOrderView> page =new Query<TushuOrderView>(params).getPage();
page.setRecords(baseMapper.selectListView(page,params));
return new PageUtils(page);
}
}Editor.vue
<template>
<div>
<!-- 图片上传组件辅助-->
<el-upload
class="avatar-uploader"
:action="getActionUrl"
name="file"
:headers="header"
:show-file-list="false"
:on-success="uploadSuccess"
:on-error="uploadError"
:before-upload="beforeUpload"
></el-upload>
<quill-editor
class="editor"
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)"
></quill-editor>
</div>
</template>
<script>
// 工具栏配置
const toolbarOptions = [
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
["blockquote", "code-block"], // 引用 代码块
[{ header: 1 }, { header: 2 }], // 1、2 级标题
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
[{ script: "sub" }, { script: "super" }], // 上标/下标
[{ indent: "-1" }, { indent: "+1" }], // 缩进
// [{'direction': 'rtl'}], // 文本方向
[{ size: ["small", false, "large", "huge"] }], // 字体大小
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
[{ font: [] }], // 字体种类
[{ align: [] }], // 对齐方式
["clean"], // 清除文本格式
["link", "image", "video"] // 链接、图片、视频
];
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
props: {
/*编辑器的内容*/
value: {
type: String
},
action: {
type: String
},
/*图片大小*/
maxSize: {
type: Number,
default: 4000 //kb
}
},
components: {
quillEditor
},
data() {
return {
content: "",
quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
editorOption: {
placeholder: "",
theme: "snow", // or 'bubble'
modules: {
toolbar: {
container: toolbarOptions,
// container: "#toolbar",
handlers: {
image: function(value) {
if (value) {
// 触发input框选择图片文件
document.querySelector(".avatar-uploader input").click();
} else {
this.quill.format("image", false);
}
}
// link: function(value) {
// if (value) {
// var href = prompt('请输入url');
// this.quill.format("link", href);
// } else {
// this.quill.format("link", false);
// }
// },
}
}
}
},
// serverUrl: `${base.url}sys/storage/uploadSwiper?token=${storage.get('token')}`, // 这里写你要上传的图片服务器地址
header: {
// token: sessionStorage.token
'Token': this.$storage.get("Token")
} // 有的图片服务器要求请求头需要有token
};
},
computed: {
// 计算属性的 getter
getActionUrl: function() {
// return this.$base.url + this.action + "?token=" + this.$storage.get("token");
this.setContent(this.value);
return `/${this.$base.name}/` + this.action;
}
},
methods: {
setContent(value) {
this.content = value;
},
onEditorBlur() {
//失去焦点事件
},
onEditorFocus() {
//获得焦点事件
},
onEditorChange() {
// console.log(this.content);
// 内容改变事件
this.$emit("input", this.content);
},
// 富文本图片上传前
beforeUpload() {
// 显示loading动画
this.quillUpdateImg = true;
},
uploadSuccess(res, file) {
// res为图片服务器返回的数据
// 获取富文本组件实例
let quill = this.$refs.myQuillEditor.quill;
// 如果上传成功
if (res.code === 0) {
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片 res.url为服务器返回的图片地址
quill.insertEmbed(length, "image", this.$base.url+ "upload/" +res.file);
// 调整光标到最后
quill.setSelection(length + 1);
} else {
this.$message.error("图片插入失败");
}
// loading动画消失
this.quillUpdateImg = false;
},
// 富文本图片上传失败
uploadError() {
// loading动画消失
this.quillUpdateImg = false;
this.$message.error("图片插入失败");
}
}
};
</script>
<style>
.editor {
line-height: normal !important;
}
.ql-snow .ql-tooltip[data-mode="link"]::before {
content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
border-right: 0px;
content: "保存";
padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode="video"]::before {
content: "请输入视频地址:";
}
.ql-container {
height: 400px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
content: "32px";
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
content: "标题6";
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
content: "等宽字体";
}
</style>