Vue+SpringBoot+Mybatis-plus前后端交互实现登录功能（踩了好多坑！）

阅读量：3948 次

发布时间：2019-05-24

本文共 9505 字，大约阅读时间需要 31 分钟。

Vue+SpringBoot前后端分离之实现简单的登录功能

源码在我码云上:

后端

前端

觉得有帮助的,进去后麻烦帮忙star一下谢谢!!

技术栈

Vue

SpringBoot

Mybatis-plus

Vue前端

这是我的vue前端结构：

一：首先创建Vue项目

在src下创建一个views目录存放vue页面
创建两个页面login.vue和success.vue用来测试

成功后根据具体的业务修改.

我的前端页面代码:
login.vue

这个页面只是用来测试使用

success.vue

主要功能是login.vue中的 表单功能以及登录按钮的对应的login方法

登录表单设计代码:

表单与数据的双向绑定:

data() {
         return {
           // 这是登录表单的数据绑定对象        loginForm: {
             username: '',          password: '',          pwdType: "password",        },        msg: '',        loginFormRules: {
             username: [            {
   required: true, message: '请输入登录账号', trigger: 'blur'},            {
   min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'},          ],          password: [            {
   required: true, message: '请输入登陆密码', trigger: 'blur'},            {
   min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur'},          ]        }      };    },

以及登录按钮对应的login方法

login() {
           this.$refs.loginFormRef.validate(valid => {
             if (valid) {
               this.$axios.post('/admin/login', {
                 username: this.loginForm.username,              password: this.loginForm.password            }).then((response) => {
                 if (response.code === 200) {
                   this.$router.push({
   path: '/success'})              }            }).catch(() => {
                 console.log("用户名或密码错误！");              });          } else {
               console.log("参数验证不合法！");            return false;          }        })      }

这里的代码很好理解,/admin/login就是我请求的后端的路径,{}中的username和password就是要传递给后端的参数

.then((response))中的response就是后端查询之后返回给前端的数据,可以通过response.属性调用各种信息,这里的属性是后端对象中的各种常量可以是各种信息状态码或者是文字信息

用axios实现前后端数据交互

首先下载axios 终端输入

npm install axios

然后建立一个axios目录新建一个index.js文件存放axios的配置

index.js

import axios from 'axios'import {
    Message } from 'element-ui'// axios 配置axios.defaults.timeout = 3000 // 设置超时时间为3s// 配置axios发送请求时携带cookieaxios.defaults.withCredentials = true// 如果为开发环境，将baseURL设置为服务器地址if (process.env.NODE_ENV === 'development') {
     axios.defaults.baseURL = 'http://localhost:8081'}// 设置content-type// 这里处理的是 针对SpringMVC Controller 无法正确获得请求参数的问题axios.interceptors.request.use(  config => {
       config.headers = {
         'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'    }    const data = config.data    if (!data) {
         return config    }    const key = Object.keys(data)    // 重写data，由{"name":"name","password":"password"} 改为 name=name&password=password    config.data = encodeURI(key.map(name => `${
   name}=${
   data[name]}`).join('&'))    // 设置Content-Type    return config  },  error => {
       return Promise.reject(error)  })axios.interceptors.response.use(response => {
     const res = response.data  if (res.code !== 200) {
       Message({
         message: res.message,      type: 'error',      duration: 5 * 1000    })  } else {
       return response.data  }}, error => {
     console.log('err:' + error)  Message({
       message: error.message,    type: 'error',    duration: 5 * 1000  })  return Promise.reject(error)})export default axios

将这里的buseURL修改为自己的服务器地址即可

然后将写好的axios配置文件导入到main.js文件中

添加这两句命令导入

import axios from './axios'

Vue.prototype.$axios = axios

axios差不多就这样

最后配置路由即可

在router目录的index.js中添加下面代码配置路由跳转

index.js

import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export const constantRouterMap = [  //配置默认的路径，默认显示登录页  {
   path: '/', component: () => import('@/views/login')},  //配置登录成功页面，使用时需要使用 path 路径来实现跳转  {
   path: '/success', component: () => import('@/views/success')}]export default new Router({
     routes: constantRouterMap //指定路由列表})

路径也可直接写在export default new Router({})中

SpringBoot java后端代码

创建SpringBoot项目就不多说了

这是我的java后端代码结构:

首先我这是用Mybatis-plus的代码自动生成创建的entity和mapper和service和controller所以调用数据库的方法都已经实现了

前后端分离主要是 Config目录中的类很重要

前后端端口不一样,需要实现跨域请求,跨域功能前端可以实现,后端也可以实现,因为我是做后端的所以我就用后端实现了,前端实现网上也有很多方法,

CorsConfig.java

@Configurationpublic class CorsConfig {
       /**     允许任何域名使用     允许任何头     允许任何方法（post、get等）     */    private CorsConfiguration buildConfig() {
           CorsConfiguration corsConfiguration = new CorsConfiguration();        // // addAllowedOrigin 不能设置为* 因为与 allowCredential 冲突,需要设置为具体前端开发地址        corsConfiguration.addAllowedOrigin("http://localhost:8080");        corsConfiguration.addAllowedHeader("*");        corsConfiguration.addAllowedMethod("*");        // allowCredential 需设置为true        corsConfiguration.setAllowCredentials(true);        return corsConfiguration;    }    @Bean    public CorsFilter corsFilter() {
           UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();        source.registerCorsConfiguration("/**", buildConfig());        return new CorsFilter(source);    }}

只需要添加这个类就可以实现跨域操作了

创建返回给前端的数据

这三个类是为了响应前端的 response中的对象

在这里插入图片描述

RestResult.java

public class RestResult {
       //状态码    private int code;    //消息    private String message;    //额外的内容    private Object data;    public RestResult(){
       }    public RestResult setCode(ResultCode code) {
           this.code = code.getCode();        return this;    }    public int getCode() {
           return code;    }    public RestResult setCode(int code) {
           this.code = code;        return this;    }    public String getMessage() {
           return message;    }    public RestResult setMessage(String message) {
           this.message = message;        return this;    }    public Object getData() {
           return data;    }    public RestResult setData(Object data) {
           this.data = data;        return this;    }}

这个类是登录方法的返回值类型

ResultCode.java

public enum ResultCode {
       SUCCESS(200),//成功    FAIL(400),//失败    UNAUTHORIZED(401),//未认证（签名错误）    NOT_FOUND(404),//接口不存在    INTERNAL_SERVER_ERROR(500);//服务器内部错误    private int code;    private ResultCode(int code) {
           this.code = code;    }    public int getCode() {
           return this.code;    }}

ResultGenerator.java

@Componentpublic class ResultGenerator {
       private static final String SUCCESS = "success";    //成功    public RestResult getSuccessResult() {
           return new RestResult()                .setCode(ResultCode.SUCCESS)                .setMessage(SUCCESS);    }    //成功，附带额外数据    public  RestResult getSuccessResult(Object data) {
           return new RestResult()                .setCode(ResultCode.SUCCESS)                .setMessage(SUCCESS)                .setData(data);    }    //成功，自定义消息及数据    public  RestResult getSuccessResult(String message,Object data) {
           return new RestResult()                .setCode(ResultCode.SUCCESS)                .setMessage(message)                .setData(data);    }    //失败，附带消息    public  RestResult getFailResult(String message) {
           return new RestResult()                .setCode(ResultCode.FAIL)                .setMessage(message);    }    //失败，自定义消息及数据    public RestResult getFailResult(String message, Object data) {
           return new RestResult()                .setCode(ResultCode.FAIL)                .setMessage(message)                .setData(data);    }    //自定义创建    public RestResult getFreeResult(ResultCode code, String message, Object data) {
           return new RestResult()                .setCode(code)                .setMessage(message)                .setData(data);    }}

这个类是为了控制层直接调用的方法

最后是LoginController.java

@RestController@RequestMapping("/admin")public class LoginController {
       @Autowired    private TbAdminService tbAdminService;    @Autowired    private ResultGenerator generator;    @PostMapping(value = "/login")    public RestResult login(String username, String password) {
           QueryWrapper
   
     wrapper = new QueryWrapper<>();        wrapper.eq("username", username);        TbAdmin one = tbAdminService.getOne(wrapper);        if (null != username && null != password) {
               if (one.getUsername().equalsIgnoreCase(username)) {
                   if (one.getPassword().equalsIgnoreCase(password)) {
                      return generator.getSuccessResult();                } else {
                      return generator.getFailResult("用户名或密码错误");                }            } else {
                   return generator.getFailResult("用户名或密码错误");            }        } else {
               return generator.getFailResult("用户名或密码错误");        }    }}

@RestController是@Controller和@ResponseBody的结合简化注解

因为我用的是Mybatis-plus的代码自动生成所以直接调用service层直接就有方法TbAdminService,不用自己写

ResultGenerator是用来返回结果的.

代码自动生成的方法使用需要用到wrapper

所以用到

QueryWrapper
   
     wrapper = new QueryWrapper<>();       wrapper.eq("username", username);       TbAdmin one = tbAdminService.getOne(wrapper);

将查询的结果放到TbAdmin实体类中然后进行判断,返回RestResult

最后展示结果:

我后台账号admin密码123456

输入正确

跳转成功页面

密码输入错误

在这里插入图片描述

到此就实现了一个简单的前后端分离的登录功能

我做的不完善之后改进应该加上Token进行验证的

看到最后的帮忙

点个赞👍🙏 谢谢,这个对我真的很重要！

转载地址：http://eqqwi.baihongyu.com/

你可能感兴趣的文章

boost学习-3.conversion，多态类型之间的安全转型，与数据类型转换

转：NoSQL数据库探讨之一－为什么要用非关系数据库？

查看>>

log4cplus的按日生成文件，配置例子

FTP下载类, windows平台下对CFtpConnection上传下载的封装类

查看>>

代码自动生成-宏带来的奇技淫巧

查看>>

VC com开发中实现IObjectSafety

Vue+SpringBoot前后端分离之实现简单的登录功能

技术栈

Vue前端

登录成功！success

用axios实现前后端数据交互

最后配置路由即可

SpringBoot java后端代码

创建返回给前端的数据

看到最后的帮忙