Spring實現(xiàn)加法計算器和用戶登錄功能

更新時間：2024年10月23日 15:06:21 作者：椰椰椰耶

在前后端分離的Web開發(fā)模式中,接口(API)扮演著至關(guān)重要的角色,它是前后端交互的橋梁,創(chuàng)建加法計算器和用戶登錄功能時,介紹了接口測試和問題解決的一般流程,如使用Postman測試接口、查看日志、處理緩存問題等,確保開發(fā)過程中的高效協(xié)作和問題快速定位

加法計算器

準(zhǔn)備工作

創(chuàng)建 SpringBoot 項目：引入 Spring Web 依賴，把前端的頁面放入項目中

**<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Document</title>  
</head>  
<body>  
<form action="calc/sum" method="post">  
    <h1>計算器</h1>  
    數(shù)字1：<input name="num1" type="text"><br>  
    數(shù)字2：<input name="num2" type="text"><br>  
    <input type="submit" value=" 點擊相加 ">  
</form>  
</body>  
</html>**

放入靜態(tài)文件夾中

約定前后端交互接口

接口定義：前后端交互的約定，定義完了之后，前端就按照這個文檔進(jìn)行開發(fā)

通常由服務(wù)端定義
定義之后，客戶端（前端）進(jìn)行檢查（review）
雙方開始并行開發(fā)

概念介紹

約定“前后端交互接口”是進(jìn)行 Web 開發(fā)中的關(guān)鍵環(huán)節(jié)。接口又叫 API（Application Programming Interface），我們一般講到接口或者 API，指的都是同一個東西

是指應(yīng)用程序?qū)ν馓峁┑姆?wù)的描述，用于交換信息和執(zhí)行任務(wù)（與 JavaSE 中學(xué)習(xí)的類和接口是兩回事）。簡單來說，就是允許客戶端給服務(wù)器發(fā)送哪些 HTTP 請求，并且每種請求預(yù)期獲取什么樣的 HTTP 響應(yīng)。

現(xiàn)在“前后端分離”模式開發(fā)，前端和后端的代碼通常由不同的團(tuán)隊負(fù)責(zé)開發(fā)，雙方團(tuán)隊在開發(fā)之前，會提前約定好交互的方式

客戶端發(fā)起請求
服務(wù)器提供對應(yīng)的服務(wù)
服務(wù)器提供的服務(wù)種類有很多，客戶端按照雙方約定指定選擇哪一個服務(wù)

接口，其實也就是我們前面網(wǎng)絡(luò)模塊講的“應(yīng)用層協(xié)議”，把約定的內(nèi)容寫在文檔上，就是“接口文檔”，接口文檔也可以理解為是應(yīng)用程序的“操作說明書”

接口定義之后，不輕易改變
如果需要修改，就必須要通知到每一個調(diào)用方
一定同步接口文檔，防止背鍋

比如兒童玩具

按 1：響應(yīng)兒歌
按 2：響應(yīng)鋼琴曲
按 3：安撫睡眠
等等，但是這些操作說明，如果沒有一個文檔來說明，用戶就不太清楚哪個按鍵對應(yīng)哪個，所以商品一般會帶一個說明書。
這些按鍵，就是“接口“
這個說明書，就是應(yīng)用程序的“接口文檔“

需求分析

加法計算器功能，對兩個整數(shù)進(jìn)行相加，需要客戶端提供參與計算的兩個數(shù)，服務(wù)端返回的兩個整數(shù)計算的結(jié)果

基于上面的分析，我們來定義接口

接口定義

請求路徑: calc/sum
請求方式: GET/POST
接口描述: 計算兩個整數(shù)相加

請求參數(shù)

參數(shù)名	類型	是否必須	備注
num 1	Integer	是	參與計算的第一個數(shù)
num 2	Integer	是	參與計算的第二個數(shù)

服務(wù)器端代碼

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 "計算器計算結(jié)果: " + sum;  
    }  
}

遇到問題后如何解決

先測試后端接口。通過 Postman 測試后端接口有沒有問題，排除后端的情況
看日志
如果覺得代碼沒問題，就優(yōu)先考慮緩存問題
- 前端緩存，ctrl+F5 強制刷新，或者大招（清除瀏覽器緩存）
- 后端緩存：Maven ——> Lifecycle ——> cleannnn

用戶登錄

需求：用戶輸入賬號和密碼，后端進(jìn)行校驗密碼是否正確

如果不正確，前端進(jìn)行用戶告知
如果正確，跳轉(zhuǎn)到首頁，首頁顯示當(dāng)前登錄用戶
后續(xù)再訪問首頁，可以獲取到登錄用戶信息

準(zhǔn)備工作

把前端頁面放在項目中

約定前后端交互接口

需求分析

對于后端開發(fā)人員而言，不涉及前端頁面的展示，只需要提供兩個功能

登錄頁面：通過賬號和密碼，校驗輸入的賬號密碼是否正確，并告知前端
首頁：告知前端當(dāng)前登錄用戶，如果當(dāng)前已有登錄用戶，返回登錄的賬號；如果沒有，則返回 null

校驗接口

校驗接口

請求路徑：/user/login
請求方式：POST
接口描述：校驗賬號密碼是否正確

請求參數(shù)

參數(shù)名	類型	是否必須	備注
userName	String	是	校驗的賬號
userName	String	是	校驗的密碼

響應(yīng)數(shù)據(jù)

Content-Type：text/html
響應(yīng)內(nèi)容：
true   //賬號密碼驗證成功
false  //賬號密碼驗證失敗

登錄接口

請求路徑：/user/getLoginUser
請求方式：GET
接口描述：查詢當(dāng)前登錄的用戶

請求參數(shù)：無

當(dāng)我們登錄成功之后，后端會將當(dāng)前用戶的信息存儲到 Session 中。
之后后端要用的時候直接到里面拿就可以了前端發(fā)送請求的時候，任何的信息 Cookie 都會帶過去，不管你要不要

響應(yīng)數(shù)據(jù)

Content-Type：text/html
響應(yīng)內(nèi)容：zhangsan

返回當(dāng)前登錄的用戶

服務(wù)器端代碼

參數(shù)校驗

普通判斷方式

import org.springframework.web.bind.annotation.RequestMapping;  
import org.springframework.web.bind.annotation.RestController;  
@RestController  
@RequestMapping("/user")  
public class UserController {  
    @RequestMapping("/login")  
    public Boolean login(String userName, String password){  
        //參數(shù)校驗  
        if(userName == null || userName.length()==0  
                || password == null || password.length()==0){  
            return false;  
        }  
    }  
}

學(xué)習(xí) Spring 后的判斷方式

@RestController  
@RequestMapping("/user")  
public class UserController {  
    @RequestMapping("/login")  
    public Boolean login(String userName, String password){  
        //參數(shù)校驗  
        if(!StringUtils.hasLength(userName)
         || !StringUtils.hasLength(password)) {  
            return false;  
        }  
    }  
}

判斷密碼是否正確

@RestController  
//登錄接口  
@RequestMapping("/user")  
public class UserController {  
    @RequestMapping("/login")  
    public Boolean login(String userName, String password){  
        //參數(shù)校驗  
        if(!StringUtils.hasLength(userName)
         || !StringUtils.hasLength(password)) {  
            return false;  
        }  
        //判斷密碼是否正確  
        if("admin".equals(userName) && "admin".equals(password)){  
            return true;  
        }  
        return false;  
    }  
}

上面已經(jīng)做了判空的處理，userName 不會為 null

??????

但如果上面沒有進(jìn)行判斷，userName 為空的時候就會報空指針異常
所以就把常量寫在前面，這是一種習(xí)慣

登錄頁面

當(dāng)你從 Session 拿數(shù)據(jù)的時候，前提是要有人設(shè)置過 Session 信息才可以

我們就在 HttpSession 直接拿就好了（在前面先定義）

調(diào)整前端頁面代碼

調(diào)整登錄頁面 login.html

對于前端而言，當(dāng)點擊登錄按鈕時，需要把用戶輸入的信息傳遞到后端進(jìn)行校驗，后端校驗成功，則跳轉(zhuǎn)到首頁：index. html，后端校驗失敗，則直接彈窗

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>登錄頁面</title>
</head>
<body>
  <h1>用戶登錄</h1>
  用戶名：<input name="userName" type="text" id="userName">
  密碼：<input name="password" type="password" id="password">
  <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({
        url:"/user/login",
        type:"post",
        data:{
          userName: $("#userName").val(),
          password: $("#password").val()
        },
        //http響應(yīng)成功后
        success:function(result){
          if(result==true){
            //頁面跳轉(zhuǎn)
            location.href = "index.html";
            //location.assign("index.html");
            //location.replace("index.html");
          }else{
            alert("密碼錯誤");
          }
        }
      })
    }
  </script>
</body>
</html>

使用 ajax 傳遞參數(shù)。

求發(fā)送完畢之后（url—data）就等待接收的結(jié)果
sucess 是 http 響應(yīng)成功之后執(zhí)行的函數(shù)（返回 200）。并不是賬號密碼響應(yīng)成功，返回 true 的時候
對應(yīng)的是一個回調(diào)函數(shù)
其里面有一個內(nèi)置的參數(shù)，接收我們的 http 響應(yīng)（使用任何一個變量都可以）

調(diào)整首頁代碼

只需要顯示當(dāng)前登錄用戶即可

<!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>用戶登錄首頁</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({
            url: "/user/index",
            type: "get",
            success: function (loginName) {
                $("#loginUser").test(loginName);
            }
        })
    </script>
</body>
</html>

到此這篇關(guān)于Spring實現(xiàn)加法計算器和用戶登錄的文章就介紹到這了,更多相關(guān)Spring用戶登錄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: