架构师全新框架之Spring Boot 持续更新 基础篇01
Spring boot
一、 在STS中实现热部署
STS本质上也是基于Eclipse的
1、 在Eclipse上实现Spring boot 热部署常见的三种方式
l Jrebel、 Spring Loaded 和spring-boot-devtools
- 对于使用InteliJ的同学这三种配置也没有多大区别
- 其中使用Jrebel配置最简单，支持也比较好，其他两种方式在使用Thymeleaf模板的时候配置稍复杂
2、 Jrebel插件方式（最简单）
- 解压缩Jrebel插件
2. 在VM arguments中添加项目启动参数
3. 启动项目 console中提示Jrebel的log并且log无异常说明配置成功
这会儿你可以修改一下Controller或者thymeleaf模板看看效果了！
二、 bootstrap-table QuickStart
Ø 配置好热启动，我们就要开始高效的开发之旅了
Ø 接下来做前后端分离架构，由于需求是来自于UI，理所当然首先是配置前端框架
2.1 下载依赖
前端展示我们使用开源项目bootstrap-table
GitHub地址：https://github.com/wenzhixin/bootstrap-table
从名字上来看，这个项目还依赖bootstrap
GitHub地址：https://github.com/twbs/bootstrap
当然还少不了Jquery
下载地址：https://jquery.com/download/
2.2 使用thymeleaf引入css和js
Header中加入
<link rel="stylesheet" th:href="@{/js/bootstrap.min.css}" >
<link rel="stylesheet" th:href="@{/js/bootstrap-table.min.css}" href="../assets/bootstrap-table/src/bootstrap-table.css">
<script th:src="@{/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{/js/bootstrap-table.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
2.3 Html加载数据
Table标签添加属性 data-toggle="table"
然后在Table中使用Thymeleaf循环写表格即可
<table data-toggle="table">
<tr>
<th>NAME</th>
<th>loginName</th>
<th>nickName</th>
</tr>
<tr th:each="user : ${list}">
<td th:text="${user.id}">id</td>
<td th:text="${user.loginName}">loginName</td>
<td th:text="${user.nickName}">nickName</td>
</tr>
</table>
2.4 Javascript加载数据
1) 静态数据加载
2) 加载数据及初始化表格
<script>
var $table = $('#table');
$(function () {
var data = [
{
"id": 0,
"name": "Item 0",
"price": "$0"
},
{
"id": 1,
"name": "Item 1",
"price": "$1"
},
{
"id": 2,
"name": "Item 2",
"price": "$2"
},
{
"id": 3,
"name": "Item 3",
"price": "$3"
},
{
"id": 4,
"name": "Item 4",
"price": "$4"
},
{
"id": 5,
"name": "Item 5",
"price": "$5"
}
];
$table.bootstrapTable({data: data});
});
</script>
2.5 表格定义
<table id="table">
<thead>
<tr>
<th data-field="id">id</th>
<th data-field="loginName">loginName</th>
<th data-field="nickName">nickName</th>
</tr>
</thead>
</table>
2.6 使用thymeleaf
接下来我们尝试使用thymeleaf循环写入js
以前在jsp里我们使用Jstl这么写
<c: forEach begin = "1" end = "5" varStatus = "V"> </ c: forEach>.
那么如何在thymeleaf模板中的javascript对象使用model数据呢？
thymeleaf模板为前端数据的获取提供了不小的便利
html在标签内即可通过${}语法操作model数据
用javascript获取model中数据的方法：
<script type="text/javascript" th:inline="javascript">
var a = [[${data}]]
</script>
其中[[...]]为内联文本的表示方式
使用时，必须先用th:inline="text/javascript/none"**
还有一种方法，使用隐藏域：
先将值取到htmldom节点中：
<input type="hidden" th:value=“${data} ” id="data">
js中再从dom节点取数据 : var data=${"#data"}.val()
两种方法提倡前者，毕竟可以直接得到数据不需要中介。
Table
<table id="table">
<thead>
<tr>
<th data-field="id">id</th>
<th data-field="loginName">loginName</th>
<th data-field="nickName">nickName</th>
</tr>
</thead>
</table>
Javascript
<script type="text/javascript" th:inline="javascript">
var $table = $('#table');
$(function () {
var data = [[${list}]];
$table.bootstrapTable({data: data});
});
</script>
2.7 使用ajax
Javascript
<script type="text/javascript">
$(function(){
$.ajax({
type: "GET",
url: "http://localhost:90/demo/User",
dataType: "json",
success: function (data) {
$("#table").bootstrapTable('load', data);
console.log(data)
},
error: function () {
alert("错误");
}
});
});
</script>
Table
<table id="table" data-toggle="table">
<thead>
<tr>
<th data-field="id">id</th>
<th data-field="loginName">loginName</th>
<th data-field="nickName">nickName</th>
</tr>
</thead>
</table>
PS:大家有什么想要分享的内容！可以在评论下方留言！！！
❤如果需要更多笔记资料，请私信小编即可！
❤如需要视频版本解析，请私信小编即可！
❤图文均为原创，旨在分享。
❤任何建议，可直接在最底右下方"写留言即可"