这是一个关于Springboot实战开发的博客管理列表页，主要展示如何创建和编辑博客。页面包括博客的标题、内容、分类、标签、功能选项等字段，支持原创、转载和翻译三种类型，并提供了下拉菜单选择分类和标签，还包含博客描述、首页图片以及功能如推荐、评论等设置。
# Spring boot实训开发个人博客（七） 博客管理列表页
## 1.创建分类页面:
1.新建admin文件:
2.在里面创建blogs.html文件:
3.创建顶部任务栏:
2.写入中间编辑区代码:
<div class="m-container-small m-padded-tb-big">
<div class="ui container">
<form id="blog-form" action="#" th:action="@{/admin/blogs}" method="POST" class="ui form">
<!--标题-->
<input type="hidden" name="published">
<div class="required field">
<div class="ui left labeled input">
<!--下拉菜单-->
<div class="ui selection compact teal basic dropdown label">
<input type="hidden" value="原创" name="flag" th:value="*{flag}">
<i class="dropdown icon"></i>
<div class="text">原创</div>
<div class="menu">
<div class="item" data-value="原创">原创</div>
<div class="item" data-value="转载">转载</div>
<div class="item" data-value="翻译">翻译</div>
</div>
</div>
<!--标题栏-->
<input type="text" name="title" placeholder="标题" th:value="*{title}">
</div>
</div>
<!--博客内容-->
<div class="required field">
<div id="md-content" style="z-index: 1 !important;">
<textarea placeholder="博客内容" name="content" th:text="*{content}"></textarea>
</div>
</div>
<!--博客信息-->
<div class="two fields">
<!--分类-->
<div class="required field">
<div class="ui left labeled action input">
<label class="ui basic compact label">分类</label>
<div class="ui fluid selection dropdown">
<input type="hidden" name="type.id" th:value="*{type}!=null ? *{type.id}">
<i class="dropdown icon"></i>
<div class="default text">分类</div>
<div class="menu">
<div th:each="type : ${types}" class="item" data-value="1" th:data-value="${type.id}" th:text="${type.name}">错误日志</div>
</div>
</div>
</div>
</div>
<!--标签-->
<div class="field">
<div class="ui left labeled action input">
<label class="ui basic compact label">标签</label>
<div class="ui tag fluid selection multiple search dropdown">
<input type="hidden" name="tagIds" th:value="*{tagIds}">
<i class="dropdown icon"></i>
<div class="default text">标签</div>
<div class="menu">
<div th:each="tag : ${tags}" class="item" data-value="1" th:data-value="${tag.id}" th:text="${tag.name}">java</div>
</div>
</div>
</div>
</div>
</div>
<!--首页图片-->
<div class="required field">
<div class="ui left labeled action input">
<label class="ui basic label">首页图片</label>
<input type="text" name="indexPicture" th:value="*{indexPicture}">
</div>
</div>
<div class="required field">
<textarea name="description" th:text="*{description}" placeholder="博客描述……" maxlength="200"></textarea>
</div>
<!--博客功能选择-->
<div class="inline fields">
<div class="field">
<div class="ui checkbox">
<input type="checkbox" id="recommend" name="recommend" checked th:checked="*{recommend}" class="hidden">
<label for="recommend">推荐</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" id="shareStatement" name="shareStatement" checked th:checked="*{shareStatement}" class="hidden">
<label for="shareStatement">转载声明</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" id="appreciation" name="appreciation" checked class="hidden">
<label for="appreciation">赞赏</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" id="commentabled" name="commentabled" checked class="hidden">
<label for="commentabled">评论</label>
</div>
</div>
</div>
<!--错误提示栏-->
<div class="ui error message"></div>
<!--博客是否提交-->
<div class="ui right aligned container">
<button type="button" class="ui button" onclick="window.history.go(-1)">返回</button>
<button type="button" id="save-btn" class="ui secondary button">保存</button>
<button type="button" id="publish-btn" class="ui teal button">发布</button>
</div>
</form>
</div>
</div>
```
3.底部部分:
<div class="m-container-small m-padded-tb-big">
<div class="ui container">
<form id="blog-form" action="#" th:action="@{/admin/blogs}" method="POST" class="ui form">
<!--标题-->
<input type="hidden" name="published">
<div class="required field">
<div class="ui left labeled input">
<!--下拉菜单-->
<div class="ui selection compact teal basic dropdown label">
<input type="hidden" value="原创" name="flag" th:value="*{flag}">
<i class="dropdown icon"></i>
<div class="text">原创</div>
<div class="menu">
<div class="item" data-value="原创">原创</div>
<div class="item" data-value="转载">转载</div>
<div class="item" data-value="翻译">翻译</div>
</div>
</div>
<!--标题栏-->
<input type="text" name="title" placeholder="标题" th:value="*{title}">
</div>
</div>
<!--博客内容-->
<div class="required field">
<div id="md-content" style="z-index: 1 !important;">
<textarea placeholder="博客内容" name="content" th:text="*{content}"></textarea>
</div>
</div>
<!--博客信息-->
<div class="two fields">
<!--分类-->
<div class="required field">
<div class="ui left labeled action input">
<label class="ui basic compact label">分类</label>
<div class="ui fluid selection dropdown">
<input type="hidden" name="type.id" th:value="*{type}!=null ? *{type.id}">
<i class="dropdown icon"></i>
<div class="default text">分类</div>
<div class="menu">
<div th:each="type : ${types}" class="item" data-value="1" th:data-value="${type.id}" th:text="${type.name}">错误日志</div>
</div>
</div>
</div>
</div>
<!--标签-->
<div class="field">
<div class="ui left labeled action input">
<label class="ui basic compact label">标签</label>
<div class="ui tag fluid selection multiple search dropdown">
<input type="hidden" name="tagIds" th:value="*{tagIds}">
<i class="dropdown icon"></i>
<div class="default text">标签</div>
<div class="menu">
<div th:each="tag : ${tags}" class="item" data-value="1" th:data-value="${tag.id}" th:text="${tag.name}">java</div>
</div>
</div>
</div>
</div>
</div>
<!--首页图片-->
<div class="required field">
<div class="ui left labeled action input">
<label class="ui basic label">首页图片</label>
<input type="text" name="indexPicture" th:value="*{indexPicture}">
</div>
</div>
<div class="required field">
<textarea name="description" th:text="*{description}" placeholder="博客描述……" maxlength="200"></textarea>
</div>
<!--博客功能选择-->
<div class="inline fields">
<div class="field">
<div class="ui checkbox">
<input type="checkbox" id="recommend" name="recommend" checked th:checked="*{recommend}" class="hidden">
<label for="recommend">推荐</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" id="shareStatement" name="shareStatement" checked th:checked="*{shareStatement}" class="hidden">
<label for="shareStatement">转载声明</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" id="appreciation" name="appreciation" checked class="hidden">
<label for="appreciation">赞赏</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" id="commentabled" name="commentabled" checked class="hidden">
<label for="commentabled">评论</label>
</div>
</div>
</div>
<!--错误提示栏-->
<div class="ui error message"></div>
<!--博客是否提交-->
<div class="ui right aligned container">
<button type="button" class="ui button" onclick="window.history.go(-1)">返回</button>
<button type="button" id="save-btn" class="ui secondary button">保存</button>
<button type="button" id="publish-btn" class="ui teal button">发布</button>
</div>
</form>
</div>
</div>
```
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
