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

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

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

加法計算器

準備工作

創(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)文件夾中

約定前后端交互接口

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

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

概念介紹

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

是指應用程序對外提供的服務的描述，用于交換信息和執(zhí)行任務（與 JavaSE 中學習的類和接口是兩回事）。簡單來說，就是允許客戶端給服務器發(fā)送哪些 HTTP 請求，并且每種請求預期獲取什么樣的 HTTP 響應。

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

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

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

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

比如兒童玩具

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

需求分析

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

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

接口定義

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

請求參數(shù)

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

服務器端代碼

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

遇到問題后如何解決

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

用戶登錄

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

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

準備工作

把前端頁面放在項目中

約定前后端交互接口

需求分析

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

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

校驗接口

校驗接口

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

請求參數(shù)

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

響應數(shù)據(jù)

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

登錄接口

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

請求參數(shù)：無

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

響應數(shù)據(jù)

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

返回當前登錄的用戶

服務器端代碼

參數(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;  
        }  
    }  
}

學習 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

??????

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

登錄頁面

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

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

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

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

對于前端而言，當點擊登錄按鈕時，需要把用戶輸入的信息傳遞到后端進行校驗，后端校驗成功，則跳轉到首頁：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響應成功后
        success:function(result){
          if(result==true){
            //頁面跳轉
            location.href = "index.html";
            //location.assign("index.html");
            //location.replace("index.html");
          }else{
            alert("密碼錯誤");
          }
        }
      })
    }
  </script>
</body>
</html>

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

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

調(diào)整首頁代碼

只需要顯示當前登錄用戶即可

<!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>

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

您可能感興趣的文章:

java開發(fā)validate方法中校驗工具類詳解
這篇文章主要為大家介紹了java開發(fā)validate方法中校驗工具類詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-09-09
Spring Boot整合JWT的實現(xiàn)步驟
本文主要介紹了Spring Boot整合JWT，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
IDEA安裝后找不到.vmoptions文件的問題及解決
這篇文章主要介紹了IDEA安裝后找不到.vmoptions文件的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
log4j2使用filter過濾日志方式
這篇文章主要介紹了log4j2使用filter過濾日志方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2021-12-12
教你用Java GUI實現(xiàn)文本文件的讀寫
今天帶大家來學習怎么用JavaSwing實現(xiàn)實現(xiàn)文本文件讀寫,文中有非常詳細的代碼示例,對正在學習java的小伙伴們有很好的幫助,需要的朋友可以參考下
2021-05-05
SpringBoot整合Email發(fā)送的完整配置和實現(xiàn)方法
本文詳細介紹了在SpringBoot項目中配置和實現(xiàn)郵件發(fā)送功能的方法,涵蓋普通文本郵件、HTML郵件、帶附件郵件以及使用模板的郵件發(fā)送,需要的朋友可以參考下
2025-10-10
一文掌握JVM?Safe?Point
關于?Safe?Point?是?JVM?中很關鍵的一個概念，但我估計有不少同學不是很懂，于是今天跟大家來深入聊聊?Safe?Point，通過本文學習你會了解什么是?Safe?Point？為啥需要?Safe?Point？Safe?Point?與?Stop?the?World?的關系？感興趣的朋友一起看看吧
2022-10-10
使用SpringBoot讀取Windows共享文件的代碼示例
在現(xiàn)代企業(yè)環(huán)境中,文件共享是一個常見的需求,Windows共享文件夾（SMB/CIFS協(xié)議）因其易用性和廣泛的兼容性,成為了許多企業(yè)的首選,在Java應用中,尤其是使用Spring Boot框架時,如何讀取Windows共享文件是一個值得探討的話題,本文介紹了使用SpringBoot讀取Windows共享文件
2024-11-11
springboot構造樹形結構數(shù)據(jù)并查詢的方法
本文主要介紹了springboot怎樣構造樹形結構數(shù)據(jù)并查詢，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-11-11
SpringBoot整合SpringTask實現(xiàn)定時任務的流程
這篇文章主要介紹了SpringBoot整合SpringTask實現(xiàn)定時任務的流程，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-06-06