Vue+SpringBoot项目实战(四):前后端项目结合测试（登录页面开发）

Question

如题所述

Answer 1

完成前端项目后，我们继续进行项目完善和测试，重点关注登录页面的开发。

一、后端项目创建与完善

通过Spring Initializr创建后端项目，选择2.7.17版本以兼容较低的JDK要求。创建后，可能会遇到依赖下载问题，这时可以尝试关闭并重新打开项目。运行后，访问localhost:8080，验证项目是否正常启动。

二、前后端项目结合与测试

前后端通信基于Restful API的JSON数据。前端通过Nginx转发请求到后端Tomcat服务器，实现实时反馈。正向代理处理客户端请求，而反向代理则代理服务器，保护资源。

在前端，我们通过Vue的原型对象挂载axios库，简化HTTP请求。登录页面的Login.vue和AppIndex组件开发中，引入axios进行数据交互。项目启动后，前端端口为9998，但实际为8844，增加了服务器保护。

3. 后端项目结构与功能开发

从登录功能需求出发，开发LoginController，包括数据库操作（如创建admin用户）、验证用户输入、返回响应结果等。涉及的实体类如SysUser、Dto和VO，以及数据库操作相关的DAO、Service和Mapper。

4. 功能测试

启动前后端项目，访问192.168.0.6:9998进行登录测试，输入admin和123456，检查前端和后端的响应结果，同时查看后端的SQL查询日志，确认登录成功并跳转到/index页面。