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

main
whb 2 years ago
parent c093d7c323
commit 8af2505255

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

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

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

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

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

@ -3,52 +3,67 @@
<mapper namespace="com.zhiyun.zhiyun03.course.mapper.CourseMapper">
<update id="updateCourseById">
update course
<set >
<if test="courseName != null" >
course_name=#{courseName},
</if>
<if test="courseUrl != null" >
course_url=#{courseUrl},
</if>
<if test="courseBrief != null" >
course_brief=#{courseBrief},
</if>
<if test="dirId != null" >
dir_id=#{dirId},
</if>
<if test="courseIcon != null" >
course_icon=#{courseIcon}
</if>
</set>
<where>
<if test="id!=null">
id = #{id}
</if>
</where>
</update>
<update id="updateCourseById">
update course
<set>
<if test="courseName != null">
course_name=#{courseName},
</if>
<if test="courseUrl != null">
course_url=#{courseUrl},
</if>
<if test="courseBrief != null">
course_brief=#{courseBrief},
</if>
<if test="dirId != null">
dir_id=#{dirId},
</if>
<if test="courseIcon != null">
course_icon=#{courseIcon}
</if>
</set>
<where>
<if test="id!=null">
id = #{id}
</if>
</where>
</update>
<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
inner join
(select * from directory) as d
on c.dir_id = d.id
-- where d.id=c.dir_id
</select>
<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
inner join
(select * from directory) as d
on c.dir_id = d.id
where c.id =#{id}
where c.id = #{id}
</select>
<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>
</mapper>

@ -8,15 +8,23 @@
<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">
<!-- 注意如果你直接复制所有代码到本地上述css路径需要改成你本地的 -->
<style>
.layui-container{
display: flex;
}
</style>
</head>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
<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="getCheckLength">添加课程</button>
<button class="layui-btn layui-btn-sm" lay-event="addData">添加目录</button>
<button class="layui-btn layui-btn-sm" lay-event="addCourse">添加课程</button>
</div>
</script>
<script type="text/html" id="barDemo">
@ -28,8 +36,6 @@
<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述 JS 路径需要改成你本地的 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
layui.use('table', function () {
var table = layui.table;
@ -67,39 +73,33 @@
, page: true
});
//工具栏事件
//头工具栏事件
table.on('toolbar(test)', function (obj) {
var checkStatus = table.checkStatus(obj.config.id);
switch (obj.event) {
case 'getCheckData':
var data = checkStatus.data;
layer.alert(JSON.stringify(data));
break;
case 'getCheckLength':
var data = checkStatus.data;
layer.msg('选中了:' + data.length + ' 个');
break;
case 'isAll':
layer.msg(checkStatus.isAll ? '全选' : '未全选')
break;
var data = obj.data;
//console.log(obj)
if (obj.event === 'addData') {
addDir(data);
} else if (obj.event === 'addCourse') {
addCourse(data);
}
;
});
//监听行工具事件
table.on('tool(test)', function(obj){
table.on('tool(test)', function (obj) {
var data = obj.data;
//console.log(obj)
if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
if (obj.event === 'del') {
layer.confirm('真的删除行么', function (index) {
//obj.del();//删除表结构
layer.close(index);
//获取要删除的服务的id
var deleteCourseId = data.id;
$.get("http://localhost:8080/api/course/delCourseById",{ "id": deleteCourseId},function (result) {
if (result.code==200){
$.get("http://localhost:8080/api/course/delCourseById", {"id": deleteCourseId}, function (result) {
if (result.code == 200) {
// 删除成功之后 弹出msg
layer.msg(result.msg);
// 重点:继续显示当前页
@ -109,27 +109,339 @@
layer.close(index);
}
});
});
} 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));
} else if (obj.event === 'edit') {
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 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>
</html>

@ -112,17 +112,6 @@
});
} 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);
}
});

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