综合性练习(后端代码练习1)——加法计算器

2024-04-30 14:20

本文主要是介绍综合性练习(后端代码练习1)——加法计算器,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

一、准备工作

二、约定前后端交互接口

1、概念介绍

2、需求分析

3、接口定义

请求参数

响应数据

三、服务器代码

四、前端页面代码

五、运行测试

遇到问题如何解决?


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

一、准备工作

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

        前端代码:

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

        放在static目录下:


二、约定前后端交互接口

1、概念介绍

        约定 “前后端交互接口” 是进行Web开发中的关键环节

        接口又叫 API(Application Programming Interface),我们一般讲到接口或者API,指的都是同一个东西。

        这里的接口是指应用程序对外提供的服务的描述,用于交换信息和执行任务(与JavaSE阶段学习的 [类和接口] 中的接口不一样,两个不同的概念)。

        简单来说,就是允许客户端给服务器发送哪些 HTTP 请求,并且每种请求预期获取什么样的HTTP响应

现在流行 “前后端分离” 模式开发,前端和后端代码通常由不同的团队负责开发。双方团队在开发之前,会提前约定好交互的方式。客户端发起请求 —> 服务器提供对应的服务。服务器提供的服务种类有很多,客户端按照双方约定,指定选择哪一个服务

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

        比如儿童电话玩具:

        按键1:响应儿歌   按键2:响应钢琴乐曲   按键3:安抚睡眠等等。但是这些说明,如果没有一个文档来说明,用户就不太清楚哪个按键对应哪个,所以商品一般会带一个说明书。这些按键,就是接口,这个“说明书”,就是应用程序的 “接口文档”。

        在项目开发前,根据需求先约定好前后端交互接口,双方按照接口文档进行开发。接口文档通常由服务提供方来写,交由服务使用方确认,也就是客户端。接口文档一旦写好,尽量不要轻易改变,如果需要改变,必须要通知另一方知晓。

2、需求分析

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

3、接口定义

请求路径:calc / sum

请求方式:GET/POST

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

请求参数

参数名类型是否必须备注
num1Integer参与计算的第一个数
num2Integer参与计算的第二个数

        示例:num1=5&num2=3

响应数据

        Content-Type:text/html

        响应内容:相加计算结果为:8

        服务器给计算机返回计算结果。


三、服务器代码

@RestController
@RequestMapping("/calc")
public class Calc {@RequestMapping("/sum")public String  calc(Integer num1, Integer num2) {int sum = num1 + num2;return "<h1>计算机计算结果: " + sum + "</h1>";}
}

四、前端页面代码

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

五、运行测试

        浏览器访问:http:127.0.0.1:8080/calc.html ,页面如下:

        

        跳转页面后,却报错了,如图:

        首先,先检查后端代码有没有问题,使用Postman检查,如图:

        发现也报错了,检查URL,检查代码中的URL是否写错了,如图:

        发现代码出问题了,URL多了空格,将空格删除。重新使用Postman测试,如图:

        再使用浏览器测试,页面如下:

        没有问题了。

遇到问题如何解决?

1先测试后端接口,通过Postman测试后端接口没有问题,暂时排除后端问题

2查看日志(可以借助Debug)

3、如果觉得代码没问题,优先考虑缓存的问题:

        前端缓存Ctrl + F5 强制刷新,或者清除浏览器缓存

        后端缓存Maven -> Plugins -> clean


都看到这了,点个赞再走吧,谢谢谢谢谢

这篇关于综合性练习(后端代码练习1)——加法计算器的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/949098

相关文章

活用c4d官方开发文档查询代码

当你问AI助手比如豆包,如何用python禁止掉xpresso标签时候,它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来

poj 1258 Agri-Net(最小生成树模板代码)

感觉用这题来当模板更适合。 题意就是给你邻接矩阵求最小生成树啦。~ prim代码:效率很高。172k...0ms。 #include<stdio.h>#include<algorithm>using namespace std;const int MaxN = 101;const int INF = 0x3f3f3f3f;int g[MaxN][MaxN];int n

uva 10069 DP + 大数加法

代码: #include <iostream>#include <cstdio>#include <cstdlib>#include <algorithm>#include <cstring>#include <cmath>#include <stack>#include <vector>#include <queue>#include <map>#include <cl

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

RabbitMQ练习(AMQP 0-9-1 Overview)

1、What is AMQP 0-9-1 AMQP 0-9-1(高级消息队列协议)是一种网络协议,它允许遵从该协议的客户端(Publisher或者Consumer)应用程序与遵从该协议的消息中间件代理(Broker,如RabbitMQ)进行通信。 AMQP 0-9-1模型的核心概念包括消息发布者(producers/publisher)、消息(messages)、交换机(exchanges)、

代码随想录冲冲冲 Day39 动态规划Part7

198. 打家劫舍 dp数组的意义是在第i位的时候偷的最大钱数是多少 如果nums的size为0 总价值当然就是0 如果nums的size为1 总价值是nums[0] 遍历顺序就是从小到大遍历 之后是递推公式 对于dp[i]的最大价值来说有两种可能 1.偷第i个 那么最大价值就是dp[i-2]+nums[i] 2.不偷第i个 那么价值就是dp[i-1] 之后取这两个的最大值就是d

pip-tools:打造可重复、可控的 Python 开发环境,解决依赖关系,让代码更稳定

在 Python 开发中,管理依赖关系是一项繁琐且容易出错的任务。手动更新依赖版本、处理冲突、确保一致性等等,都可能让开发者感到头疼。而 pip-tools 为开发者提供了一套稳定可靠的解决方案。 什么是 pip-tools? pip-tools 是一组命令行工具,旨在简化 Python 依赖关系的管理,确保项目环境的稳定性和可重复性。它主要包含两个核心工具:pip-compile 和 pip

D4代码AC集

贪心问题解决的步骤: (局部贪心能导致全局贪心)    1.确定贪心策略    2.验证贪心策略是否正确 排队接水 #include<bits/stdc++.h>using namespace std;int main(){int w,n,a[32000];cin>>w>>n;for(int i=1;i<=n;i++){cin>>a[i];}sort(a+1,a+n+1);int i=1

【Rust练习】12.枚举

练习题来自:https://practice-zh.course.rs/compound-types/enum.html 1 // 修复错误enum Number {Zero,One,Two,}enum Number1 {Zero = 0,One,Two,}// C语言风格的枚举定义enum Number2 {Zero = 0.0,One = 1.0,Two = 2.0,}fn m

MySql 事务练习

事务(transaction) -- 事务 transaction-- 事务是一组操作的集合,是一个不可分割的工作单位,事务会将所有的操作作为一个整体一起向系统提交或撤销请求-- 事务的操作要么同时成功,要么同时失败-- MySql的事务默认是自动提交的,当执行一个DML语句,MySql会立即自动隐式提交事务-- 常见案例:银行转账-- 逻辑:A给B转账1000:1.查询