0
点赞
收藏
分享

微信扫一扫

一步步使用SpringBoot结合Vue实现登录和用户管理功能



文章目录


  • 前言
  • 1、前后端分离简介
  • 2、示例所用技术简介
  • 一、环境准备
  • 1、前端
  • 1.1、安装Node.js
  • 1.2、配置NPM源
  • 1.3、安装vue-cli脚手架
  • 1.4、VS Code
  • 1.5、Chrome
  • 2、后端
  • 3、数据库
  • 二、项目搭建
  • 1、前端项目搭建
  • 1.1、创建项目
  • 1.2、项目运行
  • 1.3、项目结构说明
  • 1.3.1、index.html
  • 1.3.2、App.vue
  • 1.3.3、main.js
  • 1.3.4、router/index.js
  • 2、后端项目搭建
  • 2.1、后端项目创建
  • 2.3、引入MybatisPlus
  • 2.3.1、引入MP依赖
  • 2.3.2、数据库创建
  • 2.3.3、配置
  • 2.3.3、相关代码
  • 2.3.4、单元测试
  • 三、登录功能开发
  • 1、前端开发
  • 1.1、登录界面
  • 1.2、添加路由
  • 1.3、引入ElementUI美化界面
  • 1.3.1、安装Element UI
  • 1.3.2、引入 Element
  • 1.3.3、使用ElementUI美化登录页面
  • 1.4、引入axios发起请求
  • 1.5、前端相关配置
  • 2、后端开发
  • 2.1、统一结果封装
  • 2.2、登录业务实体类
  • 2.3、控制层
  • 2.4、业务层
  • 四、登录功能完善
  • 1、后端开发
  • 1.1、拦截器
  • 1.2、拦截器配置
  • 1.3、跨域配置
  • 1.3、登录service
  • 2、前端开发
  • 2.1引入Vuex
  • 2.2、修改路由配置
  • 2.3、使用钩子函数判断是否拦截
  • 2.4、请求封装
  • 2.5、封装api
  • 2.6、login.vue
  • 2.7、HelloWorld.vue
  • 五、用户管理功能
  • 1、后端开发
  • 1.1、自定义分页查询
  • 1.1.1、分页配置
  • 1.1.2、自定义sql
  • 1.2、控制层
  • 1.3、服务层
  • 1.4、业务实体
  • 2、前端开发
  • 2.1、首页
  • 2.2、用户列表
  • 2.3、分页
  • 2.4、检索用户
  • 2.5、添加用户
  • 2.6、修改用户
  • 2.7、删除用户
  • 2.8、批量删除用户
  • 六、总结


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

前言

1、前后端分离简介

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

2、示例所用技术简介

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

一步步使用SpringBoot结合Vue实现登录和用户管理功能_SpringBoot

后端


  • 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.1、安装Node.js

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

一步步使用SpringBoot结合Vue实现登录和用户管理功能_SpringBoot_02

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

一步步使用SpringBoot结合Vue实现登录和用户管理功能_Vue_03

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

一步步使用SpringBoot结合Vue实现登录和用户管理功能_ios_04

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​​ 脚手架:

npm install -g vue-cli

一步步使用SpringBoot结合Vue实现登录和用户管理功能_Vue_05

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

1.4、VS Code

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

官网:https://code.visualstudio.com

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

一步步使用SpringBoot结合Vue实现登录和用户管理功能_Vue_06

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

一步步使用SpringBoot结合Vue实现登录和用户管理功能_ios_07

一般会安装这些插件:


  • Chinese​:中文语言插件
  • Vetur​:Vue多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。vscode官方钦定Vue插件,Vue开发者必备。
  • ESLint​:ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。
  • VS Code - Debugger for Chrome​:结合Chrome进行调试的插件。
  • Beautify​:Beautify 插件可以快速格式化你的代码格式,让你在编写代码时杂乱的代码结构瞬间变得非常规整。

1.5、Chrome

Chrome 是比较流行的浏览器,也是我们前端开发的常用工具。

Chrome 下载途径很多,请自行搜索下载安装。

Chrome下载安装完成之后,建议安装一个插件 ​​Vue.js devtools​​ ,是非常好用的 vue 调试工具。

谷歌商店下载地址:https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

一步步使用SpringBoot结合Vue实现登录和用户管理功能_SpringBoot_08

2、后端


后端采用的jdk版本是1.8,具体安装可以参考 Win10系统安装与配置JDK1.8 采用的maven版本是3.5,安装配置可参考 Maven系列教材 (二)- 下载与配置Maven。开发工具采用的是Idea,安装请自行查找。

3、数据库

数据库采用的是MySQL5.7,安装可以参考: Win10配置免安装版MySQL5.7

二、项目搭建

1、前端项目搭建

1.1、创建项目

这里使用命令行来创建项目,在工作文件下新建目录。

然后执行命令 ​​vue init webpack demo-vue​​,这里 webpack 是以 webpack 为模板指生成项目,还可以替换为 pwa、simple 等参数,这里不再赘述。 demo-vue 是项目名称,也可以起别的名字。

在程序执行的过程中会有一些提示,可以按照默认的设定一路回车下去,也可以按需修改。

需要注意的是询问是否安装 vue-router,一定要选是,也就是回车或按 Y,vue-router 是构建单页面应用的关键。

一步步使用SpringBoot结合Vue实现登录和用户管理功能_项目实战_09

OK,可以看到目录下完成了项目的构建,基本结构如下。

一步步使用SpringBoot结合Vue实现登录和用户管理功能_项目实战_10

1.2、项目运行

使用VS code打开初始化完成的vue项目。

一步步使用SpringBoot结合Vue实现登录和用户管理功能_ios_11

在vs code 中点击终端,输入命令 ​​npm run dev​​ 运行项目。

一步步使用SpringBoot结合Vue实现登录和用户管理功能_项目实战_12

项目运行成功:

一步步使用SpringBoot结合Vue实现登录和用户管理功能_SpringBoot_13

访问地址:http://localhost:8080,就可以查看网页Demo。

一步步使用SpringBoot结合Vue实现登录和用户管理功能_前后端分离_14

1.3、项目结构说明

在vs code 中可以看到项目结构如下:

一步步使用SpringBoot结合Vue实现登录和用户管理功能_前后端分离_15

详细的目录项说明:

一步步使用SpringBoot结合Vue实现登录和用户管理功能_ios_16

来重点看下标红旗的几个文件。

1.3.1、index.html

首页文件的初始代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>demo-vue</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

需要注意的是 ​​<div id="app"></div>​​ 这一行带代码,下面有一行注释,构建的文件将会被自动注入,也就是说我们编写的其它的内容都将在这个 div 中展示。

所谓​单页面应用​,就是整个项目只有这一个 html 文件,当我们打开这个应用,表面上可以有很多页面,实际上它们都是动态地加载在一个 ​​div​​ 中。

1.3.2、App.vue

这个文件称为“根组件”,因为其它的组件又都包含在这个组件中。

​.vue​​ 文件是一种自定义文件类型,在结构上类似 html,一个 .vue 文件即是一个 vue 组件。先看它的初始代码:

<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>

<script>
export default {
name: 'App'
}
</script>

<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

这里也有一句 ​​<div id="app">​​,但跟 index.html 里的那个是没有关系的。这个只是普通的div块。

​<script>​​标签里的内容即该组件的脚本,也就是 js 代码,export default 是 ES6 的语法,意思是将这个组件整体导出,之后就可以使用 import 导入组件了。大括号里的内容是这个组件的相关属性。

这个文件最关键的一点其实是第四行, ​​<router-view/>​​,是一个容器,名字叫“路由视图”,意思是当前路由( URL)指向的内容将显示在这个容器中。也就是说,其它的组件即使拥有自己的路由(URL,需要在 router 文件夹的 index.js 文件里定义),也只不过表面上是一个单独的页面,实际上只是在根组件 App.vue 中。

1.3.3、main.js

App.vue 和 index.html是怎么联系的?关键点就在于这个文件:

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

最上面 import 了几个模块,其中 vue 模块在 node_modules 中,App 即 App.vue 里定义的组件,router 即 router 文件夹里定义的路由。

Vue.config.productionTip = false ,作用是阻止vue 在启动时生成生产提示。

在这个 js 文件中,我们创建了一个 ​Vue 对象(实例)​,el 属性提供一个在页面上已存在的 DOM 元素作为 Vue 对象的挂载目标,router 代表该对象包含 Vue Router,并使用项目中定义的路由。components 表示该对象包含的 Vue 组件,template 是用一个字符串模板作为 Vue 实例的标识使用,类似于定义一个 html 标签。

1.3.4、router/index.js

前面说到了vue-router是单式应用的关键,这里我们来看一下 ​​router/index.js​​文件:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})

最上面 import 了几个组件,在 ​​routes​​​这个数组里定义了路由,可以看到 ​​/​​​ 路径路由到了 ​​HelloWorld​​​ 这个组件,所以访问 http://localhost:8080/ 会看到上面的界面。为了更直观的理解,这里可以对 ​​src\components\HelloWorld.vue​​ 组件进行修改,修改如下:

<template>
<div id="demo">
{{msg}}
</div>
</template>

<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Hello Vue!'
}
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#demo{
background-color: bisque;
font-size: 20pt;
color:darkcyan;
margin-left: 30%;
margin-right: 30%;
}
</style>

vue-cli会我们的更改进行热更新,再次打开 http://localhost:8080/,界面发生改变:

一步步使用SpringBoot结合Vue实现登录和用户管理功能_项目实战_17

2、后端项目搭建

2.1、后端项目创建

后端项目创建如下:

  • 打开Idea, ​​New Project​​​ ,选择 ​​Spring Intializr​

一步步使用SpringBoot结合Vue实现登录和用户管理功能_项目实战_18

  • 填入项目的相关信息

一步步使用SpringBoot结合Vue实现登录和用户管理功能_ios_19

  • SpringBoot版本选择了 2.3.8 , 选择了web 和 MySQL驱动依赖

一步步使用SpringBoot结合Vue实现登录和用户管理功能_项目实战_20

  • 创建完成的项目

一步步使用SpringBoot结合Vue实现登录和用户管理功能_前后端分离_21

  • 项目完整pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.3.8.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>cn.fighter3</groupId>
<artifactId>demo-java</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>demo-java</name>
<description>Demo project for Spring Boot</description>

<properties>
<java.version>1.8</java.version>
</properties>

<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>

<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
</dependencies>

<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>

</project>

2.3、引入MybatisPlus

如果对MybatisPlus不熟悉,入门可以参考 SpringBoot学习笔记(十七:MyBatis-Plus )

想了解更多可以直接查看官网。

2.3.1、引入MP依赖

<!--mybatis-plus依赖-->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.4.1</version>
</dependency>

由于本实例的数据库表非常简单,只有一个单表,所以这里我们直接将基本的增删改查写出来

2.3.2、数据库创建

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

一步步使用SpringBoot结合Vue实现登录和用户管理功能_ios_22

建表语句如下:

DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`login_name` varchar(64) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '登录名',
`user_name` varchar(64) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '用户名',
`password` varchar(64) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '密码',
`sex` varchar(8) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '性别',
`email` varchar(32) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '邮箱',
`address` varchar(128) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '地址',
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

SET FOREIGN_KEY_CHECKS = 1;

2.3.3、配置

在​​application.properties​​ 中写入相关配置:

# 服务端口号
server.port=8088
# 数据库连接配置
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/demo?characterEncoding=utf-8&allowMultiQueries=true&serverTimezone=GMT%2B8
spring.datasource.username=root
spring.datasource.password=root

在启动类里添加 ​​@MapperScan​​注解,扫描 Mapper 文件夹:

@SpringBootApplication
@MapperScan("cn.fighter3.mapper")
public class DemoJavaApplication {

public static void main(String[] args) {
SpringApplication.run(DemoJavaApplication.class, args);
}
}

2.3.3、相关代码

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

  • 实体类
/**
* @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即可
/**
* @Author: 三分恶
* @Date: 2021/1/17
* @Description: TODO
**/

public interface UserMapper extends BaseMapper<User> {
}

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

可以写一个单元测试测一下。

2.3.4、单元测试

@SpringBootTest
class UserMapperTest {
@Autowired
UserMapper userMapper;

@Test
@DisplayName("插入数据")
public void testInsert(){
User user=new User("test1","test","t123","男","test1@qq.com","满都镇");
Integer id=userMapper.insert(user);
System.out.printf(id.toString());
}

@Test
@DisplayName("根据id查找")
public void testSelectById(){
User user=userMapper.selectById(1);
System.out.println(user.toString());
}

@Test
@DisplayName("查找所有")
public void testSelectAll(){
List userList=userMapper.selectObjs(null);
System.out.println(userList.size());
}

@Test
@DisplayName("更新")
public void testUpdate(){
User user=new User();
user.setId(1);
user.setAddress("金葫芦镇");
Integer id=userMapper.updateById(user);
System.out.println(id);
}

@Test
@DisplayName("删除")
public void testDelete(){
userMapper.deleteById(1);
}

}

至此前后端项目基本搭建完成,接下来开始进行功能开发。

三、登录功能开发

1、前端开发

1.1、登录界面

在前面访问页面的时候,有一个 V logo,看起来比较奇怪,我们先把它去掉,这个图片的引入是在根组件中——​​src\App.vue​​ ,把下面一行注释或者去掉。

一步步使用SpringBoot结合Vue实现登录和用户管理功能_ios_23

在src目录下新建文件夹views,在views下新建文件 ​​login.vue​

<template>
<div>
<h3>登录</h3>
用户名:<input type="text" v-model="loginForm.loginName" placeholder="请输入用户名"/>
<br><br>
密码: <input type="password" v-model="loginForm.password" placeholder="请输入密码"/>
<br><br>
<button>登录</button>
</div>
</template>

<script>

export default {
name: 'Login',
data () {
return {
loginForm: {
loginName: '',
password: ''
},
responseResult: []
}
},
methods: {
}
}
</script>

1.2、添加路由

在 ​​router\index.js​​ 里添加路由,代码如下:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//导入登录页面组件
import Login from '@/views/login.vue'

Vue.use(Router)

export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
//添加登录页面路由
{
path:'/login',
name: 'Login',
component: Login
}
]
})

OK,现在在浏览器里输入 ​​http://localhost:8080/#/login​​ ,就可以访问登录页面:

一步步使用SpringBoot结合Vue实现登录和用户管理功能_前后端分离_24

页面有点粗糙简陋对不对,没关系,我们可以引入​​ElmentUI​​ ,使用ElementUI中已经成型的组件。

1.3、引入ElementUI美化界面

Element 的官方地址为 http://element-cn.eleme.io/#/zh-CN ,官方文档比较好懂,大部分组件复制粘贴即可。

一步步使用SpringBoot结合Vue实现登录和用户管理功能_Vue_25

1.3.1、安装Element UI

在vscode 中打开终端,运行命令​​npm i element-ui -S​​ ,就安装了 element ui 最新版本—当前是 2.15.0

一步步使用SpringBoot结合Vue实现登录和用户管理功能_ios_26

1.3.2、引入 Element

引入分为完整引入和按需引入两种模式,按需引入可以缩小项目的体积,这里我们选择完整引入。

根据文档,我们需要修改 main.js 为如下内容:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//引入ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

/* eslint-disable no-new */

Vue.use(ElementUI)

new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

1.3.3、使用ElementUI美化登录页面

现在开始使用 ElementUI和 css美化我们的登录界面,修改后的​​login.vue​​代码如下:

<template>
<body id="login-page">
<el-form class="login-container" label-position="left" label-width="0px">
<h3 class="login_title">系统登录</h3>
<el-form-item>
<el-input
type="text"
v-model="loginForm.loginName"
auto-complete="off"
placeholder="账号"
></el-input>
</el-form-item>
<el-form-item>
<el-input
type="password"
v-model="loginForm.password"
auto-complete="off"
placeholder="密码"
></el-input>
</el-form-item>
<el-form-item style="width: 100%">
<el-button
type="primary"
style="width: 100%; border: none"
>登录</el-button
>
</el-form-item>
</el-form>
</body>
</template>

<script>
export default {
name: "Login",
data() {
return {
loginForm: {
loginName: "",
password: "",
},
responseResult: [],
};
},
methods: {},
};
</script>

<style scoped>
#login-page {
background: url("../assets/img/bg.jpg") no-repeat;
background-position: center;
height: 100%;
width: 100%;
background-size: cover;
position: fixed;
}
body {
margin: 0px;
}
.login-container {
border-radius: 15px;
background-clip: padding-box;
margin: 90px auto;
width: 350px;
padding: 35px 35px 15px 35px;
background: #fff;
border: 1px solid #eaeaea;
box-shadow: 0 0 25px #cac6c6;
}

.login_title {
margin: 0px auto 40px auto;
text-align: center;
color: #505458;
}
</style>

需要注意:


  • 在 ​​src\assets​​ 路径下新建一个一个文件夹 ​​img​​,在 img 里放了一张网上找到的无版权图片作为背景图
  • ​App.vue​​ 里删了一行代码,不然会有空白:
    ​margin-top: 60px; ​

好了,看看我们修改之后的登录界面效果:

一步步使用SpringBoot结合Vue实现登录和用户管理功能_SpringBoot_27

OK,登录界面的面子已经做好了,但是里子还是空的,没法和后台交互。

1.4、引入axios发起请求

相信大家都对 ajax 有所了解,前后端分离情况下,前后端交互的模式是前端发出异步式请求,后端返回 json 。

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范。在这里我们只需要知道它是非常强大的网络请求处理库,且得到广泛应用即可。

在项目目录下运行命令 ​​npm install --save axios​​ ,安装模块:

一步步使用SpringBoot结合Vue实现登录和用户管理功能_ios_28

在 ​​main.js​​ 里全局注册 axios:

var axios = require('axios')
// 全局注册,之后可在其他组件中通过 this.$axios 发送数据
Vue.prototype.$axios = axios

那么怎么使用 ​​axios​​ 发起请求呢?

在 ​​login.vue​​中添加方法:

methods: {
login () {
this.$axios
.post('/login', {
loginName: this.loginForm.loginName,
password: this.loginForm.password
})
.then(successResponse => {
if (successResponse.data.code === 200) {
this.$router.replace({path: '/'})
}
})
.catch(failResponse => {
})
}
},

这个方法里通过 axios 向后台发起了请求,如果返回成功的结果就跳转到 ​​/​​ 路由下。

在登录按钮里触发这个方法:

<el-button
type="primary"
style="width: 100%; border: none"
@click="login"
>登录</el-button
>

那么现在就能向后台发起请求了吗?还没完。

1.5、前端相关配置

  • 反向代理
    修改 ​​src\main.js​​ ,添加反向代理的配置:
    ​// 设置反向代理,前端请求默认发送到 http://localhost:8888/api axios.defaults.baseURL = 'http://localhost:8088/api' ​

这么一来,我们在前面写的登录请求,访问的后台地址实际就是 ​​http://localhost:8088/api/login​

  • 跨域配置
    前后端分离会带来一个问题—跨域,关于跨域,这里就不展开讲解。在 ​​config\index.js​​ 中,找到 proxyTable 位置,修改为以下内容:
    ​ proxyTable: { '/api': { target: 'http://localhost:8088', changeOrigin: true, pathRewrite: { '^/api': '' } } }, ​

2、后端开发

2.1、统一结果封装

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


  • 是否成功,可用 code 表示(如 200 表示成功,400 表示异常)
  • 结果消息
  • 结果数据

/**
* @Author: 三分恶
* @Date: 2021/1/17
* @Description: 统一结果封装
**/

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

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

2.2、登录业务实体类

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

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

2.3、控制层

LoginController,进行业务响应:

/**
* @Author: 三分恶
* @Date: 2021/1/17
* @Description: TODO
**/
@RestController
public class LoginController {
@Autowired
LoginService loginService;

@PostMapping(value = "/api/login")
@CrossOrigin //后端跨域
public Result login(@RequestBody LoginDTO loginDTO){
return loginService.login(loginDTO);
}
}

2.4、业务层

业务层进行实际的业务处理。

  • LoginService:
public interface LoginService {
public Result login(LoginDTO loginDTO);
}
  • LoginServiceImpl:
/**
* @Author: 三分恶
* @Date: 2021/1/17
* @Description:
**/
@Service
public class LoginServiceImpl implements LoginService {
@Autowired
private UserMapper userMapper;

@Override
public Result login(LoginDTO loginDTO) {
if (StringUtils.isEmpty(loginDTO.getLoginName())){
return new Result(400,"账号不能为空","");
}
if (StringUtils.isEmpty(loginDTO.getPassword())){
return new Result(400,"密码不能为空","");
}
//通过登录名查询用户
QueryWrapper<User> wrapper = new QueryWrapper();
wrapper.eq("login_name", loginDTO.getLoginName());
User uer=userMapper.selectOne(wrapper);
//比较密码
if (uer!=null&&uer.getPassword().equals(loginDTO.getPassword())){
return new Result(200,"",uer);
}
return new Result(400,"登录失败","");
}
}

启动后端项目:

一步步使用SpringBoot结合Vue实现登录和用户管理功能_前后端分离_29

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

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

四、登录功能完善

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

首先开始后端的开发。

1、后端开发

1.1、拦截器

在前后端分离的情况下,比较流行的认证方案是 ​​JWT认证​​​ 认证,和传统的session认证不同,jwt是一种无状态的认证方法,也就是服务端不再保存任何认证信息。出于篇幅考虑,我们这里不再引入 ​​JWT​​​ ,只是简单地判断一下前端的请求头里是否存有 ​​token​​​ 。对JWT 认证感兴趣的可以查看文章:SpringBoot学习笔记(十三:JWT ) 。

  • 创建 ​​interceptor​​​ 包,包下新建拦截器 ​​LoginInterceptor​
/**
* @Author: 三分恶
* @Date: 2021/1/18
* @Description: 用户登录拦截器
**/

public class LoginInterceptor implements HandlerInterceptor {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws IOException {

//从header中获取token
String token = request.getHeader("token");
//如果token为空
if (StringUtils.isBlank(token)) {
setReturn(response,401,"用户未登录,请先登录");
return false;
}
//在实际使用中还会:
// 1、校验token是否能够解密出用户信息来获取访问者
// 2、token是否已经过期

return true;
}



@Override
public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) {

}

//返回json格式错误信息
private static void setReturn(HttpServletResponse response, Integer code, String msg) throws IOException {
HttpServletResponse httpResponse = (HttpServletResponse) response;
httpResponse.setHeader("Access-Control-Allow-Credentials", "true");
httpResponse.setHeader("Access-Control-Allow-Origin", HttpContextUtil.getOrigin());
//UTF-8编码
httpResponse.setCharacterEncoding("UTF-8");
response.setContentType("application/json;charset=utf-8");
Result result = new Result(code,msg,"");
ObjectMapper objectMapper = new ObjectMapper();
String json = objectMapper.writeValueAsString(result);
httpResponse.getWriter().print(json);
}

}
  • 为了能给前端返回 json 格式的结果,这里还用到了一个工具类,新建 ​​util​​​ 包,util 包下新建工具类 ​​HttpContextUtil​
/**
* @Author: 三分恶
* @Date: 2021/1/18
* @Description: http上下文
**/


public class HttpContextUtil {
public static HttpServletRequest getHttpServletRequest() {
return ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getRequest();
}

public static String getDomain() {
HttpServletRequest request = getHttpServletRequest();
StringBuffer url = request.getRequestURL();
return url.delete(url.length() - request.getRequestURI().length(), url.length()).toString();
}

public static String getOrigin() {
HttpServletRequest request = getHttpServletRequest();
return request.getHeader("Origin");
}
}

1.2、拦截器配置

拦截器创建完成之后,还需要进行配置。

/**
* @Author: 三分恶
* @Date: 2021/1/18
* @Description: web配置
**/
@Configuration
public class DemoWebConfig implements WebMvcConfigurer {


/**
* 拦截器配置
*
* @param registry
*/
@Override
public void addInterceptors(InterceptorRegistry registry) {
//添加拦截器
registry.addInterceptor(new LoginInterceptor()).addPathPatterns("/api/**")
//放行路径,可以添加多个
.excludePathPatterns("/api/login");
}
}

1.3、跨域配置

细致的同学可能会发现,在之前的后台接口,有一个注解​​@CrossOrigin​​ ,这个注解是用来跨域的,每个接口都写一遍肯定是不太方便的,这里我们 创建跨域配置类并添加统一的跨域配置:

/**
* @Author 三分恶
* @Date 2021/1/25
* @Description 跨域配置
*/
@Configuration
public class CorsConfig {
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration corsConfiguration = new CorsConfiguration();
//允许源,这里允许所有源访问,实际应用会加以限制
corsConfiguration.addAllowedOrigin("*");
//允许所有请求头
corsConfiguration.addAllowedHeader("*");
//允许所有方法
corsConfiguration.addAllowedMethod("*");
source.registerCorsConfiguration("/**", corsConfiguration);
return new CorsFilter(source);
}
}

1.3、登录service

这样一来,后端就需要生成一个 ​​token​​​ 返回给前端,所以更改 ​​LoginServiceImpl​​ 里的登录方法。

@Service
public class LoginServiceImpl implements LoginService {
@Autowired
private UserMapper userMapper;

@Override
public Result login(LoginDTO loginDTO) {
if (StringUtils.isEmpty(loginDTO.getLoginName())){
return new Result(400,"账号不能为空","");
}
if (StringUtils.isEmpty(loginDTO.getPassword())){
return new Result(400,"密码不能为空","");
}
//通过登录名查询用户
QueryWrapper<User> wrapper = new QueryWrapper();
wrapper.eq("login_name", loginDTO.getLoginName());
User uer=userMapper.selectOne(wrapper);
//比较密码
if (uer!=null&&uer.getPassword().equals(loginDTO.getPassword())){
LoginVO loginVO=new LoginVO();
loginVO.setId(uer.getId());
//这里token直接用一个uuid
//使用jwt的情况下,会生成一个jwt token,jwt token里会包含用户的信息
loginVO.setToken(UUID.randomUUID().toString());
loginVO.setUser(uer);
return new Result(200,"",loginVO);
}
return new Result(401,"登录失败","");
}
}

其中对返回的​​data​​ 封装了一个VO:

/**
* @Author: 三分恶
* @Date: 2021/1/18
* @Description: 登录VO
**/

public class LoginVO implements Serializable {
private Integer id;
private String token;
private User user;
//省略getter、setter
}

最后,测试一下登录接口:

一步步使用SpringBoot结合Vue实现登录和用户管理功能_Vue_31

OK,没有问题。

2、前端开发

前面我们使用了后端拦截器,接下来我们尝试用前端实现相似的功能。

实现前端登录器,需要在前端判断用户的登录状态。我们可以像之前那样在组件的 data 中设置一个状态标志,但登录状态应该被视为一个​全局属性​,而不应该只写在某一组件中。所以我们需要引入一个新的工具——Vuex,它是专门为 Vue 开发的状态管理方案,我们可以把需要在各个组件中传递使用的变量、方法定义在这里。

2.1引入Vuex

首先在终端里使用命令 ​​npm install vuex --save​​ 来安装 Vuex 。

在 src 目录下新建一个文件夹 store,并在该目录下新建 index.js 文件,在该文件中引入 vue 和 vuex,代码如下:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

接下来,在​​index.js​​ 里设置我们需要的状态变量和方法。为了实现登录拦截器,我们需要一个记录token的变量量。同时为了全局使用用户信息,我们还需要一个记录用户信息的变量。还需要改变变量值的mutations。完整的代码如下:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
state: {
token: sessionStorage.getItem("token"),
user: JSON.parse(sessionStorage.getItem("user"))
},
mutations: {
// set
SET_TOKENN: (state, token) => {
state.token = token
sessionStorage.setItem("token", token)
},
SET_USER: (state, user) => {
state.user = user
sessionStorage.setItem("user", JSON.stringify(user))
},
REMOVE_INFO : (state) => {
state.token = ''
state.user = {}
sessionStorage.setItem("token", '')
sessionStorage.setItem("user", JSON.stringify(''))
}
},
getters: {

},
actions: {
},
modules: {
}
})

这里我们还用到了 ​​sessionStorage​​​,使用​​sessionStorage​​​ ,关掉浏览器的时候会被清除掉,和 ​​localStorage​​ 相比,比较利于保证实时性。

2.2、修改路由配置

为了能够区分哪些路由需要被拦截,我们在路由里添上一个元数据​​requireAuth​​来做是否需要拦截的判断:

{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
meta: {
requireAuth: true
}
},

完整的 ​​src\router\index.js​​ 代码如下:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//导入登录页面组件
import Login from '@/views/login.vue'

Vue.use(Router)

export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
meta: {
requireAuth: true
}
},
//添加登录页面路由
{
path:'/login',
name: 'Login',
component: Login
}
]
})

2.3、使用钩子函数判断是否拦截

上面我们添加了 ​​requireAuth​​ , 接下来就要用到它了。

钩子函数及在某些时机会被调用的函数。这里我们使用 ​​router.beforeEach()​​,意思是在访问每一个路由前调用。

打开 ​​src\main.js​​​ ,首先添加对 ​​store​​ 的引用

import store from './store'

并修改vue对象里的内容,使 store 能全局使用:

new Vue({
el: '#app',
router,
// 注意这里
store,
components: { App },
template: '<App/>'
})

解下来,我们写​​beforeEach()​​ 函数,逻辑很简单,判断是否需要登录,如果是,判断 store中是否存有token ,是则放行,否则跳转到登录页。

//钩子函数,访问路由前调用
router.beforeEach((to, from, next) => {
//路由需要认证
if (to.meta.requireAuth) {
//判断store里是否有token
if (store.state.token) {
next()
} else {
next({
path: 'login',
query: { redirect: to.fullPath }
})
}
} else {
next()
}
}
)

完整的 main.js 代码如下:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//引入ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import store from './store'
var axios = require('axios')
// 全局注册,之后可在其他组件中通过 this.$axios 发送数据
Vue.prototype.$axios = axios
// 设置反向代理,前端请求默认发送到 http://localhost:8888/api
axios.defaults.baseURL = 'http://localhost:8088/api'
Vue.config.productionTip = false

/* eslint-disable no-new */

Vue.use(ElementUI)

//钩子函数,访问路由前调用
router.beforeEach((to, from, next) => {
//路由需要认证
if (to.meta.requireAuth) {
//判断store里是否有token
if (store.state.token) {
next()
} else {
next({
path: 'login',
query: { redirect: to.fullPath }
})
}
} else {
next()
}
}
)


new Vue({
el: '#app',
router,
// 注意这里
store,
components: { App },
template: '<App/>'
})

2.4、请求封装

我们前面写的后端拦截器,对请求进行了拦截,要求请求头里携带token,这个怎么处理呢?

答案是封装​​axios​​。

在 src 目录下新建目录 utils ,在uitls 目录下新建文件 request.js 。

首先导入 ​​axios​​​ 和 ​​store​​:

import axios from 'axios'
import store from '@/store'

接下来在请求拦截器中,给请求头添加 ​​token​​ :

// request 请求拦截
service.interceptors.request.use(
config => {

if (store.state.token) {
config.headers['token'] = window.sessionStorage.getItem("token")
}
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)

完整的request.js:

import axios from 'axios'
import store from '@/store'

//const baseURL="localhost:8088/api"

//创建axios实例
const service = axios.create({
baseURL: process.env.BASE_API, // api的base_url
})

// request 请求拦截
service.interceptors.request.use(
config => {

if (store.getters.getToken) {
config.headers['token'] = window.sessionStorage.getItem("token")
}
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)

//response响应拦截
axios.interceptors.response.use(response => {
let res = response.data;
console.log(res)

if (res.code === 200) {
return response
} else {
return Promise.reject(response.data.msg)
}
},
error => {
console.log(error)
if (error.response.data) {
error.message = error.response.data.msg
}

if (error.response.status === 401) {
router.push("/login")
}
return Promise.reject(error)
}
)


export default service

注意创建axios实例里用到了 baseUrl ,在 ​​config\dev.env.js​​ 里修改配置:

module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_API: '"http://localhost:8088/api"',
})

这样一封装,我们就不用每个请求都手动来塞 token,或者来做一些统一的异常处理,一劳永逸。 而且我们的 api 可以根据 ​​env​​ 环境变量动态切换。

2.5、封装api

request.js 既然已经封装了,那么接下来就要开始用它。

我们可以像上面的 ​​axios​​ 添加到 main.js 中,这样就能被全局调用。但是有更好的用法。

一般项目中,​​viess​​​ 下放的是我们各个业务模块的视图,对应这些业务模块,我们创建对应的 ​​api​​ 来封装对后台的请求,这样即使业务模块很多,但关系仍然是比较清晰的。

在 src 下新建 ​​api​​​ 文件夹,在 ​​api​​​ 文件夹下新建 ​​user.js​​,在user.js 中我们封装了登录的后台请求:

import request from '@/utils/request'

export function userLogin(data) {
return request({
url: '/login',
method: 'post',
data
})
}

当然,事实上登录用 ​​request.js​​​ 不合适,因为​​request.js​​ 拦截了token,但登录就是为了获取token——所以????凑合着看吧,谁叫现在就这一个接口呢。

2.6、login.vue

之前的登录组件中,我们只是判断后端返回的状态码,如果是 200,就重定向到首页。在经过前面的配置后,我们需要修改一下登录逻辑,以最终实现登录拦截。

修改后的逻辑如下:

1.点击登录按钮,向后端发送数据

2.受到后端返回的成功代码时,触发 ​​store​​ 中的 ​​mutation​​ ,存储token 和user,

3.获取登录前页面的路径并跳转,如果该路径不存在,则跳转到首页

修改后的 ​​login()​​ 方法如下:

login() {
var _this = this;
userLogin({
loginName: this.loginForm.loginName,
password: this.loginForm.password,
}).then((resp) => {
let code=resp.data.code;
if(code===200){
let data=resp.data.data;
let token=data.token;
let user=data.user;
//存储token
_this.$store.commit('SET_TOKENN', token);
//存储user,优雅一点的做法是token和user分开获取
_this.$store.commit('SET_USER', user);
console.log(_this.$store.state.token);
var path = this.$route.query.redirect
this.$router.replace({path: path === '/' || path === undefined ? '/' : path})
}
});

完整的​​login.vue​​:

<template>
<body id="login-page">
<el-form class="login-container" label-position="left" label-width="0px">
<h3 class="login_title">系统登录</h3>
<el-form-item>
<el-input
type="text"
v-model="loginForm.loginName"
auto-complete="off"
placeholder="账号"
></el-input>
</el-form-item>
<el-form-item>
<el-input
type="password"
v-model="loginForm.password"
auto-complete="off"
placeholder="密码"
></el-input>
</el-form-item>
<el-form-item style="width: 100%">
<el-button
type="primary"
style="width: 100%; border: none"
@click="login"
>登录</el-button
>
</el-form-item>
</el-form>
</body>
</template>

<script>
import { userLogin } from "@/api/user";
export default {
name: "Login",
data() {
return {
loginForm: {
loginName: "",
password: "",
},
responseResult: [],
};
},
methods: {
login() {
var _this = this;
userLogin({
loginName: this.loginForm.loginName,
password: this.loginForm.password,
}).then((resp) => {
let code=resp.data.code;
if(code===200){
let data=resp.data.data;
let token=data.token;
let user=data.user;
//存储token
_this.$store.commit('SET_TOKENN', token);
//存储user,优雅一点的做法是token和user分开获取
_this.$store.commit('SET_USER', user);
console.log(_this.$store.state.token);
var path = this.$route.query.redirect
this.$router.replace({path: path === '/' || path === undefined ? '/' : path})
}
});
},
},
};
</script>

<style scoped>
#login-page {
background: url("../assets/img/bg.jpg") no-repeat;
background-position: center;
height: 100%;
width: 100%;
background-size: cover;
position: fixed;
}
body {
margin: 0px;
}
.login-container {
border-radius: 15px;
background-clip: padding-box;
margin: 90px auto;
width: 350px;
padding: 35px 35px 15px 35px;
background: #fff;
border: 1px solid #eaeaea;
box-shadow: 0 0 25px #cac6c6;
}

.login_title {
margin: 0px auto 40px auto;
text-align: center;
color: #505458;
}
</style>

2.7、HelloWorld.vue

大家应该还记得,到目前为止,我们 的 ​​/​​​ 路径还是指向 ​​HelloWorld.vue​​​ 这个组件,为了演示 ​​vuex​​​ 状态的全局使用,我们做一些更改,添加一个生命周期的钩子函数,来获取 ​​store​​中存储的用户名:

computed: {
userName() {
return this.$store.state.user.userName
}
}

完整的 ​​HelloWorld.vue​​:

<template>
<div id="demo">
{{userName}}
</div>
</template>

<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Hello Vue!'
}
},
computed: {
userName() {
return this.$store.state.user.userName
}
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#demo{
background-color: bisque;
font-size: 20pt;
color:darkcyan;
margin-left: 30%;
margin-right: 30%;
}
</style>

我们看一下修改之后的整体效果:

访问首页会自动跳转到登录页,登录成功之后,会记录登录状态。

​F12​​ 打开谷歌开发者工具:

  • 打开 ​​Application​​​ ,在 ​​Session Storage​​ 中看到我们存储的信息

一步步使用SpringBoot结合Vue实现登录和用户管理功能_前后端分离_32

  • 打开​​vue​​​ 开发工具,在 ​​Vuex​​​ 中也能看到我们 ​​store​​中的数据

一步步使用SpringBoot结合Vue实现登录和用户管理功能_Vue_33

  • 再次登录,打开Network,可以发现异步式请求请求头里已经添加了 ​​token​

一步步使用SpringBoot结合Vue实现登录和用户管理功能_项目实战_34

再次说一下,这里偷了懒,登录用封装的公共请求方法是不合理的,毕竟登录就是为了获取token,request.js又对token进行了拦截,所以我怼我自己???? 比较好的做法可以参考 ​​vue-element-admin​​​ ,在 store 中写 ​​action​​ 用来登录。

五、用户管理功能

上面我们已经写了一个简单的登录功能,通过这个功能,基本可以对SpringBoot+Vue前后端分离开发有有一个初步了解,在实际工作中,一般的工作都是基于基本框架已经成型的项目,登录、鉴权、动态路由、请求封装这些基础功能可能都已经成型。所以后端的日常工作就是​​写接口​​​、​​写业务​​​ ,前端的日常工作就是 ​​调接口​​​、​​写界面​​,通过接下来的用户管理功能,我们能熟悉这些日常的开发。

1、后端开发

后端开发,crud就完了。

1.1、自定义分页查询

按照官方文档,来进行MP的分页。

1.1.1、分页配置

首先需要对分页进行配置,创建分页配置类

/**
* @Author 三分恶
* @Date 2021/1/23
* @Description MP分页设置
*/
@Configuration
@MapperScan("cn.fighter3.mapper.*.mapper*")
public class MybatisPlusConfig {
@Bean
public PaginationInterceptor paginationInterceptor() {
PaginationInterceptor paginationInterceptor = new PaginationInterceptor();
// 设置请求的页面大于最大页后操作, true调回到首页,false 继续请求 默认false
// paginationInterceptor.setOverflow(false);
// 设置最大单页限制数量,默认 500 条,-1 不受限制
// paginationInterceptor.setLimit(500);
// 开启 count 的 join 优化,只针对部分 left join
paginationInterceptor.setCountSqlParser(new JsqlParserCountOptimize(true));
return paginationInterceptor;
}
}

1.1.2、自定义sql

作为Mybatis的增强工具,MP自然是支持自定义sql的。其实在MP中,单表操作基本上是不用自己写sql。这里只是为了演示MP的自定义sql,毕竟在实际应用中,批量操作、多表操作还是更适合自定义sql实现。

  • 修改pom.xml,在 <build>中添加:
<resources>
<resource>
<directory>src/main/java</directory>
<includes>
<include>**/*.xml</include>
</includes>
<filtering>true</filtering>
</resource>
<resource>
<directory>src/main/resources</directory>
</resource>
</resources>
  • 配置文件:在application.properties中添加mapper扫描路径及实体类别名包
# mybatis-plus
mybatis-plus.mapper-locations=classpath:cn/fighter3/mapper/*.xml
mybatis-plus.type-aliases-package=cn.fighter3.entity
  • 在UserMapper.java 中定义分页查询的方法
IPage<User> selectUserPage(Page<User> page,String keyword);
  • 在UserMapper.java 同级目录下新建 UserMapper.xml文件
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="cn.fighter3.mapper.UserMapper">
<select id="selectUserPage" resultType="User">
select * from user
<where>
<if test="keyword !=null and keyword !='' ">
or login_name like CONCAT('%',#{keyword},'%')
or user_name like CONCAT('%',#{keyword},'%')
or email like CONCAT('%',#{keyword},'%')
or address like CONCAT('%',#{keyword},'%')
</if>
</where>
</select>
</mapper>

这个查询也比较简单,根据关键字查询用户。

OK,我们的自定义分页查询就完成了,可以写个单元测试测一下。

1.2、控制层

新建UserControler,里面也没什么东西,增删改查的接口:

/**
* @Author 三分恶
* @Date 2021/1/23
* @Description 用户管理
*/
@RestController
public class UserController {
@Autowired
private UserService userService;

/**
* 分页查询
* @param queryDTO
* @return
*/
@PostMapping("/api/user/list")
public Result userList(@RequestBody QueryDTO queryDTO){
return new Result(200,"",userService.selectUserPage(queryDTO));
}

/**
* 添加
* @param user
* @return
*/
@PostMapping("/api/user/add")
public Result addUser(@RequestBody User user){
return new Result(200,"",userService.addUser(user));
}

/**
* 更新
* @param user
* @return
*/
@PostMapping("/api/user/update")
public Result updateUser(@RequestBody User user){
return new Result(200,"",userService.updateUser(user));
}

/**
* 删除
* @param id
* @return
*/
@PostMapping("/api/user/delete")
public Result deleteUser(Integer id){
return new Result(200,"",userService.deleteUser(id));
}

/**
* 批量删除
* @param ids
* @return
*/
@PostMapping("/api/user/delete/batch")
public Result batchDeleteUser(@RequestBody List<Integer> ids){
userService.batchDelete(ids);
return new Result(200,"","");
}
}

这里写的也比较简单,直接调用服务层的方法。

1.3、服务层

接口这里就不再贴出了,实现类如下:

/**
* @Author 三分恶
* @Date 2021/1/23
* @Description
*/
@Service
public class UserServiceImpl implements UserService {
@Autowired
private UserMapper userMapper;

/**
* 分页查询
**/
@Override
public IPage<User> selectUserPage(QueryDTO queryDTO) {
Page<User> page=new Page<>(queryDTO.getPageNo(),queryDTO.getPageSize());
return userMapper.selectUserPage(page,queryDTO.getKeyword());
}

@Override
public Integer addUser(User user) {
return userMapper.insert(user);
}

@Override
public Integer updateUser(User user) {
return userMapper.updateById(user);
}

@Override
public Integer deleteUser(Integer id) {
return userMapper.deleteById(id);
}

@Override
public void batchDelete(List<Integer> ids) {
userMapper.deleteBatchIds(ids);
}

}

这里也比较简单,也没什么业务逻辑。

实际上,业务层至少也会做一些参数校验的工作——我见过有的系统,只是在客户端进行了参数校验,实际上,服务端参数校验是必需的(如果不做,会被怼????),因为客户端校验相比较服务端校验是不可靠的。

在分页查询 ​​public IPage<User> selectUserPage(QueryDTO queryDTO)​​ 里用了一个业务对象,这种写法,也可以用一些参数校验的插件。

1.4、业务实体

上面用到了一个业务实体对象,创建一个 业务实体类​​QueryDTO​​ ,定义了一些参数,这个类主要用于前端向后端传输数据,可以可以使用一些参数校验插件添加参数校验规则。

/**
* @Author 三分恶
* @Date 2021/1/23
* @Description 查询业务实体
* 这里仅仅定义了三个参数,在实际应用中可以定义多个参数
*/
public class QueryDTO {
private Integer pageNo; //页码
private Integer pageSize; //页面大小
private String keyword; //关键字
//省略getter、setter
}

简单测一下,后端????

一步步使用SpringBoot结合Vue实现登录和用户管理功能_Vue_35

2、前端开发

2.1、首页

在前面,登录之后,跳转到HelloWorld,还是比较简陋的。本来想直接跳到用户管理的视图,觉得不太好看,所以还是写了一个首页,当然这一部分不是重点。

见过一些后台管理系统的都知道,后台管理系统大概都是像下面的布局:

一步步使用SpringBoot结合Vue实现登录和用户管理功能_ios_36

在ElementUI中提供了这样的布局组件Container 布局容器:

一步步使用SpringBoot结合Vue实现登录和用户管理功能_SpringBoot_37

大家都知道根组件是 App.vue ,当然在App.vue中写整体布局是不合适的,因为还有登录页面,所以在 views 下新建 ​​home.vue​​,采用Container 布局容器来进行布局,使用NavMenu 导航菜单来创建侧边栏。

当然,比较好的做法是​​home.vue​​里不写什么内容,将顶部和侧边栏都抽出来作为子页面(组件)。

<template>
<el-container class="home-container">
<!--顶部-->
<el-header style="margin-right: 15px; width: 100%">
<span class="nav-logo">????</span>
<span class="head-title">Just A Demo</span>
<el-avatar
icon="el-icon-user-solid"
style="color: #222; float: right; padding: 20px"
>{{ this.$store.state.user.userName }}</el-avatar
>
</el-header>
<!-- 主体 -->
<el-container>
<!-- 侧边栏 -->
<el-aside width="13%">
<el-menu
:default-active="$route.path"
router
text-color="black"
active-text-color="red"
>
<el-menu-item
v-for="(item, i) in navList"
:key="i"
:index="item.name"
>
<i :class="item.icon"></i>
{{ item.title }}
</el-menu-item>
</el-menu>
</el-aside>
<el-main>
<!--路由占位符-->
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>

<script>
export default {
name: "Home",
data() {
return {
navList: [
{ name: "/index", title: "首页", icon: "el-icon-s-home" },
{ name: "/user", title: "用户管理",icon:"el-icon-s-custom" },
],
};
},
};
</script>

<style >
.nav-logo {
position: absolute;
padding-top: -1%;
left: 5%;
font-size: 40px;
}

.head-title {
position: absolute;
padding-top: 20px;
left: 15%;
font-size: 20px;
font-weight: bold;
}


</style>

注意 ​​<el-main>​​​ 用了路由占位符 ​​<router-view></router-view>​​​ ,在路由​​src\router\index.js​​里进行配置,就可以加载我们的子路由了:

{
path: '/',
name: 'Default',
redirect: '/home',
component: Home
},
{
path: '/home',
name: 'Home',
component: Home,
meta: {
requireAuth: true
},
redirect: '/index',
children:[
{
path:'/index',
name:'Index',
component:() => import('@/views/home/index'),
meta:{
requireAuth:true
}
},
}
]
},

首页本来不想放什么东西,后来想想,还是放了点大家爱看的——没别的意思,快过年了,各位姐夫过年好。????????

一步步使用SpringBoot结合Vue实现登录和用户管理功能_前后端分离_38

图片来自冰冰微博,见水印。

2.2、用户列表

在​​views​​​下新建 ​​user​​​ 目录,在 ​​user​​​ 目录下新建 ​​index.vue​​ ,然后添加为home的子路由:

{
path: '/home',
name: 'Home',
component: Home,
meta: {
requireAuth: true
},
redirect: '/index',
children:[
{
path:'/index',
name:'Index',
component:() => import('@/views/home/index'),
meta:{
requireAuth:true
}
},
{
path:'/user',
name:'User',
component:()=>import('@/views/user/index'),
meta:{
requireAuth:true
}
}
]
},

接下来开始用户列表功能的编写。

  • 首先封装一下api,在user.js中添加调用分页查询接口的api
//获取用户列表
export function userList(data) {
return request({
url: '/user/list',
method: 'post',
data
})
}
  • 在​​user/index.vue​​ 中导入userList
import { userList} from "@/api/user";
  • 为了在界面初始化的时候加载用户列表,使用了生命周期钩子来调用接口获取用户列表,代码直接一锅炖了
export default {
data() {
return {
userList: [], // 用户列表
total: 0, // 用户总数
// 获取用户列表的参数对象
queryInfo: {
keyword: "", // 查询参数
pageNo: 1, // 当前页码
pageSize: 5, // 每页显示条数
},
}
created() { // 生命周期函数
this.getUserList()
},
methods: {
getUserList() {
userList(this.queryInfo)
.then((res) => {
if (res.data.code === 200) {
//用户列表
this.userList = res.data.data.records;
this.total = res.data.data.total;
} else {
this.$message.error(res.data.message);
}
})
.catch((err) => {
console.log(err);
});
},
}
  • 取到的数据,我们用一个表格组件来进行绑定
    ​ <!--表格--> <el-table :data="userList" border stripe > <el-table-column type="index" label="序号"></el-table-column> <el-table-column prop="userName" label="姓名"></el-table-column> <el-table-column prop="loginName" label="登录名"></el-table-column> <el-table-column prop="sex" label="性别"></el-table-column> <el-table-column prop="email" label="邮箱"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> <el-table-column label="操作"> </el-table-column> </el-table> ​

效果如下,点击用户管理:

一步步使用SpringBoot结合Vue实现登录和用户管理功能_Vue_39

2.3、分页

在上面的图里,我们看到了在最下面有分页栏,我们接下来看看分页栏的实现。

我们这里使用了 Pagination 分页组件:

一步步使用SpringBoot结合Vue实现登录和用户管理功能_项目实战_40

<!--分页区域-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pageNo"
:page-sizes="[1, 2, 5, 10]"
:page-size="queryInfo.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>

两个监听事件:

// 监听 pageSize 改变的事件
handleSizeChange(newSize) {
// console.log(newSize)
this.queryInfo.pageSize = newSize;
// 重新发起请求用户列表
this.getUserList();
},
// 监听 当前页码值 改变的事件
handleCurrentChange(newPage) {
// console.log(newPage)
this.queryInfo.pageNo = newPage;
// 重新发起请求用户列表
this.getUserList();
},

2.4、检索用户

搜索框已经绑定了​​queryInfo.keyword​​,只需要给顶部的搜索区域添加按钮点击和清空事件——重新获取用户列表:

<!--搜索区域-->
<el-input
placeholder="请输入内容"
v-model="queryInfo.keyword"
clearable
@clear="getUserList"
>
<el-button
slot="append"
icon="el-icon-search"
@click="getUserList"
></el-button>
</el-input>

效果如下:

一步步使用SpringBoot结合Vue实现登录和用户管理功能_项目实战_41

2.5、添加用户

  • 还是先写api,导入后面就略过了
//添加用户
export function userAdd(data) {
return request({
url: '/user/add',
method: 'post',
data
})
}
  • 添加用户我们用到了两个组件 Dialog 对话框组件和 Form 表单组件。
<!--添加用户的对话框-->
<el-dialog
title="添加用户"
:visible.sync="addDialogVisible"
width="30%"
@close="addDialogClosed"
>
<!--内容主体区域-->
<el-form :model="userForm" label-width="70px">
<el-form-item label="登录名" prop="loginName">
<el-input v-model="userForm.loginName"></el-input>
</el-form-item>
<el-form-item label="用户名" prop="userName">
<el-input v-model="userForm.userName"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="userForm.password" show-password></el-input>
</el-form-item>
<el-form-item label="性别" prop="sex">
<el-radio v-model="userForm.sex" label="男">男</el-radio>
<el-radio v-model="userForm.sex" label="女">女</el-radio>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="userForm.email"></el-input>
</el-form-item>
<el-form-item label="地址" prop="address">
<el-input v-model="userForm.address"></el-input>
</el-form-item>
</el-form>
<!--底部按钮区域-->
<span slot="footer" class="dialog-footer">
<el-button @click="addDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addUser">确 定</el-button>
</span>
</el-dialog>
  • 使用 ​​addDialogVisible​​​ 控制对话框可见性,使用​​userForm​​ 绑定修改用户表单:
addDialogVisible: false, // 控制添加用户对话框是否显示
userForm: {
//用户
loginName: "",
userName: "",
password: "",
sex: "",
email: "",
address: "",
},
  • 两个函数,​​addUser​​​ 添加用户,​​addDialogClosed​​ 在对话框关闭时清空表单
//添加用户
addUser() {
userAdd(this.userForm)
.then((res) => {
if (res.data.code === 200) {
this.addDialogVisible = false;
this.getUserList();
this.$message({
message: "添加用户成功",
type: "success",
});
} else {
this.$message.error("添加用户失败");
}
})
.catch((err) => {
this.$message.error("添加用户异常");
console.log(err);
});
},

// 监听 添加用户对话框的关闭事件
addDialogClosed() {
// 表单内容重置为空
this.$refs.addFormRef.resetFields();
},

效果:

一步步使用SpringBoot结合Vue实现登录和用户管理功能_Vue_42

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

一步步使用SpringBoot结合Vue实现登录和用户管理功能_前后端分离_43

2.6、修改用户

  • 先写api
//修改用户
export function userUpdate(data) {
return request({
url: '/user/update',
method: 'post',
data
})
}
  • 在修改用户这里,我们用到一个作用域插槽,通过​​slot-scope="scope"​​接收了当前作用域的数据,然后通过scope.row拿到对应这一行的数据,再绑定具体的属性值就行了。
<el-table-column label="操作">
<!-- 作用域插槽 -->
<template slot-scope="scope">
<!--修改按钮-->
<el-button
type="primary"
size="mini"
icon="el-icon-edit"
@click="showEditDialog(scope.row)"
></el-button>
</template>
</el-table-column>
  • 具体的修改仍然是用对话框加表单的形式
<!--修改用户的对话框-->
<el-dialog title="修改用户" :visible.sync="editDialogVisible" width="30%">
<!--内容主体区域-->
<el-form :model="editForm" label-width="70px">
<el-form-item label="用户名" prop="userName">
<el-input v-model="editForm.userName" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="editForm.email"></el-input>
</el-form-item>
<el-form-item label="地址" prop="address">
<el-input v-model="editForm.address"></el-input>
</el-form-item>
</el-form>
<!--底部按钮区域-->
<span slot="footer" class="dialog-footer">
<el-button @click="editDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="editUser">确 定</el-button>
</span>
</el-dialog>
  • ​editDialogVisible​​​控制对话框显示,​​editForm​​ 绑定修改用户表单
editDialogVisible: false, // 控制修改用户信息对话框是否显示
editForm: {
id: "",
loginName: "",
userName: "",
password: "",
sex: "",
email: "",
address: "",
},
  • ​showEditDialog​​​ 除了处理对话框显示,还绑定了修改用户对象。​​editUser​​ 修改用户。
// 监听 修改用户状态
showEditDialog(userinfo) {
this.editDialogVisible = true;
console.log(userinfo);
this.editForm = userinfo;
},
//修改用户
editUser() {
userUpdate(this.editForm)
.then((res) => {
if (res.data.code === 200) {
this.editDialogVisible = false;
this.getUserList();
this.$message({
message: "修改用户成功",
type: "success",
});
} else {
this.$message.error("修改用户失败");
}
})
.catch((err) => {
this.$message.error("修改用户异常");
console.loge(err);
});
},

2.7、删除用户

  • api
//删除用户
export function userDelete(id) {
return request({
url: '/user/delete',
method: 'post',
params: {
id
}
})
}

  • 在操作栏的作用域插槽里添加删除按钮,直接将作用域的id属性传递进去
    ​ <el-table-column label="操作"> <!-- 作用域插槽 --> <template slot-scope="scope"> <!--修改按钮--> <el-button type="primary" size="mini" icon="el-icon-edit" @click="showEditDialog(scope.row)" ></el-button> <!--删除按钮--> <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeUserById(scope.row.id)" ></el-button> </template> </el-table-column> ​
  • ​removeUserById​​ 根据用户id删除用户

// 根据ID删除对应的用户信息
async removeUserById(id) {
// 弹框 询问用户是否删除
const confirmResult = await this.$confirm(
"此操作将永久删除该用户, 是否继续?",
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
).catch((err) => err);
// 如果用户确认删除,则返回值为字符串 confirm
// 如果用户取消删除,则返回值为字符串 cancel
// console.log(confirmResult)
if (confirmResult == "confirm") {
//删除用户
userDelete(id)
.then((res) => {
if (res.data.code === 200) {
this.getUserList();
this.$message({
message: "删除用户成功",
type: "success",
});
} else {
this.$message.error("删除用户失败");
}
})
.catch((err) => {
this.$message.error("删除用户异常");
console.loge(err);
});
}
},

效果:

一步步使用SpringBoot结合Vue实现登录和用户管理功能_SpringBoot_44

2.8、批量删除用户

  • api
//批量删除用户
export function userBatchDelete(data) {
return request({
url: '/user/delete/batch',
method: 'post',
data
})
}
  • 在ElementUI表格组件中有一个多选的方式,手动添加一个​​el-table-column​​​,设​​type​​​属性为​​selection​​即可

一步步使用SpringBoot结合Vue实现登录和用户管理功能_ios_45

<el-table-column type="selection" width="55"> </el-table-column>

在表格里添加事件:

@selection-change="handleSelectionChange"

下面是官方的示例:

export default {
data() {
return {
multipleSelection: []
}
},

methods: {
handleSelectionChange(val) {
this.multipleSelection = val;
}
}
}

这个示例里取出的参数​​multipleSelection​​结构是这样的,我们只需要id,所以做一下处理:

一步步使用SpringBoot结合Vue实现登录和用户管理功能_项目实战_46

export default {
data() {
return {
multipleSelection: [],
ids: [],
}
},

methods: {
handleSelectionChange(val) {
this.multipleSelection = val;
//向被删除的ids赋值
this.multipleSelection.forEach((item) => {
this.ids.push(item.id);
console.log(this.ids);
});
}
}
}
  • 接下来就简单了,批量删除操作直接cv上面的删除,改一下api函数和参数就可以了
//批量删除用户
async batchDeleteUser(){
// 弹框 询问用户是否删除
const confirmResult = await this.$confirm(
"此操作将永久删除用户, 是否继续?",
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
).catch((err) => err);
// 如果用户确认删除,则返回值为字符串 confirm
// 如果用户取消删除,则返回值为字符串 cancel
if (confirmResult == "confirm") {
//批量删除用户
userBatchDelete(this.ids)
.then((res) => {
if (res.data.code === 200) {
this.$message({
message: "批量删除用户成功",
type: "success",
});
this.getUserList();
} else {
this.$message.error("批量删除用户失败");
}
})
.catch((err) => {
this.$message.error("批量删除用户异常");
console.log(err);
});
}

效果:

一步步使用SpringBoot结合Vue实现登录和用户管理功能_前后端分离_47

完整代码有点长,就不贴了,请自行查看源码。

六、总结

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

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

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


源码地址:https://gitee.com/fighter3/springboot-vue-demo.git



参考:

【1】:Vue.js - 渐进式 JavaScript 框架

【2】:Element - 网站快速成型工具

【3】:how2j.cn

【4】:Vue + Spring Boot 项目实战

【5】:一看就懂!基于Springboot 拦截器的前后端分离式登录拦截

【6】:手摸手,带你用vue撸后台 系列一(基础篇

【7】:Vue + ElementUI的电商管理系统实例



举报

相关推荐

0 条评论