從零一起學Spring Boot之LayIM項目長成記（二） LayIM初體驗

前言

　　接上篇，已經完成了一個SpringBoot項目的基本搭建。那么現在就要考慮要做什么，怎么做的問題。所以本篇內容不多，帶大家一起來簡單了解一下要做的東西，之前有很多人不知道從哪里下手，那么今天我帶着大家熟悉LayIM以及它的對接思路。由於重點是SpringBoot，所以，LayIM部分也不會講的太細，官網有詳細的文章。

LayIM有什么？

• 非常舒服的UI
• 封裝了友好的聊天界面，消息記錄，自定義插件，添加好友，添加群組等等功能，前端的東西完全不必費心，把重心放到實現業務上。
• 完善的文檔，開發起來不必大費力氣

文檔解析

　　上邊一堆套話，沒有什么實質內容，下面我簡單講一下我們的開發思路。首先看初始化界面，瀏覽器右下角有一個類似QQ似的界面，包含好友列表，群組列表，當前登錄人的信息等。

　　

　　OK,查看源代碼我們可以看到，LayIM是有多個基礎接口的。初始化接口，上傳文件接口等等。這些數據接口是與我們將要用SpringBoot開發息息相關的。可以看到代碼里面有一個路徑：/layim/json/getList.json.下載代碼包，我們看看這個文件是什么東東。

 //基礎配置
  layim.config({
    //初始化接口
    init: {
      url: '/layim/json/getList.json'
      ,data: {}
    }
    //查看群員接口
    ,members: {
      url: '/layim/json/getMembers.json'
      ,data: {}
    }
    
    ,uploadImage: {
      url: '' //（返回的數據格式見下文）
      ,type: '' //默認post
    }
    ,uploadFile: {
      url: '' //（返回的數據格式見下文）
      ,type: '' //默認post
    }

　　json的內容如下圖所示。（已經折疊）

　　

　　序號1：最外層的統一json格式。code：0 （success）1（failed）。msg：接口返回信息 data ：接口返回數據

　　序號2：mine即當前登錄人的信息，頭像，狀態，簽名等

　　序號3：好友分組信息。包含多個好友分組，每個人組有若干好友

　　序號4：群組信息。包含多個群組，每個群組有圖標，群名等

　　好，那么到此為止，其他的先不介紹，我們直接來實現這個初始化數據的加載，不過這里不得不說SpringBoot真的是很贊，一個RestController幫你搞定。

代碼實戰

　　先根據數據格式建好相應的model。當然java里叫pojo。由於他們對應的是最終輸出的json，所以我沒有把他們的類和對應數據庫的類（@Entity）寫在一起。代碼在/domain/viewmodels 文件夾下。在這里我將最終符合上圖中的json格式的代碼貼出來

public class LayimBaseViewModel {
    
    private UserViewModel mine;
    
    private List<FriendGroupViewModel> friend;
    
    private List<BigGroupViewModel> group;
    
    //省略 getter setter         
}

　　數據結構已經出來了，相信大家迫不及待的看到頁面效果了，不要着急，先建一個Controller。加上@RestController 注解。官方說明如下：

A convenience annotation that is itself annotated with @Controller and @ResponseBody. Types that carry this annotation are treated as controllers where @RequestMapping methods assume @ResponseBody semantics by default.  （@RestController 相當於@Controller 和 @ReponseBody 的結合）

　　不管那么多，總之，我覺得SpringBoot的注解還是蠻強大的。我們隨便寫一個方法試試。

@RestController
@RequestMapping("/layim")
public class UserController {

    @GetMapping("/test")
    public JsonResult testData(){
        return ResultUtil.success("hello spring boot");
    }
}

　　運行一下：

　　

　　是不是很簡單，那還等什么，還不趕緊把LayIM的數據搭建出來。新建 UserService，增加 getBaseList 方法，這里我們先不從數據庫請求，直接模擬數據。

    public JsonResult getBaseList(Long userId){
        LayimBaseViewModel baseData = new LayimBaseViewModel();

        //自己的信息
        UserViewModel mine = new UserViewModel();
        mine.setUsername("小盤子");
        mine.setSign("SpringBoot學習中");
        mine.setAvatar("https://vignette.wikia.nocookie.net/dragonball/images/d/da/Kid-Goku-psd61058.png/revision/latest?cb=20120213205410");
        mine.setId(userId);

        baseData.setMine(mine);
        //好友列表信息
        ArrayList<FriendGroupViewModel> friends = new ArrayList<FriendGroupViewModel>();

        FriendGroupViewModel frined1 = new FriendGroupViewModel();
        frined1.setId(1L);
        frined1.setGroupname("我的好友");
        frined1.setOnline(10);

        ArrayList<UserViewModel> users1 = new ArrayList<UserViewModel>();

        UserViewModel user1 = new UserViewModel();
        user1.setId(100001L);
        user1.setAvatar("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQjvcDBSg8-TYMzRSbw75MJAawM5dF9StHSisVhdhWmL6vK8K66UQ");
        user1.setSign("教練，我想打籃球");
        user1.setUsername("三井壽");

        users1.add(user1);

        frined1.setList(users1);
        friends.add(frined1);

        baseData.setFriend(friends);
        //分組信息
        ArrayList<BigGroupViewModel> groups  = new ArrayList<BigGroupViewModel>();

        BigGroupViewModel bigGroup1 = new BigGroupViewModel();
        bigGroup1.setId(1000001L);
        bigGroup1.setGroupname("SpringBoot愛好者群");
        bigGroup1.setAvatar("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp9Q8BuXHj30KbOHPY7qlnR10oI4cCpplRcBFThQFzZ4bx3mBz");
        groups.add(bigGroup1);

        baseData.setGroup(groups);
        return ResultUtil.success(baseData);
    }

　　那么在UserController中使用 UserService 的 getBaseList 方法即可。

 @GetMapping(value = "/base/{uid}")
    public JsonResult getBaseData(@PathVariable("uid") Long userId){
       return userService.getBaseList(userId);
    }

　　注意，我們這里分別使用了 @RestController，@Autowired，@GetMapping，@PathVariable注解，由於我對注解也沒有那么了解，所以想具體學習的朋友可以看相關文檔。因為我們是快速使用，所以是屬於遇到什么學什么，用什么的思路，也不會在某個知識點上停留太久，有問題小伙伴們可以留言一起探討。

　　方法寫完了，在瀏覽器中看看（/layim/base/{uid}）：

　　

　　對比一下getList.json文件，是不是沒有什么區別。趕緊把getList.json替換了吧。打開index.html,找到 init：url。把我們自己的url替換上去 

　　init: {
   　　 url: '/layim/base/10000'//10000為用戶ID，后台也可以不用路徑 使用？uid=10000的形式也可以
    　　,data: {}//附加其他參數
　　}
　　我們在次打開index.html,瀏覽：
　　

　　沒有任何問題，大功告成？還早着呢，真正的數據是從數據庫（或其他存儲）讀出來的，正如上一篇介紹，我將會使用MySQL作為數據存儲，並且使用SpringBoot JPA 做數據操作。

總結

　　本片教大家如何分析一個帶有完整文檔的前端框架，並開發對應后台API。雖然只是簡單介紹了 init 接口，但是 像getMemberList 接口，或者上傳圖片啊，文件啊，我相信大家肯定都能舉一反三來實現。當然@RestController功不可沒。現在想想以后還有很多的工作要做，別着急。后邊要學的東西多着呢。websocket，緩存，隊列等等都加上（問：用得着這么多東西嗎？ 答“我只是想通過項目來練習他們的使用）

　　下篇預告：從零一起學Spring Boot之LayIM項目長成記（三） 數據庫的簡單設計和JPA的簡單使用。