一步步使用SpringBoot实现登录和用户管理功能源码分享

createh53周前 (02-24)技术教程3

前后端分离开发是当今开发的主流。本篇文章从零开始,一步步使用SpringBoot结合Vue来实现日常开发中最常见的登录功能,以及登录之后对用户的管理功能。通过这个例子,可以快速入门SpringBoot+Vue前后端分离的开发。

有需要SpringBoot和Vue实现登录和用户管理功能的转发+关注之后私信我关键字【源码】即可免费获取哦

1、前后端分离简介

在这里首先简单说明一下什么是前后端分离单页式应用前后端分离 的核心思想是前端页面通过 ajax 调用后端的 restuful api 进行数据交互,而 单页面应用(single page web application,SPA),就是只有一个页面,并在用户与应用程序交互时动态更新该页面的 Web 应用程序。

2、示例所用技术简介

简单说明以下本示例中所用到的技术,如图所示:

后端

  • SpringBoot:SpringBoot是当前最流行的Java后端框架。可以简单地看成简化了的、按照约定开发的SSM(H), 大大提升了开发速度。官网地址:https://spring.io/projects/spring-boot
  • MybatisPlus: MyBatis-Plus(简称 MP)是一个 MyBatis的增强工具,在 MyBatis 的基础上只做增强不做改变,为简化开发、提高效率而生。官网地址:https://mybatis.plus/

前端:

  • Vue :Vue 是一套用于构建用户界面的渐进式框架。尽管Vue3已经发布,但是至少一段时间内主流应用还是vue2.x,所以示例里还是采用Vue2.x版本。官网地址:https://cn.vuejs.org/
  • ElementUI: ElementUI 是目前国内最流行的Vue UI框架。组件丰富,样式众多,也比较符合大众审美。虽然一度传出停止维护更新的传闻,但是随着Vue3的发布,官方也Beta了适配Vue3的ElementPlus。官网地址:https://element.eleme.cn/#/zh-CN

数据库:

  • MySQL:MySQL是一个流行的开源关系型数据库。官网地址:https://www.mysql.com/

上面已经简单介绍了本实例用到的技术,在开始本实例之前,最好能对以上技术具备一定程度的掌握。

一、环境准备

1.1、安装Node.js

前端项目使用 veu-cli脚手架,vue-cli需要通过npm安装,是而 npm 是集成在 Node.js 中的,所以第一步我们需要安装 Node.js,访问官网 https://nodejs.org/en/,首页即可下载。

下载完成后运行安装包,一路下一步就行。然后在 cmd 中输入 node -v,检查是否安装成功。

如图,出现了版本号(根据下载时候的版本确定),说明已经安装成功了。同时,npm 包也已经安装成功,可以输入 npm -v 查看版本号

1.2、配置NPM源

NPM原始的源是在国外的服务器上,下载东西比较慢。

可以通过两种方式来提升下载速度。

  • 下载时指定源//本次从淘宝仓库源下载 npm --registry=https://registry.npm.taobao.org install
  • 配置源为淘宝仓库//设置淘宝源 npm config set registry https://registry.npm.taobao.org

也可以安装 cnpm ,但是使用中可能会遇到一些问题。

1.3、安装vue-cli脚手架

使用如下命令安装 vue-cli 脚手架:

Bash
npm install -g vue-cli

注意此种方式安装的是 2.x 版本的 Vue CLI,最新版本需要通过 npm install -g @vue/cli 安装。新版本可以使用图形化界面初始化项目,并加入了项目健康监控等内容。

1.4、VS Code

前端的开发工具采用的当下最流行的前端开发工具 VS code。

下载对应的版本,一步步安装即可。安装之后,初始界面如下:

VS Code安装后,我们一般还需要搜索安装一些所需要的插件辅助开发。安装插件很简单,在搜索面板中查找到后,直接安装即可。

二、项目搭建

2、后端项目搭建

2.1、后端项目创建

后端项目创建如下:

  • 打开Idea, New Project ,选择 Spring Intializr
  • 填入项目的相关信息
  • SpringBoot版本选择了 2.3.8 , 选择了web 和 MySQL驱动依赖
  • 创建完成的项目

2.3.2、数据库创建

数据库设计非常简单,只有一张表。

2.3.3、相关代码

MP提供了代码生成器的功能,可以按模块生成Controller、Service、Mapper、实体类的代码。在数据库表比较多的情况下,能提升开发效率。官网给出了一个Demo,有兴趣的可以自行查看。

  • 实体类
Bash
/**
 * @Author: 三分恶
 * @Date: 2021/1/17
 * @Description: 用户实体类
 **/
@TableName(value = "user")
public class User {
    @TableId(type = IdType.AUTO)
    private Integer id;
    private String loginName;
    private String userName;
    private String password;
    private String sex;
    private String email;
    private String address;
    //省略getter、setter等
}
  • Mapper接口:继承BaseMapper即可
Bash
/**
 * @Author: 三分恶
 * @Date: 2021/1/17
 * @Description: TODO
 **/

public interface UserMapper extends BaseMapper {
}

OK,到此单表的增删改查功能已经完成了,是不是很简单。

2、后端开发

2.1、统一结果封装

这里我们创建了一个 Result 类,用于异步统一返回的结果封装。一般来说,结果里面有几个要素必要的

  • 是否成功,可用 code 表示(如 200 表示成功,400 表示异常)
  • 结果消息
  • 结果数据
Bash
/**
 * @Author: 三分恶
 * @Date: 2021/1/17
 * @Description: 统一结果封装
 **/

public class Result {
    //相应码
    private Integer code;
    //信息
    private String message;
    //返回数据
    private Object data;
    //省略getter、setter、构造方法
}

实际上由于响应码是固定的,code 属性应该是一个枚举值,这里作了一些简化。

2.2、登录业务实体类

为了接收前端登录的数据,我们这里创建了一个登录用的业务实体类:

Bash
public class LoginDTO {
    private String loginName;
    private String password;
    //省略getter、setter
}

启动后端项目:

访问登录界面,效果如下:

这样一个简答的登录就完成了,接下来,我们会对这个登录进一步完善。

四、登录功能完善

前面虽然实现了登录,但只是一个简单的登录跳转,实际上并不能对用户的登录状态进行判别,接下来我们进一步完善登录功能。

在最后一页可以看到我们添加的用户:

效果:

六、总结

通过这个示例,相信大家已经对 SpringBoot+Vue 前后端分离开发有了一个初步的掌握。

当然,由于这个示例并不是一个完整的项目,所以技术上和功能上都非常潦草

有兴趣的同学可以进一步地去扩展和完善这个示例。

有需要SpringBoot和Vue实现登录和用户管理功能的转发+关注之后私信我关键字【源码】即可免费获取哦!

相关文章

那些年的QQ登录界面,你还记得吗,满满的全是回忆

刚上大学的时候,手机QQ软件不是很流行,因为除了一些品牌手机,其他国产手机基本不支持这个软件。那时候手机上网也是刚刚开始流行,5元30M流量,省着点用,是能坚持到月底的。那时候喜欢跟人聊qq,就用网页...

CAS单点登录(第7版)20.用户界面

如有疑问,请看视频:CAS单点登录(第7版)_在线视频教程-CSDN程序员研修院1. 用户界面1.1. 概述1.1.1. 概述对 CAS 用户界面 (UI) 进行品牌化涉及编辑 CSS 样式表以及一小...

开始使用支付宝登录接口之前

开始使用支付宝登录接口之前,您需要先创建一个支付宝应用并将其注册到支付宝。这将为您提供一个应用 ID 和应用密钥,您需要在调用 API 时使用它们。获取用户授权要使用支付宝登录接口,您需要先从用户获取...

写了这么多年代码,这样的登录方式还是头一回见

Spring Security 系列还没搞完,最近还在研究。有的时候我不禁想,如果从 Spring Security 诞生的第一天开始,我们就一直在追踪它,那么今天再去看它的源码一定很简单,因为我们了...

用友NC系统“登陆后页面显示不完全”,怎么办?

用友NC系统使用过程中常见问题和解决方法:1、无法安装客户端插件,不能进入NC系统登陆界面问题现象现象1:可以打开web界面,但无法进入登陆界面,一直停留在右图所示界面。现象2:系统提示安全警告问题原...

「JWT」,你必须了解的认证登录方案

「JWT」,你必须了解的认证登录方案

作者:古时的风筝原文链接:https://www.cnblogs.com/fengzheng/p/13527425.htmlJWT 全称是 JSON Web Token,是目前非常流行的跨域认证解决方...