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

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

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
————————————————

电子签名:上嘉路

http://www.lryc.cn/news/424176.html

相关文章:

  • 观察者模式和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 单词接龙
  • Vue+Echart实现地图省市区三级下钻
  • Apache Tomcat 信息泄露漏洞排查处理CVE-2024-21733)
  • 51单片机-LED实验
  • 无人机开启农林植保新篇章
  • 第N4周:NLP中的文本嵌入
  • C++高精度减法
  • protobuf cmakelist,msvc utf-8设置
  • Haproxy讲解
  • K8S系列——一、Ubuntu上安装Helm
  • 排序: 插入\希尔\选择\归并\冒泡\快速\堆排序实现
  • OpenCV图像处理——按最小外接矩形剪切图像处理ROI后映射回原图像