SpringBoot实现简单的前后台分离

言曌 2018年06月08日21:28:39 6 4130 views

博主分享免费Java教学视频，B站账号：Java刘哥，长期提供技术问题解决、项目定制：本站商品点此

前后端分离意味着前后端各司其职，通过 JSON,XML 等结构的数据交流。通常前端可能变化比较大的网站，在不同平台显示页面不同的网站，不注重SEO的网页我们推荐使用前后端分离。对那些需要搜索引擎抓取的页面最好还是从服务器端渲染。当然是否分前后端，也要根据业务而论。

后端专注于：后端控制层（Restful API） & 服务层 & 数据访问层；

前端专注于：前端控制层（Nodejs） & 视图层。

不过目前个人独立开发似乎没有做到前后端分离，既写控制层又写视图层，比较乱。

目前也有很多很好的前端 JS 框架，不过目前还没怎么用。

下面举个简单的例子介绍前后端分离，后端返回数据，前端显示。道理都一样。

后端 Java 代码

package com.liuyanzhao.forum.controller;
import com.liuyanzhao.forum.service.RankService;
import com.liuyanzhao.forum.vo.UserRankVO;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
/**
* @author 言曌
* @date 2018/6/8 下午7:59
*/
@RestController
public class RankController {
@Autowired
private RankService rankService;
@GetMapping("/userAnswerRank")
public ResponseEntity userAnswerRank() {
List<UserRankVO> userList = rankService.getUserAnswerRank();
return ResponseEntity.ok().body(userList);
}
//两种写法都行
// @GetMapping("/userAnswerRank")
// public List<UserRankVO> userAnswerRank() {
// List<UserRankVO> userList = rankService.getUserAnswerRank();
// return userList;
// }
}

@RestController 相当于 @Controller + @ResponseBody

前台 JS 代码

//加载光荣榜
function getUserAnswerRank() {
var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");
$.ajax({
url: '/userAnswerRank',
type: 'GET',
beforeSend: function (request) {
request.setRequestHeader(header, token); // 添加 CSRF Token
},
success: function (data) {
console.log(data);
var content = '';
$.each(data, function (i, item) {
content += '<div class="ranking-list-item"> <div class="list-inner">' +
'<div class="ranking">'+(i+1)+'</div>\n' +
' <div class="avatar">\n' +
' <a href="/' + item.username + '" target="_blank">\n' +
' <img src="' + item.avatar + '" style="height: 30px; width: 30px;" class="img-circle"></a>\n' +
' </div>\n' +
' <div class="name-info">\n' +
' <div class="name">' + item.nickname + '</div>\n' +
' <div class="info">回答了' + item.answerSize + '个问题</div>\n' +
'</div></div></div>';
});
$("#userAnswerRank").html(content);
},
error: function () {
layer.msg("后台好像偷了点小懒哦，重新刷新一下试试！", {icon: 2}, function () {
window.location.reload();
});
}
});
}
getUserAnswerRank();