【JavaEE进阶】利用Spring简单实现加法计算器和用户登录

遇事问春风乄

已于 2024-01-17 18:55:29 修改

阅读量2.4k

点赞数 55

CC 4.0 BY-SA版权

分类专栏： JavaEE进阶文章标签： java-ee spring java

于 2024-01-16 12:47:42 首次发布

本文链接：https://blog.csdn.net/m0_71731682/article/details/135620933

文章目录

🎍序言
🌳加法计算器
🌴用户登录
⭕总结

🎍序言

本篇博客主要内容:

理解前后端交互过程
接⼝传参,数据返回,以及⻚⾯展⽰

🌳加法计算器

需求:输⼊两个整数,点击"点击相加"按钮,显⽰计算结果

效果展示如下：
在这里插入图片描述

具体实现步骤，博主大致分为以下几步：

准备工作
约定前后端交互接⼝
后端服务器代码的书写

🚩准备工作

创建SpringBoot项⽬: 引⼊Spring Web依赖

这部分不会的小伙伴可以去看看博主写的【JavaEE进阶】 SpringBoot的创建与简单使用

创建calc.html文件
在这里插入图片描述

接下来我会直接给出大家前端的代码，大家直接导入即可，前端代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="calc/sum" method="post">
    <h1>计算器</h1>
    数字1：<input name="num1" type="text"><br>
    数字2：<input name="num2" type="text"><br>
    <input type="submit" value=" 点击相加">
</form>
</body>
</html>

🚩约定前后端交互接⼝

约定"前后端交互接"是进⾏Web开发中的关键环节

接⼝⼜叫API（Application Programming Interface),我们⼀般讲到接⼝或者API，指的都是同⼀个东西.

是指应⽤程序对外提供的服务的描述,⽤于交换信息和执⾏任务(与JavaSE阶段学习的[类和接⼝]中的接⼝是两回事).

简单来说,就是允许客⼾端给服务器发送哪些HTTP请求,并且每种请求预期获取什么样的HTTP响应.

现在"前后端分离"模式开发,前端和后端代码通常由不同的团队负责开发.双⽅团队在开发之前,会提前约定好交互的⽅式.客⼾端发起请求,服务器提供对应的服务.

服务器提供的服务种类有很多,客⼾端按照双⽅约定指定选择哪⼀个服务
接⼝,其实也就是我们前⾯⽹络模块讲的的"应⽤层协议".把约定的内容写在⽂档上,就是"接⼝⽂档",接⼝⽂档也可以理解为是应⽤程序的"操作说明书

在项⽬开发前,根据需求先约定好前后端交互接⼝,双⽅按照接⼝⽂档进⾏开发.

接⼝⽂档通常由服务提供⽅来写,交由服务使⽤⽅确认,也就是客⼾端.
接⼝⽂档⼀旦写好,尽量不要轻易改变.
如若需要改变,必须要通知另⼀⽅知晓

接下来我们一起来写一个关于加法计算器的简单的接口文档

首先我们进行需求分析

加法计算器功能,对两个整数进⾏相加,需要客⼾端提供参与计算的两个数,服务端返回这两个整数计算的结果

基于以上分析,我们来定义接⼝

请求路径：calc/sum
请求⽅式：GET/POST
接⼝描述：计算两个整数相加

对于所传参数我们也需要进行规定

参数名	类型	是否必须	备注
num1	Integer	是	参与计算的第⼀个数
num2	Integer	是	参与计算的第⼆个数

最后我们对于响应数据的格式也进行规定

Content-Type: text/html
响应内容:例如：计算结果为:23+25=48

🌲后端服务器代码的书写

基于接口文档我们就直接书写了

后端代码如下：

package org.example.smallprojects.demos.web;

最低0.47元/天解锁文章

新学期VIP享超值加赠