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

javaEE案例,前后端交互,计算机和用户登录

news 2026/2/9 2:15:15

加法计算机,前端的代码如下 :

浏览器访问的效果如图 :

后端的代码如下

再在浏览器进行输入点击相加,就能获得结果

开发中程序报错,如何定位问题

1.先定位前端还是后端(通过日志分析)

  1)前端 : F12 看控制台

  2)后端 : 接口,控制台日志

举个例子: 如果出现了错误,我们就在后端随便打印一段东西,这一串打印通常放在方法的第一行,然后运行代码

下一步再去客户端再次运行,随便写一点,然后点击相加

然后我们再回到后端,发现没有任何反应,说明请求没进来(这里我提前清空了)

如果后端打印了,就说明请求进来了

这时候我们要去查前端,按 F12 看控制台有没有报错,我们发现控制台没有报错

这时候我们就要返回检查我们的代码,看看我们的请求有没有发送出去

如果我们觉得前端也没有问题,请求也没有到达后端,实在不知道是哪里的问题,这时候还有一个办法,测试接口,用 Http 进行测试,因为我们后端提供的这个接口和前端没有任何关系

如果测试结果是没问题的,我们就排除了后端的问题,问题一定是在前端,如果前端也没错,我们就要考虑环境,大多数时候环境是没问题的

用户登录

前端代码如下

<!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() {}</script>
</body>
</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></script>
</body></html>

上述 html 访问效果如下

后端代码如下:

package com.example.demo1.controller;import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;@RequestMapping("/user")
@RestController
public class UserController {@RequestMapping("/login")public Boolean login(String userName, String password, HttpSession session){//校验参数的合法性// if (userName==null||userName.length()==0||password==null||password.length()==0){//     return false;// }if (!StringUtils.hasLength(userName)||!StringUtils.hasLength(password)){return false;}//进行用户名和密码的校验if ("aaa".equals(userName)&&"aaa".equals(password)){session.setAttribute("username","aaa");return true;}return false;}@RequestMapping("/getUserInfo")public String getUserInfo(HttpServletRequest request){//从Session 获取登录用户HttpSession session = request.getSession(false);String userName = null;if (session!=null) {userName = (String) session.getAttribute("username");}return userName;}
}

我们先测试后端的接口看看有没有问题,返回true 就说明没有问题

我们再测试一下看看能不能拿到数据,拿到了就说明后端接口没有问题

接下来我们补充前端的代码

<!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({url:"/user/login",type:"post",data:{"userName":$("#userName").val(),"password":$("#password").val()},success:function(result){if(result){location.href="/index.html";}else{alert("密码错误");}}})}</script>
</body>
</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:"/user/getUserInfo",type:"get",success:function(username){$("#loginUser").text(username);}})</script>
</body>
</html>

成功

相关文章：

javaEE案例,前后端交互,计算机和用户登录

加法计算机,前端的代码如下 : 浏览器访问的效果如图 : 后端的代码如下 再在浏览器进行输入点击相加,就能获得结果 开发中程序报错,如何定位问题 1.先定位前端还是后端(通过日志分析) 1)前端 : F12 看控制台 2)后端 : 接口,控制台日志 举个例子: 如果出现了错误,我们就在后端…...

编程日记 2023/11/14 0:07:49

安卓学习记录

文章目录 Text_View基础属性字体阴影跑马灯**activity_main.xml**MyTextview button Text_View ctrl右键可以看到属性 代码整理采用的快捷键是ctrlaltL(电脑qq锁定快捷键&#xff0c;退一下qq就行了) 基础属性 字体阴影 <?xml version"1.0" encoding"utf-…...

编程日记 2023/11/14 0:06:48

gradle 使用记录

gradle 使用记录 下载与设置android studio 配置 参考 IDEA如何配置 Gradle 及 Gradle 安装过程&#xff08;详细版&#xff09; 设置Gradle国内镜像并配置本地仓库地址 下载与设置 腾讯镜像下载 比如gradle-8.4-bin.zip 新建环境变量 GRADLE_HOME 为 D:\java\gradle &#…...

编程日记 2023/11/14 0:05:46

电源基础元件

文章目录 电源基础元件理想电压源理想电流源受控电源 电源基础元件 理想电压源 定义 其两端电压总能保持定值或一定的时间函数&#xff0c;其值与流过它的电流i无关的元件叫理想电压源 理想电压源的电压、电流关系 1.电源两端电压由电源本身决定&#xff0c;与外电路无关&…...

编程日记 2023/11/14 0:04:45

[RK-Linux] updateEngine工具使用以及代码分析

Rockchip Linux 平台支持两种启动方案，Recovery 模式和Linux A/B 模式： Recovery 模式，设备上有一个单独的分区(recovery)用于升级操作。Linux A/B 模式，设备上有两套固件，可切换使用。两种启动方案的对比如下： 升级方案代码路径是否支持Recovey启动模式升级是否支持A/B启…...

编程日记 2023/11/14 0:03:44

MySQL | 数据库的表的增删改查【进阶】

MySQL | 数据库的表的增删改查【进阶】 文章目录 MySQL | 数据库的表的增删改查【进阶】系列文章目录本节目标&#xff1a;数据库约束约束类型NULL约束UNIQUE&#xff1a;唯一约束DEFAULT&#xff1a;默认值PRIMARY KEY&#xff1a;主键FOREIGN KEY&#xff1a;外键CHECK 表的设…...

编程日记 2023/11/14 0:02:42

爱剪辑如何将视频旋转90度，详细操作流程

爱剪辑是一款电脑端常用的视频剪辑类软件&#xff0c;基本上囊括了视频剪辑所需的所有功能&#xff0c;此处主要介绍&#xff0c;爱剪辑是如何对视频进行旋转操作的&#xff0c;水平旋转或者垂直旋转爱剪辑都是可以操作的&#xff0c;整体操作的详细过程将在下方为大家讲解。 …...

编程日记 2023/11/14 0:01:41

三国杀中的概率学问题3——王荣

前言 本文是三国杀中的概率学问题系列文章中的一篇&#xff0c;将详细讨论王荣吉占的期望摸牌数问题。并加上连续情形作为拓展。 值得说明的是&#xff0c;本文的思路受到了一篇文章的启发&#xff0c;在此特别鸣谢&#xff0c;这是文章的链接。 王荣吉占的期望摸牌数 王荣的…...

编程日记 2023/11/14 0:00:40

Linux - 实现一个简单的 shell

前言 之前我们对进程的替换&#xff0c;进程地址空间等等的概念进行了说明&#xff0c;本篇博客会基于这些知识点来 实现一个简单的 shell &#xff0c;如有疑问&#xff0c;可以参考下述博客&#xff1a;Linux - 进程程序替换 - C/C 如何实现与各个语言之间的相互调用 - 替换…...

编程日记 2023/11/13 23:59:39

不同优化器的应用

简单用用&#xff0c;优化器具体参考 深度学习中的优化器原理(SGD,SGDMomentum,Adagrad,RMSProp,Adam)_哔哩哔哩_bilibili 收藏版&#xff5c;史上最全机器学习优化器Optimizer汇总 - 知乎 (zhihu.com) import numpy as np import matplotlib.pyplot as plt import torch # …...

编程日记 2023/11/13 23:58:38

学习网络编程No.9【应用层协议之HTTPS】

引言&#xff1a; 北京时间&#xff1a;2023/10/29/7:34&#xff0c;好久没有在周末早起了&#xff0c;该有的困意一点不少。伴随着学习内容的深入&#xff0c;知识点越来越多&#xff0c;并且对于爱好刨根问底的我来说&#xff0c;需要了解的知识就像一座大山&#xff0c;压得…...

编程日记 2023/11/13 23:57:37

PSP - 蛋白质复合物结构预测 Template Pair 特征 Mask 可视化

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/134333419 在蛋白质复合物结构预测中&#xff0c;在 TemplatePairEmbedderMultimer 层中 &#xff0c;构建 Template Pair 特征的源码&#xff0c…...

编程日记 2023/11/13 23:56:36

RK3568开发笔记-amixer开机设置音量异常

目录 前言 一、amixer介绍 1. 显示音频设备信息 2. 显示音量信息...

编程日记 2023/11/13 23:55:35

STM32两轮平衡小车原理详解（开源）

一、引言 关于STM32两轮平衡车的设计&#xff0c;我想在读者阅读本文之前应该已经有所了解&#xff0c;所以本文的重点是代码的分享和分析。至于具体的原理&#xff0c;我觉得读者不必阅读长篇大论的文章&#xff0c;只需按照本文分享的代码自己亲手制作一辆平衡车&#xff0c…...

编程日记 2023/11/13 23:54:34

区间内的真素数问题（C#）

题目&#xff1a;区间内的真素数 找出正整数 M 和 N 之间&#xff08;N 不⼩于 M&#xff09;的所有真素数。真素数的定义&#xff1a;如果⼀个正整数P 为素数&#xff0c;且其反序也为素数&#xff0c;那么 P 就为真素数。例如&#xff0c;11&#xff0c;13 均为真素数&#…...

编程日记 2023/11/13 23:53:33

eclipse安装lombok插件

lombok插件下载:Download 下载完成&#xff0c;lombok.jar放到eclipse根目录&#xff0c;双击jar运行 运行界面&#xff0c;点击Install安装。 安装完成&#xff0c;重启IDE&#xff0c;rebuild 项目。 rebuild 项目...

编程日记 2023/11/13 23:52:32

故障演练 | 微服务架构下如何做好故障演练

前言 微服务架构场景中&#xff0c;应用系统复杂切分散。长期运行时&#xff0c;局部出现故障时不可避免的。如果发生故障时不能进行有效反应&#xff0c;系统的可用性将极大地降低。 什么是故障演练 故障演练是指模拟生产环境中可能出现的故障&#xff0c;测试系统或应用在…...

编程日记 2023/11/13 23:51:31

Python爬虫-获取汽车之家车家号

前言 本文是该专栏的第9篇，后面会持续分享python爬虫案例干货，记得关注。 地址：aHR0cHM6Ly9jaGVqaWFoYW8uYXV0b2hvbWUuY29tLmNuL0F1dGhvcnMjcHZhcmVhaWQ9MjgwODEwNA== 需求：获取汽车之家车家号数据 笔者将在正文中介绍详细的思路以及采集方法，废话不多说，跟着笔者直接往…...

编程日记 2023/11/13 23:50:30

No195.精选前端面试题，享受每天的挑战和学习

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入…...

编程日记 2023/11/13 23:49:28

pytest与testNg自动化框架

一.pytest 1.安装pytest&#xff1a; pip install pytest 2.编写用例 - 收集用例 - 执行用例 - 生成报告 3.pytest如何自动识别用例 　识别规则如下&#xff1a; 1、搜索根目录&#xff1a;默认从当前目录中搜集测试用例&#xff0c;即在哪个目录下运行pytest命令&#xff0c;…...

编程日记 2023/11/13 23:48:27

Xshell远程连接Kali（默认 | 私钥）Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

编程新知 2026/1/28 2:18:42

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

编程新知 2025/9/27 2:43:26

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2026/1/24 10:07:40

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2026/1/9 14:53:35

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

编程新知 2025/9/22 21:37:01

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

编程新知 2025/7/7 22:33:57

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

编程新知 2026/1/27 4:58:14

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...

编程新知 2025/9/27 12:03:43

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2026/1/25 9:03:19

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

编程新知 2026/1/31 2:50:32