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

2.1 查询部门

2.1.1 原型和需求

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

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

2.1.2 接口文档

部门列表查询

  • 基本信息

    请求路径:/depts
    ​
    请求方式:GET
    ​
    接口描述:该接口用于部门列表数据查询
  • 请求参数

  • 响应数据

    参数格式:application/json

    参数说明:

    参数名类型是否必须备注
    codenumber必须响应码,1 代表成功,0 代表失败
    msgstring非必须提示信息
    dataobject[ ]非必须返回的数据
    |- idnumber非必须id
    |- namestring非必须部门名称
    |- createTimestring非必须创建时间
    |- updateTimestring非必须修改时间

    响应数据样例:

    {
      "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

@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(业务接口)

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

DeptServiceImpl(业务实现类)

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

DeptMapper

@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、测试:部门管理 - 查询部门列表

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

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

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

  • 8
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

向着五星的方向

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值