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