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);
});
}