spring boot项目关于前后端交互时List或者数组参数类型传参问题解决方案

1. 数组类型传参

后端写法:

@ApiOperation(value = "试卷中新增题目(多个直接覆盖)", notes="试卷中新增题目(多个直接覆盖)")
    @ApiImplicitParams({
        @ApiImplicitParam(name="examId",value="试卷id"),
        @ApiImplicitParam(name="questionIdList[]",value="试题id集合"),
    })
    @RequiresPermissions({"training_exam_edit"})
    @Log(title="试卷中新增题目(多个直接覆盖)", type=LogConstans.type_opt_edit, module=LogConstans.ADMIN)
    @RepeatUrlFormData
    @ResponseBody
    @RequestMapping(value = "updateExamQuestionList", method=RequestMethod.POST)
    public ResponseData<Integer> updateExamQuestionList(@RequestParam("examId")Long examId, @RequestParam("questionIdList[]")List<Long> questionIdList) {
        
        this.logger.info("{}-试卷中新增题目,examId:{}-queationIdList:{}" , info_prefix, examId, questionIdList);
        
        ResponseData<Integer> r = new ResponseData<Integer>(ResponseStateEnum.success);
        
        Long adminId = JWTUtil.getCurrentAccountId();
        
        examServiceByPlatformAdmin.updateExamQuestionList(examId, questionIdList, adminId);
        
        r.setContent("试卷中新增题目 成功!");
        return r;
    }

前端写法:

//form-data表单方式提交,以下是参数表
//若去掉"[]"变为"questionIdList:xxx,XXXX"的话,后端也需要对应去掉"[]"
examId:98723966985776597
questionIdList[]:98723966985776590,98723966985773115,98723966985773116,98723966985773120,98723966985773121,98723966985773124,98723966985773126,98723966985773128,98723966985773091,98723966985773094

2.List<Object>对象集合传参

后端写法:

@ApiOperation(value = "用户答题接口", notes="用户答题接口")
	@ResponseBody
	@RequestMapping(value = "/addUserExamQuestionList", method = RequestMethod.POST)
	public ResponseAppData<String> addUserExamQuestionList(@RequestBody List<UserExamQuestionModel> userExamQuestionModelList) {
		
		Long userId = AppUserUtils.getCurrentUser().getUserId();
		
		logger.info("{}-用户答题接口 , userId:{}-userExamQuestionModelList:{}", info_prefix, userId, userExamQuestionModelList);
		
		ResponseAppData<String> r = new ResponseAppData<String>();
		
		//添加 用户-题目-答题信息(答题过程数据insert)
		examServiceByApp.addUserExamQuestionList(userExamQuestionModelList, userId);
		
		r.setmsg("当前试题答题 成功!");
		return r;
	}

前端/APP端写法

//json方式提交
[{"examId":"98723966985717702","questionId":"98697600399590027","answer":"A","fillAnswer":""},
{"examId":"98723966985717702","questionId":"98697600399590038","answer":"C","fillAnswer":""},
{"examId":"98723966985717702","questionId":"98697600399590038","answer":"C","fillAnswer":""},
{"examId":"98723966985717702","questionId":"98697600399590045","answer":"A","fillAnswer":""},
{"examId":"98723966985717702","questionId":"98697600399590055","answer":"A","fillAnswer":""}]

3. 数组类型传参

后端写法:

@ApiOperation(value="批量更新状态")
    @ApiImplicitParams({
		@ApiImplicitParam(name="idArr[]",value="人才理念id集合"),
		@ApiImplicitParam(name="status",value="状态标志位(1:草稿;2:发布)"),
	})
    @Log(title="更新人才理念状态", type=LogConstans.type_opt, module=LogConstans.other)
    @RepeatUrlFormData
    @RequiresPermissions({"talent_concept_edit"})
	@RequestMapping(value = "batchSaveStatus", method = RequestMethod.POST)  
    public ResponseData<String> batchSaveStatus(Long[] idArr, Integer status){
        
    }

前端写法:

//form/data提交方式
idArr: 1,
idArr: 2,
status: 1

 

好的,下面是一个简单的学生宿舍管理系统的前后端分离企业级开发实现。 ## 后端 ### 技术栈 - Spring Boot - Spring Security - MyBatis - MySQL - Swagger2 ### 实现步骤 1. 创建 Spring Boot 项目,并添加以下依赖: ```xml <dependencies> <!-- Spring Boot --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- Spring Security --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-security</artifactId> </dependency> <!-- MyBatis --> <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>2.1.3</version> </dependency> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid-spring-boot-starter</artifactId> <version>1.2.6</version> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> </dependency> <!-- Swagger2 --> <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swagger2</artifactId> <version>2.9.2</version> </dependency> <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swagger-ui</artifactId> <version>2.9.2</version> </dependency> </dependencies> ``` 2. 创建数据库,并添加数据表。 3. 创建实体类、Mapper 接口和 XML 文件,并配置 MyBatis。 4. 配置 Spring Security,实现登录和权限控制。 5. 集成 Swagger2,生成 API 文档。 ### 示例代码 由于篇幅原因,这里只给出一个示例代码文件: - `Student.java`:学生实体类。 ```java public class Student { private Integer id; private String name; private Integer gender; private String phone; private Integer roomId; // 省略 getter 和 setter 方法 } ``` ## 前端 ### 技术栈 - Vue.js - Element UI - Axios ### 实现步骤 1. 创建 Vue.js 项目,并添加以下依赖: ```json "dependencies": { "axios": "^0.21.1", "element-ui": "^2.15.1", "vue": "^2.6.11", "vue-router": "^3.2.0" } ``` 2. 创建页面组件和路由。 3. 使用 Element UI 组件,实现页面布局和样式。 4. 使用 Axios,与后端 API 进行交互。 ### 示例代码 由于篇幅原因,这里只给出一个示例代码文件: - `StudentList.vue`:学生列表页面组件。 ```vue <template> <div> <el-table :data="students" style="width: 100%"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="gender" label="性别"></el-table-column> <el-table-column prop="phone" label="电话"></el-table-column> <el-table-column prop="roomName" label="宿舍"></el-table-column> </el-table> </div> </template> <script> import axios from 'axios' export default { data() { return { students: [] } }, mounted() { axios.get('/api/students').then(response => { this.students = response.data }).catch(error => { console.error(error) }) } } </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值