前端添加目录和课程,编辑

main
whb 2 years ago
parent c093d7c323
commit 8af2505255

@ -36,7 +36,7 @@ public class ApplicationController {
return JsonResult.success(list).setCount(list.getTotal()); return JsonResult.success(list).setCount(list.getTotal());
} }
@RequestMapping("/queryDir") @GetMapping ("/queryDir")
@ApiOperation("查询目录") @ApiOperation("查询目录")
public JsonResult<Directory> queryDir(){ public JsonResult<Directory> queryDir(){
List<Directory> list = applicationService.queryDir(); List<Directory> list = applicationService.queryDir();
@ -82,7 +82,7 @@ public class ApplicationController {
@RequestMapping("/addDirectory") @RequestMapping("/addDirectory")
@ApiOperation("新增目录") @ApiOperation("新增目录")
public JsonResult addDirectory(@RequestBody Directory directory){ public JsonResult addDirectory( Directory directory){
int result = applicationService.addDirectory(directory); int result = applicationService.addDirectory(directory);
if(result>0){ if(result>0){
return JsonResult.success(ResultCode.SUCCESS); return JsonResult.success(ResultCode.SUCCESS);

@ -61,7 +61,7 @@ public class CourseController {
* *
*/ */
@ApiOperation("课程添加") @ApiOperation("课程添加")
@PostMapping("/addCourse") @GetMapping("/addCourse")
public JsonResult addCourse(CourseVo courseVo){ public JsonResult addCourse(CourseVo courseVo){
int count = courseService.addCourse(courseVo); int count = courseService.addCourse(courseVo);
@ -72,7 +72,7 @@ public class CourseController {
* ID * ID
*/ */
@ApiOperation("删除课程") @ApiOperation("删除课程")
@GetMapping("delCourseById") @GetMapping("/delCourseById")
public JsonResult delCourseById(Integer id){ public JsonResult delCourseById(Integer id){
courseService.delCourseById(id); courseService.delCourseById(id);
return JsonResult.success(); return JsonResult.success();
@ -82,7 +82,7 @@ public class CourseController {
* *
*/ */
@ApiOperation("更新课程") @ApiOperation("更新课程")
@PostMapping("updateById") @RequestMapping("/updateById")
public JsonResult updateById(CourseVo courseVo){ public JsonResult updateById(CourseVo courseVo){
int count = courseService.updateById(courseVo); int count = courseService.updateById(courseVo);
return JsonResult.success(); return JsonResult.success();

@ -66,9 +66,9 @@ public class CourseServiceImpl extends ServiceImpl<CourseMapper,Course> implemen
*/ */
@Override @Override
public int addCourse(CourseVo courseVo) { public int addCourse(CourseVo courseVo) {
if (courseVo == null) if (courseVo.getCourseName().isEmpty())
{ {
throw new ServiceException("400","课程添加失败"); throw new ServiceException("400","课程名称不能为空");
} }
//查询名称查询课程 //查询名称查询课程
int sum = courseMapper.selectByName(courseVo.getCourseName()); int sum = courseMapper.selectByName(courseVo.getCourseName());
@ -76,16 +76,22 @@ public class CourseServiceImpl extends ServiceImpl<CourseMapper,Course> implemen
{ {
throw new ServiceException("403","该课程已经存在"); throw new ServiceException("403","该课程已经存在");
} }
Course course = new Course(); Course course = new Course();
BeanUtils.copyProperties(courseVo,course); BeanUtils.copyProperties(courseVo,course);
//获取目录名称 //获取目录名称
String dirName = courseVo.getDirName(); String dirName = courseVo.getDirName();
if (dirName.isEmpty())
{
throw new ServiceException("403","归属目录不能为空");
}
//查询目录id并赋值给course //查询目录id并赋值给course
Integer id = directoryMapper.selectByName(dirName); Integer id = directoryMapper.selectByName(dirName);
if (id==null)
{
throw new ServiceException("403","归属目录不存在");
}
course.setDirId(id); course.setDirId(id);
//课程插入 //课程插入
int count = courseMapper.insert(course); int count = courseMapper.insert(course);
@ -96,8 +102,6 @@ public class CourseServiceImpl extends ServiceImpl<CourseMapper,Course> implemen
}else { }else {
throw new ServiceException("400", "课程添加失败"); throw new ServiceException("400", "课程添加失败");
} }
} }
/** /**
@ -118,16 +122,26 @@ public class CourseServiceImpl extends ServiceImpl<CourseMapper,Course> implemen
*/ */
@Override @Override
public int updateById(CourseVo courseVo) { public int updateById(CourseVo courseVo) {
if (courseVo==null) if (courseVo.getCourseName().isEmpty())
{ {
throw new ServiceException("400","课程更新失败"); throw new ServiceException("400","课程名称不能为空");
} }
//将vo值赋给course //将vo值赋给course
Course course = new Course(); Course course = new Course();
BeanUtils.copyProperties(courseVo,course); BeanUtils.copyProperties(courseVo,course);
//查询归属目录 //查询归属目录
String dirName = courseVo.getDirName(); String dirName = courseVo.getDirName();
if (dirName.isEmpty())
{
throw new ServiceException("403","归属目录不能为空");
}
//查询目录id并赋值给course
Integer id = directoryMapper.selectByName(dirName); Integer id = directoryMapper.selectByName(dirName);
if (id==null)
{
throw new ServiceException("403","归属目录不存在");
}
course.setDirId(id); course.setDirId(id);
//根据id进行课程更新 //根据id进行课程更新
int count = courseMapper.updateCourseById(course); int count = courseMapper.updateCourseById(course);
@ -151,7 +165,7 @@ public class CourseServiceImpl extends ServiceImpl<CourseMapper,Course> implemen
} }
//根据id查找数据 //根据id查找数据
CourseVo courseVo = courseMapper.queryCourseById(id); CourseVo courseVo = courseMapper.queryCourseById(id);
if (courseVo==null) if (courseVo==null)
{ {
throw new ServiceException("401","课程不存在"); throw new ServiceException("401","课程不存在");

@ -7,7 +7,7 @@ import lombok.Data;
@Data @Data
public class CourseVo { public class CourseVo {
@TableId @TableId
private int id; private Integer id;
//课程名 //课程名
private String courseName; private String courseName;

@ -46,7 +46,7 @@ public class DownloadController {
@ApiOperation("图片上传") @ApiOperation("图片上传")
@PostMapping("/uploadFile") @PostMapping("/uploadFile")
public JsonResult upload(@RequestParam("file") @RequestPart MultipartFile file){ public JsonResult upload(@RequestParam("upload") @RequestPart MultipartFile file){
String upload = null; String upload = null;
try { try {
if (file != null) { if (file != null) {

@ -3,52 +3,67 @@
<mapper namespace="com.zhiyun.zhiyun03.course.mapper.CourseMapper"> <mapper namespace="com.zhiyun.zhiyun03.course.mapper.CourseMapper">
<update id="updateCourseById"> <update id="updateCourseById">
update course update course
<set > <set>
<if test="courseName != null" > <if test="courseName != null">
course_name=#{courseName}, course_name=#{courseName},
</if> </if>
<if test="courseUrl != null" > <if test="courseUrl != null">
course_url=#{courseUrl}, course_url=#{courseUrl},
</if> </if>
<if test="courseBrief != null" > <if test="courseBrief != null">
course_brief=#{courseBrief}, course_brief=#{courseBrief},
</if> </if>
<if test="dirId != null" > <if test="dirId != null">
dir_id=#{dirId}, dir_id=#{dirId},
</if> </if>
<if test="courseIcon != null" > <if test="courseIcon != null">
course_icon=#{courseIcon} course_icon=#{courseIcon}
</if> </if>
</set> </set>
<where> <where>
<if test="id!=null"> <if test="id!=null">
id = #{id} id = #{id}
</if> </if>
</where> </where>
</update> </update>
<select id="queryCourse" resultType="com.zhiyun.zhiyun03.course.vo.CourseVo"> <select id="queryCourse" resultType="com.zhiyun.zhiyun03.course.vo.CourseVo">
select c.id,c.course_name,c.course_brief,c.course_url,d.dir_name,c.course_icon,c.course_addtime,c.course_updatetime select c.id,
c.course_name,
c.course_brief,
c.course_url,
d.dir_name,
c.course_icon,
c.course_addtime,
c.course_updatetime
from course as c from course as c
inner join inner join
(select * from directory) as d (select * from directory) as d
on c.dir_id = d.id on c.dir_id = d.id
-- where d.id=c.dir_id
</select> </select>
<select id="queryCourseById" resultType="com.zhiyun.zhiyun03.course.vo.CourseVo"> <select id="queryCourseById" resultType="com.zhiyun.zhiyun03.course.vo.CourseVo">
select c.id,c.course_name,c.course_brief,c.course_url,d.dir_name,c.course_icon,c.course_addtime,c.course_updatetime select c.id,
c.course_name,
c.course_brief,
c.course_url,
d.dir_name,
c.course_icon,
c.course_addtime,
c.course_updatetime
from course as c from course as c
inner join inner join
(select * from directory) as d (select * from directory) as d
on c.dir_id = d.id on c.dir_id = d.id
where c.id =#{id} where c.id = #{id}
</select> </select>
<select id="selectByName" resultType="java.lang.Integer"> <select id="selectByName" resultType="java.lang.Integer">
select count(1) from course where course_name =#{courseName} select count(1)
from course
where course_name = #{courseName}
</select> </select>
</mapper> </mapper>

@ -8,15 +8,23 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="layui/css/layui.css" tppabs="//res.ilayuis.com/layui/dist/css/layui.css" media="all"> <link rel="stylesheet" href="layui/css/layui.css" tppabs="//res.ilayuis.com/layui/dist/css/layui.css" media="all">
<!-- 注意如果你直接复制所有代码到本地上述css路径需要改成你本地的 --> <!-- 注意如果你直接复制所有代码到本地上述css路径需要改成你本地的 -->
<style>
.layui-container{
display: flex;
}
</style>
</head> </head>
<body> <body>
<table class="layui-hide" id="test" lay-filter="test"></table> <table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo"> <script type="text/html" id="toolbarDemo">
<div class="layui-btn-container"> <div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">添加目录</button> <button class="layui-btn layui-btn-sm" lay-event="addData">添加目录</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">添加课程</button> <button class="layui-btn layui-btn-sm" lay-event="addCourse">添加课程</button>
</div> </div>
</script> </script>
<script type="text/html" id="barDemo"> <script type="text/html" id="barDemo">
@ -28,8 +36,6 @@
<script src="layui/layui.js" charset="utf-8"></script> <script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述 JS 路径需要改成你本地的 --> <!-- 注意:如果你直接复制所有代码到本地,上述 JS 路径需要改成你本地的 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script> <script>
layui.use('table', function () { layui.use('table', function () {
var table = layui.table; var table = layui.table;
@ -67,39 +73,33 @@
, page: true , page: true
}); });
//工具栏事件
//头工具栏事件
table.on('toolbar(test)', function (obj) { table.on('toolbar(test)', function (obj) {
var checkStatus = table.checkStatus(obj.config.id); var data = obj.data;
switch (obj.event) { //console.log(obj)
case 'getCheckData': if (obj.event === 'addData') {
var data = checkStatus.data; addDir(data);
layer.alert(JSON.stringify(data)); } else if (obj.event === 'addCourse') {
break; addCourse(data);
case 'getCheckLength':
var data = checkStatus.data;
layer.msg('选中了:' + data.length + ' 个');
break;
case 'isAll':
layer.msg(checkStatus.isAll ? '全选' : '未全选')
break;
} }
;
}); });
//监听行工具事件 //监听行工具事件
table.on('tool(test)', function(obj){ table.on('tool(test)', function (obj) {
var data = obj.data; var data = obj.data;
//console.log(obj) //console.log(obj)
if(obj.event === 'del'){ if (obj.event === 'del') {
layer.confirm('真的删除行么', function(index){ layer.confirm('真的删除行么', function (index) {
//obj.del();//删除表结构 //obj.del();//删除表结构
layer.close(index); layer.close(index);
//获取要删除的服务的id //获取要删除的服务的id
var deleteCourseId = data.id; var deleteCourseId = data.id;
$.get("http://localhost:8080/api/course/delCourseById",{ "id": deleteCourseId},function (result) { $.get("http://localhost:8080/api/course/delCourseById", {"id": deleteCourseId}, function (result) {
if (result.code==200){ if (result.code == 200) {
// 删除成功之后 弹出msg // 删除成功之后 弹出msg
layer.msg(result.msg); layer.msg(result.msg);
// 重点:继续显示当前页 // 重点:继续显示当前页
@ -109,27 +109,339 @@
layer.close(index); layer.close(index);
} }
}); });
}); });
} else if(obj.event === 'edit'){ } else if (obj.event === 'edit') {
// layer.prompt({
// formType: 2
// ,value: data.email
// }, function(value, index){
// obj.update({
// email: value
// });
// layer.close(index);
// });
//layer.alert(JSON.stringify(data));
selectOne(data); selectOne(data);
} }
}); });
}); });
</script>
<script>
function selectOne(data) {
//弹框
layer.open({
type: 1,
content: $("#updateForm").html(),
title: ['修改页面', 'font-size:18px;'],
area: ['600px', '600px'],
//弹出后回调
success: function () {
$("#id").val(data.id);
$("#courseName").val(data.courseName);
$("#courseBrief").val(data.courseBrief);
$("#courseUrl").val(data.courseUrl);
$("#dirName").val(data.dirName);
$("#courseIcon").val(data.courseIcon);
//渲染页面
layui.form.render();
},
btn: ['提交', '取消']
, yes: function (index, layero) {
//修改操作
$.get("http://localhost:8080/api/course/updateById", $("#updateCourse").serialize(),
function (data) {
if ("success" == data.msg) {
layer.msg(data.msg);
$(".layui-laypage-btn").click();
parent.layer.close(index);
} else {
layer.msg(data.msg);
}
});
}
, btn2: function (index, layero) {
// alert("取消")
}
});
layui.use(['form'], function() {
var form = layui.form;
$.ajax({
url: 'http://localhost:8080/application/queryDir',
type:"get",
success: function(data) {
if(data.msg === "success"){
//给一个默认值(‘请选择’)
var opt = '<option value="" selected="'+ data.dirName +'"></option>';
//获取返回的数据
var value = data.data;
//循环遍历
for (var i in value) {
opt += '<option value = "' + value[i].dirName + '">' + value[i].dirName + '</option>'
console.log(value[i].dirName)
}
$("#directorId").html(opt);
form.render('select');//需要渲染一下
}else{
layer.alert(data.msg,{ icon:2,title:'提示'},function(i){ layer.closeAll();});
}
}
});
});
}
</script> </script>
<script type="text/html" id="updateForm">
<form class="layui-form" id="updateCourse">
<!-- 把id 作为隐藏域传过去 -->
<input type="hidden" name="id" id="id">
<div class="layui-form-item">
<label class="layui-form-label">课程名称</label>
<div class="layui-input-block">
<input type="text" name="courseName" id="courseName" required lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">课程简介</label>
<div class="layui-input-block">
<input type="text" name="courseBrief" id="courseBrief" required lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">课程链接</label>
<div class="layui-input-block">
<input type="text" name="courseUrl" id="courseUrl" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">归属目录</label>
<div class="layui-input-block">
<select name="dirName" id="directorId" >
<option value="dirName"></option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">课程图标</label>
<div class="layui-input-block">
<input type="text" name="courseIcon" id="courseIcon" class="layui-input">
</div>
</div>
</form>
</script>
<script>
function addDir(data) {
//弹框
layer.open({
type: 1,
content: $("#addForm").html(),
title: ['添加页面', 'font-size:18px;'],
area: ['600px', '600px'],
btn: ['提交', '取消']
, yes: function (index, layero) {
//修改操作
$.get("http://localhost:8080/application/addDirectory", $("#addDirectory").serialize(),
function (data) {
if ("success" == data.msg) {
layer.msg(data.msg);
$(".layui-laypage-btn").click();
parent.layer.close(index);
} else {
layer.msg(data.msg);
}
});
}
, btn2: function (index, layero) {
// alert("取消")
}
});
//拖拽上传
upload.render({
elem: '#test10'
,url: 'http://localhost:8080/download/uploadFile?param=upload' //此处用的是第三方的 http 请求演示,实际使用时改成您自己的上传接口即可。
,done: function(res){
layer.msg('上传成功');
layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data);
console.log(res)
}
});
}
</script>
<script type="text/html" id="addForm">
<form class="layui-form" id="addDirectory">
<!-- 把id 作为隐藏域传过去 -->
<input type="hidden" name="id" id="id">
<div class="layui-form-item">
<label class="layui-form-label">目录名称</label>
<div class="layui-input-block">
<input type="text" name="dirName" id="dirName" required lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">选择icon</label>
<div class="layui-container" id="test10">
<div class="layui-row">
<div class="layui-col-md4"lay-event="addData">
<img src="./images/01.png" alt="图片1">
<img src="./images/01.png" alt="图片1">
<img src="./images/01.png" alt="图片1">
<img src="./images/01.png" alt="图片1">
<img src="./images/01.png" alt="图片1">
<img src="./images/01.png" alt="图片1">
<img src="./images/01.png" alt="图片1">
<img src="./images/01.png" alt="图片1">
<img src="./images/01.png" alt="图片1">
<img src="./images/01.png" alt="图片1">
<img src="./images/01.png" alt="图片1">
<img src="./images/01.png" alt="图片1">
<img src="./images/01.png" alt="图片1">
<img src="./images/01.png" alt="图片1">
<img src="./images/01.png" alt="图片1">
<img src="./images/01.png" alt="图片1">
</div>
</div>
</div>
</div>
</form>
</script>
<script>
function addCourse(data) {
//弹框
layer.open({
type: 1,
content: $("#addForm1").html(),
title: ['添加课程', 'font-size:18px;'],
area: ['600px', '600px'],
btn: ['提交', '取消']
, yes: function (index, layero) {
//修改操作
$.get("http://localhost:8080/api/course/addCourse", $("#addCourse1").serialize(),
function (data) {
if ("success" == data.msg) {
layer.msg(data.msg);
$(".layui-laypage-btn").click();
parent.layer.close(index);
} else {
layer.msg(data.msg);
}
});
}
, btn2: function (index, layero) {
// alert("取消")
}
});
layui.use(['form'], function() {
var form = layui.form;
$.ajax({
url: 'http://localhost:8080/application/queryDir',
type:"get",
success: function(data) {
if(data.msg === "success"){
//给一个默认值(‘请选择’)
var opt = '<option value="" selected=""></option>';
//获取返回的数据
var value = data.data;
//循环遍历
for (var i in value) {
opt += '<option value = "' + value[i].dirName + '">' + value[i].dirName + '</option>'
console.log(value[i].dirName)
}
$("#directorId").html(opt);
form.render('select');//需要渲染一下
}else{
layer.alert(data.msg,{ icon:2,title:'提示'},function(i){ layer.closeAll();});
}
}
});
});
layui.use('carousel', function(){
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#test1'
,width: '15%' //设置容器宽度
,arrow: 'always' //始终显示箭头
//,anim: 'updown' //切换动画方式
});
});
}
</script>
<script type="text/html" id="addForm1">
<form class="layui-form" id="addCourse1">
<!-- 把id 作为隐藏域传过去 -->
<input type="hidden" name="id" id="id">
<div class="layui-form-item">
<label class="layui-form-label">课程名称</label>
<div class="layui-input-block">
<input type="text" name="courseName" id="courseName" required lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">课程名称</label>
<div class="layui-input-block">
<input type="text" name="courseBrief" id="courseBrief" required lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">课程链接</label>
<div class="layui-input-block">
<input type="text" name="courseUrl" id="courseUrl" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">归属目录</label>
<div class="layui-input-block">
<select name="dirName" id="directorId" >
<option value="">直接选择或搜索选择</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">选择icon</label>
<div class="layui-carousel" id="test1">
<div carousel-item>
<div><img src="//res.ilayuis.com/static/images/layui/demo/1.png" tppabs="//res.ilayuis.com/static/images/layui/demo/1.png"></div>
<div><img src="//res.ilayuis.com/static/images/layui/demo/2.png" tppabs="//res.ilayuis.com/static/images/layui/demo/2.png"></div>
<div><img src="//res.ilayuis.com/static/images/layui/demo/3.png" tppabs="//res.ilayuis.com/static/images/layui/demo/3.png"></div>
<div><img src="//res.ilayuis.com/static/images/layui/demo/4.png" tppabs="//res.ilayuis.com/static/images/layui/demo/4.png"></div>
<div><img src="//res.ilayuis.com/static/images/layui/demo/5.png" tppabs="//res.ilayuis.com/static/images/layui/demo/5.png"></div>
<div><img src="//res.ilayuis.com/static/images/layui/demo/6.png" tppabs="//res.ilayuis.com/static/images/layui/demo/6.png"></div>
<div><img src="//res.ilayuis.com/static/images/layui/demo/7.png" tppabs="//res.ilayuis.com/static/images/layui/demo/7.png"></div>
</div>
</div>
</div>
</form>
</script>
</body> </body>
</html> </html>

@ -112,17 +112,6 @@
}); });
} else if(obj.event === 'edit'){ } else if(obj.event === 'edit'){
// layer.prompt({
// formType: 2
// ,value: data.email
// }, function(value, index){
// obj.update({
// email: value
// });
// layer.close(index);
// });
//layer.alert(JSON.stringify(data));
selectOne(data); selectOne(data);
} }
}); });

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save