目录
五、SprintBoot+html/css/js+mybatis实现一个简单的登录接口
前言
做测试时，经常遇到定位bug，需要去分析是前端还是后端的问题，首先了解MVC架构的原理，其次自己做个简单的项目，用SpringBoot+html/css/js+mybatis实现一个简单的登录接口，最后，对接口测试有更深入的理解，遇到问题不慌，能快速找到问题的根源，结合以前做项目的经验，做一些总结。
一、MVC架构
我自己的理解是：我们在网页端看到的所有东View层，前端拿到的数据展示给用户，在这一层，当有很明显的问题或bug出现时，我们需要打开开发者工具F12查看请求信息以及接口返回的信息，到了Controller这层，前端请求数据是不是对的，后端返回的数据是不是对的，那后端的数据从哪里来的？需要去访问数据库，到了Model这一层，服务端需要从数据里拿数据进行返回。
也与日常测试流程大致一致，看到页面的问题，先看下接口相关信息，再去查看数据的数据，以便更准确地知晓哪里出现了问题。
View层-->视图层，用户页面
Controller层-->控制层，处理用户请求
model层-->业务对象的实现，对数据库中业务对象进行操作，业务对象的操作逻辑
具体什么是MVC架构，可以看看下面的这篇博客，写得很不错。
MVC三层架构（详解）_mvc三层架构是哪三层_天天向上的菜鸡杰！！的博客-CSDN博客
二、环境准备：
windows 10
IDE版本 我用的是2021，后面安装依赖时遇到了和IDE版本不兼容的问题
新建一个spring initializr项目
SDK版本我用的是1.8
Java版本用的是8
Maven版本用的是3.8.1
三、状态码
接口返回的状态码，笔者在之前遇到一个面试，面试官上来就是问某个状态码返回是什么意思，当时就问住我了，不过现在回想起来，问到非常具体的某个返回的状态码是什么意思，我也记不住，只能是大概推测发生了什么，后来在工作中也经常遇到接口返回状态码，有时候前端后端问题还分不清楚，现在通过写一个接口自己回顾一下。
非常全面的响应状态码，可以看一下，记得住吗？
HTTP 响应状态码 - HTTP | MDN (mozilla.org)
接口测试中常用的get、post请求
创建一个SprootBoot项目，具体代码实现如下：
package com.example.demo;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
//创建一个restful风格的接口测试类
@RestController
//映射的url
@RequestMapping("/test")
public class Login {
@GetMapping(produces = "aplication/json")
public String Login() {
return "hello world!";
}
@GetMapping("/login")
public String Login(String name) {
if (name == null) {
return "名称缺失";}
if ("test".equals("test")) {
return "welcome";
}
else {
return "hello" +name+ "暂时无法访问";
}
}
@PostMapping("/visit")
public String Login(String usr,String pwd){
if (usr.equals("test001") && pwd.equals("123456")){
return "登录成功";}
else{
return "登录失败";
}
}
}第一个状态码404，这个工作中遇到过，一般都是前端服务未起来。
后端服务启动了，但服务下没有资源，可能是url访问错了，也可能是服务下本身就没资源。
状态码500，一定是服务端的问题吗？
这种场景也可能是前端没有传入必传的参数，服务端没有做容错处理，无法处理这种请求。
状态码405，可以看到访问的是一个post请求，但网页端访问用的是get方法，此时要借助抓包工具来查看post请求。
使用postman工具，当然抓包工具有很多，也可以选用其他的工具，比如Jmeter也可以做接口测试。
四、接口测试文档
做测试时，有时研发会给到一个swagger的在线接口测试文档，那么这个文档是怎么生成的呢？
下面我们来试一下：
接口文档swagger3自动生成
1、首先需要引入依赖包，可以打开这个链接复制依赖包，也可以直接复制下面的。
Maven Repository: io.springfox » springfox-boot-starter » 3.0.0 (mvnrepository.com)
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-boot-starter</artifactId>
<version>3.0.0</version>
</dependency>
但如果引入依赖时报错，下面的博客写的很好，前面几步解决了我遇到的问题，这里多提一下，可能会与IDE版本有关，也可能与maven版本有关，会遇到下载依赖报错的情况，笔者就遇到过，折磨了一天，翻遍了很多博客。
IDEA中Maven依赖包导入失败报红问题总结最有效8种解决方案_idea导入项目依赖爆红_煌sir的博客-CSDN博客
然后进行配置，不配置好，启动时会报错，在application.properties文件里加入配置：
spring.mvc.pathmatch.matching-strategy=ant_path_matcher
重新启动项目，打开这个本地的服务Swagger UI
http://localhost:8080/swagger-ui/index.html
本地的接口文档就生成了，也可以做更完善的配置。
五、SprintBoot+html/css/js+mybatis实现一个简单的登录接口
到了本博客最关键的一步，自己去写一个登录接口，调用Mysql数据库，再加一个登录页面，所有的saas服务都是这样玩的，更好地体会到MVC的架构，用户在网页端操作，调用接口，接口调用数据库，返回给用户结果。
准备工作：
- 依赖环境下载安装（lombok，mybatis，mysql）
- mysql数据库服务启动
- 完成数据库相关的配置
安装lombok依赖
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<scope>provided</scope>
<version>1.18.10</version>
</dependency>数据库相关配置准备，启动mysql，安装可视化工具navicat，连接数据库。
Win10 启动 mysql 时出现 “ 发生系统错误 5。 拒绝访问 ”_win10启动服务错误5拒绝访问_住在阳光的心里的博客-CSDN博客
添加数据库依赖
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.2.2</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.19</version>
</dependency>添加数据库连接与配置，注意踩坑点，数据库和系统时区有差异，运行时可能会报错，所以添加上：&serverTimezone=UTC
spring.mvc.pathmatch.matching-strategy=ant_path_matcher
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/test001?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=123456接口层代码，可以看到，调用了从mysql数据库查询、插入数据的接口
@PostMapping("data/add")
public String addUser(int id,String usr,String pw,String phone,String email){
int result = userMapper.insertUser(id,usr,pw,phone,email);
if (result==1){
return "success";
}
else {
return "fail";
}
}
@GetMapping("/query")
public User query(String username, String password){
User user = userMapper.queryUserByUserNameAndPwd(username,password);
System.out.println(user);
return user;
}
@PostMapping("data/addTest")
public String addUserTest(@RequestBody User user){
int result = userMapper.insertUser(user.getId(),user.getUsr(),user.getPw(),user.getPhone(),user.getEmail());
if (result==1){
return "success";
}
else {
return "fail";
}
}查询数据库的代码，用到了参数化方法@Param
package com.example.demo;
import model.User;
import org.apache.ibatis.annotations.*;
@Mapper
public interface UserMapper {
@Insert("insert into Users values(#{id},#{usr},#{pw},#{phone},#{email})")
int insertUser(@Param("id") int id,
@Param("usr") String usr,
@Param("pw") String pw,
@Param("phone") String phone,
@Param("email") String email);
@Select("select * from Users where usr=#{usr} and pw=#{pw}")
User queryUserByUserNameAndPwd(@Param("usr") String usr,
@Param("pw") String pw);
@Update("updata Users set phone=#{phone} where email=#{email}")
int updateNickNameByUserName(@Param("phone") String phone,
@Param("usr") String usr);
@Delete("delete from Users where usr=#{usr}")
int deleteByUserName(@Param("usr") String usr);
}在数据层，定义的字段需与数据库的字段对应
这里用到了@Data注解，可以看这下这篇文章对这个注解的介绍。
package model;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
//这里的字段要和数据库对应上
public class User {
public int id;
public String usr;
public String pw;
public String phone;
public String email;
}以上三段主要的代码实现了，通过接口对数据库的数据进行操作，看一下实现的结果，以最后一个插入数据的接口为例，这里传递的参数是json格式，不是一个params的格式，可以看到无论是通过swagger文档里调用接口还是通过postman工具调用接口，都可以调用成功，最后都能在数据库中插入新的数据。
495
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
