vue Axios 向后端提交参数 请求头 json 方式（Content-Type: application/json; charset=UTF-8）

 import axios from 'axios'
    export default {
        name: 'basetable',
        data() {
            return {
                tableData: [],
                pageData:{
                    currentPage:1,
                    total:0,
                    pageSize:20,
                }
            }
        }, mounted() {
           this.getTableData();
        },
        methods: {
            getTableData(){
　　　　　　　　　//循环添加参数
                let params = new URLSearchParams();
                for(var key in this.pageData){
                    params.append(key,this.pageData[key])
                }
                axios.post('http://localhost:8080/api/ptNotice/selectAll',params).then((response) => {
                        console.log(response);
                        this.tableData = response.data.items;
                        this.pageData.total=response.data.totalNum;
                        this.pageData.pageSize=response.data.pageSize;
                        alert(this.pageData.pageSize);
                         }).catch((response) => {
                            console.log(response.error)
                        })
            },

　　后端接收

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

 

参数会自动匹配

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

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

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

 

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

 data: function(){
            return {
                saveNoticeForm:{
                    //发送范围部门
                    toSendOrgs:[],
                    //发送范围员工
                    toSendUsers:[],
                    //标题
                    noticeTitle:'',
                    //正文
                    noticeInfo:'',
                    //类别
                    type:'',
                    //附件
                    ptNoticeAccessorys:[],
                    //作者
                    authorUserName:'',
                },

　　saveNoticeForm直接作为参数提交

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

　后端接收方式 @RequestBody

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