预览博客功能_博客文章的预览功能

作者：Gausst松鼠会 | 2024-04-29 21:30:34

踩

博客文章的预览功能

<script type="text/javascript" th:inline="javascript">
	//预览按钮触发方法
	function previewBlog(){
		//在新页面中放置表单（Blog）
		//从前端页面取值 
		var formContent = 
			'<input id="subImageText" type="text" hidden="hidden" name="image" value="'+$("#subImageText").val()+'">'+
			
			'<textarea name="title" id="title" hidden="hidden">'+$("#title").val()+'</textarea>'+
			'<textarea name="content" id="content" hidden="hidden">'+$("#content").val()+'</textarea>'+
		'';
		//打开新页面   [[@{~/previewForm}]]可以替换为要打开的新窗口的地址"url"
		var win = window.open([[@{~/previewForm}]],"_blank");
		setTimeout(function(){
			//给表单放置博客内容
			win.document.forms[0].innerHTML = formContent;
		//让新页面的表单提交,跳转到previewBlog处理显示数据
			win.document.forms[0].submit();
			},50
		);
		//previewBlog Controller后台处理封装数据
		//封装后的数据显示到预览页面
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

预览前要填充数据的表单页面previewForm.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>预览博客的表单</title>
</head>
<body>
	<form th:action="@{~/previewBlog}" id="form" method="post" enctype="multipart/form-data">
	</form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11

previewBlog Controller处理数据

	@RequestMapping("/previewBlog")
	public String previewBlog(Blog blog,String moodId,String catalogString,ServletRequest request) {
		
		//TODO 基础字段，关联字段
//		System.out.println(blog);
//		System.out.println(moodId);
//		System.out.println(catalogString);
		
//		封装数据，略

		//放置数据
		request.setAttribute("blog", blog);
		request.setAttribute("mood", mood);
		request.setAttribute("catalogList", catalogList);
		
		return "/preview-blog.html";
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/509895