如何使用ssm实现基于VUE.js的在线教育系统+vue
@TOC
ssm683基于VUE.js的在线教育系统+vue
研究背景和来源
目前的网站平台类系统已各种各样，涉及到生活中的每一个部分。购物类、管理类、信息统计类、办公类、官网类等非常丰富。我国各类网站的发展已非常成熟，这些系统依靠网络和计算机技术不断完善发展为人们带来更好的生活体验。而学习类的网站更是多种多样，像比如出名的慕课网、各种辅导网等拥有的客户群体都非常大。
受我国教育理念的影响，每个家庭都非常注重学生的学习，为学生提供最好的教育辅助。我国人口众多，竞争压力也越来越大，随着国民经济水平的提升，越来越多的家庭都认识到教育的重要性。我国的教育水平还处在基础阶段，学生获得知识的主要途径是通过老师在学校里传授，这种方式由于学生接受能力不同而造成学生的学习效果不同。接受能力差的同学家里会想要通过其它方式进行实习，现在流行的网上教学非常受家长欢迎。但网上教学费用昂贵，对家庭条件一般的学生来说压力非常大。
1.2课题研究现状
目前学生获得知识的主要途径还是通过传统方式。采用在学校由老师在教室上课的方式，这种方式对于接受能力强的同学来说非常适合，但对学习能力差的同学来说非常困难，特别是一些自我约束能力小的同学来说，做到专心上课听讲都非常难。这部分学生想要提高成绩必要采用其它辅助手段，像参加课外补习班、请家教、找同学帮助、在线学习等方式都可以提高学生的学习成绩。但现在国家政策不允许开设课外补习班，大量的学生转换到线上辅导学习。
我国线上学习的发展已形成一定的规模，在众多教学网站里商业性质强。而且采用的都是老师授课，学生自己理解，理解不了的知识再进行提问解答。学生自学部分相对较少，主要由老师引导学习，不能培养学生的自学能力。学生自学能力不能发辉，提高不了学生的学习积极性，对提高学生成绩效果也就大打折扣。
1.3课题开发的目的和意义
本系统的实现目的在于帮助学生的学习。和网上的商用教学网站相比，本系统针对性更强，向使用用户展示最为详细的课程信息，并可以以多种方式展示，以此来调动学生的学习积极性。本系统中的课程学生可以购买，对于不明白的地方也可以在线提问。本系统的核心在于内容，以丰富的课程种类取胜，去繁留简，使本系统的用户更容易抓住重点，找到核心内容，减少用户烦躁心理。本系统的实现拥有更大的意义：
- 本系统功能简单、针对性强，使系统用户更为直观，操作也更为简单，只要有上网经验的用户都可以轻松掌握；
- 本系统采用多种课程种类，用户可以根据自己的喜好选择更适合自己的方式进行学习；
- 本系统中的课程信息都是由教师发布、管理员审核，可以做到正确、精准；
- 本系统中设有留言功能，用户相互之间可以形成交流讨论，可以打开新的学习思路和解决学习疑问。
1.4课题开发内容
本基于VUE.js的在线教育系统采用前台+后台的方式进行设计。前台信息主要为内容展示，后台信息为用户可以操作的功能。本系统的前台信息可由非注册用户、注册用户、管理员共同浏览，主要信息为课程信息。课程详情里添加视频，使课程更加立体，方便学生更好的理解。注册用户在前台可以浏览课程信息并可以收藏课程，也可以发布自己的留言进行分享讨论，对需要的课程要以购买。注册用户在个人后台可以管理自己发布的留言和收藏的课程以及购买的课程。管理员在后台的功能为课程类别管理、章节管理、基础数据管理和课程管理、用户管理以及前台图片的设置。教师可以发布课程和回复学生的留言、管理课程订单以及课程的章节等。
1.5论文结构安排
本篇论文分为摘要、目录、绪论、系统开发关键技术介绍、系统分析、系统设计和系统实现、系统测试、总结、致谢、参考文献。本篇论文的核心集中在系统设计和系统实现部分。绪论部分为基础调研，在系统分析中阐述系统的需求分析、可行性分析和数据流程图、用例图等。
第2章 系统开发关键技术介绍
2.1系统开发使用的关键技术
本系统在开发中选择B/S框架进行设计，语言采用Java，数据库采用Mysql，并在设计中加入VUE.js技术，本系统的运行环境为Idea。
2.2 VUE.js技术介绍
VUE.js是一个用来开发前台界面的JavaScript框架，体积非常的小，所以运行效率非常的高，可以直接通过虚拟设定的 DOM进行各种JavaScript计算，因为操作过程中相当于是一个预处理，所以并没有真实的DOM，也可以称作为一个虚拟的DOM。VUE.js还可以进行双向的数据绑定，这样操作起来更加的简单，使用户可以不用管DOM对象，直接去操作业务逻辑就可以了，可以应用的场景非常的多，而且开发成本也非常的低。目前的市场后已经有很多成熟稳定的框架组件，可以直接拿来使用，对于初学者来说非常的方便。
2.3 Idea介绍
Idea是公认的最好用Java开发工具之一，常见最多的都是用来跟Eclipse进行比较，Eclipse可以说是最简单的，但是在兼容方面，代码设计方面明显不足。而Idea就是在Eclipse基础上进行了整合升级，更加智能。Idea最大的创新就是有智能代码助手，可以实现代码提示，还能进行代码重构，代码审查，非常适合新手的使用。Idea的宗旨就是实现智能编码，使编码更加的简单，所以在Idea上有很多其他软件所没有的特色功能，比如进行智能选取，不需要开发者在手动操作，还有各种丰富的导航模式可供选择，可以直接导入就能使用，不需要开发者在重新建立，还有历史记录功能，在误删误操作的情况下，通过这个功能就可以直接恢复。而且Idea相比Eclipse调试也更简单，通过Eclipse调试的时候需要选定表达式，否则就没办法查看它的值，而通过Idea则不需要进行任何操作，Idea会自动理解你所需要的表达式，然后给你建议参考值。而且在编码方面更加智能，会自动跳出需要的变量和参数，然后建议你最优选择。所以说相比Eclipse来说，用Idea开发更加的简单方便，更适合新用户的开发使用。
2.4 Mysql数据库介绍
数据库主要就是用来存储和管理系统数据的，按照数据结构来进行组织和存储的，数据库都有自己独立的接口来进行创建，访问，管理等，也可以直接用文件的形式进行数据存储，但是读写速度比较慢，效率不高，所以一般都是采用专门的数据库软件来进行数据库存储和管理，这样可以更加科学有效的实现数据的存储，也更加的安全。而mysql就是一个关系型数据库管理系统，可以把各种不同的数据库存储到不同的表结构中 ，这样可以提高查找效率。
2.5 B/S结构介绍
B/S模式最大的特点就是可以直接通过网络进行系统的访问，对于用户端来说只需要一个浏览器就可以，通过B/S模式开发的系统可以用户提供实时的在线服务，当后台数据进行更新，前台会实时进行更新，保障了数据同步，效率非常的高，非常适合电子商务网站的开发。B/S架构是从C/S架构上发展来的，传统的C/S架构是采用的客户端的形式，由于以前的互联网没有现在这么发达，所以大多的办公软件都是在局域网内使用的，可以不需要互联网就能运行，前提是计算机硬件有一定的要求，必须电脑上安装上客户端软件，才能使用，而且后期的维护也比较麻烦，需要每个设备都进行维护。而B/S架构是直接把数据信息都存储到了服务器里，然后用户端不需要安装任何的编程软件，只需要浏览器就可以直接进行访问，而且维护非常的简单方便，对用户没有任何的影响，而且交互性更好，所以更适合电子商务网站的开发和使用。
第3章 系统分析
3.1系统需求分析
目前学生想要提高自己的成绩大多采用额外自学，自己自学的效率非常低，并且效果也并不明显，对于条件好的家庭会选择请家教或者上专业的远程课。但这些都不能充分调动学生的自主学习积极性，被动性强的结果就是学习效果不好，想要真正的提高学生的成绩最根本需要学生提高自主学习能力。而本基于VUE.js的在线教育系统提供课程详情，由学生自己学习，并通过多种方式调动学生的学习积极性。比如添加留言功能、课程视频功能，学生可以通过彼此之间的交流和讨论提高学习兴趣从而提高学习成绩，本基于VUE.js的在线教育系统前景非常好。
3.2系统可行性分析
可行性分析主要是先进行初步调查，然后从各个方面进行系统可行性研究，比如系统需要做什么，采用什么技术，进行各种分析研究，然后得到一个可行性的方案。然后在对方案进行各个功能模块的设计，进行系统设计分析，研究系统设计可行性。所以要从多方面进行考虑，而本文主要从技术上，经济上，操作上，法律上进行研究分析。
3.2.1技术可行性
随着技术的快速发展，各种软件开发技术也在不停的更新，不断的发展，大家都在选择适合自己水平的，能达到开发需求的软件技术和开发环境。所以根据我的开发需求，然后决定开发本系统采用Java语言B/S框架来完成，开发出来的系统可以满足功能需求，而且操作界面美观，符合目前的审美，最重要的是开发相对简单，可以自动生成所需要的框架结构。前端框架采用VUE.js，数据库Mysql，体积更小，存储速度快，可以满足本次开发的需求。
3.2.2经济可行性
经济可行性分析主要是对前期投资进行分析，对系统维护费用分析，对开发完成后取得的经济收益进行分析。因为本系统完全是自己开发的，作为毕业设计用途的，只需要基础的设施就行，需要电脑硬件，开发软件等，不需要额外的投入，完全满足开发需求。而系统开发完成后可以方便用户使用，还能带来一定的经济效益，所以开发本系统在经济上是可行的。
3.2.3运行可行性分析
开发本系统过程中已经充分考虑了使用者的感受，界面美观，而且有功能导航栏，方便用户很好的掌握，而且还有各种提示符，哪怕对计算机操作不熟练的也能使用本系统。所以综合考虑，本系统在运行方面是可行的。
3.2.4法律可行性
开发本系统过程中参阅的相关资料都是在学校图书馆参阅的，均为正规渠道，而且开发均是本人独立开发的，均是自己的知识储备，全是自己原创的，不存在知识产权，所以才法律上是可行的。
3.3系统功能分析
本系统采用功能针对性强、文字描述精确的方式进行设计。本基于VUE.js的在线教育系统是关于在线学习的系统，在设计功能时只取用最基础的功能，目的是提供最精准的服务。本系统包括前台和后台两部分。
前台的功能主要为课程信息管理。学生可以浏览课程信息、课程的文章信息、课程的评价信息，可以发表留言以及收藏课程、购买课程。学生在个人中心里可以管理收藏信息、留言信息、订单信息。教师负责发布课程、管理章节、管理课程订单等。管理员负责课程类型、课程信息、课程订单、章节信息、学生信息、教师信息等的管理。
管理员用例图如下图3.1所示：
图3.1管理员用例图
学生用例图如下图3.2所示：
图3.2学生用例图
教师用例科如下图3.3所示：
图3.3教师用例图
3.4系统性能分析
系统性能方面包括系统的框架、系统的开发理念、系统的开发界面原则、系统开发标准、系统开发流程、系统开发安全性、系统运行稳定性等。具体性能分析如下：
- 本系统是面向所有人群而开发的网站平台，所以采用的框架模式为B/s，B/s模式是借助浏览器进行系统访问的平台，所有信息可以共享；
- 系统在设计中采用结构化方式，首先将功能分为大的方面，再由大方面分为小方面，最后分为小细节再整合成完整的系统；
- 系统在界面设计时采用VUE.js技术，可以使界面更丰富，元素更多；
- 系统的操作流程采用简单的思路，使使用用户可以快速掌握本系统；
- 系统的运行速度要快，所有操作可以快速反映；
- 在系统开发时要注意系统的资源占用，以最少占用为标准进行设计；
- 采用发展的眼光看待问题，把系统的生命周期延长到最大；
- 调查所有使用用户的需求尽可能的满足。
3.5业务流程分析
业务流程涉及到系统的每个部分，调查系统在运行中数据会流动的每个环节，以学生注册开始到学生课程学习、购买进行业务流程分析。确保所有信息的流入、流出以及数据的完整性和处理问题的方法。本系统的流程为学生首先通过注册，注册成功后进行登录，登录后可以浏览简章节信息、课程信息，在课程详情里可以收藏课程和播放课程视频以及给课程留言、购买课程，还可以发布留言和管理订单信息、收藏信息、留言信息等。教师负责添加课程信息和视频信息、管理章节信息和学生信息等。系统中的所有数据都需要管理员审核。本系统的业务流程图如下图3.4所示：
图3.4系统业务流程图
第4章 系统设计
4.1系统功能结构设计
本系统的功能界面设计为四个，前台界面、学生中心界面和管理员中心界面、教师中心界面。根据不同用户的不同需求分开设计功能。前台界面的功能为课程信息、首页、个人中心、后台管理等，学生中心界面的功能为个人资料、我的收藏管理、课程订单管理等，管理员中心界面的功能为学生信息、课程信息管理等，教师中心界面的功能为课程、章节管理等。本系统的功能结构图如下图4.1所示：
图4.1系统功能结构图
4.2系统数据库设计
数据库就是数据的存储仓库，按照计算机的格式进行数据存入。为了使数据库具有独立性，防止因为系统崩溃而数据有损的问题在数据库建立时都采用单独的数据库。数据库具有共享性和单独性，在系统运行时会自动和相对应的数据进行通讯连接。本基于VUE.js的在线教育系统采用Mysql数据库设计，身份验证为Root，密码为Root。
4.2.1数据库ER图设计
根据分析所得本系统中主要的数据为管理员、学生、课程信息、课程视频、订单信息、留言信息等。所以本节针对这些数据画出数据ER图。
（1）管理员实体的属性为用户名和密码。管理员实体ER图如下图4.2所示：
图4.2管理员实体ER图
（2）学生实体的属性为编号、姓名、班级、专业等。学生实体ER图如下图4.3所示：
图4.3学生实体ER图
（3）留言信息实体的属性包括留言人、留言时间、内容等。留言信息实体ER图如下图4.4所示：
图4.4留言信息实体ER图
（4）订单实体的属性包括编号、购买课程、订单时间、价格等。订单实体的ER图如下图4.5所示：
图4.5订单实体ER图
（5）类别信息实体的属性包括编号和名称。类别信息实体ER图如下图4.6所示：
图4.6分类信息实体的ER图
（6）本系统的关系ER图如下图4.7所示：
图4.7系统关系ER图
4.2.2数据库表设计
本系统针对课程在线学习而设计，所以本系统的数据库表围绕课程而建立。本系统的数据库表包括课程信息表、留言信息表、订单信息表等。本系统的数据库表结构如下图4.1－4.13 所示：
表4.1 config
表4.2 dictionary
表4.3 kecheng
表4.4 kecheng_collection
表4.5 kecheng_liuyan
表4.6 kecheng_order
表4.7 laoshi
表4.8 token
表4.9 users
表4.10 xuesheng
表4.11 zhangjie
表4.12 zhangjie_collection
表4.13 zhangjie_liuyan
第5章 系统实现
5.1前台界面的实现
在前台里所有的信息都是共享的，注册用户、非注册用户、游客都可以浏览。主要为课程信息、个人中心和后台管理。
5.1.1首页界面的实现
本功能设计的目的是帮助用户一键返回首页，在首页里的元素包括轮播图、列表框、文字、图片等。在首页的上半部分是绿底白字的系统名称，系统名称下面是导航栏，接着就是轮播图，轮播图下面是课程信息。首页界面的实现界面如下图5.1所示：
图5.1首页界面的实现效果
5.1.2课程信息功能的实现界面
在课程信息界面里可以看到所有的课程。课程信息以课程的封面来展示，学生可以一目了然。课程信息功能的实现界面如下图5.2所示：
图5.2课程信息功能的实现界面
课程详情的实现界面如下图5.3所示：
图5.3课程详情的实现界面
5.1.3个人中心功能的实现界面
用户登录后在个人中心里可以管理自己的注册信息和收藏信息、订单信息，实现界面如下图5.4所示：
图5.4用户中心的功能实现界面
5.1.4课程购买功能的实现界面
在本功能模块里展示购买的课程名称、点击次数以及订单号。课程购买信息功能的实现界面如下图5.5所示：
图5.5课程购买信息功能的实现界面
5.1.5课程视频功能的实现界面
课程视频功能里可以看到课程的图片和标题，点击课程图片可以进入课程详情里，在课程详情里用户可以留言和收藏课程以及播放课程视频。课程视频功能的实现界面如下图5.6所示：
图5.6课程视频功能的实现界面
5.1.6在线留言功能的实现界面
用户在添加留言时可以只填写留言内容，留言成功后会显示留言人的账号和头像。用户在线留言功能的实现界面如下图5.7所示：
图5.7用户在线留言功能的实现界面
5.1.7章节信息功能的实现界面
学生在课程详情里可以浏览该课程的章节。章节信息功能的实现界面如下图5.8所示：
图5.8章节信息功能的实现界面
5.1.8课程订单管理功能的实现界面
学生可以管理已购买的课程。课程订单管理功能的实现界面如下图5.9所示：
图5.9课程订单管理功能的实现界面
5.2管理员功能的实现界面
管理员的功能为管理前台信息和更新前台信息以及管理学生、教师信息。管理的前台信息包括课程信息、章节信息、课程收藏信息、课程留言信息、课程订单信息等。管理员功能的实现界面如下图5.10所示：
图5.10管理员功能的实现界面
5.3教师功能的实现界面
教师的功能为管理个人资料和管理章节、课程信息以及回复学生留言、管理学生订单等。教师功能的实现界面如下图5.11所示：
图5.11教师功能的实现界面
第6章 系统测试
系统测试
CommonUtil.java
package com.utils;
import java.util.Random;
public class CommonUtil {
/**
* 获取随机字符串
*
* @param num
* @return
*/
public static String getRandomString(Integer num) {
String base = "abcdefghijklmnopqrstuvwxyz0123456789";
Random random = new Random();
StringBuffer sb = new StringBuffer();
for (int i = 0; i < num; i++) {
int number = random.nextInt(base.length());
sb.append(base.charAt(number));
}
return sb.toString();
}
}
KechengController.java
package com.controller;
import com.alibaba.fastjson.JSONObject;
import com.annotation.IgnoreAuth;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.mapper.Wrapper;
import com.entity.KechengEntity;
import com.entity.LaoshiEntity;
import com.entity.view.KechengView;
import com.service.*;
import com.utils.PageUtils;
import com.utils.PoiUtil;
import com.utils.R;
import com.utils.StringUtil;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.net.URL;
import java.util.*;
/**
* 课程
* 后端接口
* @author
* @email
*/
@RestController
@Controller
@RequestMapping("/kecheng")
public class KechengController {
private static final Logger logger = LoggerFactory.getLogger(KechengController.class);
@Autowired
private KechengService kechengService;
@Autowired
private TokenService tokenService;
@Autowired
private DictionaryService dictionaryService;
//级联表service
@Autowired
private LaoshiService laoshiService;
@Autowired
private XueshengService xueshengService;
@Autowired
private BumenzhuguanService bumenzhuguanService;
@Autowired
private XiaozhangService xiaozhangService;
/**
* 后端列表
*/
@RequestMapping("/page")
public R page(@RequestParam Map<String, Object> params, HttpServletRequest request){
logger.debug("page方法:,,Controller:{},,params:{}",this.getClass().getName(),JSONObject.toJSONString(params));
String role = String.valueOf(request.getSession().getAttribute("role"));
if(false)
return R.error(511,"永不会进入");
else if("学生".equals(role))
params.put("xueshengId",request.getSession().getAttribute("userId"));
else if("老师".equals(role))
params.put("laoshiId",request.getSession().getAttribute("userId"));
else if("部门主管".equals(role))
params.put("bumenzhuguanId",request.getSession().getAttribute("userId"));
else if("校长".equals(role))
params.put("xiaozhangId",request.getSession().getAttribute("userId"));
params.put("kechengDeleteStart",1);params.put("kechengDeleteEnd",1);
if(params.get("orderBy")==null || params.get("orderBy")==""){
params.put("orderBy","id");
}
PageUtils page = kechengService.queryPage(params);
//字典表数据转换
List<KechengView> list =(List<KechengView>)page.getList();
for(KechengView c:list){
//修改对应字典表字段
dictionaryService.dictionaryConvert(c, request);
}
return R.ok().put("data", page);
}
/**
* 后端详情
*/
@RequestMapping("/info/{id}")
public R info(@PathVariable("id") Long id, HttpServletRequest request){
logger.debug("info方法:,,Controller:{},,id:{}",this.getClass().getName(),id);
KechengEntity kecheng = kechengService.selectById(id);
if(kecheng !=null){
//entity转view
KechengView view = new KechengView();
BeanUtils.copyProperties( kecheng , view );//把实体数据重构到view中
//级联表
LaoshiEntity laoshi = laoshiService.selectById(kecheng.getLaoshiId());
if(laoshi != null){
BeanUtils.copyProperties( laoshi , view ,new String[]{ "id", "createTime", "insertTime", "updateTime"});//把级联的数据添加到view中,并排除id和创建时间字段
view.setLaoshiId(laoshi.getId());
}
//修改对应字典表字段
dictionaryService.dictionaryConvert(view, request);
return R.ok().put("data", view);
}else {
return R.error(511,"查不到数据");
}
}
/**
* 后端保存
*/
@RequestMapping("/save")
public R save(@RequestBody KechengEntity kecheng, HttpServletRequest request){
logger.debug("save方法:,,Controller:{},,kecheng:{}",this.getClass().getName(),kecheng.toString());
String role = String.valueOf(request.getSession().getAttribute("role"));
if(false)
return R.error(511,"永远不会进入");
else if("老师".equals(role))
kecheng.setLaoshiId(Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId"))));
Wrapper<KechengEntity> queryWrapper = new EntityWrapper<KechengEntity>()
.eq("laoshi_id", kecheng.getLaoshiId())
.eq("kecheng_name", kecheng.getKechengName())
.eq("kecheng_types", kecheng.getKechengTypes())
.eq("kecheng_clicknum", kecheng.getKechengClicknum())
.eq("shangxia_types", kecheng.getShangxiaTypes())
.eq("kecheng_delete", kecheng.getKechengDelete())
;
logger.info("sql语句:"+queryWrapper.getSqlSegment());
KechengEntity kechengEntity = kechengService.selectOne(queryWrapper);
if(kechengEntity==null){
kecheng.setKechengClicknum(1);
kecheng.setShangxiaTypes(1);
kecheng.setKechengDelete(1);
kecheng.setCreateTime(new Date());
kechengService.insert(kecheng);
return R.ok();
}else {
return R.error(511,"表中有相同数据");
}
}
/**
* 后端修改
*/
@RequestMapping("/update")
public R update(@RequestBody KechengEntity kecheng, HttpServletRequest request){
logger.debug("update方法:,,Controller:{},,kecheng:{}",this.getClass().getName(),kecheng.toString());
String role = String.valueOf(request.getSession().getAttribute("role"));
// if(false)
// return R.error(511,"永远不会进入");
// else if("老师".equals(role))
// kecheng.setLaoshiId(Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId"))));
//根据字段查询是否有相同数据
Wrapper<KechengEntity> queryWrapper = new EntityWrapper<KechengEntity>()
.notIn("id",kecheng.getId())
.andNew()
.eq("laoshi_id", kecheng.getLaoshiId())
.eq("kecheng_name", kecheng.getKechengName())
.eq("kecheng_types", kecheng.getKechengTypes())
.eq("kecheng_clicknum", kecheng.getKechengClicknum())
.eq("shangxia_types", kecheng.getShangxiaTypes())
.eq("kecheng_delete", kecheng.getKechengDelete())
;
logger.info("sql语句:"+queryWrapper.getSqlSegment());
KechengEntity kechengEntity = kechengService.selectOne(queryWrapper);
if("".equals(kecheng.getKechengPhoto()) || "null".equals(kecheng.getKechengPhoto())){
kecheng.setKechengPhoto(null);
}
if(kechengEntity==null){
kechengService.updateById(kecheng);//根据id更新
return R.ok();
}else {
return R.error(511,"表中有相同数据");
}
}
/**
* 删除
*/
@RequestMapping("/delete")
public R delete(@RequestBody Integer[] ids){
logger.debug("delete:,,Controller:{},,ids:{}",this.getClass().getName(),ids.toString());
ArrayList<KechengEntity> list = new ArrayList<>();
for(Integer id:ids){
KechengEntity kechengEntity = new KechengEntity();
kechengEntity.setId(id);
kechengEntity.setKechengDelete(2);
list.add(kechengEntity);
}
if(list != null && list.size() >0){
kechengService.updateBatchById(list);
}
return R.ok();
}
/**
* 批量上传
*/
@RequestMapping("/batchInsert")
public R save(String fileName){
logger.debug("batchInsert方法:,,Controller:{},,fileName:{}",this.getClass().getName(),fileName);
try {
List<KechengEntity> kechengList = new ArrayList<>();//上传的东西
Map<String, List<String>> seachFields= new HashMap<>();//要查询的字段
Date date = new Date();
int lastIndexOf = fileName.lastIndexOf(".");
if(lastIndexOf == -1){
return R.error(511,"该文件没有后缀");
}else{
String suffix = fileName.substring(lastIndexOf);
if(!".xls".equals(suffix)){
return R.error(511,"只支持后缀为xls的excel文件");
}else{
URL resource = this.getClass().getClassLoader().getResource("static/upload/" + fileName);//获取文件路径
File file = new File(resource.getFile());
if(!file.exists()){
return R.error(511,"找不到上传文件，请联系管理员");
}else{
List<List<String>> dataList = PoiUtil.poiImport(file.getPath());//读取xls文件
dataList.remove(0);//删除第一行，因为第一行是提示
for(List<String> data:dataList){
//循环
KechengEntity kechengEntity = new KechengEntity();
// kechengEntity.setLaoshiId(Integer.valueOf(data.get(0))); //课程 要改的
// kechengEntity.setKechengName(data.get(0)); //课程名称 要改的
// kechengEntity.setKechengPhoto("");//照片
// kechengEntity.setKechengTypes(Integer.valueOf(data.get(0))); //课程类型 要改的
// kechengEntity.setKechengOldMoney(data.get(0)); //课程原价 要改的
// kechengEntity.setKechengNewMoney(data.get(0)); //现价 要改的
// kechengEntity.setKechengClicknum(Integer.valueOf(data.get(0))); //点击次数 要改的
// kechengEntity.setShangxiaTypes(Integer.valueOf(data.get(0))); //是否上架 要改的
// kechengEntity.setKechengDelete(1);//逻辑删除字段
// kechengEntity.setKechengContent("");//照片
// kechengEntity.setCreateTime(date);//时间
kechengList.add(kechengEntity);
//把要查询是否重复的字段放入map中
}
//查询是否重复
kechengService.insertBatch(kechengList);
return R.ok();
}
}
}
}catch (Exception e){
return R.error(511,"批量插入数据异常，请联系管理员");
}
}
/**
* 前端列表
*/
@IgnoreAuth
@RequestMapping("/list")
public R list(@RequestParam Map<String, Object> params, HttpServletRequest request){
logger.debug("list方法:,,Controller:{},,params:{}",this.getClass().getName(),JSONObject.toJSONString(params));
// 没有指定排序字段就默认id倒序
if(StringUtil.isEmpty(String.valueOf(params.get("orderBy")))){
params.put("orderBy","id");
}
PageUtils page = kechengService.queryPage(params);
//字典表数据转换
List<KechengView> list =(List<KechengView>)page.getList();
for(KechengView c:list)
dictionaryService.dictionaryConvert(c, request); //修改对应字典表字段
return R.ok().put("data", page);
}
/**
* 前端详情
*/
@RequestMapping("/detail/{id}")
public R detail(@PathVariable("id") Long id, HttpServletRequest request){
logger.debug("detail方法:,,Controller:{},,id:{}",this.getClass().getName(),id);
KechengEntity kecheng = kechengService.selectById(id);
if(kecheng !=null){
//点击数量加1
kecheng.setKechengClicknum(kecheng.getKechengClicknum()+1);
kechengService.updateById(kecheng);
//entity转view
KechengView view = new KechengView();
BeanUtils.copyProperties( kecheng , view );//把实体数据重构到view中
//级联表
LaoshiEntity laoshi = laoshiService.selectById(kecheng.getLaoshiId());
if(laoshi != null){
BeanUtils.copyProperties( laoshi , view ,new String[]{ "id", "createDate"});//把级联的数据添加到view中,并排除id和创建时间字段
view.setLaoshiId(laoshi.getId());
}
//修改对应字典表字段
dictionaryService.dictionaryConvert(view, request);
return R.ok().put("data", view);
}else {
return R.error(511,"查不到数据");
}
}
/**
* 前端保存
*/
@RequestMapping("/add")
public R add(@RequestBody KechengEntity kecheng, HttpServletRequest request){
logger.debug("add方法:,,Controller:{},,kecheng:{}",this.getClass().getName(),kecheng.toString());
Wrapper<KechengEntity> queryWrapper = new EntityWrapper<KechengEntity>()
.eq("laoshi_id", kecheng.getLaoshiId())
.eq("kecheng_name", kecheng.getKechengName())
.eq("kecheng_types", kecheng.getKechengTypes())
.eq("kecheng_clicknum", kecheng.getKechengClicknum())
.eq("shangxia_types", kecheng.getShangxiaTypes())
.eq("kecheng_delete", kecheng.getKechengDelete())
;
logger.info("sql语句:"+queryWrapper.getSqlSegment());
KechengEntity kechengEntity = kechengService.selectOne(queryWrapper);
if(kechengEntity==null){
kecheng.setKechengDelete(1);
kecheng.setCreateTime(new Date());
kechengService.insert(kecheng);
return R.ok();
}else {
return R.error(511,"表中有相同数据");
}
}
}
MPUtil.java
package 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;
}
}
utils.js
import storage from './storage';
import menu from './menu';
/**
* 是否有权限
* @param {*} key
*/
export function isAuth(tableName,key) {
let role = storage.get("role");
if(!role){
role = '管理员';
}
let menus = menu.list();
for(let i=0;i<menus.length;i++){
if(menus[i].roleName==role){
for(let j=0;j<menus[i].backMenu.length;j++){
for(let k=0;k<menus[i].backMenu[j].child.length;k++){
if(tableName==menus[i].backMenu[j].child[k].tableName){
let buttons = menus[i].backMenu[j].child[k].buttons.join(',');
return buttons.indexOf(key) !== -1 || false
}
}
}
}
}
// for(let i=0;i<menus.length;i++){
// if(menus[i].roleName==role){
// for(let j=0;j<menus[i].backMenu.length;j++){
// if(menus[i].backMenu[j].tableName==tableName){
// let buttons = menus[i].backMenu[j].child[0].buttons.join(',');
// return buttons.indexOf(key) !== -1 || false
// }
// }
// }
// }
return false;
}
/**
* * 获取当前时间（yyyy-MM-dd hh:mm:ss）
* */
export function getCurDateTime() {
let currentTime = new Date(),
year = currentTime.getFullYear(),
month = currentTime.getMonth() + 1 < 10 ? '0' + (currentTime.getMonth() + 1) : currentTime.getMonth() + 1,
day = currentTime.getDate() < 10 ? '0' + currentTime.getDate() : currentTime.getDate(),
hour = currentTime.getHours(),
minute = currentTime.getMinutes(),
second = currentTime.getSeconds();
return year + "-" + month + "-" + day + " " +hour +":" +minute+":"+second;
}
/**
* * 获取当前日期（yyyy-MM-dd）
* */
export function getCurDate() {
let currentTime = new Date(),
year = currentTime.getFullYear(),
month = currentTime.getMonth() + 1 < 10 ? '0' + (currentTime.getMonth() + 1) : currentTime.getMonth() + 1,
day = currentTime.getDate() < 10 ? '0' + currentTime.getDate() : currentTime.getDate();
return year + "-" + month + "-" + day;
}
声明
本博客适用于广泛的学术和教育用途，包括但不限于个人学习、开发设计，产品设计。仅供学习参考，旨在为读者提供深入理解和学术研究的材料。