SpringBoot實戰（三）-cookie持久化 -Flyway(Fail) -Bootstrap柵格系統 -lombok -引入Service

添加Cookie實現持久化登錄：

String token = UUID.randomUUID().toString();
response.addCookie(new Cookie("token", token));

 

 從cookie裏拿到name爲token的，然後用mybatis的find方法去數據庫裏查，查到了就把user傳上來

@Autowired
private UserMapper userMapper;
@GetMapping("/")
public String index(HttpServletRequest request) {
    Cookie[] cookies = request.getCookies();
    for(Cookie cookie : cookies) {
        if(cookie.getName().equals("token")) {
            String token = cookie.getValue();
            User user = userMapper.findByToken(token);
            if(user != null) {
                request.getSession().setAttribute("user", user);
            }
            break;
        }
    }

@Select("select * from user where token = #{token}")
User findByToken(@Param("token") String token);

Integrating Flyway

flywaydb.org/getstarted/firststeps/maven

Let’s integrate Flyway and the H2 database into our new pom.xml and configure Flyway so it can successfully connect to H2:

            <plugin>
                <groupId>org.flywaydb</groupId>
                <artifactId>flyway-maven-plugin</artifactId>
                <version>6.2.4</version>
                <configuration>
                    <url>jdbc:h2:file:./target/foobar</url>
                    <user>sa</user>
                </configuration>
                <dependencies>
                    <dependency>
                        <groupId>com.h2database</groupId>
                        <artifactId>h2</artifactId>
                        <version>1.4.197</version>
                    </dependency>
                </dependencies>
            </plugin>

Mysql也可以：https://flywaydb.org/documentation/database/mysql

<plugin>
    <groupId>org.flywaydb</groupId>
    <artifactId>flyway-maven-plugin</artifactId>
    <version>6.2.4</version>
    <configuration>
        <url>jdbc:mysql://127.0.0.1:3306/community</url>
        <user>...</user>
        <password>...</password>
    </configuration>
    <dependencies>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
    </dependencies>
</plugin>

Creating the first migration

We create the migration directory src/main/resources/db/migration.

Followed by a first migration called src/main/resources/db/migration/V1__Create_person_table.sql:

create table PERSON (
    ID int not null,
    NAME varchar(100) not null
);

Flyway......Flyway......Flyway......Flyway......Flyway......Flyway......Flyway......Flyway......Flyway......Flyway......Flyway

 

Bootstrap:柵格系統

響應式、移動設備優先的流式柵格系統:https://v3.bootcss.com/css/#grid

<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="">
                <div class="form-group">
                    <label for="title">問題標題</label>
                    <input type="text" class="form-control" id="title" name = "title" placeholder="問題標題">
                </div>
                <div class="form-group">
                    <label for="title">問題補充</label>
                    <textarea name="description" id="description" class="form-control" cols="30" rows="10" placeholder="問題補充"></textarea>
                </div>
                <div class="form-group">
                    <label for="title">添加標籤：</label>
                    <textarea name="tag" id="tag" class="form-control" cols="30" row="10" placeholder="標籤以，隔開"></textarea>
                </div>

                <button type="submit" class="btn btn-success btn-publish">發佈</button>

            </form>
        </div>
        <div class="col-lg-3 col-md-12col-sm-12 col-xs-12">
            <h3>問題發起指南</h3>
            暫無 <br>
            暫無 <br>
            暫無 <br>
            暫無 <br>
            暫無 <br>
            暫無 <br>
        </div>
    </div>

CSS樣式 

body {
    background-color: #2e6da4;
}

.main {
    background-color: white;
    margin: 30px;
}

.btn-publish {
    float: right;
    margin-bottom: 15px;
}

publish頁面

提交表單到publish

PublishController 

request.getSession().setAttribute("user", githubUser); 
點擊登錄後得到user對象放進session裏
到前端頁面判斷session是否存在，存在即顯示

 

@Controller
public class PublishController {

    @Autowired
    private QuestionMapper questionMapper;

    //get是返回頁面，post是請求
    @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);
        //還要在前端獲取，TODO

        User user = (User)request.getSession().getAttribute("user");
        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:/";
    }

}

獲取Question數據 

 

加入用戶頭像

加個String的url即可

Lombok：https://projectlombok.org/features/all 

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.10</version>
            <scope>provided</scope>
        </dependency>

 

編寫首頁

List<QuestionDTO> questionList = questionService.list();
model.addAttribute("questions", questionList);

從Index裏獲取QuestionList，but，Question裏沒有creator的頭像，故創建一個QuestionDTO放入User

@Data
public class QuestionDTO {
    private Integer id;
    private String title;
    private String description;
    private String tag;
    private Long gmtCreate;
    private Long gmtModified;
    private Integer creator;
    private Integer viewCount;
    private Integer commentCount;
    private Integer likeCount;
    private User user;
}

引入Service

當請求需要組裝數據，同時需要UserMapper和QuestionMapper時，這時候讓一箇中間層來做這件事情，稱之Service層

 整個過程：是List<Question>和通過creator（id）得到的User對象組裝成List<QuestionDTO>

public List<QuestionDTO> list() {
        List<Question> questions = questionMapper.list(); //拿到所有的Question
        List<QuestionDTO> questionDTOList = new ArrayList<>();
        for(Question question : questions) {
            User user = userMapper.findById(question.getCreator());
            //通過PublishController的question.setCreator(user.getId())取到了用戶的id
            //findById通過creator=user.id去找id，找到返回整個User對象回來
            QuestionDTO questionDTO = new QuestionDTO();
            BeanUtils.copyProperties(question, questionDTO);
            //將遍歷的每個question的數據copy到questionDTO裏
            questionDTO.setUser(user); //組裝最後一個數據
            questionDTOList.add(questionDTO); //放進List裏，完成了數據的組裝
        }
        return questionDTOList;

 Mybatis的返回User對象有可能只返回部分數據！

@Select("select * from user where id = #{id}")
User findById(@Param("id") Integer creator);

mybatis.configuration.map-underscore-to-camel-case=true //駝峯標識開