Vue + SpringBoot 项目实战（三）：我的助手之前后端联调

摘要：在前面两篇文章中，已经对这个项目进行了基本的介绍。接下来就进一步完善这个项目。后来觉得每篇文章的标题不能清晰表达含义，然后对文章的标题都进行了统一了修改。同时，这篇文章的篇幅较长、涉及的知识点比较多。希望各位小伙伴可以耐心看完，一定能够有所收获！

在前面两篇文章中，已经对这个项目进行了基本的介绍。接下来就进一步完善这个项目。后来觉得每篇文章的标题不能清晰表达含义，然后对文章的标题都进行了统一了修改。同时，这篇文章的篇幅较长、涉及的知识点比较多。希望各位小伙伴可以耐心看完，一定能够有所收获！

下面废话不多说，直接肝！

选择使用 Spring Initializr，配置好右侧的内容之后，点击创建。

现在SpringBoot创建时，基本上都是3.x版本。可以先行创建一个项目，然后在pom.xml文件中进行调整为2.x版本。下面介绍完成之后，会附上详细的 pom.xml 文件。

在浏览器打开 localhost:8843发现是这样子，到这里，后端项目也创建好了。之所以报错，那是因为我们还没有进行页面的开发。

知识点补充：

1.前后端分离项目通信

前后端分离的意思是，前后端通过Restful API 传递JSON数据进行交流。

2.对于前端项目是如何运行的？

这个是我搜集的一些资料，我不是专业的前端，不能误导大家。下面进行一些分享，仅供参考。要是有小伙伴能补充说明，更好。在开发阶段，前面有提到，我们是使用Vue UI 进行创建的项目，使用Vue UI 图形化创建的项目，在开发阶段通常会使用Vue CLI提供的开发服务器，该服务器基于 webpack-dev-server 实现，可以提供热重载和实时更新等功能。这个开发服务器是基于Node.js构建的，但它仅用于开发阶段，生产环境通常不会使用它。所以，在开发阶段，它是基于Node.js服务器运行的。也就是说，我创建的项目是运行在Node.js服务器上的，感觉这样说也没毛病。

3.对于后端项目是如何运行的？

对于后端项目，在SpringBoot项目中，会内置一个服务器Tomcat，当项目运行成功之后，可以在上面的截图中，看到一个8843 端口，这个就是Tomcat服务器为我们提供的一个端口号。

4.前后端项目通信

在前后端项目通信时，通常使用HTTP协议进行。具体来说，前端项目会向后端发送HTTP请求，后端接收到请求之后，并将处理结果以HTTP响应的形式返回给前端。这种通信方式是基于请求-响应模式的。即前端发起请求，后端响应请求。现在的话，只说这一个就行。

在Vue项目中，常用的HTTP请求库包括Axios、Fetch API等。在这里，我们使用 Axios来进行发送请求。

5.前端项目结构

上面这个图，可以作为一个参考。其中下面的一个链接，是找到的相关资料。链接如下：「链接」

前端页面开发

LoginIn.vue

首先我们开发登录页面组件，右键 src\components 文件夹，新建一个文件夹 LoginManager 。然后在该文件夹下，右键该文件夹，New -> Vue Component，新建一个文件命名为 Login，如果没有 Vue Component 这个选项，可以选择新建一个 File，命名为 Login.vue 即可。目录结构及代码如下：

用户名:

密码：

登录export default {name: 'LoginIn',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 => {})}}}

AppIndex.vue组件

右键src\components文件夹，新建一个文件夹 commonManager ,然后在commonManager 下新建一个HomePage.vue ，即首页组件。

Welcom to AdminIndex前端项目相关配置

设置反向代理

修改 src\main.js 代码如下

import Vue from 'vue'import App from './App'import router from './router'// 设置反向代理，前端请求默认发送到 http://localhost:8443/apivar axios = require('axios')axios.defaults.baseURL = 'http://localhost:8843/api'// 全局注册，之后可在其他组件中通过 this.$axios 发送数据Vue.prototype.$axios = axiosVue.config.productionTip = false/* eslint-disable no-new */new Vue({router, // 将路由实例注入到根Vue 实例store, // 将status注入到根Vue 实例当中render: h => h(App)}).$mount('#app')

在这里使用了一个模块叫做 axios，因此需要使用命令 npm install --save axios,以安装这个模块儿。

配置页面路由

修改src\router\index.js 代码如下：

import Vue from 'vue'import Router from 'vue-router'// 导入刚才编写的组件import AppIndex from '@/components/commonManager/HomePage'import Login from '@/components/loginManager/LoginIn'Vue.use(Router)export default new Router({routes: [{path: '/login',name: 'Login',component: LoginIn},{path: '/index',name: 'AppIndex',component: HomePage}]})运行项目

找到 README.md 中的命令行：npm run serve 。等待执行成功之后，然后打开一个浏览器网页，输入下面图片中的网址，注意地址是 http://自己的IP地址:8080/#/login ，中间有这个 # 是因为 Vue 的路由使用了 Hash 模式，是单页面应用的经典用法。可以在路由配置中选择使用 History 模式，但会引发一些问题，需要在后端作出处理，之后单独写一篇关于这个的文章。

运行成功之后，可以看到下图：

到这里，一个简易的前端登录功能就完成了。接下来是后端项目的开发。

后端项目结构

登录功能开发

当进行开发时，切记不可直接动手写代码，这个习惯不可取。因为这样写出来的代码，第一点是质量难以保证。第二点就是，当直接写时，自己的思维很容易被局限。有些细微的点考虑不到。正确的步骤如下：

第一步：进行需求分析。

需求：简单说，我要做一个登录功能。接下来就对它进行分析。首先要做的就是，我需要接收到前端传入的“用户名”、“密码”。接着，根据“用户名”、“密码”，去数据库进行匹配。最后。我把查询到的结果返回给前端。

第二步：在“演草纸”上写下操作步骤。

第一步分析之后，下面就进行“演算”。首先接收前端传入的“用户名”、“密码”。在后端，我们需要定义一个方法，能够让前端的请求找到对应的后端路径。接着要做的就是需要定义一个“用户实体类”；接着，去数据库进行匹配，这意味着，我们需要编写一条sql，能够根据“用户名”、“密码”去数据库的用户表查找。这个我熟，打开Navicat，哐哐一顿编写。完事儿。最后，把查询到的结果返回给用户，从数据库查询的结果，无非两种，一种是存在该用户；一种是不存在该用户；

第三步：再动手写代码。

有了以上两个步骤之后，下面就进入到实际代码编写当中。按照已经写好的步骤，先定义一个用户实体类。

// 在工作中，尽量写上注释，虽然讨厌写，但是它确实在之后的工作中能够帮到我/*** @ClassName LoginController* @Description 登录控制器类* @Author liuBaiHui* @Version 1.0*/@RestController@RequestMapping("/api")public class LoginController {@Autowiredprivate LoginService loginService;/** @description 登录接口* @param userVo:* @return: com.lbh.study.common.ResultVO* @author liuBaiHui*/@PostMapping("/login")public ResultVO userLogin(@RequestBody UserDto userDto){// 1.登录接口SysUser sysUser = loginService.userLogin(userDto);ResultVO success = ResultUtils.success(sysUser);return success;}}// 这里使用了 lombok的一些功能，使用注解可以帮助我们快速创建 getter、setter、toString方法。@Data@AllArgsConstructor@NoArgsConstructor@ToString@TableName("sys_user")public class SysUser implements Serializable {// 主键IDprivate Integer id;// 用户名private String username;// 密码private String password;// 手机号private String phone;// 创建时间private LocalDateTime createTime;// 更新时间private LocalDateTime updateTime;// 正常、锁定标识 (0-正常；1：锁定)private String lockFlag;// 逻辑删除标识(0:显示; 1:隐藏)private String delFlag;// 昵称private String nickName;// 邮箱private String email;// 头像private String avatar;}

Data Access Object（数据访问对象，DAO）即用来操作数据库的对象。

@Mapperpublic interface SysUserDao {SysUser selectByObject(@Param("userDto") UserDto userDto);}public interface LoginService {SysUser userLogin(UserDto userDto);}@Servicepublic class LoginServiceImpl implements LoginService {@Autowiredprivate SysUserDao sysUserDao;@Overridepublic SysUser userLogin(UserDto userDto) {// 1.定义一个结果集对象SysUser sysUser = sysUserDao.selectByObject(userDto);return sysUser;}}@Datapublic class ResultVO implements Serializable {// 1.状态码private Integer code;// 2.内容private T data;// 3.消息private String message;// 4.描述private String description;// 5.有参构造方法public ResultVO(Integer code, T data, String message, String description){this.code = code;this.data = data;this.message = message;this.description = description;}// 6.构造方法public ResultVO(Integer code, T data){this(code,data,"","");}public ResultVO(Integer code, T data, String message){this(code,data,message,"");}}

以上就是一个功能开发的整个流程。介绍了从前端到后端整个开发流程。下面分别运行前端项目、后端项目。在前端输入用户、密码之后。在进行通信时，一般会报错，跨域报错，下面是如何通过后端解决跨域的。它也有其他的解决方法。

配置跨域

在前后端进行响应时，一般会遇到跨域问题。在这里，使用在后端进行配置，解决跨域请求。

在上面的 “后端项目架构” 当中，有一个 config 包，创建一个CorsConfig.java 类。代码如下：

@Configurationpublic class CorsConfig {@Beanpublic FilterRegistrationBean filterRegistrationBean {CorsConfiguration corsConfiguration = new CorsConfiguration;//1.允许任何来源corsConfiguration.setAllowedOriginPatterns(Collections.singletonList("*"));//2.允许任何请求头corsConfiguration.addAllowedHeader(CorsConfiguration.ALL);//3.允许任何方法corsConfiguration.addAllowedMethod(CorsConfiguration.ALL);//4.允许凭证corsConfiguration.setAllowCredentials(true);UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource;source.registerCorsConfiguration("/**", corsConfiguration);CorsFilter corsFilter = new CorsFilter(source);FilterRegistrationBean filterRegistrationBean = new FilterRegistrationBean(corsFilter);// 小于 SpringSecurity Filter的 Order(-100) 即可。这个地方后面再说原因。filterRegistrationBean.setOrder(-101); return filterRegistrationBean;}}

配置跨域之后，点击登录，分别看下前端和后端项目的响应结果。