vue+springboot实现登录功能

本文实例为大家分享了vue+springboot实现登录功能的具体代码,供大家参考,具体内容如下

1. 登录功能的实现

实现提交表单的代码如下:

async submitForm(user) {
        this.$refs[user].validate((valid) => {
               if(valid){
                        alert("user");
                        this.$axios.post("http:localhost:8087/user/login?code="+this.code,user).then(res => {
                            alert("success")
                             if(res.data.state){
                                 alert(res.data.msg+"登录成功,即将跳转到主页......");
                             }
                             else{
                                 alert(res.data.msg);
                             }
                        });
                    }
                    else{
                        return false;
           }
   });
},

当头一棒,脑瓜嗡嗡的。

这东西嗡嗡了好几天最终被我用比较愚蠢的代码实现了,具体思路如下:

首先我现在后台获取到当前生成验证码图片的真正验证码,传递到前端:

if (valid) {
        console.log(this.user);
         this.$axios.get("http://localhost:8087/user/getCode").then(res => {
                  let tcode = res.data.toLowerCase();
                  if (tcode == this.code) {
                                verify(this.user);
                            } else {
                                alert('验证码错误!');
                            }
                        });
                    }

中间的verify就是我验证用户登录的用户名和密码的地方,验证码首先生成四位验证码然后转化为base64格式的字符串,最后传递到前端,后端返回字符串的代码。

@GetMapping("/getCode")
    @ApiOperation(value="获取验证码",notes="从后端获取验证码发送到前端")
    public String getCode(HttpServletRequest request){
        String key = (String)request.getServletContext().getAttribute("code");
        log.info("key:[{}]",key);
        return key;
    }

我分析登录模块前端给后端传值不成功的原因是因为前端只有用户名和密码,然后我错认为只有用户名和密码的表单可以组成一个对象导致一直将表单强制转化为对象去传递给后端,这样就一直造成了死循环,在这个问题卡了好久好久。之前也是将用户名密码和验证码传递给后端一直卡在那里。我先从后端获取验证码在前端比较正确与否,然后将用户输入的用户名和密码传递给后端在数据库中查找对应用户名的用户,若可以查找得到则说明此用户存在,否则用户存在。接下来比较用户输入的密码是否和数据库存入的密码一致,如果一致则返回真,登录成功,其他情况都不成功。具体的实现代码如下:

//UserController
 @PostMapping("/login")
    @ApiOperation(value = "登录系统", notes = "登录员工管理系统")
    public Map<String,Object> login(@RequestParam String Name,@RequestParam String Pwd){
        System.out.println(Name+" "+Pwd);
        Map<String,Object> map = new HashMap<>();
        try{
            User userdb = userService.login(Name,Pwd);
            map.put("state",true);
            map.put("msg","登录成功");
            map.put("user",userdb);
        }catch(Exception e){
            e.printStackTrace();
            map.put("state",false);
            map.put("msg",e.getMessage());
        }
        log.info("[{}]",map.toString());
        return map;
    }
//UserServiceImpl
 @Override
    public User login(String Name,String Pwd) {
        User userDB = userMapper.selectByName(Name);
        if(!ObjectUtils.isEmpty(userDB)){
            if(userDB.getPwd().equals(Pwd)){
                return userDB;
            }
            else{
                throw new RuntimeException("密码输入不正确");
            }
        }
        else{
            throw new RuntimeException("用户不存在");
        }
    }
//UserMapper.java
User selectByName(String name);
<!--UserMapper.xml-->
 <select id="selectByName" parameterType="String" resultType="com.sunset.system.entity.User">
        select Id,Name,Age,Sex,Pwd,Dept,Salary
        from user where Name = #{name}
</select>

在编码过程中,还遇到一个小插曲 就是 where Name = “#{name}” 导致在数据库查找中出错,希望看此文章的人能避开这个坑。
这样后端的逻辑就实现完成,下来是前端逻辑:

async function verify(userinfo) {
      const {data: res} = await verifyUser(userinfo);
      console.log(res);
          if (res.state == true) {
               _this.$message({
                 title: "验证成功",
                 message: "欢迎进入员工管理系统",
                  type: "success"
            });
      window.location.href = "http://www.baidu.com";
      //await _this.$router.push("http://www.baidu.com");
       } else {
           _this.$message({
            title: "验证失败",
         message: res.msg,
          type: "error"
       })
       return false;
     }
}

这里使用axios的post请求,具体的路径在projectName.src.api 新建一个user.js的文件

export  const verifyUser = (user) =>{
    return request({
        url: "/user/login",
        method: 'post',
        params: {
            Name: user.Name,
            Pwd: user.Pwd
        }
    })
}

此外还需要配置request.js,文件路径 projectName.src.utils

import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://localhost:8080', //后端项目的端口
  timeout: 10000,
  headers: {'X-Custom-Header': 'foobar'}
});

export default instance;

要是有其他逻辑问题,欢迎讨论交流。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Vue+SpringBoot前后端分离中的跨域问题

    在前后端分离开发中,需要前端调用后端api并进行内容显示,如果前后端开发都在一台主机上,则会由于浏览器的同源策略限制,出现跨域问题(协议.域名.端口号不同等),导致不能正常调用api接口,给开发带来不便. 封装api请求 import axios from 'axios' //axios.create创建一个axios实例,并对该实例编写配置,后续所有通过实例发送的请求都受当前配置约束 const $http = axios.create({ baseURL: '', timeout: 1000

  • SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建过程(后端)

    数据库准备 data_test.sql: /* SQLyog Enterprise v12.08 (64 bit) MySQL - 5.7.31 : Database - data_test ********************************************************************* */ /*!40101 SET NAMES utf8 */; /*!40101 SET SQL_MODE=''*/; /*!40014 SET @OLD_UNIQUE_

  • 基于springboot+vue实现垃圾分类管理系统

    本文实例为大家分享了springboot+vue实现垃圾分类管理系统的具体代码,供大家参考,具体内容如下 一.项目概述 1.项目内容 本项目利用IDEA,Visual Studio Code 开发工具,借助Mysql,Navicat for MySQL 工具,实现了一个基于springboot+vue的垃圾分类管理系统.系统为两种类型的用户提供服务,用户和管理员. 2.实现功能 (1)登陆功能 通过和数据库建立联系后,数据库内的用户和管理员可在登录页面输入账号和密码登陆网页. (2)数据的增.查

  • springboot+vue制作后台管理系统项目

    目录 一.所使用的环境配置: 二.项目简介 三.知识点总结(代码和配置) SpringBoot: 1.Mybatis-Plus配置文件,实现分页查询:MybatisPlusConfig 2.跨域配置文件:CorsConfig 3.请求返回类!:Result 4.pom.xml配置文件 Vue: 其余知识点总结: 总结: 学习资源来自于B站UP,up他讲的非常详细,对于熟悉两大框架很有用. 我的作业源代码在文章末尾,欢迎有需要的同学,学习参考使用,内置SQL文件,导入后,开启springboot和

  • SpringBoot+VUE实现数据表格的实战

    目录 前言 使用的开发工具: 一.前端准备 1. 基础界面 2. 导入JS文件 二.后端准备 1. 创建实体类 2. Controller层 3. Service层 4. Mapper层 三.前后端整合 四.运行结果 总结 前言 还记得第一次做项目时,因为不会将数据库表中的数据渲染到前端而头疼,最后还是靠layui提供的数据表格API实现了前端数据表格的渲染.一直到现在做了很多SpringBoot项目.SSM项目之后,现在返回头来看这个曾经这个让我备受折磨的问题,脑海中下意识就会想到很多种解决的

  • springboot+VUE前后端分离实现疫情防疫平台JAVA

    目录 主要模块: 系统主要实现如下: 登录之后进入系统首页:目前系统主要功能如下 用户管理模块:用户添加.修改.删除.查询等基本操作 角色管理模块.通过用户绑定角色.角色控制菜单显示.灵活控制菜单. 前端VUE代码添加菜单 菜单添加修改列表层操作 历史行程数据管理:添加修改删除等操作 用户每日健康打卡列表数据展示以及添加打卡信息 员工出行外出报备管理申请 员工复工申请 管理员审核 通知公告模块: 一些设计报告和文档描述参考 数据库连接: 主要模块: 管理员用户登录:用户登录. 用户信息: 用户信

  • springboot+vue实现验证码功能

    本文实例为大家分享了springboot+vue实现验证码功能的具体代码,供大家参考,具体内容如下 1.工具类 直接用不用改 package com.example.demo.Util; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import javax.imageio.ImageIO; import javax.servlet.http.HttpServletRequest; import javax.servlet.ht

  • SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建过程(前端篇)

    后端篇 SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建[后端篇][快速生成后端代码.封装结果集.增删改查.模糊查找][毕设基础框架] 前端篇 创建vue项目 1.找个文件夹进入命令行,输入:vue create vue-front 2.直接回车,等待片刻,稍微有点小久 3.根据提示指令测试 打开浏览器输入:http://localhost:8080/ 安装所需工具 安装的工具会有点多,为了提供更好的拓展性,可以自主选择安装(不建议),后面的代码中都是使用到了,不安装

  • vue+springboot实现登录功能

    本文实例为大家分享了vue+springboot实现登录功能的具体代码,供大家参考,具体内容如下 1. 登录功能的实现 实现提交表单的代码如下: async submitForm(user) { this.$refs[user].validate((valid) => { if(valid){ alert("user"); this.$axios.post("http:localhost:8087/user/login?code="+this.code,use

  • vue+springboot实现登录验证码

    本文实例为大家分享了vue+springboot实现登录验证码的具体代码,供大家参考,具体内容如下 先看效果图 在login页面添加验证码html 在后端pom文件添加kaptcha依赖 <dependency> <groupId>com.github.penggle</groupId> <artifactId>kaptcha</artifactId> <version>2.3.2</version> </depen

  • VUE+SpringBoot实现分页功能

    本文主要介绍一下 Vue + SpringBoot 中如何实现一个分页列表数据. 1.效果展示 2.VUE代码 VUE之视图定义 <el-row> <el-table :data="tableData" style="width: 100%"> <el-table-column v-for="(data,index) in tableHeader" :key="index" :prop="

  • Vue+Vux实现登录功能

    一.准备工作 请参照 Vue前端框架搭建使用模板创建框架. 二.创建登录页 1.main.js 中引入全局 ToastPlugin.LoadingPlugin 插件 import { ToastPlugin, LoadingPlugin } from 'vux' Vue.use(ToastPlugin) Vue.use(LoadingPlugin) 2.views 下创建 login\login.vue import Vue from 'vue' import Router from 'vue-

  • springboot+vue实现登录功能

    本文实例为大家分享了springboot+vue实现登录功能的具体代码,供大家参考,具体内容如下 目录结构 前端端口:8080 后端端口:8900 login.vue <template> <div class="login_content"> <!-- 登录块 --> <div class="login_box"> <!-- 头像 --> <div class="avatar_box&qu

  • springboot+vue实现登录功能的最新方法整理

    目录 一.介绍 二.环境工具 三.搭建后端spring-boot框架 1.选择Spring Initializr创建新项目 2.CommonResult类 3.IErrorCode 接口 4.ResultCode 枚举 5.User类 6.LoginController类 7.修改DemoApplication 8.更改端口号在application.yml 9.不同端口需要解决跨域问题 四.搭建前端Vue框架 1.创建Vue项目 2.添加项目依赖框架 2.1 使用Vue项目管理器添加依赖 2.

  • vue+springboot+shiro+jwt实现登录功能

    目录 1.导入依赖 2.JWTToken 替换 Shiro 原生 Token 3.JWT token 工具类,提供JWT生成.校验.获取token存储的信息 4.JWTFilter请求拦截 5.登录授权realm 6.shiro配置 7.登录web端 8.异常处理 9.缓存调用登录接口传过来的token 10.请求头设置,带上token 11.生产环境nginx配置 公司开发的系统原先的用户信息是基于shiro session 进行管理,但是session不适用于app端,并且服务器重启后需要重

  • vue+springboot前后端分离实现单点登录跨域问题解决方法

    最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot的.因为后台系统没有登录功能,但是公司要求统一登录,登录认证统一使用.net项目组的认证系统.那就意味着做单点登录咯,至于不知道什么是单点登录的同学,建议去找一下万能的度娘. 刚接到这个需求的时候,老夫心里便不屑的认为:区区登录何足挂齿,但是,开发的过程狠狠的打了我一巴掌(火辣辣的一巴掌)...,所以这次必须得好好记录一下这次教训,以免以后再踩这样的坑. 我面临的第一个问题是跨域,浏览器控制台直接报CORS,

  • SpringBoot+Vue实现数据添加功能

    一.添加代码生成器 用来自动为数据库映射类建立:mapper.service.controller 注:代码生成器的写法,参考官方文档:https://mp.baomidou.com/ package com.hanmh.utils; import com.baomidou.mybatisplus.core.toolkit.StringPool; import com.baomidou.mybatisplus.generator.AutoGenerator; import com.baomido

  • Vue中设置登录验证拦截功能的思路详解

    目录 一.解决思路 二.让浏览器存储服务器返回的token 三.在请求中设置访问权限 四.封装登录验证 Hello,你好呀,我是灰小猿,一个超会写bug的程序猿! 今天在做vue和springboot交互的一个项目的时候,想要基于前端实现一些只有登录验证之后才能访问某些页面的操作,所以在这里总结一下实现该功能的一个解决方案, 首先说一下我是如何判断是否已经登录的, 一.解决思路 由于在我的springboot后台采用的shiro+Jwt安全框架,所以会在登录之后反馈给前端一个token,并且前端

随机推荐