基于 Spring Boot 博客系统开发（六）
本系统是简易的个人博客系统开发，为了更加熟练地掌握 SprIng Boot 框架及相关技术的使用。🌿🌿🌿
基于 Spring Boot 博客系统开发（五）👈👈
文章详情页实现
在Controller类中，编写处理HTTP请求的方法来获取文章详情并返回视图。
HomeController.java
@RequestMapping("/article/{id}")
public String article(@PathVariable Long id,Model model){
Article article = articleService.getById(id);
if(article == null){
return "error/404";
}
model.addAttribute("article",article);
return "client/article";
}
修改视图中代码。article.html
<title th:text="${article.title}">函数式接口</title>
<article class="main-content post-page">
<div class="post-header">
<h1 class="post-title" itemprop="name headline" th:text="${article.title}">函数式接口</h1>
<div class="post-data">
<time datetime="2018-12-01" itemprop="datePublished" >发布于 [[${article.created}]]</time>
</div>
</div>
<br />
<div id="post-content" class="post-content content" th:utext="${@textUtils.md2Html(article.content)}"></div>
</article>
渲染后效果
文章评论实现
评论用户登录渲染
用户评论前需要进行登录
<span th:if="${@loginUtils.isLogin()}" class="response">
Hello，<a data-no-instant="" th:text="${@loginUtils.getLoginUser().username}">admin</a>
如果你想 <a href="/logout">注销</a> ?
</span>
<span th:unless="${@loginUtils.isLogin()}" class="response">
用户想要评论，请先<a href="/login" title="登录" target="_blank" data-no-instant="">登录</a>!
</span>
LoginUtils.java
@Component
public class LoginUtils {
@Autowired
public HttpServletRequest request;
public boolean isLogin(){
Object loginUser = request.getSession().getAttribute("loginUser");
return loginUser!=null;
}
public User getLoginUser(){
Object loginUser = request.getSession().getAttribute("loginUser");
if(loginUser instanceof User){
return (User)loginUser;
}
return null;
}
}
用户登录前渲染效果：
用户登录后渲染效果：
评论列表渲染
创建CommentController.java，查询指定文章ID的评论列表并分页，以JSON格式返回。
这里注意要写@ResponseBody
@Controller
@RequestMapping("/comment")
public class CommentController {
@Autowired
private ICommentService commentService;
@RequestMapping("/list")
@ResponseBody
public PageInfo<Comment> list(Long articleId,@RequestParam(defaultValue = "1") Integer pageNum){
PageHelper.startPage(pageNum,3);
QueryWrapper<Comment> query = new QueryWrapper<>();
query.eq("article_id",articleId);
List<Comment> list = commentService.list(query);
PageInfo<Comment> page = new PageInfo<>(list);
return page;
}
}
前端代码，需要引入JQ。由于之前有统一引入到公共JS里了，所以这里不需要引入。
引入JQ
<script src="/assets/js/jquery.min.js"></script>
HTML中添加文章ID
<form id="comment-form" class="comment-form" role="form" >
<input type="hidden" name="articleId" id="aid" th:value="${article.id}">
<textarea name="content" id="textarea" class="form-control" placeholder="以上信息可以为空,评论不能为空哦!" required="required" minlength="5" maxlength="2000"></textarea>
<button type="button" class="submit" id="misubmit">提交</button>
</form>
编写渲染评论列表的JS脚本。这里没有使用模板技术，采用原生文本拼接。
<script type="text/javascript">
function loadComment(pageNum){
$.ajax({
type: 'get',
url: '/comment/list',
data: {articleId:$("#aid").val(),pageNum:pageNum},
async: true,
dataType: 'json',
success: function (result) {
console.log(result)
let templates = '';
$.each(result.list,function (i,o){
// 渲染模板
templates += '<li id="li-comment-15" class="comment-body comment-parent comment-odd">\n' +
' <div id="comment-15">\n' +
' <div class="comment-view" οnclick="">\n' +
' <div class="comment-header">\n' +
' <!--设置人物头像和名称-->\n' +
' <img class="avatar" src="/assets/img/avatars.jpg" height="50">\n' +
' <a class="comment-author" rel="external nofollow">'+o.author+'</a>\n' +
' </div>\n' +
' <!-- 评论内容 -->\n' +
' <div class="comment-content">\n' +
' <span class="comment-author-at"></span>\n' +
' <p></p><p>'+o.content+'</p>\n' +
' <p></p>\n' +
' </div>\n' +
' <!-- 评论日期 -->\n' +
' <div class="comment-meta">\n' +
' <time class="comment-time">'+o.created+'</time>\n' +
'\n' +
' </div>\n' +
' </div>\n' +
' </div>\n' +
' </li>';
})
$(".comment-list").html(templates);
let pageText = '';
$.each(result.navigatepageNums,function (i,o){
pageText +=
'<li class="'+(o==result.pageNum?'current':'')+'">' +
'<a>'+o+'</a>' +
'</li>';
});
$(".page-navigator").html(pageText);
$(".page-navigator a").click(function (){
let pageNum = $(this).text();
loadComment(parseInt(pageNum));
});
}
});
}
loadComment(1);
</script>
渲染效果：
评论提交实现
后端 CommentController 添加评论方法
@Controller
@RequestMapping("/comment")
@Slf4j
public class CommentController {
@Autowired
private ICommentService commentService;
@RequestMapping("/list")
@ResponseBody
public PageInfo<Comment> list(Long articleId,@RequestParam(defaultValue = "1") Integer pageNum){
PageHelper.startPage(pageNum,3);
QueryWrapper<Comment> query = new QueryWrapper<>();
query.eq("article_id",articleId);
List<Comment> list = commentService.list(query);
PageInfo<Comment> page = new PageInfo<>(list);
return page;
}
@Autowired
private LoginUtils loginUtils;
@PostMapping("/add")
@ResponseBody
public AjaxResult add(Comment comment, HttpServletRequest request){
comment.setCreated(new Date()); //实体created 属性修改成Date类型
comment.setIp(request.getRemoteAddr());
User loginUser = loginUtils.getLoginUser();
if(loginUser == null){
return new AjaxResult(-1,"请先登录");
}
comment.setAuthor(loginUser.getUsername());
try {
commentService.save(comment);
return AjaxResult.success();
}catch (Exception e){
log.error(e.getMessage());
}
return AjaxResult.error();
}
}
创建AjaxResult 用于返回异步状态结果
AjaxResult.java
@Data
public class AjaxResult {
private int code = 0;
private String msg ="操作成功" ;
private Object data;
public AjaxResult() {
}
public AjaxResult(int code, String msg) {
this.code = code;
this.msg = msg;
}
public AjaxResult(int code, String msg, Object data) {
this.code = code;
this.msg = msg;
this.data = data;
}
public static AjaxResult success(){
return new AjaxResult();
}
public static AjaxResult error(){
return new AjaxResult(-1,"未知错误");
}
}
前端提交的HTML
<div>
<form id="comment-form" class="comment-form" role="form" >
<input type="hidden" name="articleId" id="aid" th:value="${article.id}">
<textarea name="content" id="textarea" class="form-control" placeholder="以上信息可以为空,评论不能为空哦!" required="required" minlength="5" maxlength="2000"></textarea>
<button type="button" class="submit" id="misubmit">提交</button>
</form>
</div>
提交评论的JS脚本
$("#misubmit").click(function (){
$.ajax({
type: 'post',
url: '/comment/add',
data: {articleId:$("#aid").val(),content:$("#textarea").val()},
async: false,
dataType: 'json',
success: function (result) {
if(result.code == 0){
alert("评论成功");
window.location.reload();
}else{
alert(result.msg)
}
}
});
});
成功提交评论效果：
