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

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

Browse Source
main
whb 2 years ago
parent f078503ecf
commit 95c2766e64
4 changed files with 162 additions and 49 deletions
Show Stats Download Patch File Download Diff File

6
pom.xml
Unescape Escape View File

@ -62,6 +62,12 @@
<version>5.0.7</version>
</dependency>
<!-- 引入 thymeleaf 模板依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- <dependency>-->
<!-- <groupId>com.github.pagehelper</groupId>-->
<!-- <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.utils.common.JsonResult;
import com.zhiyun.zhiyun03.utils.oss.AliyunOssUtil;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import io.swagger.annotations.ApiParam;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import javax.annotation.Resource;
import java.io.File;
import java.io.FileOutputStream;
/**
@ -29,6 +33,11 @@ public class CourseController {
@Resource
private CourseService courseService;
@Resource
private AliyunOssUtil ossUtil;
private String path = "";
/**
* 查询分页课程信息
@ -63,8 +72,10 @@ public class CourseController {
@ApiOperation("课程添加")
@GetMapping("/addCourse")
public JsonResult addCourse(CourseVo courseVo){
courseVo.setCourseIcon(path);
int count = courseService.addCourse(courseVo);
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("图片上传")
@PostMapping("/uploadFile")
public JsonResult upload(@RequestParam("upload") @RequestPart MultipartFile file){
public JsonResult upload(@RequestParam("file") @RequestPart MultipartFile file){
String upload = null;
try {
if (file != null) {

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

@ -9,7 +9,7 @@
<link rel="stylesheet" href="layui/css/layui.css" tppabs="//res.ilayuis.com/layui/dist/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
<style>
.layui-container{
.layui-container {
display: flex;
}
@ -159,15 +159,15 @@
// alert("取消")
}
});
layui.use(['form'], function() {
layui.use(['form'], function () {
var form = layui.form;
$.ajax({
url: 'http://localhost:8080/application/queryDir',
type:"get",
success: function(data) {
if(data.msg === "success"){
type: "get",
success: function (data) {
if (data.msg === "success") {
//给一个默认值（‘请选择’）
var opt = '<option value="" selected="'+ data.dirName +'"></option>';
var opt = '<option value="" selected="' + data.dirName + '"></option>';
//获取返回的数据
var value = data.data;
//循环遍历
@ -178,8 +178,10 @@
$("#directorId").html(opt);
form.render('select');//需要渲染一下
}else{
layer.alert(data.msg,{ icon:2,title:'提示'},function(i){ layer.closeAll();});
} else {
layer.alert(data.msg, {icon: 2, title: '提示'}, function (i) {
layer.closeAll();
});
}
}
@ -220,7 +222,7 @@
<div class="layui-form-item">
<label class="layui-form-label">归属目录</label>
<div class="layui-input-block">
<select name="dirName" id="directorId" >
<select name="dirName" id="directorId">
<option value="dirName"></option>
</select>
</div>
@ -264,8 +266,8 @@
//拖拽上传
upload.render({
elem: '#test10'
,url: 'http://localhost:8080/download/uploadFile?param=upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
,done: function(res){
, 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)
@ -294,7 +296,7 @@
<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">
<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">
@ -344,14 +346,18 @@
, btn2: function (index, layero) {
// alert("取消")
}
});
layui.use(['form'], function() {
layui.use(['form'], function () {
var form = layui.form;
$.ajax({
url: 'http://localhost:8080/application/queryDir',
type:"get",
success: function(data) {
if(data.msg === "success"){
type: "get",
success: function (data) {
if (data.msg === "success") {
//给一个默认值（‘请选择’）
var opt = '<option value="" selected=""></option>';
//获取返回的数据
@ -364,14 +370,73 @@
$("#directorId").html(opt);
form.render('select');//需要渲染一下
}else{
layer.alert(data.msg,{ icon:2,title:'提示'},function(i){ layer.closeAll();});
} else {
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 type="text/html" id="addForm1">
@ -405,25 +470,28 @@
<div class="layui-form-item">
<label class="layui-form-label">归属目录</label>
<div class="layui-input-block">
<select name="dirName" id="directorId" >
<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 class="image-list">
<img class="image-item" src="./images/01.png" alt="Image 1">
<img class="image-item" src="./images/02.png" alt="Image 2">
<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">
<img class="image-item" src="./images/06.png" alt="Image 2">
<img class="image-item" src="./images/01.png" alt="Image 1">
<img class="image-item" src="./images/02.png" alt="Image 2">
<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>

Write Preview
Loading…
Cancel
Save