Vue+SpringBoot项目实战之学习助手(四):前后端项目结合测试

最新推荐文章于 2023-11-30 14:03:51 发布

烟花易冷，夜未凉

最新推荐文章于 2023-11-30 14:03:51 发布

阅读量196

点赞数

分类专栏： SpringBoot 文章标签： vue.js spring boot 学习

本文链接：https://blog.csdn.net/weixin_43452872/article/details/133646937

版权

SpringBoot 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

前面的文章已经介绍了项目架构、以及技术选型。这一篇文章的主要内容有以下几点：
一、后端项目的创建。
二、登录页面的完善以及登录测试
三、前后端项目结合测试所需的原理、依赖等内容。

本篇目录

一.后端项目创建

1.选择使用 Spring Initializr，配置好右侧的内容之后，点击创建。
在这里插入图片描述
2.这个地方的版本选择。2.7.17版本的，因为3.x以上，要jdk版本也要更高。

3.等待项目创建之后，静静等待完成即可。有时候依赖一直下载不到，可以尝试关闭项目，在重新打开。创建完项目之后，如下：
在这里插入图片描述
4.运行项目

在浏览器打开 localhost:8080, 发现是这样子,因为我们什么都还没做，先放在这儿，到这后端项目已经就算创建好了。

二.前后端项目结合

1.前后端项目通信原理

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

2.说明
在开发的时候，前端用的是前端服务器(Nginx)，后端用后端服务器(Tomcat)，当我们开发前端内容的时候，可以把前端的请求通过前端服务器转发给后端服务器.(称为反向代理)，这样就可以实时观察结果。并且不需要知道后端是如何实现的，而只需要知道接口提供的功能。

3.正向代理与反向代理
相同点：他们都是一种服务器。咳，和没说一样。
不同点：
1.正向代理，它代理的是客户端，举例来说，客户在浏览器A发送一个请求要访问目的资源C，发现访问不到。我们换了一个浏览器D，同样发送一个请求，去访问目的资源C，发现可以访问到。这个是正向代理。
2.反向代理，它代理的是服务器。当我们需要一个资源时，我们叫它B。我们发送一个请求A，访问了一个网站C。然后C通过转发，由C访问到了B，然后把B的资源信息返回给C。但是从C----->B，我们是看不到的，C访问B之后，拿到资源，然后返回给A，这样做的过程，是为了保护我们的资源服务器，可以理解为套了一层壳。

2.前端Login.vue、AppIndex.vue组件开发

1.首先在 src/components下分别新建一个login、home文件夹。然后在里面新建一个 Login.vue、AppIndex.vue组件。
在这里插入图片描述
2.各部分组件构成

在template模版中，我们定义一些页面的静态信息。
script部分
style部分，这部分是样式，可以放在之后优化。
路由配置

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/index',
    name: 'AppIndex',
    component: AppIndex
  }
]

const router = new VueRouter({
  routes
})

export default router

接着我们运行前端项目，并访问路径：http://192.168.0.6:9998/#/login。可以看到，页面已经能够访问到。
Main.js文件配置
在main.js文件中引入以下代码

var axios =require(‘axios’)

这一行是在 JavaScript 的 Node.js 环境中引入了 axios 这个库。axios 是一个基于 promise 的 HTTP 客户端，可以在浏览器和 node.js 中使用。它允许你发送 HTTP 请求，并获取响应数据。

// 全局注册，之后可以在其他组件中通过 this.$axios 发送数据

Vue.prototype.$axios = axios

这一行代码是将 axios 实例绑定到 Vue 的原型上，这样在 Vue 的任何组件中你都可以通过this. $a x i os 来使用 a x i os 。在 V u e . j s 中，你可以在组件中直接使用 t hi s .$ http 或 this.$axios 来发送 HTTP 请求，而不需要在每个组件中都导入一次 axios。

vue.config.js配置

可以看到，启动项目之后，它出现的访问端口是9998，但是实际端口是8844，这样能够进一步的保护服务器。到这里前端项目就告一段落了，接下来是后端项目的完善和开发。

运行项目，访问登录页面
在这里插入图片描述

3.后端项目完善

3.1后端项目架构

在这里插入图片描述

3.2 功能开发

一个功能的开发，一般是从需求出发，到流程设计，再到代码开发，按照这个流程开发就可以了。
需求：开发一个登录功能，输入账号密码，去数据库查询是否存在该用户。无论存在与否，返回给前端一个结果信息。
思路：分别从controller、service、serviceImpl、userDao、mapper编写方法进行开发。

LoginController

controller是对响应结果处理的部分。我们在数据库的用户表(sys_user)创建一个账号为admin。密码为123456的用户信息。根据从前端传入过来的username 和 password进行比较。根据结果返回不同的Result,即不同的响应码。前端如果接收到成功的响应码（200）,则跳转到 /index 页面。

// 在工作中，尽量自己养成一个好的习惯，最起码把自己开发的东西，
// 写上注释，相信我，你的同事会感激你的
/**
 * @ClassName LoginController
 * @Description 登录控制器类
 * @Author liuBaiHui
 * @Date 2023/10/5 12:12
 * @Version 1.0
 */
@RestController
@RequestMapping("/api")
public class LoginController {

  @Autowired
  private LoginService loginService;

  /*
  * @description 登录接口
  * @param userVo:
  * @return: com.lbh.study.common.ResultVO<com.lbh.study.pojo.SysUser>
  * @author liuBaiHui
  * @date 2023/10/5-15:06
  */
  @PostMapping("/login")
  public ResultVO<SysUser>  userLogin(@RequestBody UserDto userDto){
      // 1.登录接口
      SysUser sysUser = loginService.userLogin(userDto);
      ResultVO<SysUser> success = ResultUtils.success(sysUser);
      return success;
  }
}

servive

public interface LoginService extends IService<SysUser> {

    SysUser userLogin(UserDto userDto);
}

serviceImpl

@Service
public class LoginServiceImpl extends ServiceImpl<SysUserDao, SysUser> implements LoginService {

    @Autowired
    private SysUserDao sysUserDao;

    @Override
    public SysUser userLogin(UserDto userDto) {
        // 1.定义一个结果集对象
        SysUser sysUser = sysUserDao.selectByObject(userDto);
        return sysUser;
    }
}

userDao

@Mapper
public interface SysUserDao extends BaseMapper<SysUser> {

    SysUser selectByObject(@Param("userDto") UserDto userDto);
}

mapper

<?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="com.lbh.study.dao.SysUserDao">


    <select id="selectByObject" resultType="com.lbh.study.pojo.SysUser">
        SELECT  *  FROM sys_user
        <where>
            <if test="userDto.username !=null and userDto.username !=''">
                username = #{userDto.username}
            </if>
            <if test="userDto.password !=null and userDto.password !=''">
                AND  password = #{userDto.password}
            </if>
        </where>
    </select>
</mapper>

在上面中，我对于前端传入的 username和password，使用了一个叫Dto的实体类来进行接收，想了想，既然SysUser和数据库中的字段是一一对应的，就没必要再使用@RequestBody SysUser sysUser 来接收，用来保证实体类完整性。这里使用Dto，它是用来专门对传输数据处理的，还有一个对应的叫做VO，它是用来数据字段展示的，这个的话，我是使用SysUser实体类直接展示的。这里多说一嘴。感兴趣可以下去查一下。

Dto

@Data
public class UserDto implements Serializable {
  // 账号
  private String username;
  // 密码
  private String password;
}

MyBatis-Plus

在上面的代码中，会看到 extends BaseMapper<SysUser>、extends ServiceImpl<SysUserDao, SysUser>。这些相关的知识点是属于MyBatis-Plus的。它里面封装了基本的增删改查的方法。还有一些其他的操作。可以满足基本的功能需求，若是需要复杂的，还需要单独进行开发。

通用返回结果类Result

定义通用的结果类Result，可以整体上保持代码的简洁性，统一。

// 同样使用lombok注解,减少代码的编写。
@Data
public class ResultVO<T> 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,"");
  }
}

通用结果工具类ResultUtis

进一步的封装，在controller中使得代码更加的优雅，简洁。

public class ResultUtils {

  // 成功
  public static <T> ResultVO<T> success(T data){
      return new ResultVO<>(200, data,"success");
  }

  // 失败
  public static <T> ResultVO<T> failed(Integer code, String message, String description){
     return new ResultVO<>(code,null,message,description);
  }
}

以上一个登录功能的完整流程就结束了，我们还需要引入一些配置，让它能够正常的运行起来。

依赖引入

这些依赖是当前登录功能所用到的一些，

<properties>
    <java.version>1.8</java.version>
    <lombok.version>1.18.4</lombok.version>
    <mybatis-plus.version>3.3.2</mybatis-plus.version>
    <mysql-connector-java.version>5.1.37</mysql-connector-java.version>
    <druid.version>1.1.22</druid.version>
</properties>
<dependencies>
    <!--web 模块-->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <!--SpringBootTest-->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>

    <!--自动配置功能-->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-autoconfigure</artifactId>
        <version>2.7.17-SNAPSHOT</version>
    </dependency>

    <!-- LomBok -->
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <version>${lombok.version}</version>
    </dependency>

    <!--MyBatis-Plus-->
    <dependency>
        <groupId>com.baomidou</groupId>
        <artifactId>mybatis-plus-boot-starter</artifactId>
        <version>${mybatis-plus.version}</version>
    </dependency>

    <!--数据库驱动-->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>${mysql-connector-java.version}</version>
    </dependency>

    <!--druid数据源连接池-->
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>druid-spring-boot-starter</artifactId>
        <version>${druid.version}</version>
    </dependency>

    <!--热部署-->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
    </dependency>
    
</dependencies>

数据库配置引入

这里的话，是需要用到 resources 目录下的 application.properties文件。

# 端口号配置
server.port=8844

# 数据库配置
spring.datasource.type= com.alibaba.druid.pool.DruidDataSource
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/dsgl_formal?characterEncoding=UTF-8
spring.datasource.username=root
spring.datasource.password=201835

# SQL打印
logging.level.com=debug

到这里，一个功能的开发就算完成了，接下来我们分别启动前后端项目

3.前后端项目联调

3.1 运行前端项目

运行前端项目，并访问 http://192.168.0.6:9998/#/login ，输入账号：admin，密码：123456。
在这里插入图片描述
点击登录，分别看下前端和后端项目的响应结果，

3.2 运行后端项目，

点击登录之后，可以看到后端项目控制台已经打印出了对应的SQL，看到username、password和我们输入的相同。这就说明，我们的前后端项目已经联通了。
在这里插入图片描述
可以看到，前端页面跳转到了这个页面，这也和我们的预期相符，登录成功，跳转到 /index 页面。

4.小结

前端小结
1. 熟悉前端中，一个组件的开发，以及跳转。有一个明确的认识。
2. 实现两条腿走路，实现独立自主研发，避免了不会前端，导致被坑。
3. 熟悉了vue.config.js的配置文件的使用。
后端小结
1.熟悉了接口功能的开发，温故知新，对代码开发、代码编写的优雅有更高的认识。
2.复习了MP的知识点
3.复习了如何创建SpringBoot的项目步骤。加深印象。
4.复习了dao、service、serviceImpl、controller，加深了它们的印象。