1，配置pom.xml的依赖包
<thymeleaf.version>3.0.6.RELEASE</thymeleaf.version>
<thymeleaf-layout-dialect.version>2.2.2</thymeleaf-layout-dialect.version>
``<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>1.1.1</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.23</version>
</dependency>
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.0.0</version>
</dependency>
<!--热启动-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<optional>true</optional>
</dependency>
<!--热启动-->
<configuration>
<fork>true</fork>
</configuration>
2，配置application.properties（连接数据库信息，连接池）
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:/bootstrap_test
spring.datasource.username=root
spring.datasource.password=
# 下面为连接池的补充设置，应用到上面所有数据源中
# 初始化大小，最小，最大
spring.datasource.initialSize=
spring.datasource.minIdle=
spring.datasource.maxActive=
# 配置获取连接等待超时的时间
spring.datasource.maxWait=
# 配置间隔多久才进行一次检测，检测需要关闭的空闲连接，单位是毫秒
spring.datasource.timeBetweenEvictionRunsMillis=
# 配置一个连接在池中最小生存的时间，单位是毫秒
spring.datasource.minEvictableIdleTimeMillis=
spring.datasource.validationQuery=SELECT FROM DUAL
spring.datasource.testWhileIdle=true
spring.datasource.testOnBorrow=false
spring.datasource.testOnReturn=false
# 打开PSCache，并且指定每个连接上PSCache的大小
spring.datasource.poolPreparedStatements=true
spring.datasource.maxPoolPreparedStatementPerConnectionSize=
# 配置监控统计拦截的filters，去掉后监控界面sql无法统计，'wall'用于防火墙
spring.datasource.filters=stat,wall,log4j
# 通过connectProperties属性来打开mergeSql功能；慢SQL记录
spring.datasource.connectionProperties=druid.stat.mergeSql=true;druid.stat.slowSqlMillis=5000
# 合并多个DruidDataSource的监控数据
#spring.datasource.useGlobalDataSourceStat=true
########################################################
### Java Persistence Api
########################################################
spring.jpa.database=MYSQL
spring.jpa.show-sql=true
spring.jpa.hibernate.ddl-auto=update
3，创建包，（分层）（略，，，）
4，dao层的配置（可以用JPA，也可以用Mybatis）
（1）JPA
建一个接口，继承JpaRepository<>(泛型)
jpa已提供一定的规范
如果hql满足不了需要，也可以自定义hql语句。
（2）Mybaties
(类似这种写法)
@Select("select * from user")
List<User> selectUser();
5，Entity实体类的新建
（如果主键是string类型，生成策略是UUID，则strategy = “uuid”）
@Entity
@Id
@GeneratedValue(generator = "Generator")
@GenericGenerator(name="Generator", strategy = "native" )
private int Uid;
@Column(name="uname")
private String uname = "";
6，contriller层
调用业务层，注意路径就好
7，模态窗口操作
关于模态窗口在Bootstrap官方文档下载就可以
弹出模态框
按钮的data-target属性必须与对应的模态窗的id值对应
<button type="button" class="btn btn-primary" th:value="${user.uid}" onclick="edit(this)" data-toggle="modal" data-target="#exampleModal">
修改
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">用户注册</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="username" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10">
<input type="hidden" name="uid" id="uid" >
<input type="text" class="form-control" name="username" id="username" placeholder="Username" style="width: 200px">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="password" id="password" placeholder="Password" style="width: 200px">
</div>
</div>
<div class="form-group">
<label for="address" class="col-sm-2 control-label">地址</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="address" id="address" placeholder="address" style="width: 200px">
</div>
</div>
<!--<div class="form-group">
<label for="birthday" class="col-sm-2 control-label">生日</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="birthday" id="birthday" placeholder="birthday" style="width: 200px">
</div>
</div>-->
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="update()">确认修改</button>
<button type="button" class="btn btn-primary" onclick="add()">保存</button>
</div>
</div>
</div>
</div>
增加时的后台
function add() {
var username = $("#username").val();
var password = $("#password").val();
var address = $("#address").val();
var birthday = $("#birthday").val();
console.log(username);
console.log(password);
console.log(address);
console.log(birthday);
$("#exampleModal").modal('hide');
var url="/insertUser";
var data = {"username":username,"password":password,"address":address,"birthday":birthday};
$.ajax({
url:url,
data:data,
type:"POST",
dataType:"json",
success:function(data){
}
});
}
修改时的数据回现
function edit(o) {
var uid= $(o).val();
$.post("/findUserById",{"uid":uid},function(user){
$("#uid").val(uid);
$("#username").val(user.username);
$("#password").val(user.password);
$("#address").val(user.address);
});
}