【SpringBoot】返回参数

返回参数

  • 返回页面
  • 返回数据
  • 返回 html 代码
  • 返回 json 数据
  • 两数相加
  • 用户登录

返回页面

首先在 static 文件夹中创建 index.html 文件:
在这里插入图片描述
代码:

<html>
<body>
    <h1>hello word!!!</h1>
    <p>this is a html page</p>
</body>
</html>

可以直接使用地址访问(确保 index.html 文件在 static 文件夹中):
在这里插入图片描述

也可以后端返回 index.html:

@RequestMapping("/return")
@Controller
public class ReturnController {
    // 返回 html页面
    @RequestMapping("/r1")
    public String r1() {
        return "/index.html";
    }
}

在这里插入图片描述

早期,后端会返回前端视图,所以使用 @Controller 注解,而现在大多是前后端分离,只需要给前端返回数据即可,因此使用 @RestController 注解。而 @RestController 相当于 @Controller + @ResponseBody,所以如下两种方式等价:
在这里插入图片描述

返回数据

@RequestMapping("/return")
@Controller
public class ReturnController {

    @RequestMapping("/r2")
    public String r2() {
        return "Hello springboot";
    }
}

在这里插入图片描述
若只想返回数据,则使用 @ResponseBody 注解, @ResponseBody 注解即是类注解,也是方法注解,注解在类上,该类中所有方法返回数据,注解在方法上,该方法放回数据:

    @ResponseBody
    @RequestMapping("/r2")
    public String r2() {
        return "Hello springboot";
    }

在这里插入图片描述

返回 html 代码

在这里插入图片描述

返回 json 数据

在这里插入图片描述

两数相加

前端传递两个数给后端,后端计算并返回给前端:
前端代码:

<!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>
// 将两个数传到 calc/sum 中
<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>

后端代码:

@RestController
@RequestMapping("/calc")
public class CalcController {
    @RequestMapping("/sum")
    public String sum(Integer num1, Integer num2) {
        Integer sum = num1 + num2;
        return "计算结果是:"+sum;
    }
}

在这里插入图片描述

用户登录

输⼊账号和密码,后端进行校验密码是否正确。
前端 login.html 代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
</head>

<body>
<h1>用户登录</h1>
用户名:<input name="userName" type="text" id="userName"><br>
密码:<input name="password" type="password" id="password"><br>
<input type="button" value="登录" onclick="login()">

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
    function login() {
        $.ajax({
            type:"post",
            url: "login/check",
            data:{
                userName: $("#userName").val(),
                password: $("#password").val()
            },
            success: function(result){
                if(result==true){
                    location.href="index.html";
                }else{
                    alert("用户名或密码错误!");
                }
            }
        });
    }

</script>
</body>

</html>

前端 index.html 代码:

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户登录首页</title>
</head>

<body>
登录人: <span id="loginUser"></span>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
    $.ajax({
        url: "/login/getuser",
        type:"get",
        success:function(result){
            $("#loginUser").text(result);
        }
    });
</script>
</body>

</html>

后端代码:

@RestController
@RequestMapping("/login")
public class LoginController {

    @RequestMapping("/check")
    public Boolean check(String username, String password, HttpSession session) {
    	// 如果用户名或密码为空,返回false
        if (!StringUtils.hasText(username) || !StringUtils.hasText(password)) {
            return false;
        }
        // 如果用户和密码都正确,则存储会话信息
        if ("zhangsan".equals(username) && "123456".equals(password)) {
            session.setAttribute("username", username);
            return true;
        }
        return false;
    }

    @RequestMapping("/getuser")
    public String getuser(HttpSession session) {
    	// 返回当前登录用户
        return (String) session.getAttribute("username");
    }
}

运行结果:

在这里插入图片描述

login.html 前后端交互关键代码 :

在这里插入图片描述

index.html 前后端交互关键代码 :

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/546875.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

聚类能代替分类吗?

聚类和分类是两种不同的机器学习方法&#xff0c;它们在处理数据时有着不同的目的和应用场景。 分类&#xff1a;分类是一种监督学习方法&#xff0c;它需要已标记的训练数据集。在分类中&#xff0c;算法会学习如何将输入数据映射到预定义的类别中。例如&#xff0c;给定一组包…

如何判断超级充电测试负载是否合格?

超级充电测试负载是电动汽车充电设备的重要组成部分&#xff0c;其性能直接影响到电动汽车的充电效率和安全性。因此&#xff0c;判断超级充电测试负载是否合格是非常重要的。以下是一些判断标准&#xff1a; 超级充电测试负载的充电效率是衡量其性能的重要指标&#xff0c;合格…

leetcode代码记录(Z 字形变换

目录 1. 题目&#xff1a;2. 我的代码&#xff1a;小结&#xff1a; 1. 题目&#xff1a; 将一个给定字符串 s 根据给定的行数 numRows &#xff0c;以从上往下、从左到右进行 Z 字形排列。 比如输入字符串为 “PAYPALISHIRING” 行数为 3 时&#xff0c;排列如下&#xff1a;…

验证ElasticSearch 分词的BUG

验证ElasticSearch 分词的BUG 环境介绍 ElasticSearch 版本号: 6.7.0 BUG 重现 创建测试案例索引 PUT test_2022 {"settings": {"analysis": {"filter": {"pinyin_filter": {"type": "pinyin"}},"analy…

kafka(六)——存储策略

存储机制 kafka通过topic作为主题缓存数据&#xff0c;一个topic主题可以包括多个partition&#xff0c;每个partition是一个有序的队列&#xff0c;同一个topic的不同partiton可以分配在不同的broker&#xff08;kafka服务器&#xff09;。 关系图 partition分布图 名称为t…

互联网元搜索引擎SearXNG

最近有个很火的项目叫 FreeAskInternet&#xff0c;其工作原理是&#xff1a; 第一步、用户提出问题第二步、用 SearXNG&#xff08;本地运行&#xff09;在多个搜索引擎上进行搜索第三步、将搜索结果传入 LLM 生成答案 所有进程都在本地运行&#xff0c;适用于需要快速获取信…

【深度学习】AI修图——DragGAN原理解析

1、前言 上一篇&#xff0c;我们讲述了StyleGAN2。这一篇&#xff0c;我们就来讲一个把StyleGAN2作为基底架构的DragGAN。DragGAN的作用主要是对图片进行编辑&#xff0c;说厉害点&#xff0c;可能和AI修图差不多。这篇论文比较新&#xff0c;发表自2023年 原论文&#xff1a…

vscode中调试C++程序,解读debug步骤

下面对几个调试的按键进行解释&#xff1a; 按钮1&#xff1a;运行/继续 F5&#xff0c;真正的一步一步运行。当有断点的时候&#xff0c;只会执行断点所在行语句和开头结尾两行语句。 按钮2&#xff1a;单步跳过(又叫逐过程) F10&#xff0c;按语句单步执行。当有函数时&#…

制作适用于openstack平台的win10镜像

1. 安装准备 从MSDN下载windows 10的镜像虚拟机开启CPU虚拟化的功能。从Fedora 网站下载已签名的 VirtIO 驱动程序 ISO 。 创建15 GB 的 qcow2 镜像&#xff1a;qemu-img create -f qcow2 win10.qcow2 15G 安装必要的软件 yum install qemu-kvm qemu-img virt-manager libvir…

【Docker系列】容器访问宿主机的Mysql

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

Mac M1(ARM) 使用Vmware Fusion从零搭建k8s集群

该笔记仅用于自己学习&#xff1b;上一篇安装了环境&#xff0c;这一篇开始 Mac M1(ARM) 使用Vmware Fusion从零搭建k8s集群【参考】 VMware Fusion下修改vmnet8网络和添加vmnet网络 【注意如下】 虚拟机ip修改的位置修改的&#xff0c;记得开启宿主机的mac os 网络共享&#…

有依赖的的动态规划问题

题目 题型分析 这是比较典型的动态规划的问题。动态规划是什么呢&#xff1f;本质上动态规划是对递归的优化。例如&#xff0c;兔子数列&#xff1a;f(x) f(x - 1) f(x -2), 我们知道 f 代表了计算公式&#xff0c;这里解放思想一下&#xff0c;如果 f 替换为数组&#xff0…

vue实现前端打印效果

如图效果所示&#xff08;以下演示代码&#xff09; <template><div><el-button v-print"printObj" type"primary" plain click"handle">{{ text }}</el-button><div style"display: none"><div id…

基于Springboot+Vue的Java项目-在线视频教育平台系统(附演示视频+源码+LW)

大家好&#xff01;我是程序员一帆&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &am…

鸿蒙OS开发指导:【应用包签名工具】

编译构建 该工具基于Maven3编译构建&#xff0c;请确认环境已安装配置Maven3环境&#xff0c;并且版本正确 mvn -version下载代码&#xff0c;命令行打开文件目录至developtools_hapsigner/hapsigntool&#xff0c;执行命令进行编译打包 mvn package编译后得到二进制文件&…

[开发日志系列]PDF图书在线系统20240415

20240414 Step1: 创建基础vueelment项目框架[耗时: 1h25min(8:45-10:10)] 检查node > 升级至最新 (考虑到时间问题,没有使用npm命令行执行,而是觉得删除重新下载最新版本) > > 配置vue3框架 ​ 取名:Online PDF Book System 遇到的报错: 第一报错: npm ERR! …

halcon 3.2标定相机

参考《solution_guide_iii_c_3d_vision.pdf》 3.2.2.2 Which Distortion Model to Use 选用何种畸变模型 对于面阵相机&#xff0c;halcon中两种畸变模型&#xff1a;The division model and the polynomial model&#xff08;差分模型和多项式模型&#xff09;&#xff0c;前…

使用 Scrapy 爬取豆瓣电影 Top250

一、Scrapy框架 1. 介绍 在当今数字化的时代&#xff0c;数据是一种宝贵的资源&#xff0c;而网络爬虫&#xff08;Web Scraping&#xff09;则是获取网络数据的重要工具之一。而在 Python 生态系统中&#xff0c;Scrapy 框架作为一种高效、灵活的网络爬虫框架&#xff0c;为…

MLOps

参考&#xff1a; 什么是MLOps&#xff1f;与DevOps有何异同&#xff1f;有什么价值&#xff1f;https://baijiahao.baidu.com/s?id1765071998288593530&wfrspider&forpcMLOps简介_AI开发平台ModelArts_WorkflowMLOps(Machine Learning Operation)是机器学习&#xf…

更优性能与性价比,从自建 ELK 迁移到 SLS 开始

作者&#xff1a;荆磊 背景 ELK (Elasticsearch、Logstash、Kibana) 是当下开源领域主流的日志解决方案&#xff0c;在可观测场景下有比较广泛的应用。 随着数字化进程加速&#xff0c;机器数据日志增加&#xff0c;自建 ELK 在面临大规模数据、查询性能等方面有较多问题和挑…