回顾：
之前我们完成了登录界面以及登录操作持久化，让我们可以通过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> 写文章</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> 写文章</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> 发起</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">×</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.javapublic 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);
}以上就是文章发表基本业务实现，如果还有其他不足需要补充的地方，可在下方评论区提出，好的项目是大家共同见证和完成的，我将带领大家共同完善。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
