1. Flyway的使用
Flyway是独立于数据库的应用、管理并跟踪数据库变更的数据库版本管理工具。用通俗的话讲,Flyway可以像Git管理不同人的代码那样,管理不同人的sql脚本,从而做到数据库同步。
1.1 添加Flyway依赖插件
<plugin>
<groupId>org.flywaydb</groupId>
<artifactId>flyway-maven-plugin</artifactId>
<version>5.2.4</version>
<configuration>
<url>jdbc:h2:E:/Users/IdeaProjects/community</url>
<user>sa</user>
<password>123</password>
<baselineOnMigrate>true</baselineOnMigrate>
</configuration>
<dependencies>
<dependency>
<groupId>com.h2database</groupId>
<artifactId>h2</artifactId>
<version>1.4.199</version>
</dependency>
</dependencies>
</plugin>
1.2 删掉当前数据库

编写数据库文件
文件的路径必须是db/migraion/,文件命名格式如下

1.3 运行flyway命令

1.4 数据库连接成功

1.5 给user表添加一个字段

执行flyway命令后连接数据库,成功添加

2. 发布问题页面
2.1 html代码
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Code社区</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="css/community.css"/>
<script src="js/bootstrap.min.js" type="application/javascript"></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">Code社区</span>
</button>
<a class="navbar-brand" href="#">Code社区</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 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.getName()}"> <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">消息中心</a></li>
<li><a href="#">个人资料</a></li>
<li><a href="#">退出登陆</a></li>
</ul>
</li>
<li th:unless="${session.user != null}">
<a href="https://github.com/login/oauth/authorize?client_id=Iv1.bf5154208e60707f&redirect_uri=http://localhost:8887/callback&scope=user&state=1">登陆</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid main">
<div class="row">
<div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
<h2><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 发起</h2>
<hr>
<form action="/publish" method="post">
<input type="hidden" name="id">
<div class="form-group">
<label for="title">问题标题(简单扼要):</label>
<input type="text" class="form-control" id="title" name="title"
placeholder="问题标题……"
autocomplete="off">
</div>
<div class="form-group" id="question-editor">
<label for="description">问题补充 (必填,请参照右侧提示):</label>
<textarea name="description" id="description"
class="form-control"
cols="30"
rows="10"></textarea>
</div>
<div class="form-group">
<label for="tag">添加标签:</label>
<input type="text" class="form-control" id="tag" name="tag"
placeholder="输入标签,以,号分隔"
>
<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">
<h3>问题发起指南</h3>
• 问题标题: 请用精简的语言描述您发布的问题,不超过25字 <br>
• 问题补充: 详细补充您的问题内容,并确保问题描述清晰直观, 并提供一些相关的资料<br>
• 选择标签: 选择一个或者多个合适的标签,用逗号隔开,每个标签不超过10个字<br>
</div>
</div>
</div>
</body>
</html>
2.2 自定义css

body{
background-color: #efefef;
}
.main{
margin: 30px;
background-color: white;
}
.btn-publish{
float: right;
margin-bottom: 15px;
}
2.3 页面效果

3. 文章发布功能
3.1 创建问题表

CREATE TABLE question
(
id INT AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(50),
description text,
gmt_create BIGINT,
gmt_modified BIGINT,
creator INT,
comment_count INT DEFAULT 0,
view_count INT DEFAULT 0,
like_count INT DEFAULT 0,
tag VARCHAR(256)
);
3.2 实体类

3.3 Mapper接口

package life.guohui.community.mapper;
@Mapper
public interface QuestionMapper {
@Insert("insert into question(title,description,gmt_create,gmt_modified,creator,tag) values (#{title},#{description},#{gmtCreate},#{gmtModified},#{creator},#{tag})")
void create(Question question);
}
3.4 PublishController
package life.guohui.community.controller;
@Controller
public class PublishController {
@Autowired
private QuestionMapper questionMapper;
@Autowired
private UserMapper userMapper;
@GetMapping("/publish")
public String publish(){
return "publish";
}
@PostMapping("/publish")
public String doPublish(@RequestParam("title") String title,
@RequestParam("description") String description,
@RequestParam("tag") String tag,
HttpServletRequest request,
Model model){
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";
}
User user = null;
Cookie[] cookies = request.getCookies();
for(Cookie cookie: cookies){
if(cookie.getName().equals("token")){
String token = cookie.getValue();
user = userMapper.findByToken(token);
if(user != null){
request.getSession().setAttribute("user",user);
}
break;
}
}
if(user == null){
model.addAttribute("error","用户未登录!");
return "publish";
}
Question question = new Question();
question.setTitle(title);
question.setDescription(description);
question.setTag(tag);
question.setCreator(user.getId());
question.setGmtCreate(System.currentTimeMillis());
question.setGmtModified(question.getGmtCreate());
questionMapper.create(question);
return "redirect:/";
}
}
3.5 页面提示信息
<form action="/publish" method="post">
<input type="hidden" name="id">
<div class="form-group">
<label for="title">问题标题(简单扼要):</label>
<input type="text" class="form-control" id="title" name="title" th:value="${title}"
placeholder="问题标题……"
autocomplete="off">
</div>
<div class="form-group" id="question-editor">
<label for="description">问题补充 (必填,请参照右侧提示):</label>
<textarea name="description" id="description"
class="form-control"
cols="30"
rows="10"
th:text="${description}"></textarea>
</div>
<div class="form-group">
<label for="tag">添加标签:</label>
<input type="text" class="form-control" id="tag" name="tag" th:value="${tag}"
placeholder="输入标签,以,号分隔"
>
<div class="container-fluid main">
<div class="row">
<div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
<div class="alert alert-danger col-lg-12 col-md-12 col-sm-12 col-xs-12"
th:text="${error}" th:if="${error != null}">
</div>
</div>
<div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
<button type="submit"
class="btn btn-success btn-publish">
发布
</button>
</div>
</div>
</div>
</div>
</form>
4. 获取头像
4.1 引入lombok依赖
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.6</version>
<scope>provided</scope>
</dependency>
4.2 给GithubUser添加字段

User
对象添加图片地址字段

4.3 UserMapper中添加

4.4 更新数据库版本

ALTER TABLE USER ADD avatar_url VARCHAR(100) NULL;
4.4 处理cookie遗留问题
这两处需要对cookies判空。


4.5 清除所有的cookie

4.6 登陆后获取图片地址

网友评论