SpringBoot实现简单的前后台分离

前后端分离意味着前后端各司其职,通过 JSON,XML 等结构的数据交流。通常前端可能变化比较大的网站,在不同平台显示页面不同的网站,不注重SEO的网页我们推荐使用前后端分离。对那些需要搜索引擎抓取的页面最好还是从服务器端渲染。当然是否分前后端,也要根据业务而论。 后端专注于:后端控制层(Restful API) & 服务层 & 数据访问层; 前端专注于:前端控制层(Nodejs) & 视图层。   不过目前个人独立开发似乎没有做到前后端分离,既写控制层又写视图层,比较乱。 目前也有很多很好的前端 JS 框架,不过目前还没怎么用。 下面举个简单的例子介绍前后端分离,后端返回数据,前端显示。道理都一样。   后端 Java 代码
  1. package com.liuyanzhao.forum.controller;
  2. import com.liuyanzhao.forum.service.RankService;
  3. import com.liuyanzhao.forum.vo.UserRankVO;
  4. import org.springframework.beans.factory.annotation.Autowired;
  5. import org.springframework.http.ResponseEntity;
  6. import org.springframework.web.bind.annotation.GetMapping;
  7. import org.springframework.web.bind.annotation.RestController;
  8. import java.util.List;
  9. /**
  10.  * @author 言曌
  11.  * @date 2018/6/8 下午7:59
  12.  */
  13. @RestController
  14. public class RankController {
  15.     @Autowired
  16.     private RankService rankService;
  17.     @GetMapping("/userAnswerRank")
  18.     public ResponseEntity userAnswerRank() {
  19.         List<UserRankVO> userList = rankService.getUserAnswerRank();
  20.         return ResponseEntity.ok().body(userList);
  21.     }
  22.     //两种写法都行
  23. //    @GetMapping("/userAnswerRank")
  24. //    public List<UserRankVO> userAnswerRank() {
  25. //        List<UserRankVO> userList = rankService.getUserAnswerRank();
  26. //        return userList;
  27. //    }
  28. }
@RestController  相当于 @Controller + @ResponseBody   前台 JS 代码
  1. //加载光荣榜
  2.    function getUserAnswerRank() {
  3.        var token = $("meta[name='_csrf']").attr("content");
  4.        var header = $("meta[name='_csrf_header']").attr("content");
  5.        $.ajax({
  6.            url: '/userAnswerRank',
  7.            type: 'GET',
  8.            beforeSend: function (request) {
  9.                request.setRequestHeader(header, token); // 添加  CSRF Token
  10.            },
  11.            success: function (data) {
  12.                console.log(data);
  13.                var content = '';
  14.                $.each(data, function (i, item) {
  15.                    content += '<div class="ranking-list-item"> <div class="list-inner">' +
  16.                        '<div class="ranking">'+(i+1)+'</div>\n' +
  17.                        ' <div class="avatar">\n' +
  18.                        '      <a href="/' + item.username + '" target="_blank">\n' +
  19.                        '         <img src="' + item.avatar + '" style="height: 30px; width: 30px;" class="img-circle"></a>\n' +
  20.                        ' </div>\n' +
  21.                        ' <div class="name-info">\n' +
  22.                        '    <div class="name">' + item.nickname + '</div>\n' +
  23.                        '    <div class="info">回答了' + item.answerSize + '个问题</div>\n' +
  24.                        '</div></div></div>';
  25.                });
  26.                $("#userAnswerRank").html(content);
  27.            },
  28.            error: function () {
  29.                layer.msg("后台好像偷了点小懒哦,重新刷新一下试试!", {icon: 2}, function () {
  30.                    window.location.reload();
  31.                });
  32.            }
  33.        });
  34.    }
  35.    getUserAnswerRank();
    后端将回答问题数排行榜的用户列表返回给前台,且只返回指定的字段。   前台通过 JS 填充到 DOM 节点上      

发表评论

目前评论:1