json数据对接

1.前言

• fastadmin框架本身封装了一系列接口和插件来对表格数据进行管理（新增，编辑，删除），但是其使用的bootstrapTable基于jquery开发，基于某些原因，我们想要使用Vue框架代替bootstrapTable对页面进行渲染，但是会涉及参数的数据格式问题，此文对想一个的数据格式进行测试，方便后续使用

2.数据格式

vue中一般使用json数据，而fastadmin提供的接口使用的是表单数据格式，在转换过程中要注意三点：

• json和form两种格式区别如下：

var jsonData = {
    key1:"1",key2:"2"
}
var formData = "key1=1&key2=2"

• 将json数据转换为表单数据

//this.form为json对象
var formData = ""
for(var key in this.form){
    formData += `${key}=${this.form[key]}&`
}
//去除最后一个字母&
formData = formData.substring(0,formData.length-1)

• 请求头设置为的content-type设置为表单类型

const result = await this.$axios({
    url:"/admin/sp/mcsparepart/add",
    headers:{
         "content-type": "application/x-www-form-urlencoded; charset=UTF-8",//数据格式申明
         'X-Requested-With': 'XMLHttpRequest'
   },
   method:"post",
   data:formData
})

3.对接新增接口

• 新增接口在接收表单数据时，参数外面需要包裹一层row，所以在进行json转表单时，需要做一些调整

//this.form为json对象
var formData = ""
for(var key in this.form){
    formData += `row[${key}]=${this.form[key]}&`
}
//去除最后一个字母&
formData = formData.substring(0,formData.length-1)

4.对接编辑接口

• 编辑接口需要在url中通过路径形式指定要编辑的数据id(ids)，而传参的数据与新增接口一致

url:"/admin/sp/mcsparepart/edit/ids/"+ids,

5.对接删除接口

• 删除接口需要指定action字段和ids字段

var formData = action=del&ids=180
const result = await this.$axios({
    url:"/admin/sp/mcsparepart/del",
    headers:{
         "content-type": "application/x-www-form-urlencoded; charset=UTF-8",
         'X-Requested-With': 'XMLHttpRequest'
    },
    method:"post",
    data:formData
})