??序言
本篇博客主要內(nèi)容:
-
理解前后端交互過(guò)程
-
接?傳參,數(shù)據(jù)返回,以及??展?
??加法計(jì)算器
需求:輸?兩個(gè)整數(shù),點(diǎn)擊"點(diǎn)擊相加"按鈕,顯?計(jì)算結(jié)果
效果展示如下：
具體實(shí)現(xiàn)步驟，博主大致分為以下幾步：
-
準(zhǔn)備工作
-
約定前后端交互接?
-
后端服務(wù)器代碼的書(shū)寫(xiě)
??準(zhǔn)備工作
創(chuàng)建SpringBoot項(xiàng)?: 引?Spring Web依賴
這部分不會(huì)的小伙伴可以去看看博主寫(xiě)的【JavaEE進(jìn)階】 SpringBoot的創(chuàng)建與簡(jiǎn)單使用
創(chuàng)建calc.html文件
接下來(lái)我會(huì)直接給出大家前端的代碼，大家直接導(dǎo)入即可，前端代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="calc/sum" method="post">
<h1>計(jì)算器</h1>
數(shù)字1：<input name="num1" type="text"><br>
數(shù)字2：<input name="num2" type="text"><br>
<input type="submit" value=" 點(diǎn)擊相加">
</form>
</body>
</html>
??約定前后端交互接?
約定"前后端交互接"是進(jìn)?Web開(kāi)發(fā)中的關(guān)鍵環(huán)節(jié)
接??叫API（Application Programming Interface),我們?般講到接?或者API，指的都是同?個(gè)東西.
是指應(yīng)?程序?qū)ν馓峁┑姆?wù)的描述,?于交換信息和執(zhí)?任務(wù)(與JavaSE階段學(xué)習(xí)的[類和接?]中的接?是兩回事).
簡(jiǎn)單來(lái)說(shuō),就是允許客?端給服務(wù)器發(fā)送哪些HTTP請(qǐng)求,并且每種請(qǐng)求預(yù)期獲取什么樣的HTTP響應(yīng).
現(xiàn)在"前后端分離"模式開(kāi)發(fā),前端和后端代碼通常由不同的團(tuán)隊(duì)負(fù)責(zé)開(kāi)發(fā).雙?團(tuán)隊(duì)在開(kāi)發(fā)之前,會(huì)提前約定好交互的?式.客?端發(fā)起請(qǐng)求,服務(wù)器提供對(duì)應(yīng)的服務(wù).
服務(wù)器提供的服務(wù)種類有很多,客?端按照雙?約定指定選擇哪?個(gè)服務(wù)
接?,其實(shí)也就是我們前??絡(luò)模塊講的的"應(yīng)?層協(xié)議".把約定的內(nèi)容寫(xiě)在?檔上,就是"接??檔",接??檔也可以理解為是應(yīng)?程序的"操作說(shuō)明書(shū)
在項(xiàng)?開(kāi)發(fā)前,根據(jù)需求先約定好前后端交互接?,雙?按照接??檔進(jìn)?開(kāi)發(fā).
-
接??檔通常由服務(wù)提供?來(lái)寫(xiě),交由服務(wù)使??確認(rèn),也就是客?端.
-
接??檔?旦寫(xiě)好,盡量不要輕易改變.
-
如若需要改變,必須要通知另??知曉
接下來(lái)我們一起來(lái)寫(xiě)一個(gè)關(guān)于加法計(jì)算器的簡(jiǎn)單的接口文檔
首先我們進(jìn)行需求分析
- 加法計(jì)算器功能,對(duì)兩個(gè)整數(shù)進(jìn)?相加,需要客?端提供參與計(jì)算的兩個(gè)數(shù),服務(wù)端返回這兩個(gè)整數(shù)計(jì)算的結(jié)果
基于以上分析,我們來(lái)定義接?
請(qǐng)求路徑：calc/sum
請(qǐng)求?式：GET/POST
接?描述：計(jì)算兩個(gè)整數(shù)相加
對(duì)于所傳參數(shù)我們也需要進(jìn)行規(guī)定
| 參數(shù)名 | 類型 | 是否必須 | 備注 |
|---|---|---|---|
| num1 | Integer | 是 | 參與計(jì)算的第?個(gè)數(shù) |
| num2 | Integer | 是 | 參與計(jì)算的第?個(gè)數(shù) |
最后我們對(duì)于響應(yīng)數(shù)據(jù)的格式也進(jìn)行規(guī)定
Content-Type: text/html
響應(yīng)內(nèi)容:例如：計(jì)算結(jié)果為:23+25=48
??后端服務(wù)器代碼的書(shū)寫(xiě)
基于接口文檔我們就直接書(shū)寫(xiě)了
后端代碼如下：
package org.example.smallprojects.demos.web;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RequestMapping("/calc")
@RestController
public class CalcController {
@RequestMapping("/sum")
public String sum(Integer num1,Integer num2) {
Integer sum = num1 + num2;
return "<h1>計(jì)算結(jié)果為:"+num1 + "+" + num2 + "=" + sum +"<h1/>";
}
}
注意：
- 返回?cái)?shù)據(jù)類型與傳入?yún)?shù)名一定要與接口文檔相對(duì)應(yīng)
接下里直接訪問(wèn)：http://127.0.0.1:8080/calc.html
??用戶登錄
??效果展示
登錄校驗(yàn)展示：
登錄后獲取用戶名展示;
實(shí)現(xiàn)步驟依舊三步走
??準(zhǔn)備工作
這里博主依舊給出前端代碼
index.html代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>用戶登錄首頁(yè)</title>
</head>
<body>
登錄人: <span id="loginUser"></span>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$.ajax({
type: "get",
url: "/user/getLoginUser",
success: function (result) {
$("#loginUser").text(result);
}
});
</script>
</body>
</html>
longin.html代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登錄頁(yè)面</title>
</head>
<body>
<h1>用戶登錄</h1>
用戶名：<input name="userName" type="text" id="userName"><br>
密碼：<input name="password" type="password" id="password"><br>
<input type="button" value="登錄" onclick="login()">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
function login() {
$.ajax({
type: "post",
url: "/user/login",
data: {
"userName": $("#userName").val(),
"password": $("#password").val()
},
success: function (result) {
if (result) {
location.href = "/index.html"
} else {
alert("賬號(hào)或密碼有誤.");
}
}
});
}
</script>
</body>
</html>
??約定前后端交互接?
??需求分析
對(duì)于后端開(kāi)發(fā)?員??,不涉及前端??的展?,只需要提供兩個(gè)功能
- 登錄??: 通過(guò)賬號(hào)和密碼,校驗(yàn)輸?的賬號(hào)密碼是否正確,并告知前端
- ??:告知前端當(dāng)前登錄??.如果當(dāng)前已有??登錄,返回登錄的賬號(hào),如果沒(méi)有,返回false
??接?定義
該功能設(shè)計(jì)兩個(gè)頁(yè)面，所以這里我們定義兩個(gè)接口
??校驗(yàn)接?
請(qǐng)求路徑：/user/login
請(qǐng)求?式：POST
接?描述：校驗(yàn)賬號(hào)密碼是否正確
- 請(qǐng)求參數(shù)
| 參數(shù)名 | 類型 | 是否必須 | 備注 |
|---|---|---|---|
| userName | String | 是 | 校驗(yàn)的賬號(hào) |
| password | String | 是 | 校驗(yàn)的密碼 |
- 響應(yīng)數(shù)據(jù)
Content-Type: text/html
響應(yīng)內(nèi)容:
- true //賬號(hào)密碼驗(yàn)證成功
- false//賬號(hào)密碼驗(yàn)證失敗
??查詢登錄??接?
請(qǐng)求路徑：/user/getLoginUser
請(qǐng)求?式：GET
接?描述：查詢當(dāng)前登錄的??
- 請(qǐng)求參數(shù)
無(wú)
- 響應(yīng)數(shù)據(jù)
Content-Type: text/html
響應(yīng)內(nèi)容:遇事問(wèn)春風(fēng)乄
??后端代碼的書(shū)寫(xiě)
??校驗(yàn)接?代碼
校驗(yàn)我們首先需要進(jìn)行判斷用戶名與密碼是否為空或者長(zhǎng)度為0，若為，則返回false。
這里我們選擇使用StringUtils.hasLength()來(lái)判斷，StringUtils.hasLength()是Spring提供的?個(gè)?具?法,判斷字符串是否有值字符串為null或者""時(shí),返回false,其他返回true
其次由于我們這里并沒(méi)有添加數(shù)據(jù)庫(kù)，所以我們直接使用固定的字符串進(jìn)行判斷。
如果用戶名與密碼正確，則將該用戶添加至session，對(duì)session不了解的小伙伴可以看看博主寫(xiě)的【JavaEE進(jìn)階】 獲取Cookie和Session
??查詢登錄??接?
對(duì)于該接口實(shí)現(xiàn)就更加加簡(jiǎn)單了。直接使用@SessionAttribute進(jìn)行獲取即可文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-799073.html
??完整代碼實(shí)現(xiàn)
package org.example.smallprojects.demos.web;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.SessionAttribute;
import javax.servlet.http.HttpSession;
@RestController
@RequestMapping("/user")
public class LoginController {
@RequestMapping("/login")
public Boolean login(String userName, String password, HttpSession session) {
if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)) {
return false;
}
if("遇事問(wèn)春風(fēng)乄".equals(userName)&&"666666".equals(password)) {
//密碼驗(yàn)證成功, 把??名存儲(chǔ)在Session中
session.setAttribute("userName",userName);
return true;
}
return false;
}
@RequestMapping("getLoginUser")
public String getLoginUser(@SessionAttribute(value = "userName",required = false) String username) {
return username;
}
}
?總結(jié)
關(guān)于《【JavaEE進(jìn)階】 利用Spring簡(jiǎn)單實(shí)現(xiàn)加法計(jì)算器和用戶登錄》就講解到這兒，感謝大家的支持，歡迎各位留言交流以及批評(píng)指正，如果文章對(duì)您有幫助或者覺(jué)得作者寫(xiě)的還不錯(cuò)可以點(diǎn)一下關(guān)注，點(diǎn)贊，收藏支持一下！文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-799073.html
到了這里，關(guān)于【JavaEE進(jìn)階】 利用Spring簡(jiǎn)單實(shí)現(xiàn)加法計(jì)算器和用戶登錄的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
