【JavaWeb】新生报道案例前端详细使用（模拟前后端通过接口文档对接）

这是一个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: "博格巴", 
	newstuid: 202109601260
}

• 响应结果：
  约定：
  若验证登录成功，返回整型 1。
  否则为失败，返回整型 0。

//登录成功，响应结果示例
{
   
	data:1
}

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

2、接口二

• 方法描述：初始化新生报道页
• URL地址：http://localhost:9601/reactLogin/initReport
• 请求方式：post
• 请求参数：

• 请求参数示例：

{
   
	r_id: 202109601260
}

• 响应结果：

以下示例中的所有字段均不能省略（一个都不能少），但除了字段 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
• 请求参数：

• 请求参数示例：

{
   
	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