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命令，…...
论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）
HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...
《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》
在注意力分散、内容高度同质化的时代，情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现，消费者对内容的“有感”程度，正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中࿰…...
微信小程序 - 手机震动
一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注：文档 https://developers.weixin.qq…...
第25节 Node.js 断言测试
Node.js的assert模块主要用于编写程序的单元测试时使用，通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试，通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...
Nginx server_name 配置说明
Nginx 是一个高性能的反向代理和负载均衡服务器，其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机（Virtual Host）。 1. 简介 Nginx 使用 server_name 指令来确定…...
IT供电系统绝缘监测及故障定位解决方案
随着新能源的快速发展，光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域，IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选，但在长期运行中，例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...
【JavaWeb】Docker项目部署
引言 之前学习了Linux操作系统的常见命令，在Linux上安装软件，以及如何在Linux上部署一个单体项目，大多数同学都会有相同的感受，那就是麻烦。 核心体现在三点： 命令太多了，记不住 软件安装包名字复杂&…...
重启Eureka集群中的节点，对已经注册的服务有什么影响
先看答案，如果正确地操作，重启Eureka集群中的节点，对已经注册的服务影响非常小，甚至可以做到无感知。 但如果操作不当，可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...
处理vxe-table 表尾数据是单独一个接口，表格tableData数据更新后，需要点击两下，表尾才是正确的
修改bug思路： 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑：async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...
Netty从入门到进阶（二）
二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架，用于…...