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);
    }