從0開始碼第一個Spring Boot項目(javaweb個人博客系統)之完成文章詳細信息以及編輯和刪除功能

這一篇我們着手完成文章詳細內容信息以及文章的編輯和刪除功能

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>&nbsp;&nbsp;編輯</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下載

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章