前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Spring MVC 框架学习(七)---- 后端接口小练习(计算器与登陆拦截)

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

作者头像
RAIN7
发布2022-08-23 15:48:57
9380
发布2022-08-23 15:48:57
举报

文章目录

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

一、计算器

前端代码

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</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>

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

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

代码语言:javascript
复制
    @RequestMapping("/calc")
    @ResponseBody
    public String getResult(Integer num1,Integer num2){
        return "<h1>两数之和为:"+(num1+num2)+"<h1>";
    }

最终效果

在这里插入图片描述
在这里插入图片描述

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

在这里插入图片描述
在这里插入图片描述

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

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

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

代码语言:javascript
复制
<!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">
        <!-- logo -->
        <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>

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

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是首页</title>
</head>
<body>

<h1> Hello Spring MVC!</h1>

</body>
</html>

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

代码语言:javascript
复制
   @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;
    }

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

代码语言:javascript
复制
 @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";
        }
    }

效果演示:

进入登陆界面

在这里插入图片描述
在这里插入图片描述

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

在这里插入图片描述
在这里插入图片描述

未输入密码

在这里插入图片描述
在这里插入图片描述

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

在这里插入图片描述
在这里插入图片描述

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

在这里插入图片描述
在这里插入图片描述

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-07-28,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 文章目录
  • Spring MVC 框架学习(七)---- 后端接口小练习(计算器与登陆拦截)
  • 一、计算器
  • 二、前后端交互的登陆与拦截
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档