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

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

    浏览器访问的效果如图 :

    后端的代码如下

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

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

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

      1)前端 : F12 看控制台

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

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

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

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

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

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

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

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

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

    用户登录

    前端代码如下

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <title>登录页面title>
    7. head>
    8.  
    9. <body>
    10.   <h1>用户登录h1>
    11.   用户名：<input name="userName" type="text" id="userName"><br>
    12.   密码：<input name="password" type="password" id="password"><br>
    13.   <input type="button" value="登录" onclick="login()">
    14.   
    15.   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js">script>
    16.   <script>
    17.     function login() {
    18.     }
    19.   script>
    20. body>
    21. html>
    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport"
    7.         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    8.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    9.     <title>用户登录首页title>
    10. head>
    11.  
    12. <body>
    13.     登录人: <span id="loginUser">span>
    14.  
    15.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js">script>
    16.     <script>
    17.         
    18.     script>
    19. body>
    20.  
    21. html>

    上述 html 访问效果如下

    后端代码如下:

    1. package com.example.demo1.controller;
    2.  
    3. import org.springframework.util.StringUtils;
    4. import org.springframework.web.bind.annotation.RequestMapping;
    5. import org.springframework.web.bind.annotation.RestController;
    6.  
    7. import javax.servlet.http.HttpServletRequest;
    8. import javax.servlet.http.HttpSession;
    9.  
    10. @RequestMapping("/user")
    11. @RestController
    12. public class UserController {
    13.     @RequestMapping("/login")
    14.     public Boolean login(String userName, String password, HttpSession session){
    15.         //校验参数的合法性
    16.        // if (userName==null||userName.length()==0||password==null||password.length()==0){
    17.        //     return false;
    18.        // }
    19.         if (!StringUtils.hasLength(userName)||!StringUtils.hasLength(password)){
    20.             return false;
    21.         }
    22.         //进行用户名和密码的校验
    23.         if ("aaa".equals(userName)&&"aaa".equals(password)){
    24.             session.setAttribute("username","aaa");
    25.             return true;
    26.         }
    27.         return false;
    28.     }
    29.     @RequestMapping("/getUserInfo")
    30.     public String getUserInfo(HttpServletRequest request){
    31.         //从Session 获取登录用户
    32.         HttpSession session = request.getSession(false);
    33.         String userName = null;
    34.         if (session!=null) {
    35.             userName = (String) session.getAttribute("username");
    36.         }
    37.         return userName;
    38.     }
    39. }

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

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

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

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <title>登录页面title>
    7. head>
    8.  
    9. <body>
    10.   <h1>用户登录h1>
    11.   用户名：<input name="userName" type="text" id="userName"><br>
    12.   密码：<input name="password" type="password" id="password"><br>
    13.   <input type="button" value="登录" onclick="login()">
    14.   
    15.   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js">script>
    16.   <script>
    17.     function login() {
    18.       $.ajax({
    19.         url:"/user/login",
    20.         type:"post",
    21.         data:{
    22.           "userName":$("#userName").val(),
    23.           "password":$("#password").val()
    24.         },
    25.         success:function(result){
    26.           if(result){
    27.             location.href="/index.html";
    28.           }else{
    29.             alert("密码错误");
    30.           }
    31.         }
    32.       })
    33.     }
    34.   script>
    35. body>
    36. html>
    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport"
    7.         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    8.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    9.     <title>用户登录首页title>
    10. head>
    11.  
    12. <body>
    13.     登录人: <span id="loginUser">span>
    14.  
    15.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js">script>
    16.     <script>
    17.         //页面加载时,就去调用后端请求
    18.         $.ajax({
    19.             url:"/user/getUserInfo",
    20.             type:"get",
    21.             success:function(username){
    22.                 $("#loginUser").text(username);
    23.             }
    24.         })
    25.     script>
    26. body>
    27. html>

    成功

  • 相关阅读:
    【Spring】Bean 的作用域
    MyBatis 的注解实现方法整合(完成数据的增删改查操作)
    chmod的用法，及几个权限的宏
    Linux——操作指令（ls，cd，touch，mkdir，tree，pwd，rm，man，cp）
    一分钟秒懂人工智能对齐
    Context
    MySQL是如何实现事务的隔离级别
    uniapp页面通讯-uni.$emit、uni.$on、uni.$once、uni.$off
    月影下的时光机：Python中的日期、时间、农历、节气和时区探秘
    HTML5期末考核大作业，网站——旅游景点。 学生旅行 游玩 主题住宿网页
  • 原文地址：https://blog.csdn.net/qq_40841463/article/details/134350791