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

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

news 2026/2/5 6:16:01

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. 需求 输入两个整数&#xff0c;点击 “点击相加” 按钮&#xff0c;显示计算结果。 2.准备工作 创建Spring Boot项目&#xff0c;引入Spring Web依赖&#xff0c;把前端代码放入static目录下。 2.1 前端代码 <!DOCTYPE html> <html lang"en"> <h…...

编程日记 2024/8/15 5:50:59

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

观察者模式&#xff08;Observer Pattern&#xff09;和MQ&#xff08;Message Queue&#xff0c;消息队列&#xff09;之间的关系主要体现在它们所实现的功能和机制上的相似性&#xff0c;尽管它们在技术实现和应用场景上有所不同。 观察者模式 观察者模式是一种行为型设计模…...

编程日记 2024/8/15 5:48:57

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

JDK动态代理和CGLIB动态代理案例分析 JDK动态代理和CGLIB动态代理的实现原理如下&#xff1a; JDK动态代理的实现原理&#xff1a; JDK动态代理是基于Java的反射机制实现的实现一个继承InvocationHandler接口的对象&#xff0c;重写invoke方法&#xff0c;invoke方法中可以在目…...

编程日记 2024/8/15 5:47:56

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

给你一份工作时间表 hours&#xff0c;上面记录着某一位员工每天的工作小时数。 我们认为当员工一天中的工作小时数大于 8 小时的时候&#xff0c;那么这一天就是「劳累的一天」。 所谓「表现良好的时间段」&#xff0c;意味在这段时间内&#xff0c;「劳累的天数」是严格 大…...

编程日记 2024/8/15 5:46:55

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

技术实现 都是通过ID拿到属性&#xff0c;进行预渲染html&#xff0c;通过 oss 分发出去 详情页这种基本都是通过 ssr 渲染出来&#xff0c;然后上缓存 CDN 分发到边缘节点来处理&#xff0c;具体逻辑可以参考 淘宝——EdgeRoutine边缘计算&#xff08;CDNServerless 边缘计算…...

编程日记 2024/8/15 5:45:54

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

一、IP核的时钟框架 1片DDR2的接口是16位&#xff0c;且DDR2是双边沿读取的&#xff0c; 故当DDR2芯片的时钟为200M时&#xff0c;右侧DDR2芯片上的数据吞吐率为200M*2*16b&#xff0c;左侧数据吞吐率为200M*32b&#xff0c;左右两侧数据吞吐量相等。 根据上规律可知&#xf…...

编程日记 2024/8/15 5:44:53

windows下php安装kafka

下载zookeeper Kafka 依赖 Zookeeper 进行分布式协调&#xff0c;所以需要下载Zookeeper &#xff0c;当然你也可以使用kafka包里自带的一个默认配置的 Zookeeper。这里我们单独下载一个 访问Zookeeper官方下载页面在页面中找到最新的稳定版本&#xff0c;点击相应的下载链接…...

编程日记 2024/8/15 5:43:52

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

&#x1f34a; 编程有易不绕弯&#xff0c;成长之路不孤单&#xff01; 大家好&#xff0c;我是熊哈哈&#xff0c;这个项目从我接手到现在有了两个多月的时间了吧&#xff0c;其实本来我在七月初就做完的吧&#xff0c;但是六月份的时候生病了&#xff0c;在家里休息了一个月的…...

编程日记 2024/8/15 5:42:50

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

目录 0 需求描述 1 红包发送方用户的基本信息缺失率有多高？（即有多少红包发送方用户无法在用户基本信息表中匹配？ 2 哪一组红包金额的拒收率最高？ 3、最受二线城市欢迎的红包金额为？（即发出次数最多） 4 北上广深 4 大城市中，哪座城市的男性用户发出的 520 红包比例…...

编程日记 2024/8/15 5:41:49

SQL，获取 ID 的历史状态

sas系统的表tb存储病人的医疗历史记录&#xff0c;当Visit_codeSurgery时表示手术&#xff0c;Visit_codeOffice表示咨询&#xff0c;每个病人有多条Visit_code&#xff0c;有时只有Surgery或只有Office&#xff1a;IdVisit_DateVisit_codeA305/15/2004SurgeryA302/5/2005Offic…...

编程日记 2024/8/15 5:39:47

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

把IP当成摇钱树&#xff0c;要做“东方迪士尼” 今天我们聊——阅文集团 《热辣滚烫》《庆余年2》《与凤行》和《玫瑰的故事》很熟悉吧&#xff1f;影视“四连爆”&#xff0c; 阅文集团交出一份亮眼半年报&#xff0c;时隔两年&#xff0c;重启增长。 跟IP相关业务对收入贡献…...

编程日记 2024/8/15 5:38:46

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

一、背景 在构建企业级数据架构时&#xff0c;将SQL Server数据库的数据同步至数仓数据库&#xff08;如Oracle&#xff09;是一项至关重要的任务。这一过程不仅促进了跨系统数据的一致性与可用性&#xff0c;还为数据分析、商业智能以及决策支持系统提供了坚实的数据基础。 …...

编程日记 2024/8/15 5:37:45

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

每日打卡题51-55答案 51、【2017年真题】 难度&#xff1a;一般 系统移植也是系统构建的一种实现方法&#xff0c;在移植工作中&#xff0c; 需要最终确定移植方法。 A.计划阶段 B.准备阶段 C.转换阶段 D.验证阶段 答案&#xff1a;A 解析&#xff1a; 移植工作大体上分为计划…...

编程日记 2024/8/15 5:36:44

JavaEE 的入门

1. 学习JavaEE Java EE(Java Platform Enterprise Edition), Java 平台企业版. 是JavaSE的扩展, ⽤于解决企业级的开 发需求, 所以也可以称之为是⼀组⽤于企业开发的Java技术标准. 所以, 学习JavaEE主要是学习Java在 企业中如何应⽤. 前⾯学习的是Java基础, JavaEE 主要学习Jav…...

编程日记 2024/8/15 5:35:42

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

前端word文档下载文件时不预览直接下载方法支持 doc / excel / ppt / pdf 等 根据需要&#xff0c;要实现一个下载文档的需要 最简单的方法就是使用a标签 如果是相同域可以直接下载&#xff0c;但如果是不同域的&#xff0c;就会先打开一个预览页&#xff0c;在预览页再点下载…...

编程日记 2024/8/15 5:34:41

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

Java系列文章目录 文章目录 Java系列文章目录一、前言二、学习内容&#xff1a;三、问题描述四、解决方案&#xff1a;4.1 空值与null的区别4.1.1 空值&#xff08;Empty Value&#xff09;4.1.2 Null 4.2 形参与实参区别 五、总结&#xff1a;5.1 学习总结&#xff1a; 一、前…...

编程日记 2024/8/15 5:33:39

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

前言 QT展示列表信息的时候通常用到列表&#xff08;比如用户信息、机构信息、设备信息等菜单&#xff09;&#xff0c;当需要对某列进行修改、删除操作时&#xff0c;就需要加入按钮&#xff08;QPushButton&#xff09;&#xff0c;当需要对多列进行右键菜单操作时&#xff0…...

编程日记 2024/8/15 5:32:38

linux监控命令

在 Linux 中&#xff0c;有许多命令可以用于监控系统的性能和状态。以下是一些常用的监控命令及其用途&#xff1a; 1. top​ 和 htop​ top ​top​ 命令显示当前系统中运行的进程列表及其资源使用情况。 top​​ ‍ htop ​htop​ 是 top​ 命令的增强版&#xff0c;提…...

编程日记 2024/8/15 5:31:36

SpringBoot入门笔记

本文是看黑马老师讲课视频学习笔记整理 目录 入门案例 基于IDEA联网 基于Springboot官网创建 基于阿里云创建项目 手工创建 隐藏文件 入门案例解析: parent​编辑 starter 引导类 内嵌tomcat 入门案例 基于IDEA联网 RestController RequestMapping("/books&…...

编程日记 2024/8/15 5:30:35

python 华为od 单词接龙

sd[word,dd,da,dc,dword,d] # 计算出下一个接龙单词 def jl(sd,st):# sd.remove(st)sd list(set(sd))sends list(st)[-1]lg []sd.sort()for i in sd:if i.startswith(sends):lg.append((i, len(i)))if lg[]:return 0,0lg.sort(keylambda x: x[1],reverseTrue)maxlen lg[0][…...

编程日记 2024/8/15 5:29:34

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

编程新知 2025/10/5 2:30:38

css实现圆环展示百分比，根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

编程新知 2026/2/5 4:28:28

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2026/1/26 20:20:15

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

编程新知 2026/1/20 14:36:39

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

编程新知 2025/11/30 16:55:29

Neo4j 集群管理：原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档，本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石，用于构建高可用、可扩展且一致的图数据库服务…...

编程新知 2025/12/27 16:43:24

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作（核心）三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结，涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

编程新知 2025/8/11 1:05:59

C# SqlSugar：依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

编程新知 2025/11/25 6:49:02

html-＜abbr＞ 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

编程新知 2026/1/24 19:22:03

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

编程新知 2026/1/25 14:15:52