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

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

news 2025/10/30 23:44:07

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

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2025/10/16 3:33:18

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2025/10/14 17:58:13

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2025/10/27 9:35:00

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

编程新知 2025/10/29 19:04:46

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

编程新知 2025/10/17 0:18:22

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

编程新知 2025/10/27 21:54:32

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

编程新知 2025/9/3 4:12:17

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

编程新知 2025/10/30 3:39:11

如何在网页里填写 PDF 表格？

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

编程新知 2025/10/23 22:12:06

4. TypeScript 类型推断与类型组合

一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式&#xff0c;自动确定它们的类型。 这一特性减少了显式类型注解的需要&#xff0c;在保持类型安全的同时简化了代码。通过分析上下文和初始值&#xff0c;TypeSc…...

编程新知 2025/7/7 15:21:47