JavaEE-SpringBoot-thymeleaf-layui
SpringBoot thymelef的使用以及模版
thymelef模版配置,可以不用配置
1 | spring: |
thymelef添加依赖
1
2
3
4<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>在
resource/templates添加网页${error}接收参数，th:action="@{/userLogin}"表单提交地址1
2
3
4
5
6<p th:if="${error}" class="bg-danger" th:text="${error}"></p>
<form method="post" class="layui-form" th:action="@{/userLogin}" >
<input name="username" placeholder="用户名" >
<input name="password" lay-verify="required" placeholder="密码">
<input value="登录" id="login" style="width:100%;" type="submit">
</form>添加
controller1
2
3
4
5
6
7
8
9
10
11
12
13
14
public class LoginControl {
public String login(Model model)
{
model.addAttribute("error","跳转而已"); //设置往网页传参数
return "login"; //跳转login.html,并接受上面的参数
}
public String userLogin(User user, Model model) {
model.addAttribute("error", "出现异常");
return "login"; //更新网页返回值
}
}
layui前端样式模版
直接复制到resource/static资源目录即可
layui简单的post请求
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28<button class="layui-btn" lay-submit="" lay-filter="addsort">增加</button>
<script>
layui.use(['layer', 'form'], function() {
var layer = layui.layer //引用layer模块
, form = layui.form;//引用form模块
form.on('submit(addsort)', function (data) { //addsort监听提交按钮
console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
$.ajax({
type: 'POST',
url: '/img/addSort',
dataType: 'json',
contentType: 'application/json',
data: JSON.stringify(data.field),
success:function (result) {
console.log(result);
if (result.code==200){
layer.msg('添加成功');
}else {
layer.msg(result.msg);
}
}
});
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
});
</script>表单数据加载
1
2
3
4
5
public String feedback(Model model){
model.addAttribute("feedBacks",feedBacks);
return "feedback";
}1
2
3
4
5
6
7
8
9
10
11
12
13<table class="layui-table">
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
</thead>
<tbody>
<tr th:each="feedBack:${feedBacks}">
<td th:text="${feedBack.feedbackid}"></td>
<td th:text="${feedBack.user.username}"></td>
</tr>
</tbody>
</table>含文件图片的表单混合一起提交,原理首先使用layui绑定按钮提交
上传图片按钮设置不自动
auto: false提交，然后存到文件里，然后表单提交的时候触发图片上传，以及绑定表单参数,设计时最好避免一起提交，设计可以先传好图片，然后填图片地址，分两次请求1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52<script>
var uploadInst;
var pathObj; //存文件
layui.use(['layer', 'form'], function () {
var layer = layui.layer
, form = layui.form;
form.on('submit(addpaper)', function (data) {
if (pathObj == undefined) {
layer.msg("没有选择壁纸");
return;
}
var sortid= $("select option:checked").attr("id");
//选了文件直接改参数上传
uploadInst.config.data = {
paperdetail:data.field.paperdetail,
sortid:sortid,
papername:data.field.papername
};
uploadInst.config.auto = true;
uploadInst.upload();
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
});
layui.use(['layer', 'upload'], function () {
var layer = layui.layer
, upload = layui.upload;
//普通图片上传
uploadInst = upload.render({
elem: '#post-photo'
, url: '/img/uploadpaper'
, auto: false
, before: function (obj) {
//预读本地文件示例，不支持ie8
obj.preview(function (index, file, result) {
$('#demo1').attr('src', result); //图片链接（base64）
});
},
choose: function (object) {
pathObj = object;
}
, done: function (res) {
if (res.code == 200) {
layer.msg("添加壁纸成功");
} else {
layer.msg("添加壁纸失败：" + res.msg);
}
//上传成功
}
});
});
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
public Msg singleFileUpload( MultipartFile file, int sortid, String paperdetail, String papername) {
List<String> urls = new ArrayList<>();
if (file == null) {
return ResultUtil.error(-300, "上传文件为空");
}
Paper paper = new Paper();
paper.setSortid(sortid);
paper.setPapername(papername);
paper.setPaperdetail(paperdetail);
try {
Files.write(Paths.get(uploadPath + file.getOriginalFilename()), file.getBytes());
paper.setPaperurl(imgUrl + file.getOriginalFilename());
paperMapper.insertPaper(paper);
} catch (Exception e) {
e.printStackTrace();
return ResultUtil.error(-301, e.getMessage());
}
return ResultUtil.success();
}动态读取下拉框
1
2
3<select name="sortid" id="sortid">
<option th:each="arrayS:${sorts}" th:text="${arrayS.sortname}" th:id="${arrayS.sortid}">默认选项</option>
</select>1
2
3
4
5
6
7
public String addwallpaper(Model model){
List<Sort> sorts;
sorts = paperMapper.selectSort();
model.addAttribute("sorts",sorts);
return "addwallpaper";
}