json数据对接

1.前言

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

2.请求头

• 请求头要设定两个字段：content-type 和 X-Requested-With

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.参数的数据格式

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

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

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

• 直接将json数据转换为表单字符串（用于get请求）

//将json数据转换成表单字符串
jsonToFormData(data){
   var formData = ""
   for(var key in data){
        formData += `${key}=${data[key]}&`
   }
   //去除最后一个字母&
   formData = formData.substring(0,formData.length-1)
   return formData
}

• 将json数据转换成表单对象（用于post请求）

//创建新的表单
var form = new FormData()
//遍历json，给表单添加字段
for(var key in json){
    form.append(`row[${key}]`,json[key])
}
//返回表单
return form

4.对接表格列表接口

• 表格列表接口的地址：页面地址
• 请求方式：get
• 需要设定请求头

headers:{
     "content-type": "application/x-www-form-urlencoded; charset=UTF-8",//数据格式申明
     'X-Requested-With': 'XMLHttpRequest'
}

• 基本参数（已解析视图）：分页

offset: 10,limit: 10

• 搜索过滤参数（已解析视图）：

//搜索字段的值(json字符串)
filter: "{downmenu_value: value}"
//模糊搜索(LIKE)还是精确搜索(=)
op: "{downmenu_value:'LIKE'}"

• 配合axios使用

//this.current_page当前页码
//this.page_size每页数量
//this.op字段搜索方式 ｛key:"Like",key2:"="｝
//search_params搜索表单（过滤无数据的字段）
const result = await this.$axios({
                                url:"/admin/warehouse/warehouse",
                                headers:{
                                    "content-type": "application/x-www-form-urlencoded; charset=UTF-8",//数据格式申明
                                    'X-Requested-With': 'XMLHttpRequest'
                                },
                                params:{
                                    offset: (this.current_page-1) * this.page_size,//跳过条数
                                    limit: this.page_size,//获取条数
                                    op: JSON.stringify(this.op),//字段搜索方式
                                    filter: JSON.stringify(search_params),//搜索字段值
                                }
                            })

5.对接新增接口和编辑接口

• 新增接口的地址：页面地址 + /add?dialog=1
• 编辑接口的地址（ids为要编辑行的id）：页面地址 + /edit/ids/"+ids
• 请求方式：post
• post参数：post参数表单格式，每个参数名称外面需要包裹一层row,例如：

//创建新的表单
var form = new FormData()
//遍历json，给表单添加字段
for(var key in json){
    form.append(`row[${key}]`,json[key])
}
//返回表单
return form

6.对接删除接口

• 删除接口的地址：页面地址 + /del
• 请求方式：post
• post参数(指定action字段和ids字段,如果有多个id，则用逗号分割)：action=del&ids=180

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

7.单独修改某个字段值

• 接口地址：页面地址 + /multi
• 请求方式：post
• 参数：

ids: 1
params: status=0

8.完整代码

• 获取表格数据

//发请求 获取表格数据
                    async getTableData(){
                        try {
                            //过滤出搜索表单没有值的字段
                            var search_params = {}
                            for(var key in this.form){
                                var value = this.form[key]
                                if(value){
                                    search_params[key] = value
                                }
                            }
                            //表格加载状态
                            this.table_loading = true
                            //发请求
                            const result = await this.$axios({
                                url:"/admin/warehouse/warehouse",
                                headers:{
                                    "content-type": "application/x-www-form-urlencoded; charset=UTF-8",//数据格式申明
                                    'X-Requested-With': 'XMLHttpRequest'
                                },
                                params:{
                                    offset: (this.current_page-1) * this.page_size,//跳过条数
                                    limit: this.page_size,//获取条数
                                    op: JSON.stringify(this.op),//字段搜索方式
                                    filter: JSON.stringify(search_params),//搜索字段值
                                }
                            })
                            //表格加载状态
                            this.table_loading = false
                            //表格加载状态
                            this.tableData = result.data.rows || []
                            this.total = result.data.total
                        } catch (error) {
                            console.log(error)
                            //表格加载状态
                            this.table_loading = false
                        }
                    },

• 新增请求

//发请求 新增数据
                    async submitAdd(form){
                        try {
                            //提交loading状态
                            this.submit_loading = true
                            //发请求
                            const result = await this.$axios({
                                url:"/admin/warehouse/warehouse/add",
                                method:"post",
                                headers:{
                                    "content-type": "application/x-www-form-urlencoded; charset=UTF-8",//数据格式申明
                                    'X-Requested-With': 'XMLHttpRequest'
                                },
                                data:form
                            })
                            //提交loading状态
                            this.submit_loading = false
                            //处理返回结果
                            if (result.data.code == 1) {
                                //关闭弹窗
                                this.dialogVisible = false
                                //重置页码
                                this.current_page = 1
                                //刷新表格数据
                                this.getTableData()
                            } else {
                                this.$message.error(result.data.msg)
                            }
                        } catch (error) {
                            console.log(error)
                            //提交loading状态
                            this.submit_loading = false
                        }
                    },

• 编辑请求

async submitEdit(form){
                        try {
                            //提交loading状态
                            this.submit_loading = true
                            //发请求
                            const result = await this.$axios({
                                url:"/admin/warehouse/warehouse/edit/ids/" + this.edit_id,
                                method:"post",
                                headers:{
                                    "content-type": "application/x-www-form-urlencoded; charset=UTF-8",//数据格式申明
                                    'X-Requested-With': 'XMLHttpRequest'
                                },
                                data:form
                            })
                            //提交loading状态
                            this.submit_loading = false
                            //处理返回结果
                            if (result.data.code == 1) {
                                //关闭弹窗
                                this.dialogVisible = false
                                //重置页码
                                this.current_page = 1
                                //刷新表格数据
                                this.getTableData()
                            } else {
                                this.$message.error(result.data.msg)
                            }
                        } catch (error) {
                            console.log(error)
                            //提交loading状态
                            this.submit_loading = false
                        }
                    },

• 删除请求

//发请求 删除数据
                    async submitDelete(ids){
                        var formData = `action=del&ids=${ids}`
                        try {
                            this.table_loading = true
                            const result = await this.$axios({
                                url:"/admin/warehouse/warehouse/del",
                                method:"post",
                                data: formData,
                                headers:{
                                    "content-type": "application/x-www-form-urlencoded; charset=UTF-8",//数据格式申明
                                    'X-Requested-With': 'XMLHttpRequest'
                                }
                            })
                            this.table_loading = false
                            //处理返回结果
                            if (result.data.code == 1) {
                                //关闭弹窗
                                this.dialogVisible = false
                                //刷新表格数据
                                this.getTableData()
                            } else {
                                this.$message.error(result.data.msg)
                            }
                        } catch (error) {
                            console.log(error)
                            this.table_loading = false
                        }
                    }