文章目录
〇、Spring Boot与Thymeleaf的配置
0.1 Spring Boot的配置
新建Maven项目，在pom.xml文件中添加如下依赖。
<!-- 继承spring boot的starter模块 -->
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.0.1.RELEASE</version>
</parent>
<!-- 添加启动类的依赖 -->
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependencies>
0.2 Thymeleaf的配置
要在Spring Boot环境中使用Thymeleaf模板，需在pom.xml文件中添加如下依赖。
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
一、jquery
1.1 概述
基本语法：$(select).action();
其中select指选择器，action指执行的行为。
文件存放：
1. css文件存放在src/main/resources/static/css目录
引入方式：<link rel="stylesheet" type="text/css" th:href="@{/css/css文件名}" />
2. JavaScript文件存放在src/main/resources/static/js目录
引入方式：<script type="text/javascript" th:src="@{/js/js文件名}" />
3. 页面(模板)文件存放在src/main/resources/templates目录
1.2 选择器
jquery的选择器基于css选择器，可以使用选择器根据不同的条件选择节点。
1. id选择 -- $("#id名")
2. class选择 -- $(".class名")
3. class与节点 -- $("节点名.class名")
4. 获取子节点 -- $("#parent 子节点名")
5. 根据属性选取节点 -- $("节点名[class=class名]
注：节点即标签，属性即class。
1.3 事件
选取了HTML节点以后，可以为其指定事件。
基本语法：$(doucument).ready(function(){
$(selector).事件名(function(){
执行的行为;
});
});
事件分类：
1. 鼠标事件 click,dblclick,mouseenter,mouseleave;
2. 键盘事件 keypress,keydown,keyup;
3. 表单事件 blur,focus,submit.
1.4 Ajax
jquery提供了多个Ajax方法，我们可以直接请求服务获取数据，比较常用的是调用HTTP的GET与POST方法。
1. Ajax调用GET方法
$(document).ready(function(){
// 使用Thymeleaf内联语法,设置请求路径
var url = "[[@{/服务器映射地址}]]";
// 调用GET方法获取数据
$.get(url,function(datas,status){
//简单输出数据,可将数据写入table等列表中;
}
});
});
2. Ajax调用POST方法
向服务器端发送POST请求,可以使用$.ajax和$.post方法。
a.使用$.ajax
function 方法名(){
var url = "[[@{/服务器映射地址}]]";
var data = {属性:"值"};
$.ajax({
type:"POST",
dataType:"json",
contentType:"application/json;charset=utf-8",
url:url,
data:JSON.stringify(data),
success:function(data){
执行的行为;
}
});
}
b.使用$.post,需要额外设置contentType,否则服务器将无法接收数据
$.ajaxSetup({
contentType:"application/json;charset=utf-8"
});
function send(){
var url = "[[@{/服务器映射地址}]]";
var data = {属性:"值"};
$.post(url,JSON.stringify(data),function(data){
执行的行为;
});
}
注 1. 服务器映射地址指@GetMapping或@PostMapping中的value值.
2. 简单来说，有@ResponseBody标记表示该方法返回数据，没有则表示跳转页面.
3. 调用GET方法在服务器方法上写@GetMapping和@ResponseBody,调用POST方法在服务器方法上写@PostMapping和@ResponseBody.
1.5 表单
jquery将一些通用的功能提取出来形成插件，目前有很多供我们选择。
这里介绍一个常用的插件：表单验证（jquery Validation）。
message.js是提供信息的国际化文件，常结合表单插件使用。
<script th:src="@{/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{/js/jquery.validate.min.js}"></script>
<script th:src="@{/js/messages.js}"></script>
<script>
$("#form表单id").validate({
rules: {
name: {
required: true表示必填
},
passwd: {
minlength: 设置最小字符长度
},
email: {
email: true表示合法的邮箱格式
}
},
messages: {
name: {
required: "设置没有写name时显示的信息"
}
}
});
</script>
二、Bootstrap
2.1 概述
Bootstrap是一个开源的前端框架，提供了一整套的界面组件。兼容Jquery，自带多个jquery插件。还提供了响应式布局，界面可以兼容多种设备。
引入方式
<link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}" />
<script th:src="@{/js/bootstrap.min.js}"></script>
2.2 数据列表
以table表格为例。
后端控制
model.addAttribute("attributeName",attributeValue);
前端页面
1. 使用Bootstrap样式
<table class="table"></table>
2. Thymeleaf表达式遍历集合
<tbody>
<tr th:each="指定对象名 : ${attributeName}" th:object="${指定对象名}">
<td th:text="*{实体属性1}"></td>
<td th:text="*{实体属性2}"></td>
……
</tr>
</tbody>
2.3 分页
以数据列表为基础，实现简单的分页功能。
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">页码</a></li>
……
</ul>
2.4 表单
以post提交为例。
后端控制
@GetMapping("/服务器映射地址")
public String form(@ModelAttribute 实体类 实体对象) {
return "页面模板";
}
@PostMapping(value="/提交地址")
public String save(@ModelAttribute 实体类 实体对象) {
return "页面模板";
}
前端页面
<form name="" th:action="@{/提交地址}" method="post" th:object="${对象名}">
<table>
<tr>
<td>实体属性1</td>
<td><input type="text" class="form-control" name="属性1" th:value="*{属性1}"/></td>
</tr>
……
<td>价格类属性</td>
<td class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">¥</span>
</div>
<input type="text" class="form-control" name="价格类属性" th:value="*{价格类属性}">
<div class="input-group-append">
<span class="input-group-text">元</span>
</div>
</td>
</tr>
<tr>
<td> </td>
<td><input type="submit" class="btn btn-outline-primary" value="提交"/></td>
</tr>
</table>
</form>
2.5 警告框
在2.4表单基础上，添加错误警告。
后端控制
model.addAttribute("attributeName",attributeValue);
前端页面
1. 使用Bootstrap样式
<div id="alertDiv" class="alert alert-warning alert-dismissible fade" role="alert">
<strong>错误：</strong>
<span th:text="${attributeValue}"></span>
<a href="#" class="close" id="closeButton">x</a>
</div>
2. JavaScript控制警告框
<script type="text/javascript">
$(function(){
var msg = '[[${msg}]]';
if(msg==""){
//无提示信息,隐藏提示div
$("#alertDiv").addClass("hide");
}else{
//有提示信息,显示提示div
$("#alertDiv").addClass("show");
}
//错误提示框关闭按钮的单击事件
$('#closeButton').click(function(){
$(".alert").addClass("hide");
$(".alert").removeClass("show");
});
});
</script>
三、Vue
3.1 概述
jquery库可以直接操作HTML节点实现具体的功能，Vue则不一样。
Vue通过特别的HTML、JavaScript语法，来绑定HTML节点与具体的数据，当数据发生改变时，HTML内容也会相应地更新。
文件引入：<script th:src="@{/文件路径/vue.min.js}"></script>
基本语法：
<div id="id名">
<div>{{ 属性1 }}</div>
</div>
<script>
new Vue({
el: '#id名',
data: {
属性1: "值",
……
}
});
</script>
注：{{…}}语法用于输出属性。
3.2 组件
Vue的组件类似于JSP自定义标签。可以使用Vue对象的component方法注册一个对象，然后可以在HTML中，将注册的对象组件作为HTML节点使用，组件也可以增加参数。
后端控制
model.addAttribute("attributeName",attributeValue);
前端页面
<div id="container">
<自定义组件名 参数1="值" ……></自定义组件名>
</div>
<script type="text/x-template" id="自定义模板名">
<span>{{ 属性1 }}, {{ …… }}, {{ 参数1 }}, {{ …… }}, {{ 属性n }}</span>
</script>
<script>
Vue.component("自定义组件名", Vue.extend({
props: ["参数1", "……"],
template: "#my-template",
data: function() {
return {
属性1: "值",
属性2：值,
……
属性n: '[[ ${attributeName} ]]'
}
}
}));
new Vue({
el: "#container"
});
</script>
3.3 指令
Vue提供了许多指令，可以用来完成逻辑判断、循环、节点操作等等。
- v-text：将值作为普通文本输出。
- v-html：将值作为HTML输出。
- v-show：如果属性为true，则使用该指令的节点将会显示。
- v-if：逻辑判断指令，与之类似的还有v-else、v-else-if指令。
- v-for：遍历指令，用于遍历并输出数据，类似于Thymeleaf中的th:each属性。
- v-on：用于绑定事件监听器。例如v-on:click可缩写成@click。
- v-bind：用于绑定节点属性，可用“:”代替。例如v-bind:src可缩写成:src。
- v-model：使用在表单中，将表单域进行数据绑定。
- v-once：节点内容只会被处理一次，后面的数据变化将不会再次处理。
示例：
<style>
.redText {
color: red;
font-size: 24px;
}
</style>
<script th:src="@{/js/vue.min.js}"></script>
</head>
<body>
<div id="app">
<!-- 比较文本输出与html输出 -->
<span v-text="html"></span><br>
<span v-html="html"></span><br>
<!-- 根据isLady判断是否显示span -->
<span v-show="isLady">女</span><br>
<!-- 判断isLady值,如果是true则显示该span -->
<span v-if="isLady == true">女</span><br>
<!-- 为button绑定事件 -->
<input type="button" value="确认" v-on:click="hello()"><br>
<!-- 如果isLady为true,则class使用redText -->
<span v-bind:class="{redText:isLady}">女</span><br>
<!-- 数据改变后,将不会改变这个span -->
<span v-once v-html="html"></span><br>
</div>
<input type="button" value="改变" onclick="change()"><br>
<script>
var app = new Vue({
el:"#app",
data:{
html:"<span style='color:orange;'>pfit</span>",
isLady:true
}
});
function hello(){
alert("hello");
}
function change(){
app.$data.html="<span style='color:blue;'>pfit</span>";
}
</script>
3.4 循环
我们可以使用v-for指令进行遍历，该指令的使用方法与Thymeleaf的th:each属性类似。
基本语法：<标签节点 v-for="数据对象 in 数据集"></标签节点>
3.5 表单验证
Vue支持使用插件，这里介绍一个简单的表单验证插件，名称是"vee-validate"。
引入方式：<script th:src="@{/js/vee-validate.js}"></script>
验证规则：
1. v-validate="'min:最小长度|max:最大长度'" - 字段的最小最大长度
2. v-validate="'required'" - 必填字段
Vue安装插件：<script>Vue.use(VeeValidate);</script>
四、总结
在进行前端应用开发时，一般都会用到jquery、Bootstrap、Vue等几款较为流行的JavaScript库。
本文在SpringBoot和Thymeleaf的基础上，对上述框架进行了入门级的介绍，足以应付最基本的功能开发。
注意事项：因为HTML的代码是逐行解析的，所以不论是jQuery、Bootstrap还是Vue，引入文件的代码一定要写到具体的<script>脚本之前。
特别鸣谢：@于占涛
注：以上说明均为个人经验，如有错误欢迎指出，笔者虚心改正。如果有更好的方法或者别的问题，也欢迎大家扫文末的微信平台二维码，共同交流，共同进步。
1233
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
