前言
Spring Boot是Spring家族最近几年最有影响力和前景的新成员，它对SpringMVC进行了相当程度的简化，尤其是在配置文件上面，做了很多简化，比如再也不需要配置json converter等等。一个Spring Boot工程，理论上只需要一个application.properties的配置文件，而不需要去劳心劳神地配置各种xml文件，既省事又不容易出错。下面我们来看看这样一个Spring Boot的简单工程。
正文
pom文件
这里我们使用的是Maven，在pom.xml中，加入如下代码：
<?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>
<artifactId>spring-boot-Demo</artifactId>
<packaging>war</packaging>
<name>Spring Boot Example</name>
<description>Spring Example</description>
<version>1.0</version>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>1.4.2.RELEASE</version>
</parent>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<!-- Web -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- Web with Tomcat + Embed -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
<scope>provided</scope>
</dependency>
<!-- JSTL -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
</dependency>
<!-- Need this to compile JSP -->
<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
<scope>provided</scope>
</dependency>
<!-- Need this to compile JSP -->
<dependency>
<groupId>org.eclipse.jdt.core.compiler</groupId>
<artifactId>ecj</artifactId>
<version>4.6.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>1.0.0</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.40</version><!--$NO-MVN-MAN-VER$-->
</dependency>
<!--pagehelper-->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.1.0</version>
</dependency>
</dependencies>
<build>
<plugins>
<!-- Package as an executable jar/war -->
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
这里面加入了一些可选的依赖，比如内嵌的服务器，jsp的compiler等，可以用maven install的方式运行服务器。注意我们这里并没有使用这种方式，只是写出来以备以后使用。这里使用到mybatis和pagehelper插件用来做数据库查询和分页。
下面来看程序唯一的配置文件，application.properties里的代码：
application.properties
spring.mvc.view.prefix: /WEB-INF/jsp/
spring.mvc.view.suffix: .jsp
mybatis.type-aliases-package = com.test.entity
mybatis.mapperLocations = classpath*:**/mapping/*.xml
spring.datasource.driverClassName = com.mysql.jdbc.Driver
spring.datasource.url = jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=UTF-8
spring.datasource.username = root
spring.datasource.password = root
#pagehelper
pagehelper.helperDialect=mysql
pagehelper.reasonable=true
pagehelper.supportMethodsArguments=true
pagehelper.params=count=countSql上图的前两行代码指定了返回的jsp文件的前缀与后缀，这是SpringMVC唯一需要配置的。如果你的工程里没有jsp文件，而全部是html文件，并且以REST风格进行所有的请求，那么这两句话都可以省略掉。后面几行代码也很通俗易懂，分别指定了mybatis的配置，以及pageHelper的配置。pageHelper是一个物理分页的插件，实现方式是Interceptor，非常好用，对各大关系型数据库都有很好的支持，这里的配置方式也很简单。这里我指定了mysql作为我的数据库。
下面来看Spring Boot的核心代码，一个继承了SpringBootServletInitializer的初始化类。
SpringBootWebApplication
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.web.support.SpringBootServletInitializer;
@MapperScan("com.test.Dao")
@SpringBootApplication
public class SpringBootWebApplication extends SpringBootServletInitializer {
@Override
protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
return application.sources(SpringBootWebApplication.class);
}
public static void main(String[] args) throws Exception {
SpringApplication.run(SpringBootWebApplication.class, args);
}
}可以看到这段代码中有一个main函数，如果你使用的是Maven Install的方式来运行内嵌的服务器，那么这段代码就是程序的入口。注意@MapperScan这个注解，指定了Mapper所在的程序包，mybatis会从这里指定的包里面寻找Mapper的java类。
接下来是最重要的Controller的代码。
Controller
import java.util.HashMap;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import com.github.pagehelper.Page;
import com.test.entity.Student;
import com.test.service.IStudentService;
@RestController
public class StudentController {
@Autowired
private IStudentService iStudentService;
@RequestMapping("/getstu")
public HashMap<String, Object> getStudents(@RequestParam(value="parameter") String parameter,
@RequestParam(value="pageNum")int pageNum, @RequestParam(value="pageSize")int pageSize) {
HashMap<String, Object> studentMap = new HashMap<String, Object>();
Page<Student> page = iStudentService.getStudents(parameter, pageNum, pageSize);
studentMap.put("studentdata", page);
studentMap.put("number", page.getTotal());
return studentMap;
}
@RequestMapping(value = "/add", method = RequestMethod.POST)
public void add(@RequestParam(value="name") String name) {
iStudentService.addStudents(name);
}
@RequestMapping(value = "/delete", method = RequestMethod.POST)
public void delete(@RequestParam(value="array[]") int[] array)
{
iStudentService.deleteStudents(array);
}
@RequestMapping(value = "/update", method = RequestMethod.POST)
public void update(@RequestParam(value="id")int id, @RequestParam(value="name")String name)
{
iStudentService.updateStudents(id, name);
}
}
注意@RestController这个注解，这是Spring Boot中的一大亮点。它的意思就是以REST的方式进行响应。加了这个注解之后，这个Controller里面所有的方法返回的都是json对象，我们既不需要在配置文件里指定JSON Converter，也不需要在方法前面加入@ResponseBody这样的注解。
接下来是mybatis的代码，很简单的CRUD功能。
Mybatis
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.test.Dao.StudentMapper">
<resultMap id="NewStudentResultMap" type="com.test.entity.Student">
<id column="id" property="id" jdbcType="INTEGER" />
<result column="name" property="name" jdbcType="VARCHAR" />
</resultMap>
<select id="getStudents" resultMap="NewStudentResultMap">
select id,name from student where id=#{parameter} or name like CONCAT('%',#{parameter},'%')
</select>
<insert id="addStudents">
insert into student(name) values (#{name})
</insert>
<update id="updateStudents">
update student set name = #{1} where id = #{0}
</update>
<delete id="deleteStudents" parameterType="Integer[]">
delete from student
<where>
id in
<foreach collection="ids" item="id" index="index" open="(" close=")" separator=",">
#{id}
</foreach>
</where>
</delete>
</mapper>这里简单说一下pageHelper的用法，非常简单，就是在service的实现方法里加入一行代码：
pageHelper
@Override
public Page<Student> getStudents(String parameter, int pageNum, int pageSize) {
Page<Student> page = PageHelper.startPage(pageNum, pageSize);
studentMapper.getStudents(parameter);
return page;
}startPage接受两个参数，第一个是要查询的页码，第二个是该页要显示多少条数据。
前端的代码使用的是最近一直比较火的vuejs2.0和基于vuejs的UI库elementUI。
前端代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>ElementDemo</title>
<link rel="stylesheet" href="../element-ui/lib/theme-default/index.css">
<script src="../js/jquery-3.1.1.min.js"></script>
<script src="../js/json2.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/vue-resource.js"></script>
<script src="../element-ui/lib/index.js"></script>
<style>
.el-select .el-input {
width: 110px;
}
.el-table .info-row {
background: #c9e5f5;
}
#top {
background:#20A0FF;
padding:5px;
overflow:hidden
}
</style>
</head>
<body>
<div id="test">
<div id="top">
<span>
<el-button type="text" @click="add" style="color:white">添加</el-button>
<el-button type="text" @click="deletenames" style="color:white">批量删除</el-button>
</span>
</div>
<br/>
<div style="margin-top:15px">
<el-input placeholder="请输入内容" v-model="criteria" style="padding-bottom:10px;">
<el-select v-model="select" slot="prepend" placeholder="请选择">
<el-option label="id" value="1"></el-option>
<el-option label="name" value="2"></el-option>
</el-select>
<el-button slot="append" icon="search" v-on:click="search"></el-button>
</el-input>
<el-table
ref="testTable"
:data="tableData"
style="width:100%"
border
:default-sort = "{prop: 'id', order: 'ascending'}"
@selection-change="handleSelectionChange"
@row-click="handleclick"
:row-class-name = "tableRowClassName"
>
<el-table-column
type="selection"
>
</el-table-column>
<el-table-column
prop="id"
label="Id"
sortable
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
sortable>
</el-table-column>
<el-table-column label="操作">
<template scope="scope">
<el-button
size="small"
type="primary"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button
size="small"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div align="center">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalCount">
</el-pagination>
</div>
</div>
</div>
<footer align="center">
<p>© Spring Boot Demo</p>
</footer>
<script>
var vue = new Vue({
el:"#test",
data: {
//表格当前页数据
tableData: [],
//多选数组
multipleSelection: [],
//请求的URL
url:'../getstu',
//搜索条件
criteria: '',
//下拉菜单选项
select: '',
//默认每页数据量
pagesize: 10,
//默认高亮行数据id
highlightId: -1,
//当前页码
currentPage: 1,
//查询的页码
start: 1,
//默认数据总数
totalCount: 1000,
},
methods: {
//从服务器读取数据
loadData: function(criteria, pageNum, pageSize){
this.$http.get(this.url,{parameter:criteria, pageNum:pageNum, pageSize:pageSize}).then(function(res){
this.tableData = res.data.studentdata;
this.totalCount = res.data.number;
},function(){
console.log('failed');
});
},
//多选响应
handleSelectionChange: function(val) {
this.multipleSelection = val;
},
//点击行响应
handleclick: function(row, event, column){
this.highlightId = row.id;
},
//编辑
handleEdit: function(index, row) {
this.$prompt('请输入新名称', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
}).then(({ value }) => {
if(value==''||value==null)
return;
this.$http.post('../update',{"id":row.id,"name":value},{emulateJSON: true}).then(function(res){
this.loadData(this.criteria, this.currentPage, this.pagesize);
},function(){
console.log('failed');
});
}).catch(() => {
});
},
//单行删除
handleDelete: function(index, row) {
var array = [];
array.push(row.id);
this.$http.post('../delete',{"array":array},{emulateJSON: true}).then(function(res){
this.loadData(this.criteria, this.currentPage, this.pagesize);
},function(){
console.log('failed');
});
},
//搜索
search: function(){
this.loadData(this.criteria, this.currentPage, this.pagesize);
},
//添加
add: function(){
this.$prompt('请输入名称', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
}).then(({ value }) => {
if(value==''||value==null)
return;
this.$http.post('../add',{"name":value},{emulateJSON: true}).then(function(res){
this.loadData(this.criteria, this.currentPage, this.pagesize);
},function(){
console.log('failed');
});
}).catch(() => {
});
},
//多项删除
deletenames: function(){
if(this.multipleSelection.length==0)
return;
var array = [];
this.multipleSelection.forEach((item) => {
array.push(item.id);
})
this.$http.post('../delete',{"array":array},{emulateJSON: true}).then(function(res){
this.loadData(this.criteria, this.currentPage, this.pagesize);
},function(){
console.log('failed');
});
},
//改变当前点击的行的class，高亮当前行
tableRowClassName: function(row, index){
if(row.id == this.highlightId)
{
return 'info-row';
}
},
//每页显示数据量变更
handleSizeChange: function(val) {
this.pagesize = val;
this.loadData(this.criteria, this.currentPage, this.pagesize);
},
//页码变更
handleCurrentChange: function(val) {
this.currentPage = val;
this.loadData(this.criteria, this.currentPage, this.pagesize);
},
},
});
//载入数据
vue.loadData(vue.criteria, vue.currentPage, vue.pagesize);
</script>
</body>
</html>本工程的完整代码可以在我的github中找到，下载解压后启动服务器，在浏览器中输入http://localhost:8080/spring-boot-Demo/html/Hello.html可以打开页面，如果想看到数据，需要配置你自己的数据库的网址到application.properties中。
截图：
结束语
Spring Boot有很多强大而又简便的功能值得我们去探索，这里所介绍的只是冰山一角，不过用来做一个简单的web工程已经足够。可以说Spring Boot，尤其是注解这一方面，值得我们去进行更深入的学习和研究。
