vue配合springboot实现验证码操作用户登录

最新推荐文章于 2024-07-12 08:18:26 发布

满世繁华

最新推荐文章于 2024-07-12 08:18:26 发布

阅读量3.7k

点赞数 1

分类专栏： springboot 文章标签： jQuery Java springboot

本文链接：https://blog.csdn.net/qq_34037264/article/details/102837523

版权

本文介绍如何在Vue前端与SpringBoot后端配合，实现用户登录时的验证码操作。通过Vue组件处理用户点击刷新验证码的逻辑，结合jQuery进行交互，后端提供获取验证码的接口，并在登录时验证用户名、密码及验证码的正确性。

摘要由CSDN通过智能技术生成

首先自己导入Vue和jQuery等需要的包，这里我就不放图了。

工具类由于过长我放在文章的最后

在html写入基本请求验证码

 <input type="text"  name="yzm" placeholder="填写右侧的验证码" data-validate="required:请填写右侧的验证码" v-model="yzm" />
 <img src="/in/getImage" alt="" width="100" height="32" class="passcode" style="height:43px;cursor:pointer;" onclick="this.src=this.src+'?'">

src="/in/getImage"

代码的意思是通过路径请求验证码

οnclick="this.src=this.src+'?'"

这句代码的意思主要是通过点击事件去请求重新获取验证码

因为这是一个项目的代码片段所以我这把返回登录的控制器代码附上

    @RequestMapping("login")
    public String login(Model model,HttpServletRequest request){
        return "/news/login";
    }

下面附上Vue的代码实例

我这里还有传的参数用来判断用户名是否登录成功的

    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                uname:"",
                pwd:"",
                yzm:""
            },
            methods:{
                login:function () {
                    $.post("/in/doLogin",{uname:this.uname,pwd:this.pwd,yzm:this.yzm},function (data) {
                        if (data.info==1){
                            alert(data.success);
                            window.location.href="/in/index";
                        } else {
                            alert(data.success);
                        }
                    });
                },//login
            },
        });
    </script>

这一步应该就到了去获取验证码的代码了，同时我们应该给赋值上session

    /**
     * 生成验证码
     * @param request
     * @param response
     * @throws IOException
     */
    @RequestMapping("getImage")
    public void authImage(HttpServletRequest request, HttpServletResponse response) throws IOException {
        response.setHeader("Pragma", "No-cache");
        response.setHeader("Cache-Control", "no-cache");
        response.setDateHeader("Expires", 0);
        response.setContentType("image/jpeg");