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

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

news 2025/12/31 6:23:58

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

浏览器访问的效果如图 :

后端的代码如下

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

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

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

基于算法竞赛的c++编程（28）结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

编程新知 2025/11/16 19:06:23

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

编程新知 2025/12/21 22:08:53

MVC 数据库

MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...

编程新知 2025/10/30 4:58:11

Frozen-Flask ：将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

编程新知 2025/12/5 20:57:13

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

编程新知 2025/6/16 23:36:50

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

编程新知 2025/12/30 22:45:07

Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

编程新知 2025/9/9 23:27:37

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

编程新知 2025/10/3 10:56:48

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

编程新知 2025/12/15 11:08:22

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时，会出现小数部分被截断的情况。典型错误模式如下： void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

编程新知 2025/9/29 10:54:34