GitHub 地址：https://github.com/Antabot/White-Jotter


教程目录
第一部分
Vue + Spring Boot 项目实战（一）：项目简介

Vue + Spring Boot 项目实战（二）：搭建 Vue.js 项目

Vue + Spring Boot 项目实战（三）：前后端结合测试（登录页面开发）

Vue + Spring Boot 项目实战（四）：数据库的引入

Vue + Spring Boot 项目实战（五）：使用 Element 辅助前端开发

 Vue + Spring Boot 项目实战（六）：前端路由与登录拦截器

 Vue + Spring Boot 项目实战（七）：导航栏与图书页面设计

Vue + Spring Boot 项目实战（八）：数据库设计与增删改查

Vue + Spring Boot 项目实战（九）：核心功能的前端实现

Vue + Spring Boot 项目实战（十）：图片上传与项目的打包部署
第二部分
Vue + Spring Boot 项目实战（十一）：用户角色权限管理模块设计

Vue + Spring Boot 项目实战（十二）：访问控制及其实现思路

Vue + Spring Boot 项目实战（十三）：使用 Shiro 实现用户信息加密与登录认证

Vue + Spring Boot 项目实战（十四）：用户认证方案与完善的访问拦截

Vue + Spring Boot 项目实战（十五）：动态加载后台菜单

Vue + Spring Boot 项目实战（十六）：功能级访问控制的实现

Vue + Spring Boot 项目实战（十七）：后台角色、权限与菜单分配

Vue + Spring Boot 项目实战（十八）：博客功能开发
第三部分
Vue + Spring Boot 项目实战（十九）：Web 项目优化解决方案

Vue + Spring Boot 项目实战（二十）：前端优化实战

Vue + Spring Boot 项目实战（二十一）：缓存的应用
开源精选
Erupt Framework：开源神器，助你无需前端代码搞定企业级后台管理系统

AntdFront: React 纯 Hook 多标签微前端管理系统解决方案
前言
之前写了一些关于 Java EE 的文章，主要是理论性质的，目的是帮助大家快速了解 Java EE 的核心内容，早日爬出这个陈旧又绕不开的坑，进入 Java Web 开发的新天地。当然只有理论是不够的，有很多细节需要在实践中理解，所以我决定做一个实践教程。
这个项目十分简单，是一个纯粹为教程而生的原型，可以视为一个简陋的带后台的门户网站。所以学习时不用有什么压力，估计你们学的比我写的快很多。
我的目标是根据这个教程，可以帮助 新入行的或是刚开始学习相关技术 的小伙伴们把一个完整的项目还原出来，建立起对前后端分离式 Web 开发的整体认知。
一开始，我会尽量详细地描述开发的过程，帮助大家快速上手。随着项目进展，曾经讲到过的、比较容易搜索到的内容会适当省略。
当然，每个人的理解方式不同，可能有些重要的细节没讲到位，欢迎大家在评论区提问。受限于个人水平，一定有很多说的不对的地方，大家理解一下，友善白嫖哈。
一、项目概述
这个项目我把它命名为 “白卷”，估摸着很多同学会拿它做课程设计之类，建议你们尽量加点自己的东西在里面，直接交白卷，你的良心不会痛吗？（狗头保命）
开个玩笑，叫白卷是因为它随着教程进展逐渐完善，象征着知识的从无到有，从有到多。
另外我还给它起了一个英文名字，叫 White Jotter（白色笔记本），纯粹是为了谐音。
项目遵循敏捷开发原则，会根据大家反馈的意见整理出新的需求，动态扩展、调整、优化。初始阶段按照简单的分层架构设计，具体见下图：


应用架构




技术架构




项目需要在前后端之间不断穿梭，但在做教程的时候，我会尽量模块化地去讲解。
此外，我把教程分为了几个阶段，是为了循序渐进、由易到难地讲解知识点。
各个阶段的主要内容如下（随教程进展更新）：
（一）第一部分
这个项目的第一部分以图书信息管理为示例，主要帮助大家理解以下内容：

如何从 0 开始搭建 Web 项目？
什么是前后端分离？如何实现前后端分离？
单页面应用有哪些特点？
如何在 Web 项目中使用数据库并利用网页实现增删改查？
在开发中如何利用各种辅助手段？
Vue.js 的基本概念与用法
简单的前端页面设计
如何部署 Web 应用？

各个页面的效果大致如下：
登录页面：



首页：



图书馆页面：


（二）第二部分
项目的第二部分是后台管理模块的开发，主要包括以下内容：

后台管理模块的常见功能与布局（内容管理、用户\权限管理、运维监控）
用户身份验证、授权、会话管理与信息加密存储
Shiro 框架的使用
实现不同粒度的访问控制（动态菜单、功能控制、数据控制）
结合内容管理，实现文章的编写与展示

后台基本结构如下：



后台页面效果：
Dashboard（from PanJiaChen / vue-element-admin）：


图书管理：



用户管理：



笔记本页面效果：
文章列表：



文章详情：


（三）第三部分
第三部分是在前面的基础上，分析项目存在的不足，并对其进行由点及面的优化。
当简单的优化无法达到我们想要的目的时，就需要从架构层面进行整体的升级改造，那就是下一套教程的事情了。
（四）开源精选
在做这个项目的过程中结识了一些小伙伴，他们凭借一腔热枕坚持为开源社区做贡献，开发出了许多优秀的项目。我打算在编写教程的同时穿插对这些项目的介绍，以便让更多朋友们了解这个群体，甚至加入到新兴项目的发展壮大过程中去。这样，也算是自己尽了一份绵薄之力吧！
此外，这个教程还有姐妹篇，也就是我正在更新的信息安全方面的教程。在攻防实践阶段，会把我们这个项目当作一号靶机，对黑客技术有兴趣的同学可以走一波关注：
【信息安全系列文章地址】

二、技术栈
参考技术架构图，项目使用的主要技术如下：
1.前端技术栈
1.Vue.js

2.ElementUI

3.axios
2.后端技术栈
1.Spring Boot

2.Apache Shiro

3.Apache Log4j2

4.Spring Data JPA

5.Spring Data Redis
3.数据库
1.MySQL

2.Redis
在开发过程中还会不断用到一些新的技术，有必要的我会增添上去。
三、主要参考内容

How2J.cn - Java 全栈学习网站
Vue.js - 渐进式 JavaScript 框架
Element - 网站快速成型工具

下一篇：Vue + Spring Boot 项目实战（二）：搭建 Vue.js 项目

有兴趣听我扯技术之外的故事的同学可以关注我的公众号。不定期更新，权当和大家聊聊天，图个乐子。

本篇目录
前言
一、安装 Vue CLI
二、构建前端项目
1.通用方法
2.使用 IDE (IntelliJ IDEA)
三、Vue 项目结构分析
1.概览
2.index.html
3.App.vue
4.main.js

前言
从这篇文章开始，就进入真正的实践了。
在前端项目开发中，我们可以根据实际情况不同程度地使用 Vue。利用 Vue CLI（或写成 vue-cli，即 Vue 脚手架）搭建出来的项目，是最能体现 Vue 的特性的。这点在接下来的内容中我们可以慢慢感受。
关于项目的构建其实类似的文章网上有很多，但我还是重新写了一下，一是为了确保项目能够运行成功，二是对几个细节作了解释，三是加入了使用 IDE 的构建方法。
在动手操作之前，我希望大家已经清楚什么是 “前后端分离” ，什么是 “单页面应用” 。
简单地说，前后端分离 的核心思想是前端页面通过 ajax 调用后端的 restuful api 进行数据交互，而 单页面应用（single page web application，SPA），就是只有一张页面，并在用户与应用程序交互时动态更新该页面的 Web 应用程序。
附上 Vue 的官方教程：

https://cn.vuejs.org/v2/guide/
这是第一手的学习资料，本篇的实践内容虽然用不上，但是日后要经常查阅。
一、安装 Vue CLI
因为需要使用 npm 安装 Vue CLI，而 npm 是集成在 Node.js 中的，所以第一步我们需要安装 Node.js，访问官网 https://nodejs.org/en/，首页即可下载。



图中左边是长期支持版本，右边是当前版本，下载哪个都行，我一般选择长期支持版本。
下载完成后运行安装包，一路下一步就行。然后在 cmd 中输入 node -v，检查是否安装成功。



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



输入 npm -g install npm ，将 npm 更新至最新版本。



之后可以选择安装 cnpm，即 npm 的国内镜像。使用 cnmp 的好处是在日后下载内容时会比较快，但是下载的包可能不是最新的。
安装 cnpm 的命令为 ：
npm install -g cnpm --registry=https://registry.npm.taobao.org
完成后就可以使用 cnpm 替代 npm 了，我不太喜欢用 cnpm，喜欢用的小伙伴注意一点，cnpm 不要与 npm 混合使用，一个项目用 cnpm 就从头用到底，不要中途敲错命令，否则就会出现混乱。不过万一遇到这种情况也不用慌，把项目的 node_modules 文件夹删了重新执行 npm/cnpm install 就行了，只是比较浪费时间。

之后，使用 npm install -g vue-cli 安装脚手架。



注意此种方式安装的是 2.x 版本的 Vue CLI，最新版本需要通过 npm install -g @vue/cli 安装。新版本可以使用图形化界面初始化项目，并加入了项目健康监控的内容，但使用新版本创建的项目依赖与这个教程不太相符，折腾起来比较麻烦。
虽然我也想专门针对新的 CLI 和 Vue 3.0 重构一下教程，但想了想这是个无休止的工作，这个教程也不是为了讲前端框架的新特性，而且直到现在 Vue 3.0 也只是发布了初期试验版本，想必又是一堆依赖问题，所以就不折腾了。
二、构建前端项目
1.通用方法
直接使用命令行构建项目。首先，进入到我们的工作文件夹中，我在 D 盘新建了一个叫 workspace 的文件夹，大家可以自行选择位置。



然后执行命令 vue init webpack wj-vue，这里 webpack 是以 webpack 为模板指生成项目，还可以替换为 pwa、simple 等参数，这里不再赘述。 wj-vue 是我们的项目名称（White Jotter），大家也可以起别的名字。
在程序执行的过程中会有一些提示，可以按照默认的设定一路回车下去，也可以按需修改，比如下图问我项目名称是不是 wj-vue，直接回车确认就行。


这里还会问是否安装 vue-router，一定要选是，也就是回车或按 Y，vue-router 是我们构建单页面应用的关键。



还有是否使用 es-lint，这玩意儿挺烦的，但为了代码质量先将就一下吧。
接下来等待项目构建完成就 OK 了。



可以看到 workspace 目录下生成了项目文件夹 wj-vue，里面的结构如图



接下来，进入到我们的项目文件夹里(cd D:\workspace\wj-vue)，执行npm run dev



项目构建成功，这一步如果报错，可能是未能加载项目所需的依赖包，即 node_modules 里的内容，需要在该文件夹执行 npm install ，再执行 npm run dev
访问 http://localhost:8080，查看网页 demo，大工告成！


2.使用 IDE (IntelliJ IDEA)
对于习惯使用 IDE 的同学，可以使用更直观的方式构建项目。以 IntelliJ IDEA 为例，点击 Create New Project



然后选择 Static Web -> Vue.js，点击 next，输入相关参数



此处可以选择 CLI 的版本



这里注意 Project location 需要输入到项目文件夹一级而不是 workspace。输入完成后点击 Next，等待 Vue CLI 初始化，然后在可视化界面上确认项目信息，修改或 Next 即可。IDEA 构建出的 Vue 项目是不含 node_modules 的，所以要先调出终端，执行 npm install



运行完成后，输入 npm run dev 即可。



另外 IDE 嘛，总是在 UI 上下了很多功夫，我们还可以在 package.json 文件上点击右键，选择 show npm scripts



然后就会出来 npm 命令窗口，想要执行哪个命令直接双击运行就可以了。



这些命令都是在 package.json 文件里预定义的。dev 和 start 是一样的，start 即是执行 npm run dev 命令



另外使用这种方法，可以激活 IDE 右上角的按钮，不过这些都不重要了。



上面的内容应该足够详细了，如果大家还是遇到了问题，可以在评论区反馈一下，我会第一时间解答。
三、Vue 项目结构分析
1.概览
使用 CLI 构建出来的 Vue 项目结构是这个样子的



里面我们需要关注的内容如下图，重点需要关注的我用小红旗标了出来



其中我们最常修改的部分就是 components 文件夹了，几乎所有需要手动编写的代码都在其中。
2.x 时代没有创建 view 这个目录，其实加上更加合理，现在我们姑且认为 Vue 把视图也当做“组件”的一部分，有助于初期的理解。
接下来我们分析几个文件，目的是看看各个部分是怎么联系到一起的。
2.index.html
首页文件的初始代码如下：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>wj-vue</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

就是一个普普通通的 html 文件，让它不平凡的是 <div id="app"></div> ，下面有一行注释，构建的文件将会被自动注入，也就是说我们编写的其它的内容都将在这个 div 中展示。
还有不普通的一点是，整个项目只有这一个 html 文件，所以这是一个 单页面应用，当我们打开这个应用，表面上可以有很多页面，实际上它们都只不过在一个 div 中。
3.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 里的那个是没有关系的。这个 id=app 只是跟下面的 css 对应。
<script>标签里的内容即该组件的脚本，也就是 js 代码，export default 是 ES6 的语法，意思是将这个组件整体导出，之后就可以使用 import 导入组件了。大括号里的内容是这个组件的相关属性。
这个文件最关键的一点其实是第四行， <router-view/>，是一个容器，名字叫“路由视图”，意思是当前路由（ URL）指向的内容将显示在这个容器中。也就是说，其它的组件即使拥有自己的路由（URL，需要在 router 文件夹的 index.js 文件里定义），也只不过表面上是一个单独的页面，实际上只是在根组件 App.vue 中。
4.main.js
前面我们说 App.vue 里的 <div id="app"> 和 index.html 里的 <div id="app"> 没有关系，那么这两个文件是怎么建立联系的呢？让我们来看入口文件 main.js 的代码
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/>'
})


这里插一嘴，这个 js 文件有的同学可能看着不顺眼，比如没有分号（;），因为是 ES6 的语法，不这么写反而会提示错误，虽说可以把 es-lint 改了或者关了，但我想熟悉一下新的规则也挺好。
最上面 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 标签。
看完了以上三个文件，我想基本上就对前端项目的结构有所了解了。下一篇中我将用一个例子解释前后端分离的项目是如何联系起来的。
查看系列文章目录：

https://learner.blog.csdn.net/article/details/88925013
上一篇：Vue + Spring Boot 项目实战（一）：项目简介
下一篇：Vue + Spring Boot 项目实战（三）：前后端结合测试（登录页面开发）

Java项目实战

还久没更新博客，这次为大家分享一些Java实战项目。

1.电子地图系统



代代码以及文档链接：点击打开链接

2.决策分析系统



代码以及文档链接：点击打开链接

3.考试管理系统



代码以及文档链接：点击打开链接

4.数码照片管理软件



代码以及文档链接：点击打开链接

5.快递打印系统



代码以及文档链接：点击打开链接

6.通讯管理系统



代码以及文档链接：点击打开链接

7.编程词典用户管理系统



代码以及文档链接：点击打开链接

8. 企业进销存管理系统



代码以及文档链接：点击打开链接

9.企业内部通信系统



代码以及文档链接：点击打开链接

10.学生成绩管理系统



代码以及文档链接：点击打开链接

11.图书馆管理系统



代码以及文档链接：点击打开链接

12.开发计划管理系统

 



代码以及文档链接：点击打开链接

前面我们已经完成了前端项目 DEMO 的构建，这一篇文章主要目的如下：
一、打通前后端之间的联系，为接下来的开发打下基础

二、登录页面的开发（无数据库情况下）

本篇目录
前言：关于开发环境
一、后端项目创建
二、登录页面开发
1.关于前后端结合
2.前端页面开发
Login.vue
AppIndex.vue
3.前端相关配置
设置反向代理
配置页面路由
跨域支持
运行项目
4.后端开发
User 类
Result 类
LoginController
5.测试项目

前言：关于开发环境
每位 Coder 都有自己偏好的开发工具，从大的方面划分主要有文本编辑器流和 IDE 流两种，我有一段时间也喜欢用编辑器（Sublime Text、Vim），但对我来说开发效率确实不如使用 IDE 高，所以就放弃了。不过需要修改某一代码片段时，使用编辑器还是比较便捷的。
虽说大家可以按照自己的情况任意选择工具，但做教程只能顾及其中一种，所以不好意思了读者大人们。
我比较习惯用 IntelliJ IDEA，在 Java 后端方面地位没得说，然而我前端也是用它做的。。。说实话没感到有什么不妥当的地方，界面什么的都和 WebStorm 差不多，只要不是只用 Eclipse 的同学，应该不会觉得别扭。
（用 Eclipse 的同学，是时候尝试改变了 /手动狗头）
第一篇文章也放上了 GitHub 的地址，有些小伙伴可能没看到，这里再放一遍：
https://github.com/Antabot/White-Jotter
追到第三篇的同学都是动手能力比较强的了，今天我测试了一下，按照项目的 README 运行基本没有问题，有兴趣的小伙伴可以搞一下，如果发现新的问题请在评论区指出，感谢。
一、后端项目创建
这个就很简单了。在 IDEA 中新建项目，选择 Spring Initializr，点击 Next



输入项目元数据，Next



选择 Web -> Web，Next



最后是项目名称和项目地址，Finish 后等待项目自动初始化即可。



运行 Application.java



访问 http://localhost:8080，发现弹出了错误页面，OK，这就对了，因为我们啥页面都没做啊。


二、登录页面开发
1.关于前后端结合
注意我们的项目是前后端分离的，这里的结合意思不是就不分离了，是如何把这俩分离的项目串起来用。
前面提到过前后端分离的意思是前后端之间通过 RESTful API 传递 JSON 数据进行交流。不同于 JSP 之类，后端是不涉及页面本身的内容的。
在开发的时候，前端用前端的服务器（Nginx），后端用后端的服务器（Tomcat），当我开发前端内容的时候，可以把前端的请求通过前端服务器转发给后端（称为反向代理），这样就能实时观察结果，并且不需要知道后端怎么实现，而只需要知道接口提供的功能，两边的开发人员（两个我）就可以各司其职啦。
艾玛做一个完整的教程真不容易，遇到的每个知识点感觉都能讲一堆。上次的文章被一位老哥反问是不是太着急了，也不知道是什么意思，我自己反思可能是讲的不够细吧，这里我就再啰嗦一下讲两句 正向代理 和 反向代理。
正向代理就是，你要访问一个网站，比如“谷弟弟”，然后发现访问不到，于是你访问了一个能访问到“谷弟弟”的代理服务器，让它帮你拿到你想浏览的页面。
反向代理就是，你访问了一个网站，你以为它是“谷弟弟”，但其实它是“谷姐”，“谷姐”知道你其实是想找她弟，就取回“谷弟弟”的内容给你看。作为用户的你，是不知道有这个过程的，这么做是为了保护服务器，不暴露服务器的真实地址。
知乎上有张神图可以描述这两种过程


2.前端页面开发
Login.vue
首先我们开发登录页面组件，右键 src\components 文件夹，New -> Vue Component，命名为 Login，如果没有 Vue Component 这个选项，可以选择新建一个 File，命名为 Login.vue 即可。代码如下：
<template>
  <div>
      用户名:<input type="text" v-model="loginForm.username" placeholder="请输入用户名"/>
      <br><br>
      密码： <input type="password" v-model="loginForm.password" placeholder="请输入密码"/>
      <br><br>
      <button v-on:click="login">登录</button>
  </div>
</template>

<script>

  export default {
    name: 'Login',
    data () {
      return {
        loginForm: {
          username: '',
          password: ''
        },
        responseResult: []
      }
    },
    methods: {
      login () {
        this.$axios
          .post('/login', {
            username: this.loginForm.username,
            password: this.loginForm.password
          })
          .then(successResponse => {
            if (successResponse.data.code === 200) {
              this.$router.replace({path: '/index'})
            }
          })
          .catch(failResponse => {
          })
      }
    }
  }
</script>


<template> 标签中随便写了一个登录的界面， methods 中定义了登录按钮的点击方法，即向后端 /login 接口发送数据，获得成功的响应后，页面跳转到 /index。因为之前我们设置了默认的 URL，所以请求实际上发到了 http://localhost:8443/api/login。
AppIndex.vue
右键 src\components 文件夹，新建一个 directory，命名为 home，再在 home 下新建一个 Appindex.vue ，即首页组件，这里暂时不做过多开发，先随便写个 Hello World。
<template>
    <div>
      Hello World!
    </div>
</template>

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

<style scoped>

</style>


3.前端相关配置
设置反向代理
修改 src\main.js 代码如下：
import Vue from 'vue'
import App from './App'
import router from './router'
// 设置反向代理，前端请求默认发送到 http://localhost:8443/api
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8443/api'
// 全局注册，之后可在其他组件中通过 this.$axios 发送数据
Vue.prototype.$axios = axios
Vue.config.productionTip = false

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


因为使用了新的模块 axios，所以需要进入到项目文件夹中，执行 npm install --save axios，以安装这个模块。
配置页面路由
修改 src\router\index.js 代码如下
import Vue from 'vue'
import Router from 'vue-router'
// 导入刚才编写的组件
import AppIndex from '@/components/home/AppIndex'
import Login from '@/components/Login'

Vue.use(Router)

export default new Router({
  routes: [
  // 下面都是固定的写法
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/index',
      name: 'AppIndex',
      component: AppIndex
    }
  ]
})


跨域支持
为了让后端能够访问到前端的资源，需要配置跨域支持。
在 config\index.js 中，找到 proxyTable 位置，修改为以下内容
    proxyTable: {
      '/api': {
        target: 'http://localhost:8443',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }

注意如果不是在最后的位置，大括号外需要添加一个逗号。
运行项目
执行 npm run dev，或双击 dev（start 也一样）脚本，查看登录页面效果。
注意地址是 localhost:8080/#/login ，中间有这个 # 是因为 Vue 的路由使用了 Hash 模式，是单页面应用的经典用法，但连尤雨溪本人都觉得不太好看，所以可以在路由配置中选择使用 History 模式，但会引发一些问题，需要在后端作出处理，所以这里先不更改，之后我单独写一篇关于这个的文章。



教程的内容简化了一下，我做的是这个样子的。。。



呃，总之这个页面的功能都是一样的。
4.后端开发
User 类
在 Login.vue 中，前端发送数据的代码段为
.post('/login', {
            username: this.loginForm.username,
            password: this.loginForm.password
          })

后端如何接收这个 JS 对象呢？我们很自然地想到在需要创建一个形式上一致的 Java 类。
打开我们的后端项目 wj，首先在 src\main\java\com\evan\wj 文件夹（就是你自己的 web 项目的包）下，新建一个 pojo 包（package），然后新建 User类，代码如下
package com.evan.wj.pojo;

public class User {
    int id;
    String username;
    String password;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}


Result 类
Result 类是为了构造 response，主要是响应码。新建 result 包，创建 Result 类，代码如下
package com.evan.wj.result;

public class Result {
    //响应码
    private int code;

    public Result(int code) {
        this.code = code;
    }

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

}


实际上由于响应码是固定的，code 属性应该是一个枚举值，这里作了一些简化。
LoginController
Controller 是对响应进行处理的部分。这里我们设定账号是 admin，密码是 123456，分别与接收到的 User 类的 username 和 password 进行比较，根据结果返回不同的 Result，即不同的响应码。前端如果接收到成功的响应码（200），则跳转到 /index 页面。
在 wj 下新建 controller 包，新建 LoginController 类，代码如下
package com.evan.wj.controller;

import com.evan.wj.result.Result;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.util.HtmlUtils;

import com.evan.wj.pojo.User;

import java.util.Objects;

@Controller
public class LoginController {

    @CrossOrigin
    @PostMapping(value = "api/login")
    @ResponseBody
    public Result login(@RequestBody User requestUser) {
    // 对 html 标签进行转义，防止 XSS 攻击
        String username = requestUser.getUsername();
        username = HtmlUtils.htmlEscape(username);

        if (!Objects.equals("admin", username) || !Objects.equals("123456", requestUser.getPassword())) {
            String message = "账号密码错误";
            System.out.println("test");
            return new Result(400);
        } else {
            return new Result(200);
        }
    }
}


这里只是为了演示前后端的交互过程，真正的登录验证要考虑更多因素，后面的文章会有详细介绍。另外教程初期对项目结构做了一些简化，实际上在 controller 里写这么多逻辑是不合理的，要尽量封装到 service 里面去。
最后，在 src\main\resources 文件夹下找到 application.properties 文件配置端口，即加上 server.port=8443（初始应该是空白的，后期还要配置数据库等）
5.测试项目
同时运行前端和后端项目，访问 localhost:8080/#/login，输入用户名 admin，密码 123456



点击确定，成功进入 localhost:8080/#/index



通过这篇文章，希望大家可以直观地感受到前后端分离项目中前后端的过程，之后的功能开发基本思路就是在后端开发 Controller，在前端开发不同的组件，这个顺序可以随意。实际的项目应该是前后端人员根据功能需求约定好接口，然后齐头并进，以提高开发效率。
接下来一段时间需要写的内容大概有以下这些：

数据库的引入
后端拦截器的配置
部署项目时会遇到的一些坑
使用 Element 辅助前端开发
公共组件的开发

顺序我再想一想，教程做的比较慢，大家可以在 GitHub 上看项目的进度。
查看系列文章目录：

https://learner.blog.csdn.net/article/details/88925013
上一篇：Vue + Spring Boot 项目实战（二）：搭建 Vue.js 项目
下一篇：Vue + Spring Boot 项目实战（四）：数据库的引入