基于springboot+mybatis+bootstrap搭建前后端系统(一：框架整合)

项目源码下载

下载地址

使用到的技术

springboot介绍

这个不用细说了，目前java开发中最受欢迎的框架

mybatis介绍

MyBatis是一个优秀的持久层框架，它对JDBC的操作数据库的过程进行封装，使开发者只需要关注 SQL 本身，而不需要花费精力去处理例如注册驱动、创建Connection、创建Statement、手动设置参数、结果集检索等JDBC繁杂的过程代码。

bootstrap介绍

Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷，也是目前比较流行的框架。

html+thymeleaf代替jsp

数据库mysql

整体项目框架构建

官网直接生成springboot项目

项目构建地址

mybatis逆向工程生成entity,mapper及xml配置文件

pom.xml引入依赖

<!-- 逆向工程 -->
<dependency>
   <groupId>org.mybatis.generator</groupId>
   <artifactId>mybatis-generator-core</artifactId>
   <version>1.3.5</version>
</dependency>

逆向工程配置文件

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE generatorConfiguration
      PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
      "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">
      
<generatorConfiguration>
   <context id="MySqlContext" targetRuntime="MyBatis3Simple" defaultModelType="flat">
      <property name="beginningDelimiter" value="`"/>
      <property name="endingDelimiter" value="`"/>
      
      <!-- 生成java文件编码 -->
      <property name="javaFileEncoding" value="utf-8"/>
      
      <!-- 自定义mapper 如果不自定义使用下面的类
      	tk.mybatis.mapper.common.Mapper,tk.mybatis.mapper.common.MySqlMapper -->
      <plugin type="tk.mybatis.mapper.generator.MapperPlugin">
         <property name="mappers" value="com.soyking.blogs.utils.BlogsMapper"/>
      </plugin>
      
      <jdbcConnection driverClass="com.mysql.jdbc.Driver" connectionURL="jdbc:mysql://localhost:3306/database?serverTimezone=UTC"
         userId="username"
         password="password">
      
      </jdbcConnection>
      
      <!-- 生成pojo所在包 -->
      <javaModelGenerator targetPackage="com.soyking.blogs.entity.sysmgr" targetProject="src/main/java"/>
      <!-- 生成mapper所在目录 -->
      <sqlMapGenerator targetPackage="mapping" targetProject="src/main/resources"/>
      <!-- mapper对应的java映射 -->
      <javaClientGenerator targetPackage="com.soyking.blogs.mapper.sysmgr" type="XMLMAPPER" targetProject="src/main/java"/>
      
      <!-- 生成的表 -->
      <table tableName="sk_blogs_user_info" enableCountByExample="false" enableUpdateByExample="false"
         enableDeleteByExample="false" enableSelectByExample="false" selectByExampleQueryId="false"></table>
   </context>
</generatorConfiguration>

package com.soyking.blogs.utils;

import org.mybatis.generator.api.MyBatisGenerator;
import org.mybatis.generator.config.Configuration;
import org.mybatis.generator.config.xml.ConfigurationParser;
import org.mybatis.generator.internal.DefaultShellCallback;

import java.io.File;
import java.math.BigDecimal;
import java.math.RoundingMode;
import java.util.ArrayList;
import java.util.List;

public class GeneratorDisplay {
     
   
   public void generator() throws Exception{
     
      List<String> warnings = new ArrayList<String>();
      boolean overwrite = true;
      //指向 逆向工程配置文件
      File configFile = new File("src/generatorConfig.xml");
      ConfigurationParser cp = new ConfigurationParser(warnings);
      Configuration config = cp.parseConfiguration(configFile);
      DefaultShellCallback callback = new DefaultShellCallback(overwrite);
      MyBatisGenerator generator = new MyBatisGenerator(config, callback, warnings);
      generator.generate(null);
   }
   
   public static void main(String[] args) {
     
      try {
     
         new GeneratorDisplay().generator();
      } catch (Exception e) {
     
         e.printStackTrace();
      }
   }

}

运行之后生成的目录结构

springboot整合mybatis

启动类指定需要扫描mapper文件的目录

pom.xml文件中引入mybatis的依赖

<!--mysql数据库驱动-->
<dependency>
   <groupId>mysql</groupId>
   <artifactId>mysql-connector-java</artifactId>
   <scope>runtime</scope>
</dependency>
<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<!--mybatis-->
<dependency>
   <groupId>org.mybatis.spring.boot</groupId>
   <artifactId>mybatis-spring-boot-starter</artifactId>
   <version>2.1.0</version>
</dependency>
<dependency>
   <groupId>tk.mybatis</groupId>
   <artifactId>mapper-spring-boot-starter</artifactId>
   <version>RELEASE</version>
</dependency>
<dependency>
   <groupId>tk.mybatis</groupId>
   <artifactId>mapper</artifactId>
   <version>4.0.3</version>
</dependency>

application.properties文件配置

#数据库连接配置
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/database?serverTimezone=UTC&characterEncoding=utf-8&useSSl=false
spring.datasource.username=username
spring.datasource.password=password

#mybatis的相关配置
mybatis.type-aliases-package=com.soyking.blogs
mybatis.mapper-locations=classpath:/mapping/*.xml

java代码
mapping.xml文件
mapper.java中的方法名对应mapping.xml中的sql-id

service中直接调用mapper中的方法

前端boostrap与后端springboot整合

pom.xml引入web和thymeleaf依赖

<!--web核心依赖-->
<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

配置文件关于前端的配置

controller中的配置

package com.soyking.blogs.menu;

import com.soyking.blogs.menu.service.impl.MenuService;
import com.soyking.blogs.entity.sysmgr.SkBlogsUserInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.HashMap;
import java.util.Map;

/**
 * 菜单页面
 * @author soyking
 */
@Controller
@RequestMapping("menu/")
public class MenuController {
     
    @Autowired
    private MenuService menuService;

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

    @RequestMapping("getUserInfo")
    @ResponseBody
    public Object getUserInfo(){
     
        Map<String,Object> paramMap = new HashMap<>();
        SkBlogsUserInfo userInfo = menuService.getUserInfo(paramMap);
        return userInfo!=null?userInfo:"none";
    }

}






package com.soyking.blogs;

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

/**
 * 首页
 * @author soyking
 */
@Controller
public class SoykingHome {
     

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

    @RequestMapping("skip")
    public void skip(){
     
        System.out.println("进到里面了......");
    }

}

前端页面html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>menu index</title>
    <script th:src="@{/js/jquery-1-10-2.min.js}"></script>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.css}" />
    <link rel="stylesheet" th:href="@{/menu/css/menu.css}" />

    <script>
    	//将后端请求的数据添加到div中
        $("#userInfo").load("menu/getUserInfo",function (userInfo) {
     
            return userInfo.username;
        });
    </script>
</head>
<body>
    <div class="col-sm-10"></div>
    <div id="userInfo" class="col-sm-2" style="background: #ffffff;"></div>
</body>
</html>


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Soyking博客</title>
    <script th:src="@{/js/jquery-1-10-2.min.js}"></script>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.css}" />
</head>
<body>
    <div id="app" class="">
    	//使用boostrap进行响应式布局
        <div class="col-sm-12" style="height: 200px;">
            <div id="menu"></div>
        </div>
        <div class="col-sm-4">
            <div id="content"></div>
        </div>
        <div class="col-sm-8">
            <div id="digest"></div>
        </div>
    </div>

    <script>
        $("#menu").load("menu/index");
    </script>
</body>
</html>

效果演示

数据库中的数据