本文不仅从需求剖析、设计剖析、功能剖析对该电子书在线系统进行了全面的剖析，而且还从开拓背景、开拓环境、目标、流程、数据库、系统掩护对该新媒体视域下的中国古诗词展演进行了总体的方案和设计。该新媒体视域下的中国古诗词展演利用vue技能和MYSQL数据库进行开拓，具有很好的稳定性和可发展性。 1. ## 研究现状 国外信息技能的发展步伐一贯没有停滞，源源不断的打算机运用软件被研发出来，并且软件技能也在不断迭代，目前天下各国的软件行业都已新兴了起来[3-5]。
与国外比较，我国信息技能的发展相对晚一些，不过后面，经由我们的不断追赶，我国的信息技能已经有了很大的进步，我国对现有的软件开拓技能进行了细致的专研，目前我国已经能够独立的开拓系统，并且也已经将这些软件系统运用于人们的生活中和各行各业中，目前，软件行业是我国非常受欢迎的行业[6-9]。
信息数字化使人们的各种信息能够快速传播，使人们的各种信息能够得到充分利用，同时，也大大宣扬了信息数字化背后的软件系统[10-12]。软件开拓团队的能力越来越强，开拓技能功能越来越强大，软件系统大大提高了信息处理的效率，节省了处理者的处理韶光。在阅读校园失落物方面，人们阅读纸质版的校园失落物，现在已经显得有些过期[13-14]。利用目前的软件开拓技能开拓出一款新媒体视域下的中国古诗词展演能够大大的知足人们的阅读需求，人们通过该新媒体视域下的中国古诗词展演能够快速查找、在线阅读自己喜好的校园失落物，并且也大大提高了人们阅读的效率。 1. ## 研究内容 本论文紧张阐述了该新媒体视域下的中国古诗词展演的开拓技能、系统需求剖析、系统设计、系统功能实现和系统测试。为了开拓该系统，我不才面花费了很多功夫和心思，例如，到图书馆阅读vue技能、MYSQL数据库等方面的编程校园失落物，又在网上搜索了很多别人做的相类似的系统，将他们比较好的设计理念运用到自己的设计当中，末了才有了现在的成果。
本论文紧张分为7部分，包括：
一、绪论：阐述了该系统的背景技能、研究现状和开拓意义；
二、干系技能：先容了开拓该系统所用到的各种技能；
三、系统需求剖析：阐述了开拓该系统的可行性剖析和功能需求剖析；
四、系统设计：阐述了该系统的功能模块设计和数据库设计；
五、系统实现：展示了该系统的紧张功能模块界面；
六、系统测试：对开拓出的该系统进行测试；
七、系统总结：总结开拓该系统的全体事情过程。
系统开拓环境vue技能Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层运用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与当代化的工具链以及各种支持类库结合利用时，Vue 也完备能够为繁芜的单页运用（SPA）供应驱动Vue.js目前最火的的一个前端框架，三大主流前端框架之一。 Vue.js是一套构建用户界面的框架（一套完全的办理方案，对项目侵入性大，中途 须要跟换框架则须要重构全体项目），只关注视图层，易上手，有配套的第三方类库。提高开拓效率，帮助减少不必要的dom操作；双向数据绑定，通过框架供应的指 令，前端只须要关注业务逻辑，不再关心dom如何渲染。 1. ## JAVA技能 Java编程措辞具有跨平台、分布式、可移植等多种特性，很多平台Java都能运行，天下各地都能够运行Java编写的程序。1995年，开拓出了JAVA编程措辞。JAVA编程措辞具有多种特性，例如：大略、安全、可移植、鲁棒性（Robust）、编写能效高、线程多等。在互联网飞速发展的时期，Java编程措辞运用也越来越普遍[19]。它的特点具有：
一、面向工具：JAVA适用于分布式环境，JAVA能够完备面向工具，包括工具的设计及联系；
二、分布式：JAVA事情的同时，带动其他打算节点事情，只要有网络，就可以访问其他工具；
三、健壮性：JAVA能够自动处理垃圾和非常，并且机制类型强；
四、安全性：当指针和内存被删除时，造孽的内存就可以避免。 1. ## MYSQL数据库 数据库在每个网站的开拓中都是必不可少的，过去数据库只具有数据的保存和管理功能，但随着后来的不断更新和迭代，目前的数据库不仅能够进行数据的处理，而且还能够储存不计其数的数据[20]。
该新媒体视域下的中国古诗词展演所利用的便是MYSQL数据库，当初是微软公司开拓出的MYSQL数据库。MYSQL数据库统共建立了十几个相对应的表，它们之间独立联系，数据库和程序是密不可分的[21]。
MYSQL数据库的特点包括：能够运用于多种操作系统中；查询SQL时优化了算法，搜索速率提高的不少；还可以进行数据库的管理、掌握、优化等操作；一个数据库可以记录不计其数的数据。 1. ## B/S构造 当前比较盛行的网络化构造模式是B/S（浏览器/做事器）构造，它能够在做事器上面集中系统的所有核心功能，使系统开拓职员的事情变得大略，并且开拓出的系统也更随意马虎利用和后期掩护。用于比较熟习的浏览器有360浏览器、谷歌浏览器、QQ浏览器等，用于比较熟习的数据库有sqlserver、mysql数据库等，上边这些数据库和浏览器都可以安装在客户端上。B/S构造没有什么限定，并且还不须要专门的安装软件，只要条记本、电脑有网络就能够访问系统。采取B/S构造开拓的程序，比较好掩护，只须要在客户端就可处理，不须要非得在做事器上处理，并且跟用户的交互性比较好，刷新浏览器就可进行数据信息的实时更新[22]。B/S架构如图2-1所示：
图2-1 B/S模式架构图 1. ## SSM框架技能 该新媒体视域下的中国古诗词展演是基于Spring、SpringMVC、Mybatis框架开拓出来的。
2004年，Spring 框架才第一次亮相，后面也进行了很多次的更新。Spring框架包括SpringCore、Spring AOP、Spring ORM、Spring DAO、Spring Web Flow、Spring Context和Spring Web MVC等七个模块，企业运用程序便是通过这七个模块气筒不同的平台来进行开拓的，Spring Web MVC中的各个元素之间形成了疏松耦合[23-25]。 1. # 系统剖析 1. ## 可行性剖析 开拓者在进行开拓系统之前，都须要进行可行性剖析，担保该系统能够被成功开拓出来。 1. ### 技能可行性 开拓该新媒体视域下的中国古诗词展演所采取的技能是vue和MYSQL数据库。打算机专业的学生在学校期间已经比较系统的学习了很多编程方面的知识，同时也打仗了很多编程软件，以是在技能开拓方面还是比较有信心的。 1. ### 操作可行性 该新媒体视域下的中国古诗词展演的界面简洁清楚，操作大略，用户一看就会操作。操作界面上每一步都有提示，用户只要按照提示进行操作就可以了。该新媒体视域下的中国古诗词展演具有操作可行性。 1. ### 经济可行性 我现在还是一逻辑学生，还没有一份稳定的经济收入，以是我会将开拓程序的本钱掌握在自己所能接管的范围内。我所利用的开拓软件、数据库还有设计界面用的photoshop软件都是在网上免费下载的，其余程序编写阶段所用到的源代码也是在网上免费得到的，现在在网上能下载很多有用的、免费的东西，以是开拓该系统基本不费钱，具有经济可行性。 1. ### 法律可行性我是通过图书馆、百度文库、百度网页等得到的开拓该新媒体视域下的中国古诗词展演所须要用到的资料和软件，都是采取的合法渠道，其余源代码和论文内容都是我自己一字一字写出来的，没有抄袭别人的，具有法律可行性。
通过上述的技能可行性、操作可行性、经济可行性以及法律可行性剖析，可以看出，该新媒体视域下的中国古诗词展演完备可以进行顺利开拓。 1. ## 系统性能剖析 1. 存储性：该新媒体视域下的中国古诗词展演的数据库功能比较强大，能够录入很多纷繁繁芜的信息，且能够担保数据的实时性；
二、易学性：该新媒体视域下的中国古诗词展演利用起来非常大略，用户一看就会，不须要进行专门的培训，非常好上手，利用个一两次就能够闇练操作；
三、数据哀求：录入的数据准确可靠，能够及时进行更新，可以独立保存，删除一些不须要的数据；
四、稳定性：该新媒体视域下的中国古诗词展演能够稳定的运行，界面清晰明了；
五、可靠性：该新媒体视域下的中国古诗词展演安装有拦截器，可以对病毒等进行拦截，并且还对信息进行了保护方法，用户可以放心利用。 1. ## 系统功能剖析 1. ### 角色需求 该新媒体视域下的中国古诗词展演紧张为管理员和用户两类用户角色供应需求，管理员在后台可以对系统进行全面管理，用户在前台可以进行查看系统信息，注册登录，查询校园失落物，评论，下载校园失落物等操作。
用户静态构造如图3-1所示。
图3-1 用户静态构造图 1. ## 系统流程剖析 1. ### 注册流程 用户注册之后才可以登录系统，用户注册流程如图3-2所示：
图3-2 注册流程图 1. ### 登录流程 用户须要登录系统之后，才可以进行校园失落物评论、校园失落物下载等操作。而管理员也只有登录系统之后，可以对系统各个方面的内容进行管理，不受任何限定。用户登录流程如图3-3所示。
图3-3 登录流程图 1. # 系统设计 1. ## 系统概要设计 本文通过B/S构造(Browser/Server,浏览器/做事器构造)开拓的该新媒体视域下的中国古诗词展演，B/S构造的优点很多，例如：开拓随意马虎、强的共享性、便于掩护等，只要有网络，用户可以随时随地进行利用。
系统事情事理如图4-1所示。
图4-1 系统事情事理图 1. ## 系统构造设计 系统构造设计就像一个树状构造一样，一个树干有很多分支，大任务相称于树干，小任务相称于树枝，只有需求剖析信息弄清楚之后，才能担保每个小任务都能实现目标，对初步设计好的系统再进行不断优化，终极得到一个具表示实的系统构造。
管理员功能模块和用户功能模块是该新媒体视域下的中国古诗词展演的两大部分，系统构造如图4-2所示。
新媒体视域下的中国古诗词展演
用户信息管理
公告信息管理
古诗词类型管理
公告类型管理
古诗词管理
用户信息修正
用户信息新增
古诗词添加
古诗词删除
古诗词修正
公告类型添加
公告类型修正
公告类型删除
公告信息添加
公告信息编削
公告信息删除
古诗词类型添加
古诗词类型修正
古诗词类型删除
论坛信息管理
论坛信息修正
论坛信息删除
论坛信息添加
图4-2 系统构造图
4.3 数据库设计
开拓一个别系也须要提前设计数据库。这里的数据库是干系数据的凑集，存储在一起的这些数据也是按照一定的组织办法进行的。目前，数据库能够做事于多种运用程序，则是源于它存储办法最佳，具备数据冗余率低的上风。虽然数据库为程序供应信息存储做事，但它与程序之间也可以保持较高的独立性。总而言之，数据库经历了很长一段韶光的发展，从最初的不为人知，到现在的人尽皆知，其干系技能也加倍成熟，同时也拥有着坚实的理论根本。
4.3.1 数据库观点设计
这部分内容须要借助数据库关系图来完成，也须要利用专门绘制数据库关系图的工具，比如Visio工具就可以设计E-R图（数据库关系图）。设计数据库，也须要按照设计的流程进行，首先还是要根据需求完成实体的确定，剖析实体具有的特色，还有对实体间的关联关系进行确定。末了才是利用E-R模型的表示方法，绘制本系统的E-R图。不管是利用亿图软件，还是Visio工具，对付E-R模型的表示符号都一样，常日矩形代表实体，实体间存在的关系用菱形符号表示，实体的属性也便是实体的特色用符号椭圆表示。末了利用直线将矩形，菱形和椭圆等符号连接起来。接下来就开始对本系统的E-R图进行绘制。
（1）下图是论坛实体和其具备的属性。
图4.1 论坛实体属性图
（2）下图是用户实体和其具备的属性。
图4.2 用户实体属性图
（3）下图是公告信息实体和其具备的属性。
图4.3 公告信息实体属性图
（4）下图是字典表实体和其具备的属性。
图4.4 字典表实体属性图
（5）下图是古诗词视频收藏实体和其具备的属性。
图4.5 古诗词视频收藏实体属性图
（6）下图是古诗词视频留言实体和其具备的属性。
图4.6 古诗词视频留言实体属性图
（7）下图是用户表实体和其具备的属性。
图4.7 用户表实体属性图
（8）下图是古诗词视频实体和其具备的属性。
图4.8 古诗词视频实体属性图 1. ### 数据库表设计 采取MYSQL数据库对该新媒体视域下的中国古诗词展演的数据进行存储，数据库中所包括的各个数据库表的详细信息如下所示：
表4.1字典表表
序号
列名
数据类型
解释
许可空
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.2论坛表
序号
列名
数据类型
解释
许可空
1
Id
Int
id
否
2
forum_name
String
帖子标题
是
3
yonghu_id
Integer
用户
是
4
users_id
Integer
管理员
是
5
forum_content
String
发布内容
是
6
super_ids
Integer
父id
是
7
forum_state_types
Integer
帖子状态
是
8
insert_time
Date
发帖韶光
是
9
update_time
Date
修正韶光
是
10
create_time
Date
创建韶光
是
表4.3古诗词视频表
序号
列名
数据类型
解释
许可空
1
Id
Int
id
否
2
gushicishipin_name
String
古诗词视频标题
是
3
gushicishipin_types
Integer
古诗词类型
是
4
gushicishipin_photo
String
封面
是
5
gushicishipin_video
String
视频
是
6
gushicishipin_file
String
文件
是
7
gushicishipin_date
String
视频时长
是
8
zan_number
Integer
赞
是
9
cai_number
Integer
踩
是
10
gushicishipin_status_types
BigDecimal
古诗词视频类型
是
11
gushicishipin_zuozhe
String
作者
是
12
gushicishipin_text
String
古诗词翻译
是
13
gushicishipin_content
String
古诗词视频详情
是
14
insert_time
Date
添加韶光
是
15
create_time
Date
创建韶光
是
表4.4古诗词视频收藏表
序号
列名
数据类型
解释
许可空
1
Id
Int
id
否
2
gushicishipin_id
Integer
古诗词视频
是
3
yonghu_id
Integer
用户
是
4
gushicishipin_collection_types
Integer
类型
是
5
insert_time
Date
收藏韶光
是
6
create_time
Date
创建韶光
是
表4.5古诗词视频留言表
序号
列名
数据类型
解释
许可空
1
Id
Int
id
否
2
gushicishipin_id
Integer
古诗词视频
是
3
yonghu_id
Integer
用户
是
4
gushicishipin_liuyan_text
String
留言内容
是
5
insert_time
Date
留言韶光
是
6
reply_text
String
回答内容
是
7
update_time
Date
回答韶光
是
8
create_time
Date
创建韶光
是
表4.6公告信息表
序号
列名
数据类型
解释
许可空
1
Id
Int
id
否
2
news_name
String
公告标题
是
3
news_types
Integer
公告类型
是
4
news_photo
String
公告图片
是
5
insert_time
Date
公告韶光
是
6
news_content
String
公告详情
是
7
create_time
Date
创建韶光
是
表4.7用户表
序号
列名
数据类型
解释
许可空
1
Id
Int
id
否
2
yonghu_name
String
用户姓名
是
3
yonghu_photo
String
头像
是
4
yonghu_phone
String
联系办法
是
5
yonghu_email
String
邮箱
是
6
new_money
BigDecimal
余额
是
7
huanyuan_types
Integer
会员类型
是
8
huiyuandaoqi_time
Date
会员到期韶光
是
9
yonghu_delete
Integer
假删
是
10
create_time
Date
创建韶光
是
表4.8用户表表
序号
列名
数据类型
解释
许可空
1
Id
Int
id
否
2
username
String
用户名
是
3
password
String
密码
是
4
role
String
角色
是
5
addtime
Date
新增韶光
是
系统的实现功能模块的实现5.1用户信息管理如图5.1显示的便是用户信息管理页面，此页面供应给管理员的功能有：用户信息的查询管理，可以删除用户信息、修正用户信息、新增用户信息，还进行了对用户名称的模糊查询的条件
图5.1 用户信息管理页面 ### 5.2 古诗词管理 如图5.2显示的便是古诗词管理页面，此页面供应给管理员的功能有：查看已发布的古诗词数据，修正古诗词，古诗词作废，即可删除，还进行了对古诗词名称的模糊查询 古诗词信息的类型查询等等一些条件。
图5.2 古诗词管理页面 ### 5.3古诗词类型管理 如图5.3显示的便是古诗词类型管理页面，此页面供应给管理员的功能有：根据古诗词类型进行条件查询，还可以对古诗词类型进行新增、修正、查询操作等等。
图5.3 古诗词类型管理页面 ### 5.1公告信息管理 如图5.4显示的便是公告信息管理页面，此页面供应给管理员的功能有：根据公告信息进行新增、修正、查询操作等等。
图5.4 公告信息管理页面
MPUtil.javapackage com.utils;import java.util.Arrays;import java.util.HashMap;import java.util.Iterator;import java.util.Map;import org.apache.commons.lang3.StringUtils;import cn.hutool.core.bean.BeanUtil;import com.baomidou.mybatisplus.mapper.Wrapper;/ Mybatis-Plus工具类 /public class MPUtil { public static final char UNDERLINE = '_'; //mybatis plus allEQ 表达式转换 public static Map allEQMapPre(Object bean,String pre) { Map<String, Object> map =BeanUtil.beanToMap(bean); return camelToUnderlineMap(map,pre); } //mybatis plus allEQ 表达式转换 public static Map allEQMap(Object bean) { Map<String, Object> map =BeanUtil.beanToMap(bean); return camelToUnderlineMap(map,""); } public static Wrapper allLikePre(Wrapper wrapper,Object bean,String pre) { Map<String, Object> map =BeanUtil.beanToMap(bean); Map result = camelToUnderlineMap(map,pre); return genLike(wrapper,result); } public static Wrapper allLike(Wrapper wrapper,Object bean) { Map result = BeanUtil.beanToMap(bean, true, true); return genLike(wrapper,result); } public static Wrapper genLike( Wrapper wrapper,Map param) { Iterator<Map.Entry<String, Object>> it = param.entrySet().iterator(); int i=0; while (it.hasNext()) { if(i>0) wrapper.and(); Map.Entry<String, Object> entry = it.next(); String key = entry.getKey(); String value = (String) entry.getValue(); wrapper.like(key, value); i++; } return wrapper; } public static Wrapper likeOrEq(Wrapper wrapper,Object bean) { Map result = BeanUtil.beanToMap(bean, true, true); return genLikeOrEq(wrapper,result); } public static Wrapper genLikeOrEq( Wrapper wrapper,Map param) { Iterator<Map.Entry<String, Object>> it = param.entrySet().iterator(); int i=0; while (it.hasNext()) { if(i>0) wrapper.and(); Map.Entry<String, Object> entry = it.next(); String key = entry.getKey(); if(entry.getValue().toString().contains("%")) { wrapper.like(key, entry.getValue().toString().replace("%", "")); } else { wrapper.eq(key, entry.getValue()); } i++; } return wrapper; } public static Wrapper allEq(Wrapper wrapper,Object bean) { Map result = BeanUtil.beanToMap(bean, true, true); return genEq(wrapper,result); } public static Wrapper genEq( Wrapper wrapper,Map param) { Iterator<Map.Entry<String, Object>> it = param.entrySet().iterator(); int i=0; while (it.hasNext()) { if(i>0) wrapper.and(); Map.Entry<String, Object> entry = it.next(); String key = entry.getKey(); wrapper.eq(key, entry.getValue()); i++; } return wrapper; } public static Wrapper between(Wrapper wrapper,Map<String, Object> params) { for(String key : params.keySet()) { String columnName = ""; if(key.endsWith("_start")) { columnName = key.substring(0, key.indexOf("_start")); if(StringUtils.isNotBlank(params.get(key).toString())) { wrapper.ge(columnName, params.get(key)); } } if(key.endsWith("_end")) { columnName = key.substring(0, key.indexOf("_end")); if(StringUtils.isNotBlank(params.get(key).toString())) { wrapper.le(columnName, params.get(key)); } } } return wrapper; } public static Wrapper sort(Wrapper wrapper,Map<String, Object> params) { String order = ""; if(params.get("order") != null && StringUtils.isNotBlank(params.get("order").toString())) { order = params.get("order").toString(); } if(params.get("sort") != null && StringUtils.isNotBlank(params.get("sort").toString())) { if(order.equalsIgnoreCase("desc")) { wrapper.orderDesc(Arrays.asList(params.get("sort"))); } else { wrapper.orderAsc(Arrays.asList(params.get("sort"))); } } return wrapper; } / 驼峰格式字符串转换为下划线格式字符串 @param param @return / public static String camelToUnderline(String param) { if (param == null || "".equals(param.trim())) { return ""; } int len = param.length(); StringBuilder sb = new StringBuilder(len); for (int i = 0; i < len; i++) { char c = param.charAt(i); if (Character.isUpperCase(c)) { sb.append(UNDERLINE); sb.append(Character.toLowerCase(c)); } else { sb.append(c); } } return sb.toString(); } public static void main(String[] ages) { System.out.println(camelToUnderline("ABCddfANM")); } public static Map camelToUnderlineMap(Map param, String pre) { Map<String, Object> newMap = new HashMap<String, Object>(); Iterator<Map.Entry<String, Object>> it = param.entrySet().iterator(); while (it.hasNext()) { Map.Entry<String, Object> entry = it.next(); String key = entry.getKey(); String newKey = camelToUnderline(key); if (pre.endsWith(".")) { newMap.put(pre + newKey, entry.getValue()); } else if (StringUtils.isEmpty(pre)) { newMap.put(newKey, entry.getValue()); } else { newMap.put(pre + "." + newKey, entry.getValue()); } } return newMap; }}YonghuServiceImpl.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.YonghuDao;import com.entity.YonghuEntity;import com.service.YonghuService;import com.entity.view.YonghuView;/ 用户 做事实现类 /@Service("yonghuService")@Transactionalpublic class YonghuServiceImpl extends ServiceImpl<YonghuDao, YonghuEntity> implements YonghuService { @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<YonghuView> page =new Query<YonghuView>(params).getPage(); page.setRecords(baseMapper.selectListView(page,params)); return new PageUtils(page); }}UsersServiceImpl.java
package com.service.impl;import java.util.List;import java.util.Map;import com.service.UsersService;import org.springframework.stereotype.Service;import com.baomidou.mybatisplus.mapper.EntityWrapper;import com.baomidou.mybatisplus.mapper.Wrapper;import com.baomidou.mybatisplus.plugins.Page;import com.baomidou.mybatisplus.service.impl.ServiceImpl;import com.dao.UsersDao;import com.entity.UsersEntity;import com.utils.PageUtils;import com.utils.Query;/ 系统用户 @author /@Service("userService")public class UsersServiceImpl extends ServiceImpl<UsersDao, UsersEntity> implements UsersService { @Override public PageUtils queryPage(Map<String, Object> params) { Page<UsersEntity> page = this.selectPage( new Query<UsersEntity>(params).getPage(), new EntityWrapper<UsersEntity>() ); return new PageUtils(page); } @Override public List<UsersEntity> selectListView(Wrapper<UsersEntity> wrapper) { return baseMapper.selectListView(wrapper); } @Override public PageUtils queryPage(Map<String, Object> params, Wrapper<UsersEntity> wrapper) { Page<UsersEntity> page =new Query<UsersEntity>(params).getPage(); page.setRecords(baseMapper.selectListView(page,wrapper)); PageUtils pageUtil = new PageUtils(page); return pageUtil; }}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>声明
本博客适用于广泛的学术和教诲用场，包括但不限于个人学习、开拓设计，产品设计。仅供学习参考，旨在为读者供应深入理解和学术研究的材料。
java系统设计，毕设辅导
