Springboot+Springmvc+Mybatis框架搭建

1、新建項目

　　由於自己的IDEA是社區版的，因此先建立一個maven項目，然后手工加入springboot的pom依賴。

　　設置組織名和項目名。

　　建好項目后，先設置默認文件編碼為utf-8和maven倉庫位置。

　　把需要的文件夾建好。

2、pom文件和熱部署

2.1 依賴

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>FH_TL1</groupId>
    <artifactId>SvmDemo</artifactId>
    <version>1.0-SNAPSHOT</version>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.6.RELEASE</version>
    </parent>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.0.1</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
            <version>2.1.0.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <version>2.0.0.RELEASE</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

　　spring-boot-starter-thymeleaf是使用thymeleaf模板需要的依賴。

2.2 熱部署

　　使用熱部署的話需要spring-boot-devtools依賴，IDEA默認是關閉熱部署的，因此在配置了依賴后可以手動或自動2種方式使用：

1、手動方式：Crtl + F9快捷鍵，在修改了html等腳本后，使用這個快捷鍵編譯。感覺還是手動好用吧，不用想着頁面沒變化是不是因為沒有刷新成功。

2、自動方式：按Crtl + Shift + Alt + /快捷鍵，再進入Registry，勾選compiler.automake.allow.when.app.running，然后Build->Compiler勾選Build Project automatically。最后重啟下IDEA就可以了。

3、配置文件

　　application.yml：

spring:
  profiles:
    active: dev

　　application-dev.yml：

server:
  port: 8080

spring:
  datasource:
    username: root
    password: 123456
    url: jdbc:mysql://localhost:3306/svm?useUnicode=true&characterEncoding=utf-8&useSSL=true&serverTimezone=UTC
    driver-class-name: com.mysql.cj.jdbc.Driver
  thymeleaf:
    cache: false
    prefix: classpath:/templates/
    suffix: .html
    encoding: UTF-8
    content-type: text/html
    mode: HTML5

mybatis:
  #mapper-locations: classpath:mapping/*Mapper.xml
  type-aliases-package: com.yue.entity

　　這是在項目中配置多套環境的配置方法。application.yml設置使用哪套環境，每個環境設置自己的參數配置。在Spring Boot中多環境配置文件名需要滿足application-{profile}.yml的格式，其中{profile}對應你的環境標識，比如application-dev.yml。

　　com.mysql.cj.jdbc.Driver是jdbc最新的驅動，原驅動也能用但會報一個錯誤。

　　mybatis使用注解式的話需要注釋掉mapper-locations，type-aliases-package是實體類的包，使用這個可以把這個包內的實體類用簡單名稱表示。

4、建立數據庫表

　　把數據庫中的表建好。

CREATE TABLE user(
    id INTEGER PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(20) NOT NULL UNIQUE,
    age INTEGER
)

插入數據。

5、后台實現

5.1 實體類

　　User.java：

package com.yue.entity;

public class User {
    private int id;
    private String name;
    private String age;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getAge() {
        return age;
    }

    public void setAge(String age) {
        this.age = age;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", age='" + age + '\'' +
                '}';
    }
}

5.2 啟動Main函數

　　AppMain.java：

package com.yue;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
@MapperScan("com.yue.mapper")
public class AppMain {
    public static void main(String[] args) {
        SpringApplication.run(AppMain.class);
    }
}

　　@SpringBootApplication = @SpringBootConfiguration + @EnableAutoConfiguration + @ComponentScan。

5.3 controller類

　　Forward.java：

package com.yue.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/")
public class Forward {

    @RequestMapping("/index")
    public String index() {
        return "/index";
    }
}

　　頁面上請求http://localhost:8080/index后跳到這個方法，然后跳轉到對應的index.html頁面。

　　Query.java：

package com.yue.controller;

import com.yue.entity.User;
import com.yue.service.impl.QueryService;
import org.apache.ibatis.annotations.Param;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/")
public class Query {

    @Autowired
    private QueryService queryService;

    @RequestMapping("/getUser")
    public User getUser(@Param("id") String id) {
        User user = queryService.getName(1);
        return user;
    }

}

　　前端傳入id值后，后端返回user數據。

　　@RestController = @Controller + @ResponseBody，@Controller標注這是一個控制器類，@ResponseBody是把返回的數據轉成json格式返回。

　　@RequestMapping是請求的路徑。

　　@Param是前端傳入的參數

　　@Autowired是自動注入，可以注入被@Service、@Controller、@Repository、@Component注解的類：

1、@Service：用於標注業務層組件。

2、@Controller：用於標注控制層組件。

3、@Repository：用於標注數據訪問組件，即DAO組件。

4、@Component：泛指組件，當組件不好歸類的時候，可以使用這個注解進行標注。

5.4 Service類

　　BaseService.java：

package com.yue.service;

public class BaseService {}

　　基礎類，用於放置公共方法，哪怕沒有一個方法也要放上去，之后方便加入。

　　QueryService.java：

package com.yue.service.impl;

import com.yue.entity.User;
import com.yue.mapper.QueryMapper;
import com.yue.service.BaseService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class QueryService extends BaseService {
    @Autowired
    private QueryMapper queryMapper;

    public User getName(int id){
        return queryMapper.queryUser(id);
    }
}

5.5 Mapper類

　　QueryMapper.java：

package com.yue.mapper;

import com.yue.entity.User;
import org.apache.ibatis.annotations.Select;
import org.springframework.stereotype.Repository;

@Repository
public interface QueryMapper {

    @Select("SELECT * FROM user WHERE id = #{id}")
    User queryUser(int id);
}

　　使用注解的方式實現mybatis。

6、前端實現

6.1 html頁面

　　index.html：

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>測試網站</title>
    <link th:href="@{/css/index.css}" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" th:src="@{/js/jquery.js}"></script>
    <script type="text/javascript" th:src="@{/js/index.js}"></script>
</head>
<body>
<p>
    <label class="name">用戶id：</label>
    <input placeholder="輸入id" type="text" class="text-box" id="id"/>
    <button id="aa">按鈕</button>
</p>
</body>
</html>

　　需要加入xmlns:th="http://www.thymeleaf.org"命名空間，說明使用thymeleaf模板。

6.2 css實現

　　index.css：

p,label{
    color: green;
}

6.3 js實現

$(document).ready(function(){
    $("button#aa").click(function(){
        //var jsonObj = {id: $("#id").val(),name:"abcd",age:"123"};
        $.ajax({
            async : false,
            url: "/getUser",
            data:{
                id:$("#id").val()
            },
            //data:JSON.stringify(jsonObj),  傳入json數據
            type: "POST",
            dataType:"json",//返回數據類型
            //headers:{"Content-Type":"application/json"},  傳入json數據時需設置請求頭
            success:function(data){
                alert(data.name);
            },
            error:function(err){
                alert('連接失敗');
            }
        });
    });
});

 7、使用效果

　　網頁請求http://localhost:8080/index。

　　點擊按鈕：

8、項目git地址

　　https://gitee.com/wyliu/SvmDemo.git