从0开始码第一个Spring Boot项目（javaweb个人博客系统）之完成文章详细信息以及编辑和删除功能

最新推荐文章于 2024-06-25 18:12:09 发布

wanik666

最新推荐文章于 2024-06-25 18:12:09 发布

阅读量567

点赞数

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_33418407/article/details/104715351

版权

从0开始创建Spring Boot项目专栏收录该内容

22 篇文章 4 订阅

订阅专栏

这一篇我们着手完成文章详细内容信息以及文章的编辑和删除功能

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";
    }