从0开始码第一个Spring Boot项目（javaweb个人博客系统）之文章（问题）发布界面布局及发布功能实现

最新推荐文章于 2024-05-06 21:04:52 发布

wanik666

最新推荐文章于 2024-05-06 21:04:52 发布

阅读量464

点赞数 1

分类专栏：从0开始创建Spring Boot项目文章标签： java html web bootstrap 数据库

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

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

版权

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

22 篇文章 4 订阅

订阅专栏

回顾：

之前我们完成了登录界面以及登录操作持久化，让我们可以通过github授权实现登录，同时我们也将SpringBoot 和mybatis进行整合，实现登录用户持久化，这一篇将完成文章发布界面布局以及发布功能实现。

1.文章发布界面

同之前一样使用bootstrap的栅格布局，界面稍有简陋，主要实现功能嘛，话不多说，先预览效果：

1.1点击进入文章编写页面

写文章入口

1.2界面功能基本介绍

编写文章

1.3错误信息提示

错误提示

1.4编写文章并发布

发布成功后我们会跳转到首页，展示信息，后续将实现…

1.5 数据库数据结果

这时我们发现数据库中已经多了一条数据，文章发布成功。

2.实现过程（源码）

2.1 index.html页面改动

主要在登录按钮前面添加写文章的按钮链接，并且只有登录才能进入，当然，程序后面会做拦截器进行页面拦截，这里还不完善。

index.html

<ul class="nav navbar-nav navbar-right">
				<!-- 写文章入口-->
                <li th:if="${session.user!=null}">
                    <a href="/publish"><i class="iconfont icon-fabu2"></i>&nbsp;&nbsp;写文章</a>
                </li>
                
                <li th:if="${session.user==null}">
                    <a href="/login">登录</a>
                </li>
                <li class="dropdown" th:if="${session.user!=null}">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" th:text="${session.user.name}"><span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">消息中心</a></li>
                        <li><a href="#">基础设置</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="/logout">退出登录</a></li>
                    </ul>
                </li>
            </ul>

2.2文章发布页面publish.html

实现文章发布页面的基本布局。

publish.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- 踩过的坑，springboot引入静态资源路径不要加/static/，否则会报404-->
    <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_gzmbgp6rv1a.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>
<!--顶部导航栏-->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">个人博客</span>
            </button>
            <a class="navbar-brand" href="#">个人博客</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="请搜索问题">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li th:if="${session.user!=null}">
                    <a href="/publish"><i class="iconfont icon-fabu2"></i>&nbsp;&nbsp;写文章</a>
                </li>
                <li th:if="${session.user==null}">
                    <a href="/login">登录</a>
                </li>
                <li class="dropdown" th:if="${session.user!=null}">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false" th:text="${session.user.name}"><span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">消息中心</a></li>
                        <li><a href="#">基础设置</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="/logout">退出登录</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- 问题发布栏 -->
<div class="row main">
    <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"><h4><i class="iconfont icon-fabu"></i>&nbsp;发起</h4></div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-9 alertMsg">
                <div class="alert alert-danger alert-dismissible alert-error" role="alert" th:if="${error != null}">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <span th:text="${error}"></span>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3"></div>
        </div>


        <hr>
        <form action="/publish" method="post">
            <div class="form-group">
                <label for="title">文章标题:</label>
                <input type="text" class="form-control" th:value="${title}" id="title" name="title" placeholder="填写标题......">
            </div>
            <div class="form-group">
                <label for="description">文章内容(请参考右侧提示填写):</label>
                <textarea id="description" name="description" th:text="${description}" class="form-control" rows="12" cols="10"></textarea>
            </div>
            <div class="form-group">
                <label for="tag">标签:</label>
                <input type="text" class="form-control" id="tag" th:value="${tag}" name="tag" placeholder="请填写标签......">
            </div>
            <div>
                <button type="submit" class="btn btn-success btn-publish">发布</button>
            </div>
        </form>
    </div>
    <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
        <h4>文章发布要求：</h4>
        <ul>
            <li>文章标题：请用精简的语言描述您发布的问题，不超过25字</li>
            <li>文章内容：填写文章具体描述的内容</li>
            <li>标签：填写一个或多个合适标签，每个不超过10个字</li>
        </ul>
    </div>
</div>

</body>
</html>

2.3 文章信息实体类

Article.java

public class Article {
    private int id;
    private String title;
    private String description;
    private String tag;
    private Long authorId;
    private int readCount;    //阅读数
    private int answerCount;  //回复数
    private int likeCount;    //点赞数
    private Long createTime;
    private Long modifiedTime;
	
	//省略getter和setter方法
}

2.4 PublishController路由跳转及其业务操作

PublishController.java

@Controller
public class PublishController {
    @Autowired
    ArticleMapper articleMapper;

    @GetMapping("/publish")
    public String publish(){

        return "publish";
    }

    @PostMapping("/publish")
    public String doPublish(@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";
        }
        //用于数据回显
        model.addAttribute("title",title);
        model.addAttribute("description",description);
        model.addAttribute("tag",tag);

        //检测数据是否为空
        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";
        }

        //添加文章（问题）信息到数据库
        Article article = new Article();
        article.setAuthorId(user.getId());
        article.setTitle(title);
        article.setDescription(description);
        article.setTag(tag);
        article.setCreateTime(System.currentTimeMillis());
        article.setModifiedTime(article.getCreateTime());

        int result = articleMapper.addArticle(article);
        if(result!=1){
            model.addAttribute("error","发布失败，请稍后提交！");
            return "publish";
        }
        //添加成功后，重定向到首页
        return "redirect:/";
    }
}

2.5 ArticleMapper持久层业务

ArticleMapper.java

@Mapper
public interface ArticleMapper {

    @Insert("insert into article (title,description,tag,author_id,create_time,modified_time) values " +
            "(#{title},#{description},#{tag},#{authorId},#{createTime},#{modifiedTime})")
    int addArticle(Article article);
}

以上就是文章发表基本业务实现，如果还有其他不足需要补充的地方，可在下方评论区提出，好的项目是大家共同见证和完成的，我将带领大家共同完善。

当当当当，我的项目源码已经托管在我的github上了，大家有需要可以去下载查看。

wanik666

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
从0开始码第一个Spring Boot项目（javaweb个人博客系统）之文章（问题）发布界面布局及发布功能实现

回顾：之前我们完成了登录界面以及登录操作持久化，让我们可以通过github授权实现登录，同时我们也将SpringBoot 和mybatis进行整合，实现登录用户持久化，这一篇将完成文章发布界面布局以及发布功能实现。1.文章发布界面同之前一样使用bootstrap的栅格布局，界面稍有简陋，主要实现功能嘛，话不多说，先预览效果：1.1点击进入文章编写页面1.2界面功能基本介绍1.3错误...
复制链接

扫一扫