Javaweb之SpringBootWeb案例查询部门以及前后端联调的详细解析

2.1 查询部门

2.1.1 原型和需求

查询的部门的信息：部门ID、部门名称、修改时间

通过页面原型以及需求描述，我们可以看到，部门查询，是不需要考虑分页操作的。

2.1.2 接口文档

部门列表查询

基本信息

复制代码

请求路径：/depts

请求方式：GET

接口描述：该接口用于部门列表数据查询

请求参数

无

响应数据

参数格式：application/json

参数说明：

参数名	类型	是否必须	备注
code	number	必须	响应码，1 代表成功，0 代表失败
msg	string	非必须	提示信息
data	object[ ]	非必须	返回的数据
\|- id	number	非必须	id
\|- name	string	非必须	部门名称
\|- createTime	string	非必须	创建时间
\|- updateTime	string	非必须	修改时间

响应数据样例：

java 复制代码

{
  "code": 1,
  "msg": "success",
  "data": [
    {
      "id": 1,
      "name": "学工部",
      "createTime": "2022-09-01T23:06:29",
      "updateTime": "2022-09-01T23:06:29"
    },
    {
      "id": 2,
      "name": "教研部",
      "createTime": "2022-09-01T23:06:29",
      "updateTime": "2022-09-01T23:06:29"
    }
  ]
}

2.1.3 思路分析

2.1.4 功能开发

通过查看接口文档：部门列表查询

请求路径：/depts

请求方式：GET

请求参数：无

响应数据：json格式

DeptController

java 复制代码

@Slf4j
@RestController
public class DeptController {
    @Autowired
    private DeptService deptService;

    //@RequestMapping(value = "/depts" , method = RequestMethod.GET)
    @GetMapping("/depts")
    public Result list(){
        log.info("查询所有部门数据");
        List<Dept> deptList = deptService.list();
        return Result.success(deptList);
    }
}

@Slf4j注解源码：

DeptService（业务接口）

java 复制代码

public interface DeptService {
    /**
     * 查询所有的部门数据
     * @return   存储Dept对象的集合
     */
    List<Dept> list();
}

DeptServiceImpl（业务实现类）

java 复制代码

@Slf4j
@Service
public class DeptServiceImpl implements DeptService {
    @Autowired
    private DeptMapper deptMapper;
    
    @Override
    public List<Dept> list() {
        List<Dept> deptList = deptMapper.list();
        return deptList;
    }
}

复制代码

DeptMapper

java 复制代码

@Mapper
public interface DeptMapper {
    //查询所有部门数据
    @Select("select id, name, create_time, update_time from dept")
    List<Dept> list();
}

2.1.5 功能测试

功能开发完成后，我们就可以启动项目，然后打开postman，发起GET请求，访问：http://localhost:8080/depts

2.2 前后端联调

完成了查询部门的功能，我们也通过postman工具测试通过了，下面我们再基于前后端分离的方式进行接口联调。具体操作如下：

1、将资料中提供的"前端环境"文件夹中的压缩包，拷贝到一个没有中文不带空格的目录下

2、拷贝到一个没有中文不带空格的目录后，进行解压（解压到当前目录）

3、启动nginx

4、打开浏览器，访问：http://localhost:90

5、测试：部门管理 - 查询部门列表

说明：只要按照接口文档开发功能接口，就能保证前后端程序交互

后端：严格遵守接口文档进行功能接口开发

前端：严格遵守接口文档访问功能接口