前端小知识

这些技术点在工作中应该用不到吧（虽然菜鸡，但好歹也是后端），但是万一呢，对吧，万一呢，所以还是记录一下吧。

1.thymeleaf的内联语法

内联语法是为了在JavaScript中访问model中的数据而存在的。

<script th:inline="javascript">
	var adminId = [[${session.admin.getId()}]];
</script>

使用方法就是在script标签中增加thymeleaf的th:inline属性并指明内联到javascript;然后使用[[${}]]内联语句来获取model中的值。上例获取session中admin的id值。

2.发起ajax请求

前端页面js

 var  id = $("[name='delete_but']").val();
 $.get(/*[[@{/admin/blogs/delete}]]*/"/admin/blogs/delete",
    {id : id},
    function (data) {
        if (data == "succ") {
            alert("删除成功");
            location.reload();
        } else {
            alert("删除失败");
        }
});

第一个参数是请求的URL，第二个是入参，第三个是回调函数。这里建议静态路径和thymeleaf模板的路径保持一致，如果值为""，在出现多个""的时候会出问题。

后端Controller

@Controller
@RequestMapping("/admin")
public class BlogController {
	
    @ResponseBody
    @GetMapping("/blogs/delete")
    public String delete(Long id) {

        String result = "";

        int i = blogService.deleteBlog(id);
        if (i == 1) {
            result = "succ";
        } else {
            result = "fail";
        }

        return result;
    }
}

Controller中方法的入参要和前端的入参名字保持一致，不然拿不到数据。@PathVariable是为rest风格而准备的，上面这个例子就不适用。这是个get示例，post请求也差不多，前端get换成post，后端@GetMapping注解换成@PostMapping即可。

下面说说load()方法

$("#table-content").load(/*[[@{/admin/blogs/search}]]*/"/admin/blogs/search", {
            title : $("[name='title']").val(),
            typeId : $("[name='typeId']").val(),
            recommend : $("[name='recommend']").prop('checked'),
            page : $("[name='page']").val()
});

参数同样也有3个，这里没有写回调函数。load()方法会根据参数类型来决定发送GET还是POST请求，参数是字符串为GET，是对象则为POST，所以示例是个POST请求。请求成功后，会将返回的数据填充到jQuery选择器选中的元素中。

3.thymeleaf自定义属性

语法如下

<a class="reply" data-commentid="1" data-nickname="Matt" th:attr="data-commentid=${comment.getId()},data-nickname=${comment.getNickName()}" onclick="startReply(this)">回复</a>

静态属性和动态属性是成对出现的，形如data-value，thymeleaf属性是th:attr="data-value=${xxx}",多个自定义属性用逗号隔开，即th:attr="data-value1=${xxx1},data-value2=${xxx2},..."。在js中取值的方式：

function startReply(obj) {
	var commentId = $(obj).data('commentid');
	var nickName = $(obj).data('nickname');
};

需要注意一点，value中不能出现大写字母，否则拿不到值，可能是一个bug吧。

4.在HTML元素中发起get请求时传递多个参数

thymeleaf支持在HTML元素中直接发起get请求，就像这样

<a href="#" class="ui blue basic button" th:href="@{/holic/index(pageNum=${page.getPageNum()} -1)}" th:unless="${page.isIsFirstPage()}">上一页</a>

后端Controller方法里入参定义为pageNum即可将前端传递的值接收，类似与$.get()。上边是传递一个参数，多个的话呢，也是和自定义属性时一样，用逗号隔开，如下

<a href="#" class="ui button blue basic" th:href="@{/holic/search(pageNum=${page.getPageNum()}+1,query=${query})}" th:unless="${page.isIsLastPage()}">下一页</a>

第一个参数为pageNum，第二个参数为query。

5.表单校验

Semantic UI框架针对表单检验有单独的方法

$('.reply.form').form({
    fields :{
        content : {
            identifier : 'content',
            rules :[{
                type :'empty',
                prompt :'评论不能为空哦~'
            }]
        }
    }
});

如果jQuery选择器选中的元素是个form，这个校验就会自动生效，换句话说，表单验证如果不被调用，只会对form元素生效，对于其他的元素（如div），需要显式地调用使其生效，就像这样

var boo = $('.reply.form').form('validate form');

更多信息可以参考Semantic UI的官网。

就先这么多了，有错误的地方欢迎指出~~