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