实战11:SpringBoot和Vue实现登录、注册和异常处理

最新推荐文章于 2024-06-20 17:04:37 发布
最新推荐文章于 2024-06-20 17:04:37 发布
阅读量1k 收藏 17
点赞数 11
分类专栏： 权限后台系统I 文章标签： spring boot vue.js java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shieryue_2016/article/details/134901678
版权

目录

一、异常统一处理类

1、Result包装类

2、系统异常统一处理

二、SpringBoot实现登录、注册、个人信息

三、Vue实现登录、注册、个人信息

1、登录： 登录方法 、表单数据校验、登录表单、跳转注册

2、注册：页面布局、表单数据校验 、注册 、返回登录

3、个人信息：卡片和表单 、localStorage存储登录用户全局用户数据 、根据用户名称获取用户数据 、修改用户数据

4、路由配置

5、用户全局状态

一、异常统一处理类

1、Result包装类

package com.example.demo.common;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;


/*
接口统一返回包装类
 */
@Data
@NoArgsConstructor
@AllArgsConstructor
public class Result {
    private String code;
    private String msg;
    private Object data;

    public static Result success() {
        return new Result(Constants.CODE_200, "", null);
    }

    public static Result success(Object data) {
        return new Result(Constants.CODE_200, "", data);
    }

    public static Result error(String code, String msg) {
        return new Result(code, msg, null);
    }

    public static Result error() {
        return new Result(Constants.CODE_500, "系统错误", null);
    }

}

2、系统异常统一处理

1）业务异常类

package com.example.demo.exception;

import lombok.Getter;

/**
 * 自定义异常
 */
@Getter
public class ServiceException extends RuntimeException {
    private String code;

    public ServiceException(String code, String msg) {
        super(msg);
        this.code = code;
    }
}

2）统一异常处理

package com.example.demo.exception;


import com.example.demo.common.Result;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestControllerAdvice;

import javax.xml.ws.Response;

@RestControllerAdvice
public class GlobleExceptionHandler {
    @ResponseBody
    @ExceptionHandler(ServiceException.class)
    public Result handle(ServiceException se){
        return Result.error(se.getCode(),se.getMessage());

    }

}

接口常量

package com.example.demo.common;

public interface Constants {
    String CODE_200 = "200";
    String CODE_401 = "401";//权限不足    
    String CODE_400 = "400";//参数错误    
    String CODE_500 = "500";
    String CODE_600 = "600";
}

二、SpringBoot实现登录、注册、个人信息


@PostMapping("/login")
public Result login(@RequestBody UserDto userDto){
    String username = userDto.getUsername();
    String password = userDto.getPassword();
    if (StrUtil.isBlank(username)||StrUtil.isBlank(password)){
        return Result.error(Constants.CODE_400,"参数错误");
    }
    return Result.success(userService.login(userDto));
}

public Result register(@RequestBody UserDto userDto) {
    String username = userDto.getUsername();
    String password = userDto.getPassword();

    if (StrUtil.isBlank(username)||StrUtil.isBlank(password)){
        return Result.error(Constants.CODE_400,"参数错误");
    }
    return Result.success(userService.register(userDto));
}

@GetMapping("/username/{username}")
public Result findOne(@PathVariable String username){
    QueryWrapper<User> queryWrapper = new QueryWrapper<>();
    queryWrapper.eq("username", username);
    return Result.success(userService.getOne(queryWrapper));
}
package com.example.demo.service.impl;

import cn.hutool.core.bean.BeanUtil;
import cn.hutool.core.stream.StreamUtil;
import cn.hutool.core.util.StrUtil;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.example.demo.common.Constants;
import com.example.demo.dto.UserDto;
import com.example.demo.entity.User;
import com.example.demo.exception.ServiceException;
import com.example.demo.mapper.UserMapper;
import com.example.demo.service.IUserService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * <p>
 * 服务实现类
 * </p>
 *
 * @author cizhu
 * @since 2023-11-12
 */
@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements IUserService {

    @Override
    public UserDto login(UserDto userDto) {
        User one = getUserInfo(userDto);
        if (one != null) {
            BeanUtil.copyProperties(one, userDto, true); //
            return userDto;
        } else {
            throw new ServiceException(Constants.CODE_600, "用户名或密码错误");             //自定义异常
        }
    }

//        List<User> list = list(queryWrapper);
//        return list.size()!=0 ;
//    }


    @Override
    public User register(UserDto userDto) {
        User one = getUserInfo(userDto);
        if (one == null) {
            one = new User();
            BeanUtil.copyProperties(userDto, one, true);
            save(one);
        } else {
            throw new ServiceException(Constants.CODE_600, "用户已存在");
        }

        return one;
    }

    private User getUserInfo(UserDto userDto) {
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("username", userDto.getUsername());
        queryWrapper.eq("password", userDto.getPassword());
        User one;
        try {
            one = getOne(queryWrapper);
        } catch (Exception e) {
            throw new ServiceException(Constants.CODE_500, "系统异常");             //自定义异常
        }
        return one;
    }
}

package com.example.demo.service;

import com.example.demo.dto.UserDto;
import com.example.demo.entity.User;
import com.baomidou.mybatisplus.extension.service.IService;

/**
 * <p>
 *  服务类
 * </p>
 *
 * @author cizhu
 * @since 2023-11-12
 */
public interface IUserService extends IService<User> {

    UserDto login(UserDto userDto);

    User register(UserDto userDto);
}

三、Vue实现登录、注册、个人信息

1、登录： 登录方法 、表单数据校验、登录表单、跳转注册

<template>
  <div class="wrapper">
    <div style="margin: 200px auto;background-color: #fff; width: 350px; padding: 20px; border-radius: 10px;">
      <div style="margin: 20px 0;text-align: center; font-size: 24px;"><b>登录</b></div>
      <el-form :rules="rules" :model="user" ref="userform">
        <el-form-item prop="username">
          <el-input size="medium" style="margin:10px 0" prefix-icon="el-icon-user" v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input size="medium" style="margin:10px 0" prefix-icon="el-icon-lock" show-password
            v-model="user.password"></el-input>
        </el-form-item>
        <el-form-item style="margin: 10px 0; text-align: right">
          <el-button type="primary" size="small" autocomplete="off" @click="login">登录</el-button>
          <el-button type="warning" size="small" autocomplete="off" @click="$router.push('/register')">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Login',
  data() {
    return {
      user: {},
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20个字符', trigger: 'blur' }
        ]
      }
    }
  },

  methods: {
    login() {
      this.$refs['userform'].validate((valid) => {
        if (valid) {
          this.request.post("user/login", this.user).then(res => {
            if (res.code === '200') {
              localStorage.setItem("user",JSON.stringify(res.data))
              this.$router.push("/")
              this.$message.success("登录成功")
            } else {
              this.$message.error(res.msg);
            }
          })
        }
      });
    },
  }
}
</script>
<style>
.wrapper {
  height: 100vh;
  background-image: linear-gradient(to bottom right, #FC4668, #3F5EFB);
  overflow: hidden;
}
</style>

2、注册：页面布局、表单数据校验 、注册 、返回登录

<template>
  <div class="wrapper">
    <div style="margin: 100px auto;background-color: #fff; width: 350px; padding: 20px; border-radius: 10px;height: 400px;">
      <div style="margin: 20px 0;text-align: center; font-size: 24px;"><b>注册</b></div>
      <el-form :rules="rules" :model="user" ref="userform">
        <el-form-item prop="username">
          <el-input placeholder="输入账号" size="medium" style="margin:5px 0" prefix-icon="el-icon-user" v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input placeholder="输入密码" size="medium" style="margin:5px 0" prefix-icon="el-icon-lock" show-password
            v-model="user.password"></el-input>
        </el-form-item>
        <el-form-item prop="confirmPassword">
          <el-input placeholder="输入确认密码" size="medium" style="margin:5px 0" prefix-icon="el-icon-lock" show-password
            v-model="user.confirmPassword"></el-input>
        </el-form-item>
        <el-form-item style="margin: 10px 0; text-align: right">
          <el-button type="primary" size="small" autocomplete="off" @click="register">注册</el-button>
          <el-button type="warning" size="small" autocomplete="off" @click="$router.push('/login')">返回登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Login',
  data() {
    return {
      user: {},
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20个字符', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20个字符', trigger: 'blur' }
        ]
      }
    }
  },

  methods: {
    register() {
      this.$refs['userform'].validate((valid) => {
        if (valid) {
          if (this.user.password!=this.user.confirmPassword) {
            this.$message.error("两次输入密码不一致")
            return false
          } else {
            
          }
          this.request.post("user/register", this.user).then(res => {
            if (res.code === '200') {
              this.$message.success("注册成功")
            } else {
              this.$message.error(res.msg);
            }
          })
        }
      });
    },
  }
}
</script>
<style>
.wrapper {
  height: 100vh;
  background-image: linear-gradient(to bottom right, #FC4668, #3F5EFB);
  overflow: hidden;
}
</style>

3、个人信息：卡片和表单 、localStorage存储登录用户全局用户数据 、根据用户名称获取用户数据 、修改用户数据

<template>
  <el-card style="width: 500px">
    <el-form label-width = "80px" size = "small">
        <el-form-item label="用户名">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="form.nickname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="save">确 定</el-button>
        </el-form-item>
      </el-form>
  </el-card>

</template>
<script>

export default{
  name: "Person",
  data(){
    return{
      form:{},
      user:localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")):{}


    }
  },
  created(){
    this.request.get("/user/username/"+this.user.username).then(res=>{
      if (res.code == '200') {
        this.form =res.data
        
      }

    })

  },
  methods:{
    save() {
        this.request.post("/user", this.form).then(res => {
            if (res.data) {
                this.$message.success("保存成功");
            }else {
                this.$message.error("保存失败");
            }
        });
    },
  }
}
</script>
<style>
</style>

4、路由配置

{
    path: '/',
    name: 'Manage',
    redirect: '/home',
    component: () => import('../views/Manage.vue'),
    children: [
      {path: 'home',name: '首页',component: ()=>import ('../views/Home.vue') },
      {path: 'user',name: '用户管理',component: ()=>import ('../views/User.vue') },
      {path: 'person',name: '个人信息',component: ()=>import ('../views/Person.vue') }
    ]
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import( '../views/Login.vue')
  },
  {
    path: '/register',
    name: 'Register',
    component: () => import( '../views/Register.vue')
  }

5、用户全局状态

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    currentPathName:''
  },
  mutations:{
    setPath(state){
      state.currentPathName= localStorage.getItem("currentPathName")
    }
  }
})
export default store

努力赚钱的阳仔
关注
  • 11
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
springboot+vue实现登录注册功能
abc234ABC的博客
03-07 7367
相当于数据库的添加和查找操作
vue+springboot实现登录功能.rar
03-16
该项目结构完整，代码齐全，配有运行说明文档，前后端分离，主要用到了vue、springboot与Mybatis整合，Mysql数据库，适合初学者使用，通过一个简单的登录实例，了解运行原理。
前后端 springboot+Vue 实现登录注册功能
07-13
第一次做 还是后端错了 大佬勿喷 有不对的请多多指教呀
基于SpringBoot+Vue实现基础登录注册功能模块（超详细）
JYT20031003的博客
05-24 2017
【代码】基于SpringBoot+Vue实现基础登录注册功能模块。
SpringBoot登录认证
最新发布
qq_51773341的博客
06-20 827
什么是会话？在我们日常生活当中，会话指的就是谈话、交谈。在web开发当中，会话指的就是浏览器与服务器之间的一次连接，我们就称为一次会话。在用户打开浏览器第一次访问服务器的时候，这个会话就建立了，直到有任何一方断开连接，此时会话就结束了。在一次会话当中，是可以包含多次请求和响应的。比如：打开了浏览器来访问web服务器上的资源（浏览器不能关闭、服务器不能断开）第1次：访问的是登录的接口，完成登录操作第2次：访问的是部门管理接口，查询所有部门数据第3次：访问的是员工管理接口，查询员工数据。
VUE登录注册页面,完整vue，直接复制
热门推荐
good_good_study5的博客
02-01 1万+
VUE登录注册页面，直接复制全部
微服务系列文章之 Springboot+Vue实现登录注册
Coder_Boy_的博客
08-14 3395
分为三个包，分别为controller，service， dao以及resource目录下的xml文件。User.java （我安装了lombok插件）配置cnpm仓库，下载的时候可以快一些。输入账号密码，实现简单的注册，登录功能。安装node，npm，配置环境变量。创建springBoot项目。修改项目文件，按照如下结构。数据库需要建相应得到表。
springboot+vue实现登录注册，短信注册以及微信扫描登录
m0_47588836的博客
05-09 817
说明：微信扫描登录需要微信注册--要钱，感谢尚硅谷提供的免费接口；短信注册需要阿里云的注册很麻烦并且要短信费，没有接口，所以不打算实现，不过能做出效果。
SpringBoot+Vue实现简单的登录注册功能
无所谓^_^博客
03-09 9183
今天带大家写一个最简单的前后端分离登录系统，方便我们理解前后端分离项目的跨域以及数据传输问题。
Vue+Springboot实现登录注册
qq_43616689的博客
06-19 5615
一、Vue登录注册页面内容 <template> <div id="login" v-loading="loading" element-loading-text="登录中..."> <el-form class="container" :model="loginForm" status-icon :rules="rules" ref="loginForm" v-show="showLogin" label-width="100px"&gt
Springboot+VUE Web开发实践.pdf
11-23
SpringBoot+Vue 开发实践是现代Web应用开发中一种高效且流行的方式，它结合了Java后端的强大功能和Vue.js前端的灵活性。本实践指南旨在为初学者提供一个清晰的路径，了解如何利用这两个框架构建现代化的Web应用程序...
基于Springboot + vue实现的公司日常考勤系统（源码+论文）
05-06
该系统作为一个毕业设计项目，不仅锻炼了学生对Springboot和Vue的实战能力，也提供了实际问题的解决方案。对于学习者而言，这是一个很好的学习案例，能够理解如何将理论知识应用于实际开发，提升解决实际问题的能力...
Vue+Spring Boot简单用户登录(附Demo)
01-21
1 概述 前后端分离的一个简单用户登录 Demo 。 2 技术栈 Vue BootstrapVue Kotlin Spring Boot MyBatis Plus 3 前端 3.1 创建工程 使用 vue-cli 创建，没安装的可以先安装： sudo cnpm install -g vue @vue/cli 查看版本： vue -V 出现版本就安装成功了。 创建初始工程： vue create bvdemo 由于目前 Vue3 还没有发布正式版本，推荐使用 Vue2 ： 等待一段时间构建好了之后会提示进行文件夹并直接运行： cd bvdemo yarn serv
毕设项目：基于springboot+vue开发的宿舍管理系统.zip
10-10
这个项目对于学习SpringBoot和Vue的开发者来说，是一个很好的实战平台，既能加深对两者集成的理解，又能提升实际开发能力。同时，它也为校园的宿舍管理工作提供了数字化解决方案，提高了管理效率，减少了人为错误。...
毕业设计：基于MySql+SpringBoot+vue的职工管理系统设计与实现.zip
10-16
综上所述，这个基于MySql+SpringBoot+Vue的职工管理系统不仅展现了数据库管理、后端开发和前端设计的综合运用，同时也体现了现代企业信息系统设计的先进理念和实践方法，对于学习者来说，这是一个很好的实战项目，有...
springboot+vue实现的简单人事管理系统项目源代码，java课程设计，java简单人事管理系统
02-15
综上所述，此项目涵盖了前后端分离的开发模式，利用SpringBoot的便捷性和Vue.js的灵活性，实现了一个人事管理系统的雏形，为学习者提供了一个实战平台，有助于提升Java和Web开发技能。通过阅读和理解源代码，可以...
vue+springboot 登录注册功能
x-dragon8899的博客
06-01 1万+
一、前端 1、引入element ui npm i element-ui -S 2、在main.js中引入 import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI); 二、后端 1、
springboot结合vue实现登录和注册功能
abfwaaf的博客
04-13 1236
后端程序只是简单的做了将输入的用户名和密码与数据库存放的进行了简单的比对，并将比对成功的用户id存放在了session中，mapper层和service层的代码就不展示了，只放controll-er层的代码。在后台中稍微添加了一点验证，如果注册的用户名已经存在了，则会抛出异常，并将信息返回给前端。先来瞄一眼<template>中的html程序，其中有几个点可以学习。validator后面的validataCode。还有最后一个功能，如何转到注册页面？
SpringBoot+Vue 06--登录注册
AMWICD的博客
04-22 1877
登录
互联网时代的二手车交易系统：SpringBoot+Vue实现
"二手车交易系统的设计与实现是一个基于SpringBoot、SSM（Spring、SpringMVC、MyBatis）和Vue.js技术栈的计算机毕业设计项目。该项目旨在利用现代信息技术优化二手车交易流程，提高信息处理效率，确保信息安全，并...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值