1 留言板

需求:界面如下圖所示

1. 輸入留言信息，點(diǎn)擊提交。后端把數(shù)據(jù)存儲起來.
2. 頁面展示輸入的表白墻的信息

1.1 約定前后端交互接口

需求分析

后端需要提供兩個服務(wù)

1. 提交留言：用戶輸入留言信息之后，后端需要把留言信息保存起來
2. 展示留言：頁面展示時，需要從后端獲取到所有的留言信息

接口定義

1. 獲取全部留言全部留言信息，我們用 List 來表示，可以用 JSON 來描述這個 List 數(shù)據(jù).

請求:

GET /message/getList 

響應(yīng)：JSON 格式

[
  {
    "from": "黑貓",
    "to": "白貓",
    "message": "喵"
  },{
    "from": "黑狗",
    "to": "白狗",
    "message": "汪"
  },...
]

瀏覽器給服務(wù)器發(fā)送一個 GET /message/getList 這樣的請求，就能返回當(dāng)前一共有哪些留言記錄。結(jié)果以 json 的格式返回過來.

1. 發(fā)表新留言
2. 發(fā)表新留言請求:body 也為 JSON 格式.

POST /message/publish
{
  "from": "黑貓",
  "to": "白貓",
  "message": "喵"
}

響應(yīng)：JSON 格式.

{
  ok: 1
}

我們期望瀏覽器給服務(wù)器發(fā)送一個 POST /message/publish 這樣的請求，就能把當(dāng)前的留言提交給服務(wù)器.

1.2實(shí)現(xiàn)服務(wù)器端代碼

1.2.1 lombok 介紹

在這個環(huán)節(jié)，我們介紹一個新的工具包 lombokLombok 是一個 Java 工具庫，通過添加注解的方式，簡化 Java 的開發(fā).簡單來學(xué)習(xí)下它的使用

1.引入依賴

<dependency>
  <groupId>org.projectlombok</groupId>
  <artifactId>lombok</artifactId>
  <optional>true</optional>
</dependency>

第二種：

2.使用

lombok 通過一些注解的方式，可以幫助我們消除一些冗長代碼，使代碼看起來簡潔一些比如之前的 Person 對象 就可以改為

@Data
public class Person {
    private int id;
    private String name;
    private String password;
}

@Data 注解會幫助我們自動一些方法，包含 getter/setter, equals, toString 等

原來需要些這個getter和setter

target里面是加載的maven后產(chǎn)生的核心目錄

原來需要些這個getter和setter

現(xiàn)在只需要加入一個@data 就可以了

target里的

這個的生命周期只是source階段的，所以我們看的這個target就不存在了

Lombok 等編譯期工具的注解（如@Data）僅在源碼階段生效

創(chuàng)建項(xiàng)目的話，與之前的對比：

這個是原來的

變化的

有的時候就會失效所以我們需要改動一下

把這個之間全部刪除就生效了

3.原理解釋

1. SOURCE （源碼級）：僅存在于源碼中，編譯后就被丟棄，完全由編譯器處理（比如  @Override 、 @SuppressWarnings ），用于編譯期語法檢查、提示，運(yùn)行時無法獲取。

2.  CLASS （字節(jié)碼級）：編譯后保留在字節(jié)碼文件中，但 JVM 加載類時不會將其載入內(nèi)存，默認(rèn)生命周期，運(yùn)行時無法通過反射獲取，通常用于類加載前的字節(jié)碼增強(qiáng)（如 ASM 框架處理）。

3.  RUNTIME （運(yùn)行時級）：保留到運(yùn)行時，可通過反射（ Class.getAnnotation() ）獲取，是開發(fā)中最常用的（如 Spring 的  @Autowired 、 @RequestMapping ），由 JVM 和框架共同處理。

可以觀察加了 @Data 注解之后，Idea 反編譯的.

class 文件這不是真正的字節(jié)碼文件，而是 Idea 根據(jù)字節(jié)碼進(jìn)行反編譯后的文件反編譯是將可執(zhí)行的程序代碼轉(zhuǎn)換為某種形式的高級編程語言，使其具有更易讀的格式。反編譯是一種逆向工程，它的作用與編譯器的作用相反.

可以看出來,lombok是?款在編譯期?成代碼的?具包.

Java 程序的運(yùn)行原理

Lombok的作用如下圖所示：

4.更多使用

如果覺得 @Data 比較粗暴 (生成方法太多),lombok 也提供了一些更精細(xì)粒度的注解

@Data = @Getter + @Setter + @ToString + @EqualsAndHashCode + @RequiredArgsConstructor + @NoArgsConstructor

1.2更快捷的引入依賴

上述引入 lombok 依賴，需要去找 lombok 的坐標(biāo)接下來介紹更簡單引入依賴的方式

1. 安裝插件 EditStarter, 重啟 Idea

2. 在pom.xml?件中,單擊右鍵,選擇Generate,操作如下圖所示

進(jìn)?EditStarters的編輯界?,添加對應(yīng)依賴即可

1.3 服務(wù)器代碼實(shí)現(xiàn)

定義留言對象 MessageInfo 類

import lombok.Data;

@Data
public class MessageInfo {
    private String from;
    private String to;
    private String message;
}

創(chuàng)建 MessageController 類使用List<MessageInfo>來存儲留言板信息

import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.List;

@RequestMapping("/message")
@RestController
public class MessageController {

    private List<MessageInfo> messageInfos = new ArrayList<>();

    @RequestMapping("/getList")
    public List<MessageInfo> getList() {
        return messageInfos;
    }

    @RequestMapping("/publish")
    public boolean publish(MessageInfo messageInfo) {
        System.out.println(messageInfo);
        if (StringUtils.hasLength(messageInfo.getFrom())
                && StringUtils.hasLength(messageInfo.getTo())
                && StringUtils.hasLength(messageInfo.getMessage())) {
            messageInfos.add(messageInfo);
            return true;
        }
        return false;
    }
}

1.4 調(diào)整前端頁面代碼修改messagewall.html

1. 添加 load 函數(shù)，用于在頁面加載的時候獲取數(shù)據(jù)

load();
function load() {
    $.ajax({
        type: "get",
        url: "/message/getList",
        success: function (result) {
            for (var message of result) {
                var divE = "<div>" + message.from + "對" + message.to + "說:" + message.message + "</div>";
                $(".container").append(divE);
            }
        }
    });
}

1. 修改原來的點(diǎn)擊事件函數(shù)。在點(diǎn)擊按鈕的時候給服務(wù)器發(fā)送添加留言請求

function submit() {
    //1. 獲取留言的內(nèi)容
    var from = $("#from").val();
    var to = $("#to").val();
    var say = $("#say").val();
    if (from == '' || to == '' || say == '') {
        return;
    }
    $.ajax({
        type: "post",
        url: "/message/publish",
        data: {
            from: from,
            to: to,
            message: say
        },
        success: function (result) {
            if (result) {
                //2. 構(gòu)造節(jié)點(diǎn)
                var divE = "<div>" + from + "對" + to + "說:" + say + "</div>";
                //3. 把節(jié)點(diǎn)添加到頁面上
                $(".container").append(divE);
                //4. 清空輸入框的值
                $('#from').val("");
                $('#to').val("");
                $('#say').val("");
            } else {
                alert("發(fā)表留言失敗!");
            }
        }
    });
}

• contentType: "application/json"：必須和JSON.stringify()配合用 —— 因?yàn)楹蠖艘邮?JSON 格式的請求體，所以前端要把 JS 對象（{from:..., to:...}）轉(zhuǎn)成 JSON 字符串（JSON.stringify()的作用），同時告訴后端 “我發(fā)的是 JSON”。
• data的格式：如果contentType是application/json，data必須是JSON 字符串（所以用JSON.stringify()轉(zhuǎn)換）；如果是默認(rèn)的application/x-www-form-urlencoded，data可以直接傳 JS 對象（不用轉(zhuǎn)字符串）。

1.5運(yùn)行測試

此時在瀏覽器通過 URL http://127.0.0.1:8080/messagewall.html 訪問服務(wù)器，即可看到

此時我們每次提交的數(shù)據(jù)都會發(fā)送給服務(wù)器，每次打開頁面的時候頁面都會從服務(wù)器加載數(shù)據(jù)。因此及時關(guān)閉頁面，數(shù)據(jù)也不會丟失.

但是數(shù)據(jù)此時是存儲在服務(wù)器的內(nèi)存中（private List<Message> messages = new ArrayList<Message>();）, 一旦服務(wù)器重啟，數(shù)據(jù)仍然會丟失.

要想數(shù)據(jù)不丟失，需要把數(shù)據(jù)存儲在數(shù)據(jù)庫中，后面再講

刷新后數(shù)據(jù)就丟失了，我們保存的到List里面，沒有重啟服務(wù)器，就不會丟，但是頁面不顯示，是因?yàn)槲覀兦岸藳]有獲取后端的數(shù)據(jù)

前端頁面獲得后端的數(shù)據(jù)

 // 頁面加載時獲取留言列表
    getMessage();

    // 獲取留言列表的方法
    function getMessage() {
      $.ajax({
        url: "message/getList",
        type: "get",
        success: function (messageInfos) {
          // 先清空列表，避免重復(fù)渲染
          $("#messageList").empty();
          // 遍歷留言列表
          for (let messageInfo of messageInfos) {
    
            let divE = `<div>${messageInfo.from}對${messageInfo.to}說：${messageInfo.content}</div>`;
  
            $("#messageList").append(divE);
          }
        }
      });
    }

$("#messageList").empty(); 的唯一作用是：清空選中元素（這里是 id 為 messageList 的 div）內(nèi)部的所有子元素和內(nèi)容，不留任何痕跡。

是Java的for- each循環(huán)

以上就是基于SpringBoot+jQuery實(shí)現(xiàn)留言板功能的詳細(xì)內(nèi)容，更多關(guān)于SpringBoot jQuery留言板的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論