1 留言板

需求:界面如下圖所示

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

1.1 約定前后端交互接口

需求分析

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

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

接口定義

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

請(qǐng)求:

GET /message/getList 

響應(yīng)：JSON 格式

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

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

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

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

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

{
  ok: 1
}

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

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

1.2.1 lombok 介紹

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

1.引入依賴

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

第二種：

2.使用

lombok 通過(guò)一些注解的方式，可以幫助我們消除一些冗長(zhǎng)代碼，使代碼看起來(lái)簡(jiǎn)潔一些比如之前的 Person 對(duì)象 就可以改為

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

@Data 注解會(huì)幫助我們自動(dòng)一些方法，包含 getter/setter, equals, toString 等

原來(lái)需要些這個(gè)getter和setter

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

原來(lái)需要些這個(gè)getter和setter

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

target里的

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

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

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

這個(gè)是原來(lái)的

變化的

有的時(shí)候就會(huì)失效所以我們需要改動(dòng)一下

把這個(gè)之間全部刪除就生效了

3.原理解釋

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

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

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

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

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

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

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

Lombok的作用如下圖所示：

4.更多使用

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

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

1.2更快捷的引入依賴

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

1. 安裝插件 EditStarter, 重啟 Idea

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

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

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

定義留言對(duì)象 MessageInfo 類

import lombok.Data;

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

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

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)整前端頁(yè)面代碼修改messagewall.html

1. 添加 load 函數(shù)，用于在頁(yè)面加載的時(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 + "對(duì)" + message.to + "說(shuō):" + message.message + "</div>";
                $(".container").append(divE);
            }
        }
    });
}

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

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 + "對(duì)" + to + "說(shuō):" + say + "</div>";
                //3. 把節(jié)點(diǎn)添加到頁(yè)面上
                $(".container").append(divE);
                //4. 清空輸入框的值
                $('#from').val("");
                $('#to').val("");
                $('#say').val("");
            } else {
                alert("發(fā)表留言失敗!");
            }
        }
    });
}

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

1.5運(yùn)行測(cè)試

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

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

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

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

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

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

 // 頁(yè)面加載時(shí)獲取留言列表
    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}對(duì)${messageInfo.to}說(shuō)：${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留言板的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論