当前位置：首页 > news >正文

后端代码练习1——加法计算器

news 2025/7/2 13:58:13

1. 需求

输入两个整数，点击 “点击相加” 按钮，显示计算结果。

2.准备工作

创建Spring Boot项目，引入Spring Web依赖，把前端代码放入static目录下。

2.1 前端代码

<!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>数字1：<input name="num1" type="text"><br>数字2：<input name="num2" type="text"><br><input type="submit" value=" 点击相加 "></form>
</body></html>

目录结构如下所示：

2.2 约定前后端交互接口

2.2.1概念介绍

约定 “前后端交互接口” 是进行Web开发中的关键环节。接口又叫 API（Application Programming Interface），我们一般讲到接口或者API，指的都是同一个东西。

这里的接口是指应用程序对外提供的服务的描述，用于交换信息和执行任务（与JavaSE阶段学习的 [类和接口] 中的接口不一样，两个不同的概念）。即就是允许客户端给服务器发送哪些 HTTP 请求，并且每种请求预期获取什么样的HTTP响应。

当前由于“前后端分离” 模式开发，前端和后端代码通常由不同的团队负责开发。双方在开发之前，会提前约定好交互的方式。如下：

客户端发起请求 —> 服务器提供对应的服务。服务器提供的服务种类有很多，客户端按照双方约定，指定选择哪一个服务。

接口：就是前面网络模块讲的 “应用层协议”。把约定的内容写在文档上，就是 “接口文档”，接口文档也可以理解为应用程序的“操作说明书”。

2.2.2 需求分析

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

2.2.3 接口定义

请求路径：calculate / sum

请求方式：GET/POST

接口描述：计算机计算结果

请求参数：

示例：num1=11&num2=22

响应数据：

Content-Type：text/html

响应内容：相加计算结果为：33，同时服务器给计算机返回计算结果。

3. 服务器代码

@RestController@RequestMapping("/calculate")public class UserController{@RequestMapping("/sum")public String calculate(Integer num1,Integer num2) {int sum = num1 + num2;return "<h1>后端返回的计算结果：" +sum + "<h1>";}}

4. 运行测试

1、访问127.0.0.1:8080/calc.html.如下所示：

2、输入结果开始测试：

ps：本次的内容就到这里了，如果对你有所帮助的话，就请一键三连哦！！！

本文的封面来自：bilibili苏杉杉的pv，侵权删 url：https://www.bilibili.com/video/BV1vo4y167eh/?spm_id_from=333.999.0.0&vd_source=866da5be2ef0ddd213b053523da53138
————————————————

电子签名：上嘉路

后端代码练习1——加法计算器

1. 需求

2.准备工作

2.1 前端代码

2.2 约定前后端交互接口

2.2.1概念介绍

2.2.2 需求分析

2.2.3 接口定义

3. 服务器代码

相关文章：

后端代码练习1——加法计算器

观察者模式和MQ是什么关系

JDK动态代理和CGLIB动态代理案例分析

【数据结构-前缀哈希】力扣1124. 表现良好的最长时间段

电商平台产品ID｜CDN与预渲染｜前端边缘计算

LATTICE进阶篇DDR2--(4)DDR2 IP核总结

windows下php安装kafka

【wiki知识库】09.欢迎页面展示（浏览量统计）SpringBoot部分

数据分析与应用：微信-情人节红包流向探索分析

SQL，获取 ID 的历史状态

阅文集团：摇不动的IP摇钱树

ETL数据集成丨将SQL Server数据同步至Oracle的具体实现

20240814软考架构-------软考51-55答案解析

JavaEE 的入门

vue3+ts 前端word文档下载文件时不预览直接下载方法(支持 doc / excel / ppt / pdf 等)

Java 空值与null 形参与实参学习

【QT常用技术讲解】QTableView添加QCheckBox、QPushButton

linux监控命令

SpringBoot入门笔记

python 华为od 单词接龙

Lombok 的 @Data 注解失效，未生成 getter/setter 方法引发的HTTP 406 错误

VB.net复制Ntag213卡写入UID

Debian系统简介

聊聊 Pulsar：Producer 源码解析

基于数字孪生的水厂可视化平台建设：架构与实践

零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）

基于Java+VUE+MariaDB实现（Web）仿小米商城

华为OD最新机试真题-数组组成的最小数字-OD统一考试（B卷）

【堆垛策略】设计方法

【实施指南】Android客户端HTTPS双向认证实施指南