一步步使用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：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/，首页即可下载。
下载完成后运行安装包，一路下一步就行。然后在 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 脚手架:
npm install -g vue-cli
注意此种方式安装的是 2.x 版本的 Vue CLI，最新版本需要通过 npm install -g @vue/cli 安装。新版本可以使用图形化界面初始化项目，并加入了项目健康监控等内容。
1.4、VS Code
前端的开发工具采用的当下最流行的前端开发工具 VS code。
官网：https://code.visualstudio.com
下载对应的版本，一步步安装即可。安装之后，初始界面如下：
VS Code安装后，我们一般还需要搜索安装一些所需要的插件辅助开发。安装插件很简单，在搜索面板中查找到后，直接安装即可。
一般会安装这些插件：
- 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
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 是构建单页面应用的关键。
OK，可以看到目录下完成了项目的构建，基本结构如下。
1.2、项目运行
使用VS code打开初始化完成的vue项目。
在vs code 中点击终端，输入命令 npm run dev 运行项目。
项目运行成功：
访问地址：http://localhost:8080，就可以查看网页Demo。
1.3、项目结构说明
在vs code 中可以看到项目结构如下：
详细的目录项说明：
来重点看下标红旗的几个文件。
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 中展示。
所谓单页面应用，就是整个项目只有这一个 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>
这里也有一句