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命令，…...
铭豹扩展坞 USB转网口 突然无法识别解决方法
当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...
在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能
下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能，包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...
基础测试工具使用经验
背景 vtune，perf, nsight system等基础测试工具，都是用过的，但是没有记录，都逐渐忘了。所以写这篇博客总结记录一下，只要以后发现新的用法，就记得来编辑补充一下 perf 比较基础的用法： 先改这…...
Mac软件卸载指南，简单易懂！
刚和Adobe分手，它却总在Library里给你写"回忆录"？卸载的Final Cut Pro像电子幽灵般阴魂不散？总是会有残留文件，别慌！这份Mac软件卸载指南，将用最硬核的方式教你"数字分手术"࿰…...
新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案
随着新能源汽车的快速普及，充电桩作为核心配套设施，其安全性与可靠性备受关注。然而，在高温、高负荷运行环境下，充电桩的散热问题与消防安全隐患日益凸显，成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...
土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等
🔍 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术，可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势，还能有效评价重大生态工程…...
关于 WASM：1. WASM 基础原理
一、WASM 简介 1.1 WebAssembly 是什么？ WebAssembly（WASM） 是一种能在现代浏览器中高效运行的二进制指令格式，它不是传统的编程语言，而是一种 低级字节码格式，可由高级语言（如 C、C、Rust&am…...
全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec？ IPsec VPN 5.1 IPsec传输模式（Transport Mode） 5.2 IPsec隧道模式（Tunne…...
DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”
目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...
基于matlab策略迭代和值迭代法的动态规划
经典的基于策略迭代和值迭代法的动态规划matlab代码，实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...