vue Axios 向后端提交参数 请求头 json 方式（Content

1import axios from 'axios'
2    export default {
3        name: 'basetable',
4        data() {
5            return {
6                tableData: [],
7                pageData:{
8                    currentPage:1,
9                    total:0,
10                    pageSize:20,
11                }
12            }
13        }, mounted() {
14           this.getTableData();
15        },
16        methods: {
17            getTableData(){　　　　　　　　　//循环添加参数
18                let params = new URLSearchParams();
19                for(var key in this.pageData){
20                    params.append(key,this.pageData[key])
21                }
22                axios.post('http://localhost:8080/api/ptNotice/selectAll',params).then((response) => {
23                        console.log(response);
24                        this.tableData = response.data.items;
25                        this.pageData.total=response.data.totalNum;
26                        this.pageData.pageSize=response.data.pageSize;
27                        alert(this.pageData.pageSize);
28                         }).catch((response) => {
29                            console.log(response.error)
30                        })
31            },

　　后端接收

1@RequestMapping("/selectAll")
2    public PageVo<PtNoticeVo> select(PtNoticeVo ptNoticeVo, Integer currentPage,Integer pageSize) {
3        return ptNoticeService.selectAll(ptNoticeVo, currentPage, pageSize);
4    }

参数会自动匹配

这种入参匹配到的参数是以非集合形式存在的

如果你要匹配后端的list参数 例如 List<String> 类型 或者List<Map<String,String>> 类型

则必须使用下面的方法才方可

第二种匹配方式 后端才用@requestBody方式接收

1data: function(){
2            return {
3                saveNoticeForm:{
4                    //发送范围部门
5                    toSendOrgs:[],
6                    //发送范围员工
7                    toSendUsers:[],
8                    //标题
9                    noticeTitle:'',
10                    //正文
11                    noticeInfo:'',
12                    //类别
13                    type:'',
14                    //附件
15                    ptNoticeAccessorys:[],
16                    //作者
17                    authorUserName:'',
18                },

　　saveNoticeForm直接作为参数提交

1axios.post('http://localhost:8080/api/ptNotice/save',this.saveNoticeForm,{
2                    headers: {
3                     'Content-Type':'application/json;charset=UTF-8'
4                         }
5                }).then((response) =>{
6                       console.log(response);
7                       this.$message.success('提交成功！');
8                       this.reload();
9                       this.$router.push({path:'/notice'});
10                }).catch((response) =>{
11                    this.$message.console.error('提交失败');
12                })

　后端接收方式 @RequestBody

1@RequestMapping("/save")
2    public PtNoticeVo save(@RequestBody PtNoticeVo ptNoticeVo){
3        return ptNoticeService.save(ptNoticeVo);
4    }