這一篇我們着手完成文章詳細內容信息以及文章的編輯和刪除功能
1.預覽:
進入主頁,文章標題設置超鏈接,點擊後跳轉至文章詳情頁面
點擊進入查看詳情
如果當前點擊的文章不是當前用戶發佈的,將不出現編輯鏈接,如下:
我的文章列表中添加編輯和刪除鏈接,用戶也可以在我的文章下進行文章的編輯和刪除功能,如下:
點擊編輯按鈕,數據回顯:
2.具體代碼:
2.1文章詳情頁面設計
articleDetail.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<!-- 踩過的坑,springboot引入靜態資源路徑不要加/static/,否則會報404-->
<title th:text="${ArticleDetail.title}"></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="/bootstrap-3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/community.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_1643567_rm1fqucxtan.css">
<link rel="stylesheet" href="/bootstrap-3.3.7/css/bootstrap-theme.min.css">
<script src="/jquery-1.12.4/jquery-1.12.4.min.js"></script>
<script src="/bootstrap-3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div th:replace="navigation :: nav"></div>
<div class="row main">
<div class="col-lg-9 col-md-12 col-sm-12 col-xs-12 col-left">
<div class=""> <h4 th:text="${ArticleDetail.title}"></h4></div>
<hr>
<div class="detail-msg">
作者 <span th:text="${ArticleDetail.user.name}"></span> | 發佈時間<span th:text="${#dates.format(ArticleDetail.createTime,'yyyy-MM-dd')}"></span> | 閱讀數 <span th:text="${ArticleDetail.readCount}"></span>
<!-- 判斷如果是當前用戶的文章,顯示編輯操作 -->
<div class="link-items" th:if="${ArticleDetail.user.id==session.user.id}" >
<a th:href="@{/article/edit(id=${ArticleDetail.getId()})}"><i class="iconfont icon-fabu2"></i> 編輯</a>
</div>
</div>
<h4 th:text="${ArticleDetail.description}"></h4>
</div>
<div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
<div>
<p>發起人</p>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object img-rounded" th:src="${ArticleDetail.user.getAvatarUrl()}" >
</a>
</div>
<div class="media-body">
<span class="media-heading" th:text="${ArticleDetail.user.name}"></span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
編輯頁面可複用文章發佈頁面,只是將數據重新寫入model,回顯到頁面
文章列表頁面超鏈接格式:
<div class="media media_list" th:each="article : ${articleList}">
<div class="media-left">
<!-- 後續完善點擊頭像跳轉到用戶信息頁面 -->
<a href="#">
<img class="media-object img-rounded" th:src="${article.user.getAvatarUrl()}" >
</a>
</div>
<div class="media-body">
<!-- 文章標題添加超鏈接 -->
<a th:href="@{/article/detail/{id}(id=${article.getId()})}"><h4 class="media-heading" th:text="${article.title}">標題標題</h4></a>
<span th:text="${article.answerCount}"></span> 個回覆 • <span th:text="${article.readCount}"></span> 次瀏覽 • 發佈時間<span th:text="${#dates.format(article.createTime,'yyyy-MM-dd HH:mm:ss')}"></span>
</div>
</div>
2.2業務處理代碼
點擊文章詳情鏈接,業務代碼ArticleController.java:
//根據id獲取文章信息
@GetMapping("/article/detail/{id}")
public String articleDetails(@PathVariable(name = "id") long id,
Model model,HttpServletRequest request){
//檢查用戶是否登錄
User user = (User) request.getSession().getAttribute("user");
if(user==null){
model.addAttribute("error","暫未登錄,請登錄後重試!");
return "redirect:/";
}
Article article = articleService.selectArticleById(id);
//沒有找到對應的文章信息,將異常拋出
if(article==null){
throw new CustomizeException(CustomizeErrorCode.FILE_NOT_FIND);
}
model.addAttribute("ArticleDetail",article);
return "articleDetail";
}
編輯和刪除業務代碼:
//根據操作做處理,如果operate是edit,進入編輯頁面,如果是delete,進行刪除操作
@GetMapping("/article/{operate}")
public String editOrDelArticle(@PathVariable(name = "operate") String operate,
Integer id, Model model, HttpServletRequest request){
//檢查用戶是否登錄
User user = (User) request.getSession().getAttribute("user");
if(user==null){
model.addAttribute("error","暫未登錄,請登錄後重試!");
return "redirect:/";
}
switch (operate){
case "edit":
Article article = articleService.selectArticleById(id);
//沒有找到對應的文章信息,將異常拋出
if(article==null){
throw new CustomizeException(CustomizeErrorCode.FILE_NOT_FIND);
}
model.addAttribute("article",article);
return "publish";
case "delete":
int result = articleService.deleteArticleById(id);
if (result!=1){
//操作失敗
}
return "redirect:/main/article";
}
return "redirect:/";
}
Service層操作:
@Service
public class ArticleService {
@Autowired
ArticleMapper articleMapper;
public Article selectArticleById(long id) {
return articleMapper.selectArticleById(id);
}
public int deleteArticleById(Integer id) {
return articleMapper.deleteByPrimaryKey(id);
}
}
文章發佈按鈕集成發佈和更新操作,根據當前文章id是否爲空判斷
PublishController.java:
@PostMapping("/publish")
public String doPublish(@RequestParam(name = "id") Integer id,
@RequestParam(name = "title") String title,
@RequestParam(name = "description") String description,
@RequestParam(name = "tag") String tag,
HttpServletRequest request, Model model){
//檢查用戶是否登錄
User user = (User) request.getSession().getAttribute("user");
if(user==null){
model.addAttribute("error","暫未登錄,請登錄後重試!");
return "publish";
}
//用於數據回顯
Article articleShow = new Article();
articleShow.setId(id);
articleShow.setTitle(title);
articleShow.setDescription(description);
articleShow.setTag(tag);
model.addAttribute("article",articleShow);
//檢測數據是否爲空
if(title==null||title==""){
model.addAttribute("error","請填寫標題後提交!");
return "publish";
}
if(description==null||description==""){
model.addAttribute("error","請填寫內容後提交!");
return "publish";
}
if(tag==null||tag==""){
model.addAttribute("error","請填寫標籤後提交!");
return "publish";
}
//添加文章(問題)信息到數據庫
articleShow.setModifiedTime(System.currentTimeMillis());
if(id!=null){
//更新文章信息到數據庫
articleShow.setId(id);
int result = articleMapper.updateByPrimaryKeySelective(articleShow);
if(result!=1){
//更新失敗
model.addAttribute("error","發佈失敗,請稍後提交!");
return "publish";
}
}else{
articleShow.setAuthorId(user.getId().longValue());
articleShow.setCreateTime(articleShow.getModifiedTime());
//添加文章(問題)信息到數據庫
int result = articleMapper.insertSelective(articleShow);
if(result!=1){
model.addAttribute("error","發佈失敗,請稍後提交!");
return "publish";
}
}
//添加成功後,重定向到首頁
return "redirect:/main/article";
}
這裏就是這一篇所有的內容,更多源碼信息可以訪問我的githubhttps://github.com/Wanik666/community下載