这是一个JavaWeb小案例的详细实现过程，本文是前端文件的使用与模拟的接口文档，博客的上篇在这里：https://blog.csdn.net/weixin_43760020/article/details/105228035
博客的下篇在这里：https://blog.csdn.net/weixin_43760020/article/details/105292962
假设现在正在进行前后端分离的开发，此时前端已经写好，需要我们根据前端编写的接口文档用Java 进行后端开发。

一、前端编写的接口文档：

注意区分请求参数和响应结果。

一共三个接口，通过JSON数据格式进行交互。如下：

1、接口一

  • 方法描述：新生登录
  • URL地址：http://localhost:9601/reactLogin/login
  • 请求方式：post
  • 请求参数：
字段 说明 类型 是否必填 备注
newstuname 新生姓名 String 是
newstuid 新生学号 long 是 这是新生登录表的学号
  • 请求参数示例： 
{
   
	newstuname: "博格巴", 
	newstuid: 202109601260
}
  • 响应结果：
    约定：
    若验证登录成功，返回整型 1。
    否则为失败，返回整型 0。 
//登录成功，响应结果示例
{
   
	data:1
}

//登录失败，响应结果示例：
{
   
	data:0
}

2、接口二

  • 方法描述：初始化新生报道页
  • URL地址：http://localhost:9601/reactLogin/initReport
  • 请求方式：post
  • 请求参数：
字段 说明 类型 是否必填 备注
r_id 新生学号 long 是 这是新生登录表的学号
  • 请求参数示例： 
{
   
	r_id: 202109601260
}
  • 响应结果：
字段 说明 类型 是否必填 备注
r_id 新生学号 long 是 这是新生报道表的学号
newstuname 新生姓名 String 是
sex 性别 String 是
major 专业 String 是
classes 班级 String 是
province 省份 String 是
telephone 电话 String 是
to_date 到校日期 Date 是 日期只有年月日（YYYY-MM-DD）
to_time 到校时间 Date 是 时间只有时和分（HH-MM）
transport 交通方式 String 是
transport_num 车次/航班 String 是
trsp_remark 行程备注 String 是
is_loan 是否贷款 short 是 约定：若贷款则为1，未贷款则为0
loan_amount 贷款金额 BigDecimal 是 注意：涉及金钱不可使用double类型
loan_pay 贷款缴纳 BigDecimal 是
pay_way 缴费方式 String 是
pay_remark 贷款备注 String 是
is_photo 是否有贷款回执照片 short 是 约定：有照片则为1，无照片则为0
rec_people 接待人 String 是
rec_phone 接待人电话 String 是 
以下示例中的所有字段均不能省略（一个都不能少），但除了字段 r_id（学号）外，字段值均可为NULL。

//响应结果示例
{
   
	data:{
   
		classes: "智能Q181"
		is_loan: 0
		is_photo: 0
		loan_amount: null
		loan_pay: null
		major: "人工智能"
		newstuname: "博格巴"
		pay_remark: ""
		pay_way: ""
		province: "曼彻斯特"
		r_id: 202109601260
		rec_people: "索尔斯克亚"
		rec_phone: "15278145893"
		sex: "男"
		telephone: "18278145093"
		to_date: "2020-03-29"
		to_time: "23:37"
		transport: "火车"
		transport_num: "测试数据"
		trsp_remark: "测试数据"
	}
}

3、接口三

  • 方法描述：新生提交填写的个人信息
  • URL地址：http://localhost:9601/reactLogin/report
  • 请求方式：post
  • 请求参数：
字段 说明 类型 是否必填 备注
r_id 新生学号 long 是 这是新生报道表的学号
newstuname 新生姓名 String 是
sex 性别 String 是
major 专业 String 是
classes 班级 String 是
province 省份 String 是
telephone 电话 String 是
to_date 到校日期 Date 是 日期只有年月日（YYYY-MM-DD）
to_time 到校时间 Date 是 时间只有时和分（HH-MM）
transport 交通方式 String 是
transport_num 车次/航班 String 是
trsp_remark 行程备注 String 是
is_loan 是否贷款 short 是 约定：若贷款则为1，未贷款则为0
loan_amount 贷款金额 BigDecimal 是 注意：涉及金钱不可使用double类型
loan_pay 贷款缴纳 BigDecimal 是
pay_way 缴费方式 String 是
pay_remark 贷款备注 String 是
is_photo 是否有贷款回执照片 short 是 约定：有照片则为1，无照片则为0
rec_people 接待人 String 是
rec_phone 接待人电话 String 是
  • 请求参数示例： 
{
   
	classes: "智科Q182班"
	is_loan: 1
	is_photo: 0
	loan_amount: 54321
	loan_pay: 123466
	major: "智能科学与技术"
	newstuname: "张伟"
	pay_remark: "微信给过了"
	pay_way: "微信支付"
	province: "北京"
	r_id: 201909601260
	rec_people: "蔡徐坤"
	rec_phone: "18978145893"
	sex: "男"
	telephone: "18278145093"
	to_date: "2020-03-29"
	to_time: "23:35"
	transport: "火车"
	transport_num: "火车晚点"
	trsp_remark: "无"
}
  • 响应结果：
    约定：
    若提交成功，返回整型 1。
    若提交失败，返回整型 0。 
//登录成功，响应结果示例
{
   
	data:1
}

//登录失败，响应结果示例：
{
   
	data:0
}

二、前端文件详细使用说明

1、如何下载

下载地址：https://github.com/BEIJIU601/NewStuReport

使用过程如下：

解压后得到，

打开，得到

再打开，得到

2、查看发送请求的参数和响应结果

打开后可右键检查，到浏览器控制台查看，打印出来的相关信息：

上面为后端响应成功的示例，若请求后端失败，会提示请求服务器失败，
失败的原因一般为：
1、后端设置的URL不符合前端请求的地址
2、跨域请求失败
3、后端程序出了错

博客的上篇点这里。
博客的下篇点这里。

这是一个菜鸡的JavaWeb小案例,如果你觉得还可以的话，给我的GitHub点个start呗~~
再次放上下载地址：https://github.com/BEIJIU601/NewStuReport