javaEE案例,前后端交互,计算机和用户登录
加法计算机,前端的代码如下 :
浏览器访问的效果如图 :
后端的代码如下
再在浏览器进行输入点击相加,就能获得结果
开发中程序报错,如何定位问题
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)后端 : 接口,控制台日志 举个例子: 如果出现了错误,我们就在后端…...
安卓学习记录
文章目录 Text_View基础属性字体阴影跑马灯**activity_main.xml**MyTextview button Text_View ctrl右键可以看到属性 代码整理采用的快捷键是ctrlaltL(电脑qq锁定快捷键，退一下qq就行了) 基础属性 字体阴影 <?xml version"1.0" encoding"utf-…...
gradle 使用记录
gradle 使用记录 下载与设置android studio 配置 参考 IDEA如何配置 Gradle 及 Gradle 安装过程（详细版） 设置Gradle国内镜像并配置本地仓库地址 下载与设置 腾讯镜像下载 比如gradle-8.4-bin.zip 新建环境变量 GRADLE_HOME 为 D:\java\gradle &#…...
电源基础元件
文章目录 电源基础元件理想电压源理想电流源受控电源 电源基础元件 理想电压源 定义 其两端电压总能保持定值或一定的时间函数，其值与流过它的电流i无关的元件叫理想电压源 理想电压源的电压、电流关系 1.电源两端电压由电源本身决定，与外电路无关&…...
[RK-Linux] updateEngine工具使用以及代码分析
Rockchip Linux 平台支持两种启动方案，Recovery 模式和Linux A/B 模式： Recovery 模式，设备上有一个单独的分区(recovery)用于升级操作。Linux A/B 模式，设备上有两套固件，可切换使用。两种启动方案的对比如下： 升级方案代码路径是否支持Recovey启动模式升级是否支持A/B启…...
MySQL | 数据库的表的增删改查【进阶】
MySQL | 数据库的表的增删改查【进阶】 文章目录 MySQL | 数据库的表的增删改查【进阶】系列文章目录本节目标：数据库约束约束类型NULL约束UNIQUE：唯一约束DEFAULT：默认值PRIMARY KEY：主键FOREIGN KEY：外键CHECK 表的设…...
爱剪辑如何将视频旋转90度，详细操作流程
爱剪辑是一款电脑端常用的视频剪辑类软件，基本上囊括了视频剪辑所需的所有功能，此处主要介绍，爱剪辑是如何对视频进行旋转操作的，水平旋转或者垂直旋转爱剪辑都是可以操作的，整体操作的详细过程将在下方为大家讲解。 …...
三国杀中的概率学问题3——王荣
前言 本文是三国杀中的概率学问题系列文章中的一篇，将详细讨论王荣吉占的期望摸牌数问题。并加上连续情形作为拓展。 值得说明的是，本文的思路受到了一篇文章的启发，在此特别鸣谢，这是文章的链接。 王荣吉占的期望摸牌数 王荣的…...
Linux - 实现一个简单的 shell
前言 之前我们对进程的替换，进程地址空间等等的概念进行了说明，本篇博客会基于这些知识点来 实现一个简单的 shell ，如有疑问，可以参考下述博客：Linux - 进程程序替换 - C/C 如何实现与各个语言之间的相互调用 - 替换…...
不同优化器的应用
简单用用，优化器具体参考 深度学习中的优化器原理(SGD,SGDMomentum,Adagrad,RMSProp,Adam)_哔哩哔哩_bilibili 收藏版｜史上最全机器学习优化器Optimizer汇总 - 知乎 (zhihu.com) import numpy as np import matplotlib.pyplot as plt import torch # …...
学习网络编程No.9【应用层协议之HTTPS】
引言： 北京时间：2023/10/29/7:34，好久没有在周末早起了，该有的困意一点不少。伴随着学习内容的深入，知识点越来越多，并且对于爱好刨根问底的我来说，需要了解的知识就像一座大山，压得…...
PSP - 蛋白质复合物结构预测 Template Pair 特征 Mask 可视化
欢迎关注我的CSDN：https://spike.blog.csdn.net/ 本文地址：https://spike.blog.csdn.net/article/details/134333419 在蛋白质复合物结构预测中，在 TemplatePairEmbedderMultimer 层中 ，构建 Template Pair 特征的源码，…...
RK3568开发笔记-amixer开机设置音量异常
目录 前言 一、amixer介绍 1. 显示音频设备信息 2. 显示音量信息...
STM32两轮平衡小车原理详解（开源）
一、引言 关于STM32两轮平衡车的设计，我想在读者阅读本文之前应该已经有所了解，所以本文的重点是代码的分享和分析。至于具体的原理，我觉得读者不必阅读长篇大论的文章，只需按照本文分享的代码自己亲手制作一辆平衡车，…...
区间内的真素数问题（C#）
题目：区间内的真素数 找出正整数 M 和 N 之间（N 不⼩于 M）的所有真素数。真素数的定义：如果⼀个正整数P 为素数，且其反序也为素数，那么 P 就为真素数。例如，11，13 均为真素数&#…...
eclipse安装lombok插件
lombok插件下载:Download 下载完成，lombok.jar放到eclipse根目录，双击jar运行 运行界面，点击Install安装。 安装完成，重启IDE，rebuild 项目。 rebuild 项目...
故障演练 | 微服务架构下如何做好故障演练
前言 微服务架构场景中，应用系统复杂切分散。长期运行时，局部出现故障时不可避免的。如果发生故障时不能进行有效反应，系统的可用性将极大地降低。 什么是故障演练 故障演练是指模拟生产环境中可能出现的故障，测试系统或应用在…...
Python爬虫-获取汽车之家车家号
前言 本文是该专栏的第9篇，后面会持续分享python爬虫案例干货，记得关注。 地址：aHR0cHM6Ly9jaGVqaWFoYW8uYXV0b2hvbWUuY29tLmNuL0F1dGhvcnMjcHZhcmVhaWQ9MjgwODEwNA== 需求：获取汽车之家车家号数据 笔者将在正文中介绍详细的思路以及采集方法，废话不多说，跟着笔者直接往…...
No195.精选前端面试题，享受每天的挑战和学习
🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入…...
pytest与testNg自动化框架
一.pytest 1.安装pytest： pip install pytest 2.编写用例 - 收集用例 - 执行用例 - 生成报告 3.pytest如何自动识别用例 识别规则如下： 1、搜索根目录：默认从当前目录中搜集测试用例，即在哪个目录下运行pytest命令，…...
Prompt Tuning、P-Tuning、Prefix Tuning的区别
一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...
mongodb源码分析session执行handleRequest命令find过程
mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程，并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令，把数据流转换成Message，状态转变流程是：State::Created 》 St…...
C++ 求圆面积的程序（Program to find area of a circle）
给定半径r，求圆的面积。圆的面积应精确到小数点后5位。 例子： 输入：r 5 输出：78.53982 解释：由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982，因为我们只保留小数点后 5 位数字。 输…...
涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战
“🤖手搓TuyaAI语音指令 😍秒变表情包大师，让萌系Otto机器人🔥玩出智能新花样！开整！” 🤖 Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制（TuyaAI…...
GC1808高性能24位立体声音频ADC芯片解析
1. 芯片概述 GC1808是一款24位立体声音频模数转换器（ADC），支持8kHz~96kHz采样率，集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器，适用于高保真音频采集场景。 2. 核心特性 高精度：24位分辨率，…...
Java线上CPU飙高问题排查全指南
一、引言 在Java应用的线上运行环境中，CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时，通常会导致应用响应缓慢，甚至服务不可用，严重影响用户体验和业务运行。因此，掌握一套科学有效的CPU飙高问题排查方法&…...
【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案
目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后，迭代器会失效，因为顺序迭代器在内存中是连续存储的，元素删除后，后续元素会前移。 但一些场景中，我们又需要在执行删除操作…...
【实施指南】Android客户端HTTPS双向认证实施指南
🔐 一、所需准备材料 证书文件（6类核心文件） 类型 格式 作用 Android端要求 CA根证书 .crt/.pem 验证服务器/客户端证书合法性 需预置到Android信任库 服务器证书 .crt 服务器身份证明 客户端需持有以验证服务器 客户端证书 .crt 客户端身份…...
基于开源AI智能名片链动2 + 1模式S2B2C商城小程序的沉浸式体验营销研究
摘要：在消费市场竞争日益激烈的当下，传统体验营销方式存在诸多局限。本文聚焦开源AI智能名片链动2 1模式S2B2C商城小程序，探讨其在沉浸式体验营销中的应用。通过对比传统品鉴、工厂参观等初级体验方式，分析沉浸式体验的优势与价值…...
[拓扑优化] 1.概述
常见的拓扑优化方法有：均匀化法、变密度法、渐进结构优化法、水平集法、移动可变形组件法等。 常见的数值计算方法有：有限元法、有限差分法、边界元法、离散元法、无网格法、扩展有限元法、等几何分析等。 将上述数值计算方法与拓扑优化方法结合&#…...