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

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

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


一、准备工作


       创建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

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

请求参数

参数名 类型 是否必须 备注
num1 Integer 参与计算的第一个数
num2 Integer 参与计算的第二个数

       示例: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

相关文章
|
2天前
|
数据库 开发者
后端开发的哲学:代码与人生的交织
在数字化的时代,后端开发不仅仅是技术的堆砌,它更像是一场深刻的人生修炼。本文将探讨后端开发中蕴含的哲理,以及这些哲理如何影响我们的职业生涯和人生观。我们将从代码的本质出发,逐步深入到人生的意义,最终理解为何“你必须成为你希望在世界上看到的改变。”
|
24天前
|
机器学习/深度学习 PyTorch 算法框架/工具
揭秘深度学习中的微调难题:如何运用弹性权重巩固(EWC)策略巧妙应对灾难性遗忘,附带实战代码详解助你轻松掌握技巧
【10月更文挑战第1天】深度学习中,模型微调虽能提升性能,但常导致“灾难性遗忘”,即模型在新任务上训练后遗忘旧知识。本文介绍弹性权重巩固(EWC)方法,通过在损失函数中加入正则项来惩罚对重要参数的更改,从而缓解此问题。提供了一个基于PyTorch的实现示例,展示如何在训练过程中引入EWC损失,适用于终身学习和在线学习等场景。
41 4
揭秘深度学习中的微调难题:如何运用弹性权重巩固(EWC)策略巧妙应对灾难性遗忘,附带实战代码详解助你轻松掌握技巧
|
17天前
|
jenkins Java 测试技术
如何使用 Jenkins 自动发布 Java 代码,通过一个电商公司后端服务的实际案例详细说明
【10月更文挑战第8天】本文介绍了如何使用 Jenkins 自动发布 Java 代码,通过一个电商公司后端服务的实际案例,详细说明了从 Jenkins 安装配置到自动构建、测试和部署的全流程。文中还提供了一个 Jenkinsfile 示例,并分享了实践经验,强调了版本控制、自动化测试等关键点的重要性。
24 5
|
5月前
|
存储 前端开发 小程序
表白墙完善(数据库,前端,后端Servlet),再谈Cookie和Session。以及一个关于Cookie的练习小程序
表白墙完善(数据库,前端,后端Servlet),再谈Cookie和Session。以及一个关于Cookie的练习小程序
|
26天前
|
前端开发 Java
学习SpringMVC,建立连接,请求,响应 SpringBoot初学,如何前后端交互(后端版)?最简单的能通过网址访问的后端服务器代码举例
文章介绍了如何使用SpringBoot创建简单的后端服务器来处理HTTP请求,包括建立连接、编写Controller处理请求,并返回响应给前端或网址。
45 0
学习SpringMVC,建立连接,请求,响应 SpringBoot初学,如何前后端交互(后端版)?最简单的能通过网址访问的后端服务器代码举例
|
10天前
|
存储 数据管理 API
零代码能力:轻松搞定表单和API接口,少写80%后端代码,内含资源
小白接口(果创云 YesApi.cn)是一个零代码和低代码开发平台,提供一站式后端云服务,帮助开发者、学生、业余爱好者、工作室、中小企业及无IT技术人员的传统企业快速搭建应用、接口、服务和网站。平台提供500+免费API接口,支持在线API开发、在线表单、数据库管理、图片文件存储、会员管理等功能,无需后端开发经验,轻松实现数据处理和应用开发。
|
2月前
|
SQL JSON Java
springboot 如何编写增删改查后端接口,小白极速入门,附完整代码
本文为Spring Boot增删改查接口的小白入门教程,介绍了项目的构建、配置YML文件、代码编写(包括实体类、Mapper接口、Mapper.xml、Service和Controller)以及使用Postman进行接口测试的方法。同时提供了SQL代码和完整代码的下载链接。
springboot 如何编写增删改查后端接口,小白极速入门,附完整代码
|
3月前
|
JSON 安全 API
构建高效后端API:最佳实践与代码示例
【8月更文挑战第2天】 在数字化时代,后端API是连接数据与用户的桥梁。本文深入探讨了如何设计并实现高效的后端API,从理论到实践,提供了实用的技巧和代码示例。通过阅读本篇文章,你将学会如何避免常见的陷阱,优化你的API性能,从而提供更加流畅的用户体验。
|
2月前
|
存储 关系型数据库 API
后端开发的艺术:从代码到云部署
在数字时代的浪潮中,后端开发如同一位默默无闻的艺术家,用代码绘制着互联网世界的底层画卷。本文将带你领略后端开发的奥秘,从基础的代码编写到复杂的云部署,每一步都是对技术深度与广度的挑战。我们将一起探索如何在变化莫测的技术海洋中找到自己的北极星,确保项目的成功和职业生涯的发展。无论你是初学者还是资深开发者,这篇文章都将为你提供新的视角和实用的技巧,让你的后端之旅更加精彩。
33 2
|
3月前
|
前端开发 IDE Java
"揭秘前端转Java的秘径:SpringBoot Web极速入门,掌握分层解耦艺术,让你的后端代码飞起来,你敢来挑战吗?"
【8月更文挑战第19天】面向前端开发者介绍Spring Boot后端开发,通过简化Spring应用搭建,快速实现Web应用。本文以创建“Hello World”应用为例,展示项目基本结构与运行方式。进而深入探讨三层架构(Controller、Service、DAO)下的分层解耦概念,通过员工信息管理示例,演示各层如何协作及依赖注入的使用,以此提升代码灵活性与可维护性。
49 2