SpringBoot个人博客项目——相册模块开发（一）

最新推荐文章于 2024-07-09 15:20:49 发布

悲伤的小霉

最新推荐文章于 2024-07-09 15:20:49 发布

阅读量1.4k

点赞数

分类专栏： JavaEE 文章标签： spring boot jpa SpringMVC

本文链接：https://blog.csdn.net/qq_44900959/article/details/107565493

版权

JavaEE 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

前言：

最近在写一个个人博客的项目，一直在写代码，没怎么总结，现在写一下其中一个功能模块的实现，其他模块的实现，后续补上。

项目知识点：

在这里插入图片描述

创建相册：

首先我们需要创建一个相册，然后才能在创建的相册里面添加图片。
在这里插入图片描述

首先分析添加封面功能的实现。
我们在页面中添加两个隐藏的form表单

<input name="cover" id="inputCover" hidden="hidden">

<form id="saveImage"  method="post" enctype="multipart/form-data">
		<input name="file" id="coverFile" type="file" onchange="addImage(this)" hidden="hidden">
</form>

然后在添加封面的按钮上加一个 οnclick=“addCover()” 事件，就是点击以后会触发addCover的函数。

		//添加封面
		function addCover()
		{
			document.getElementById("coverFile").click();
		}

那么这个addCover函数是干嘛的呢？没错，就是让我们的input标签触发，然后出现选择文件的页面。 在这里插入图片描述
这个form表单里面input，我们添加了οnchange="addImage(this) 事件，就是当被改变的时候调用addImage()这个函数，什么意思呢，就是当我们在新打开的选择文件窗口里面选择了一个文件点击打开后就会触发这个函数。

		//上传图片
		function addImage(e)
		{
			$("#inputCover").val(e.files[0].name);//将传入的值的名字赋值给隐藏的input标签。
			var formData=new FormData($("#saveImage")[0]);
			$.ajax({
				type:"POST",
				url:[[@{~/saveImage}]],
				async:false,//是否异步
				cache:false,//是否用到换成
				data:formData,//传入的数据
				processData:false,//是否处理数据
				contentType:false,
				dataType:"json",//json数据类型
				error:function (data)
				{
					layer.msg('上传成功!!!');
				}

			})


		}

这个函数首先先获取传入文件的数据，然后就通过ajax异步发送请求，
url:[[@{~/saveImage}]],这里用到了thymeleaf。这个saveImage是我们之前写好的工具类，用来把传入的文件，保存到磁盘的某个位置。

    @RequestMapping("/saveImage")
    public String saveImage(@RequestParam("file") MultipartFile file) throws FileNotFoundException {

        String filename=file.getOriginalFilename();
       //得到路径
//        String path= ResourceUtils.getURL("classpath:").getPath()+"static/upload";
        String path="/D:/学习/Idea项目/blog/target/classes/static/upload";
        System.out.println(path);
        File dest=new File(path+"/"+filename);
        //如果路径不存在，创建路径
        if(!dest.getParentFile().exists())
        {
            dest.getParentFile().mkdir();
        }

        //保存文件
        try {
            file.transferTo(dest);
        } catch (IOException e) {
            e.printStackTrace();
        }

        return "redirect:/index";

    }

然后点击创建的话，就会把表单提交给Controller去处理。

    //添加相册
    @RequestMapping("/addAlbum")
    public String addAlbum(Album album)
    {
        //封装album没有的数据
        album.setImageNumber(0L);
        //album的创建时间
        Date date=new Date(System.currentTimeMillis());
        SimpleDateFormat format=new SimpleDateFormat("yyyy-MM-dd hh:mm");
        String createTime=format.format(date);
        album.setCreateTime(createTime);
        //保存album
        albumService.saveAlbum(album);

        return "redirect:/findAllAlbum";
    }

第二部分我会说明一下相册和上传的图片的数据库的关系，以及预览功能的实现。

添加相册页面部分重要代码

<form th:action="@{~/addAlbum}" method="post">
			<input name="cover" id="inputCover" hidden="hidden">
			<section class="post_content">
				<header class="post_header">
					<p class="status_btn" style="font-size: xx-large; color: #918f90;">创建相册</p>
				</header>
				<br>
				<!-- 创建相册 -->
				<div class="post post-layout-list" data-aos="fade-up">
					<!-- 标题 -->
					<span class="input input--minoru">
						<textarea id="textareaTitle" name="title" required="required" style="background-color: #fafafa;font-size: x-large; position: relative; left: 130px; width: 500px; height: 75px;" class="input__field input__field--minoru" ></textarea>
						<label class="input__label input__label--minoru" for="input-14">
							<span style="font-size: x-large;" class="input__label-content input__label-content--minoru">标题</span>
						</label>
					</span>
					<!-- 正文 -->
					<span class="input input--minoru">
						<textarea id="textareaContent" name="content" required="required" style="background-color: #fafafa;font-size: x-large; position: relative; left: 500px; width: 870px; height: 150px;" class="input__field input__field--minoru" ></textarea>
						<label class="input__label input__label--minoru" for="input-14">
							<span style="font-size: x-large;" class="input__label-content input__label-content--minoru">正文</span>
						</label>
					</span>
					<!-- 添加封面按钮 -->
					<div class="button_su" style="width: 130px; height: 50px; position: relative; left: -305px; bottom: -270px">
						<span class="su_button_circle"> </span>
						<a onclick="addCover()" class="button_su_inner">
							<span class="status_btn" style="color: white; position: relative; right: 0px; bottom: 15px">添加封面</span>
						</a>
					</div>
					<header class="slide post_header">
						<p title="switch down" class="btn-slide status_btn" style="color: #918f90;position: relative; bottom: -60px">编辑更多</p>
					</header>
				</div>


			</section>

			<!-- 线 -->
			<svg id="upTriangleColor" width="100%" height="40" viewBox="0 0 100 102" preserveAspectRatio="none">
				<path d="M0 0 L50 100 L100 0 Z"></path>
			</svg>
			<!-- 折叠区 -->
			<div id="panel" style="display: none;">
				<div class="comment-area">
					<section class="comments">


					</section>
				</div>
			</div>
			<!-- 线 -->
			<svg id="dwTriangleColor" width="100%" height="40" viewBox="0 0 100 102" preserveAspectRatio="none">
				<path d="M0 0 L50 100 L100 0 Z"></path>
			</svg>
			<!-- 折叠区以下 -->
			<div class="wrapper">
				<div class="post post-layout-list" data-aos="fade-up">

					<!-- 预览按钮 -->
					<div class="button_su" style="width: 130px; height: 50px; position: relative; left: 100px; bottom: -90px">
						<span class="su_button_circle"> </span>
						<a onclick="perviewAlbum()" class="button_su_inner">
							<span class="status_btn" style="color: white; position: relative; right: 0px; bottom: 11px">预览</span>
						</a>
					</div>
					<!-- 确认发布按钮 -->
					<button type="submit" class="bubbly-button" style="width: 150px; height: 50px; position: relative; left: 430px; bottom: -48px">
						<span class="status_btn" style="color: white; position: relative; right: 0px; bottom: 5px">创建</span>
					</button>
				</div>
			</div>
			</form>
		</div>
	</div>

	<div th:replace="~{fragments/footer::footer}"></div>
	<script type='text/javascript' src='statics/js/jquery.min.js'></script>
	<script type='text/javascript' src='statics/js/plugins.js'></script>
	<script type='text/javascript' src='statics/js/script.js'></script>
	<script type='text/javascript' src='statics/js/particles.js'></script>
	<script type='text/javascript' src='statics/js/aos.js'></script>
	<script type="text/javascript" src='layer/layer.js'></script>>

	<form id="saveImage"  method="post" enctype="multipart/form-data">
		<input name="file" id="coverFile" type="file" onchange="addImage(this)" hidden="hidden">
	</form>

	<script type="text/javascript" th:inline="javascript">
		
		//预览相册
		function perviewAlbum()
		{
			//书写表单

			var formStr = '<form method = "POST" action="http://localhost:8080/perviewAlbum">'+
					'<textarea hidden = "hidden" name="title" id="textareaTitle" >'+$("#textareaTitle").val()+'</textarea>' +
					'<textarea hidden = "hidden" name="content" id="textareaContent" >'+$("#textareaContent").val()+'</textarea>'
					+'</form>'


			//打开页面
			var win=window.open("");
			//放置表单
			win.document.body.innerHTML=formStr;
			//提交表单
			win.document.forms[0].submit();

		}
		//添加封面
		function addCover()
		{
			document.getElementById("coverFile").click();
		}
		//上传图片
		function addImage(e)
		{
			$("#inputCover").val(e.files[0].name);
			var formData=new FormData($("#saveImage")[0]);
			$.ajax({
				type:"POST",
				url:[[@{~/saveImage}]],
				async:false,
				cache:false,
				data:formData,
				processData:false,
				contentType:false,
				dataType:"json",
				error:function (data)
				{
					layer.msg('上传成功!!!');
				}

			})


		}



	</script>>