wanghaobo
/
zhiyun
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
main
whb
parent f078503ecf
commit 95c2766e64
4 changed files with 162 additions and 49 deletions

6
pom.xml
Unescape Escape View File

@ -62,6 +62,12 @@
<version>5.0.7</version> <version>5.0.7</version>
</dependency> </dependency>
<!-- 引入 thymeleaf 模板依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- <dependency>--> <!-- <dependency>-->
<!-- <groupId>com.github.pagehelper</groupId>--> <!-- <groupId>com.github.pagehelper</groupId>-->
<!-- <artifactId>pagehelper</artifactId>--> <!-- <artifactId>pagehelper</artifactId>-->

39
src/main/java/com/zhiyun/zhiyun03/course/controller/CourseController.java
Unescape Escape View File

@ -7,12 +7,16 @@ import com.zhiyun.zhiyun03.course.vo.CourseVo;
import com.zhiyun.zhiyun03.course.vo.PageVO; import com.zhiyun.zhiyun03.course.vo.PageVO;
import com.zhiyun.zhiyun03.utils.common.JsonResult; import com.zhiyun.zhiyun03.utils.common.JsonResult;
import com.zhiyun.zhiyun03.utils.oss.AliyunOssUtil;
import io.swagger.annotations.Api; import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation; import io.swagger.annotations.ApiOperation;
import io.swagger.annotations.ApiParam; import io.swagger.annotations.ApiParam;
import org.springframework.web.bind.annotation.*; import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import javax.annotation.Resource; import javax.annotation.Resource;
import java.io.File;
import java.io.FileOutputStream;
/** /**
@ -29,6 +33,11 @@ public class CourseController {
@Resource @Resource
private CourseService courseService; private CourseService courseService;
@Resource
private AliyunOssUtil ossUtil;
private String path = "";
/** /**
* 查询分页课程信息 * 查询分页课程信息
@ -63,8 +72,10 @@ public class CourseController {
@ApiOperation("课程添加") @ApiOperation("课程添加")
@GetMapping("/addCourse") @GetMapping("/addCourse")
public JsonResult addCourse(CourseVo courseVo){ public JsonResult addCourse(CourseVo courseVo){
courseVo.setCourseIcon(path);
int count = courseService.addCourse(courseVo); int count = courseService.addCourse(courseVo);
return JsonResult.success(); return JsonResult.success();
} }
@ -89,6 +100,34 @@ public class CourseController {
} }
@ApiOperation("图片上传")
@PostMapping("/uploadFile")
public JsonResult upload(@RequestParam("file") @RequestPart MultipartFile file){
String upload = null;
try {
if (file != null) {
String fileName = file.getOriginalFilename();
if (!"".equals(fileName.trim())) {
File newFile = new File(fileName);
FileOutputStream os = new FileOutputStream(newFile);
os.write(file.getBytes());
os.close();
//把file里的内容复制到newFile中
file.transferTo(newFile);
upload = ossUtil.upload(newFile);
}
}
} catch (Exception e) {
e.printStackTrace();
}
path = "https://zhiyun03.oss-cn-beijing.aliyuncs.com/"+ upload;
return JsonResult.success(path);
}
} }

2
src/main/java/com/zhiyun/zhiyun03/download/controller/DownloadController.java
Unescape Escape View File

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

164
src/main/resources/templates/layui-v2.6.8/courseList.html
Unescape Escape View File

@ -9,9 +9,9 @@
<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> <style>
.layui-container{ .layui-container {
display: flex; display: flex;
} }
</style> </style>
@ -159,15 +159,15 @@
// alert("取消") // alert("取消")
} }
}); });
layui.use(['form'], function() { layui.use(['form'], function () {
var form = layui.form; var form = layui.form;
$.ajax({ $.ajax({
url: 'http://localhost:8080/application/queryDir', url: 'http://localhost:8080/application/queryDir',
type:"get", type: "get",
success: function(data) { success: function (data) {
if(data.msg === "success"){ if (data.msg === "success") {
//给一个默认值（‘请选择’） //给一个默认值（‘请选择’）
var opt = '<option value="" selected="'+ data.dirName +'"></option>'; var opt = '<option value="" selected="' + data.dirName + '"></option>';
//获取返回的数据 //获取返回的数据
var value = data.data; var value = data.data;
//循环遍历 //循环遍历
@ -178,8 +178,10 @@
$("#directorId").html(opt); $("#directorId").html(opt);
form.render('select');//需要渲染一下 form.render('select');//需要渲染一下
}else{ } else {
layer.alert(data.msg,{ icon:2,title:'提示'},function(i){ layer.closeAll();}); layer.alert(data.msg, {icon: 2, title: '提示'}, function (i) {
layer.closeAll();
});
} }
} }
@ -220,7 +222,7 @@
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label">归属目录</label> <label class="layui-form-label">归属目录</label>
<div class="layui-input-block"> <div class="layui-input-block">
<select name="dirName" id="directorId" > <select name="dirName" id="directorId">
<option value="dirName"></option> <option value="dirName"></option>
</select> </select>
</div> </div>
@ -264,8 +266,8 @@
//拖拽上传 //拖拽上传
upload.render({ upload.render({
elem: '#test10' elem: '#test10'
,url: 'http://localhost:8080/download/uploadFile?param=upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。 , url: 'http://localhost:8080/download/uploadFile?param=upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
,done: function(res){ , done: function (res) {
layer.msg('上传成功'); layer.msg('上传成功');
layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data); layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data);
console.log(res) console.log(res)
@ -294,7 +296,7 @@
<label class="layui-form-label">选择icon</label> <label class="layui-form-label">选择icon</label>
<div class="layui-container" id="test10"> <div class="layui-container" id="test10">
<div class="layui-row"> <div class="layui-row">
<div class="layui-col-md4"lay-event="addData"> <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">
@ -314,7 +316,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</form> </form>
@ -344,32 +346,95 @@
, btn2: function (index, layero) { , btn2: function (index, layero) {
// alert("取消") // alert("取消")
} }
}); });
layui.use(['form'], function() { layui.use(['form'], function () {
var form = layui.form; var form = layui.form;
$.ajax({ $.ajax({
url: 'http://localhost:8080/application/queryDir', url: 'http://localhost:8080/application/queryDir',
type:"get", type: "get",
success: function(data) { success: function (data) {
if(data.msg === "success"){ if (data.msg === "success") {
//给一个默认值（‘请选择’） //给一个默认值（‘请选择’）
var opt = '<option value="" selected=""></option>'; var opt = '<option value="" selected=""></option>';
//获取返回的数据 //获取返回的数据
var value = data.data; var value = data.data;
//循环遍历 //循环遍历
for (var i in value) { for (var i in value) {
opt += '<option value = "' + value[i].dirName + '">' + value[i].dirName + '</option>' opt += '<option value = "' + value[i].dirName + '">' + value[i].dirName + '</option>'
console.log(value[i].dirName) console.log(value[i].dirName)
} }
$("#directorId").html(opt); $("#directorId").html(opt);
form.render('select');//需要渲染一下 form.render('select');//需要渲染一下
}else{ } else {
layer.alert(data.msg,{ icon:2,title:'提示'},function(i){ layer.closeAll();}); layer.alert(data.msg, {icon: 2, title: '提示'}, function (i) {
} layer.closeAll();
});
}
}
});
layui.use('layer', function () {
var layer = layui.layer;
$('.image-item').on('click', function () {
var imageUrl = $(this).attr('src');
// Open a modal with the image and upload button
layer.open({
type: 1,
title: false,
closeBtn: 0,
area: ['auto', 'auto'],
content: `
<div>
<img src="${imageUrl}" style="max-width: 100%;">
<button class="upload-button" data-url="${imageUrl}">Upload</button>
</div>
`,
success: function (layero) {
// Bind click event to the upload button
$(layero).find('.upload-button').on('click', function () {
var imageUrl = $(this).data('url');
// Simulate file selection or directly use the imageUrl
var selectedFile = new Blob(); // Replace with actual file
// Create FormData and append data
var formData = new FormData();
formData.append('imageUrl', imageUrl);
formData.append('file', selectedFile);
// Use AJAX to upload the file
$.ajax({
type: 'POST',
url: 'http://localhost:8080/api/course/uploadFile', // Replace with your backend upload URL
data: formData,
contentType: false,
processData: false,
success: function (response) {
// Handle success response from the backend
console.log('Image uploaded:', response);
console.log('Image uploaded:', formData.get('imageUrl'));
console.log('Image uploaded:', formData.get('file'));
layer.closeAll(); // Close the modal
},
error: function (error) {
// Handle error response from the backend
console.error('Error uploading image:', error);
}
});
});
}
});
});
});
}
});
}); });
} }
</script> </script>
@ -405,28 +470,31 @@
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label">归属目录</label> <label class="layui-form-label">归属目录</label>
<div class="layui-input-block"> <div class="layui-input-block">
<select name="dirName" id="directorId" > <select name="dirName" id="directorId">
<option value="">直接选择或搜索选择</option> <option value="">直接选择或搜索选择</option>
</select> </select>
</div> </div>
</div> </div>
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label">选择icon</label> <label class="layui-form-label">选择icon</label>
<div class="layui-carousel" id="test1"> <div class="image-list">
<div carousel-item> <img class="image-item" src="./images/01.png" alt="Image 1">
<div><img src="//res.ilayuis.com/static/images/layui/demo/1.png" tppabs="//res.ilayuis.com/static/images/layui/demo/1.png"></div> <img class="image-item" src="./images/02.png" alt="Image 2">
<div><img src="//res.ilayuis.com/static/images/layui/demo/2.png" tppabs="//res.ilayuis.com/static/images/layui/demo/2.png"></div> <img class="image-item" src="./images/03.png" alt="Image 1">
<div><img src="//res.ilayuis.com/static/images/layui/demo/3.png" tppabs="//res.ilayuis.com/static/images/layui/demo/3.png"></div> <img class="image-item" src="./images/04.png" alt="Image 2">
<div><img src="//res.ilayuis.com/static/images/layui/demo/4.png" tppabs="//res.ilayuis.com/static/images/layui/demo/4.png"></div> <img class="image-item" src="./images/05.png" alt="Image 1">
<div><img src="//res.ilayuis.com/static/images/layui/demo/5.png" tppabs="//res.ilayuis.com/static/images/layui/demo/5.png"></div> <img class="image-item" src="./images/06.png" alt="Image 2">
<div><img src="//res.ilayuis.com/static/images/layui/demo/6.png" tppabs="//res.ilayuis.com/static/images/layui/demo/6.png"></div> <img class="image-item" src="./images/01.png" alt="Image 1">
<div><img src="//res.ilayuis.com/static/images/layui/demo/7.png" tppabs="//res.ilayuis.com/static/images/layui/demo/7.png"></div> <img class="image-item" src="./images/02.png" alt="Image 2">
</div> <img class="image-item" src="./images/03.png" alt="Image 1">
<img class="image-item" src="./images/04.png" alt="Image 2">
<img class="image-item" src="./images/05.png" alt="Image 1">
<!-- Add more images as needed -->
</div> </div>
</div> </div>
</div>
</form> </form>
</script> </script>

Write Preview
Loading…
Cancel
Save