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

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

news 2026/5/12 9:16:50

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

CDFControl工具详解，搞定云桌面黑屏、卡顿、随机掉线疑难故障

一 前言 在企业Citrix云桌面运维工作中，我们经常遇到一类无明确报错、间歇性复现的疑难故障。常规Windows事件查看器日志干净无报错，常规DDC控制台监控无异常，但终端用户会频繁出现登录黑屏、会话卡顿、虚拟机随机掉线、VDA注册超时等问题。 很多运维人员遇到此类问题只能…...

编程新知 2026/5/12 9:16:37

基于FastAPI与Flutter的LLM全栈聊天应用：私有化部署与架构解析

1. 项目概述与核心价值最近在折腾一个全栈的AI聊天应用&#xff0c;把后端、前端、数据库和缓存都整合到了一起。这个项目叫LLMChat&#xff0c;它不是一个简单的API包装器&#xff0c;而是一个功能完备、可以私有化部署的聊天平台。核心是用Python的FastAPI构建高性能后端&…...

编程新知 2026/5/12 8:40:08

EurekaClaw：多智能体AI研究助手，自动化实现从灵感到论文的完整流程

1. 项目概述&#xff1a;从灵感到论文的自动化研究助手在科研工作中&#xff0c;最令人兴奋又最耗费精力的&#xff0c;莫过于从零散的文献、模糊的直觉中&#xff0c;一步步构建出严谨的、可发表的成果。这个过程通常需要经历文献调研、假设生成、理论证明、实验验证和论文撰写…...

编程新知 2026/5/12 8:28:30

从“能用”到“可靠”：基于SonarQube与Jenkins的Java代码质量防线构建实战

当测试覆盖率不再只是一串数字&#xff0c;而是合并代码前的“一票否决权” 1. 为什么你的“质量门禁”只是个摆设&#xff1f; 在很多团队的CI/CD流水线中&#xff0c;SonarQube的集成往往停留在“能跑就行”的阶段。流水线里确实有代码扫描这一步&#xff0c;日志里也打印出…...

编程新知 2026/5/12 8:01:06

WindowsCleaner终极指南：3步告别C盘爆红，让Windows重获新生

WindowsCleaner终极指南&#xff1a;3步告别C盘爆红&#xff0c;让Windows重获新生 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服&#xff01; 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner 你是否经常遇到C盘变红的警告&…...

编程新知 2026/5/12 7:05:09

为什么你需要m4s-converter：让B站缓存视频重获自由的秘密武器

为什么你需要m4s-converter&#xff1a;让B站缓存视频重获自由的秘密武器 【免费下载链接】m4s-converter 一个跨平台小工具&#xff0c;将bilibili缓存的m4s格式音视频文件合并成mp4 项目地址: https://gitcode.com/gh_mirrors/m4/m4s-converter 你是否曾经遇到过这样的…...

编程新知 2026/5/12 6:27:43

在reMarkable平板上部署AI智能体：手写交互与视觉语言模型实践

1. 项目概述&#xff1a;当reMarkable平板遇见AI&#xff0c;一个手写交互的智能副驾如果你和我一样&#xff0c;既是reMarkable电子墨水屏平板的深度用户&#xff0c;又对AI智能体&#xff08;Agentic AI&#xff09;的潜力充满好奇&#xff0c;那么你一定会对这个项目感到兴奋…...

编程新知 2026/5/12 5:48:10

Linux桌面美化：pixie-cursors鼠标指针主题安装与定制指南

1. 项目概述&#xff1a;一个为Linux桌面注入灵魂的鼠标指针主题如果你和我一样&#xff0c;是一个长期在Linux桌面环境下工作的开发者或爱好者&#xff0c;那么对于系统美化的追求&#xff0c;可能从未停止过。从窗口管理器到终端配色&#xff0c;从图标包到壁纸&#xff0c;每…...

编程新知 2026/5/12 4:02:10

清华研究发现：当世界模型能够通过视觉想象而非纯文本思考时，其推理方式更接近人类！

模型能解高数题、写复杂代码&#xff0c;但遇到“把这张纸对折三次再剪个洞&#xff0c;展开后有几个窟窿”就频频卡壳。纯语言推理在符号和抽象规则上进步很快&#xff0c;但在物理常识、空间拓扑这些需要具象表征的任务上&#xff0c;依然存在明显的系统性短板。社区一直对“…...

编程新知 2026/5/12 3:58:09

004、TinyML技术栈全景图：从模型到部署

004 TinyML技术栈全景图：从模型到部署 去年冬天调试一个智能门磁项目，板子是STM32L4，Flash只有256KB。模型在PC上跑F1值0.97，烧进去直接死机——不是推理结果不对，是内存分配直接溢出。我盯着map文件看了三个小时，最后发现是TensorFlow Lite Micro的arena大小设错了，多…...

编程新知 2026/5/12 3:45:43