• Spring MVC 框架学习（七）---- 后端接口小练习（计算器与登陆拦截）

    文章目录

    Spring MVC 框架学习（七）---- 后端接口小练习（计算器与登陆拦截）


    一、计算器


    前端代码

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
head>
<body>

<form action="http://localhost:8080/a/calc" >
  数字1：<input type="number" name="num1" >
  数字2：<input type="number" name="num2" >
  
  <input type="submit" value="计算数字之和">

form>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    form表单 action 提交到 calc的接口下，进行处理

    通过 进行传参，name作为key值，后端根据name进行接收参数


        @RequestMapping("/calc")
    @ResponseBody
    public String getResult(Integer num1,Integer num2){
        return "
    两数之和为："+(num1+num2)+"
    ";
    }

    • 1
    • 2
    • 3
    • 4
    • 5

    最终效果


    在这里插入图片描述


    点击计算按钮，form表单将输入的值作为参数进行传参


    在这里插入图片描述


    二、前后端交互的登陆与拦截


      这里参时不涉及到数据库的操作，只要输入的用户账号以及密码为 admin即可显示登陆成功，进入一个主页“hello word”


    /static/login.html ， 显示登录页并发送ajax请求，传递输入的 username、password


    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/login.css">
head>
<body>
    
    <div class="nav">
        
        <img src="image/logo2.jpg" alt="">
        
        <span class="title">我的系统span>
        
        <span class="spacer">span>
        
        <a href="index.html">主页a>
    div> 

    
    <div class="login-container">
        <div class="login-dialog">
            
            <h3>登录h3>
            
            <div class="row">
                <span>用户名span>
                <input type="text" id="username">
            div>
            
            <div class="row">
                <span>密码span>
                <input type="password" id="password">
            div>
            
            <div class="row submit-row">
                <button id="submit" onclick="myfunc()">提 交button>
            div>
        div>
    div>
body>


<script>
    function myfunc(){
          //1.拿到输入的用户名和密码控件
            var username=jQuery("#username");
            var password=jQuery("#password");

         //2.进行非空校验
         if(username.val()===""){
             alert("请先输入用户名!");
             username.focus();  // 光标归位
             return;
         }

         if(password.val()===""){
             alert("请输入密码!");
             password.focus();
             return;
         }

        //3.发起ajax请求，与后端进行交互

        $.ajax({
                url : '/a/login',
                method : 'GET',
                data : {"username": username.val(), "password": password.val()},
                success : function (data) {

                    if (data == null) {
                        alert("访问接口失败!")
                    }

                    if (data.succ === -1) {
                        alert(data.msg);
                    }

                    if (data.succ === 1) {
                        alert("登陆成功!");
                        location.href = 'http://localhost:8080/a/index';
                    }

                }
            }
        )
    }

script>

<script src="js/jquery.min.js">script>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97

      登陆成功显示的主页 index.html，只是作为一个展示页，要通过/index接口才能重定向到这个页面，重定向之前要获取session查看是否登陆


    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是首页title>
head>
<body>

<h1> Hello Spring MVC!h1>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

      /login 登陆处理的接口，返回 status (响应状态码)、succ（登陆状态码）、msg（响应的信息），同时对username、password进行校验以及匹配，如果匹配成功 设置session


       @GetMapping("/login")
    @ResponseBody
    public Object getLogin(HttpServletRequest request,String username,String password){
        System.out.println("进入接口！");
        HttpSession session = request.getSession(true);

       String msg="";
       int status=200;  // 响应码 如果为200说明访问后端接口成功
       int succ=-1;  // 登陆状态码 ，如果为-1说明登陆失败

        HashMap<String ,Object> map = new HashMap<>();

       if(username!=null && password!=null && username.equals("admin") && password.equals("admin")){
           System.out.println("执行了用户名密码匹配的判断!");
           succ=1;
           msg="登陆成功!";

           User user = new User();
           user.setUsername(username);
           user.setPassword(password);
           session.setAttribute("user",user);

       }else{
           msg="用户名或者密码错误";
       }

       map.put("status",status);
       map.put("succ",succ);
       map.put("msg",msg);

       return map;
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32

      如果登陆正常，前端接收到data.success==1，那么跳转到 /index 接口，判断session是否存在，如果存在那么重定向到 首页、如果不存在 重定向到 login 登录页


     @RequestMapping("/index")
    public String  index(@SessionAttribute(value = "user",required=false) User user){
        if(user==null){
            // 说明未登录状态
            return "redirect:/static/login.html";
        }else{
            return "redirect:/static/index.html";
        }
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    效果演示：


    进入登陆界面


    在这里插入图片描述


    前端的非空提示：未输入用户名


    在这里插入图片描述


    未输入密码


    在这里插入图片描述


    用户名和密码都输入了，匹配是否成功


    在这里插入图片描述


    匹配成功，进入/index,经过session校验后进入 首页


    在这里插入图片描述


    如果没有登陆，获取不到session，直接点击主页，是会重定向到 登陆界面的。

  • 相关阅读:
    Python分析并绘制可视化动态地图，实时查询全球疫情数据（11月最新...）
    MySQL笔记（九）：存储引擎
    分布式ID选型对比（2）
    Leetcode64. 最小路径和
    掌动智能：替代JMeter的压力测试工具有哪些
    产品经理常用的工具有哪些？
    导出conda某个环境配置，并再另一台机器安装
    MySQL运维6-Mycat分库分表之垂直分库
    .Net（C#）常用转换byte转uint32、byte转float等
    【python百炼成魔】Python循环语句：嵌套循环
  • 原文地址：https://blog.csdn.net/rain67/article/details/125532355