From 8753d23d0fd03703674e4955d8c85e27873f8766 Mon Sep 17 00:00:00 2001 From: "liu.shiyi" Date: Thu, 27 Jul 2023 09:10:35 +0800 Subject: [PATCH] =?UTF-8?q?feat:http=E6=95=B0=E6=8D=AE=E9=9B=86=E5=8F=82?= =?UTF-8?q?=E6=95=B0=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DataSetManagement/src/HttpEditForm.vue | 128 ++++++++++++------ .../packages/js/utils/httpParamsFormatting.js | 18 +-- 2 files changed, 100 insertions(+), 46 deletions(-) diff --git a/data-room-ui/packages/DataSetManagement/src/HttpEditForm.vue b/data-room-ui/packages/DataSetManagement/src/HttpEditForm.vue index 791ea3b5..6975cdb1 100644 --- a/data-room-ui/packages/DataSetManagement/src/HttpEditForm.vue +++ b/data-room-ui/packages/DataSetManagement/src/HttpEditForm.vue @@ -542,6 +542,7 @@ ref="paramsSettingDialog" :params-list="dataForm.config.paramsList" @saveParams="saveParams" + @replaceParams="replaceParams" /> { if (valid) { this.saveloading = true @@ -809,7 +809,6 @@ export default { // 增加header addHeader () { const header = { key: '', type: 'string', value: '', remark: '' } - console.log(this.dataForm) this.dataForm.config.headers.push(_.cloneDeep(header)) }, // 移除header @@ -888,24 +887,73 @@ export default { }) this.fieldDesc = fieldDesc }, + // 配置完参数后，将参数的值放入到对应的请求位置进行替换 + replaceParams (paramsList) { + this.newDataForm = _.cloneDeep(this.dataForm) + this.newDataForm.config.url = this.evalStrFunc(paramsList, this.newDataForm.config.url) + this.newDataForm.config.headers = this.evalArrFunc(paramsList, this.newDataForm.config.headers) + this.newDataForm.config.params = this.evalArrFunc(paramsList, this.newDataForm.config.params) + this.newDataForm.config.body = this.evalStrFunc(paramsList, this.newDataForm.config.body) + }, + evalStrFunc (paramsList, string) { + // 取name作为变量名, value作为变量值 { name: '站三', token: '123'} + const params = paramsList.reduce((acc, cur) => { + acc[cur.name] = cur.value + return acc + }, {}) + + // 将url中 ${xxx} 替换成 ${params.xxx} + const str = string.replace(/\$\{(\w+)\}/g, (match, p1) => { + return '${params.' + p1 + '}' + }) + + const transformStr = '' + // 将字符串中的${}替换为变量, 使用eval执行 + eval('transformStr = `' + str + '`') + return transformStr + }, + evalArrFunc (paramsList, arr) { + // 取name作为变量名, value作为变量值 { name: '站三', token: '123'} + const params = paramsList.reduce((acc, cur) => { + acc[cur.name] = cur.value + return acc + }, {}) + + // 取name作为变量名, value作为变量值 { _name: '${name}', _token: '${token}'} + const paramsListObj = arr.reduce((acc, cur) => { + acc[cur.key] = cur.value + return acc + }, {}) + // 转成字符串 + const paramsListStr = JSON.stringify(paramsListObj) + + // 将url中 ${xxx} 替换成 ${params.xxx} + const str = paramsListStr.replace(/\$\{(\w+)\}/g, (match, p1) => { + return '${params.' + p1 + '}' + }) + const transformStr = '' + // 将字符串中的${}替换为变量, 使用eval执行 + eval('transformStr = `' + str + '`') + const obj = JSON.parse(transformStr) + return obj + }, // 获取请求地址、请求头、请求参数、请求体中所有的变量，在动态参数中进行变量 - getPramsList(){ - const reg = /\${(.*?)}/g + getPramsList () { const paramNames1 = this.getValName(this.dataForm.config.url) - const paramNames2 = this.dataForm.config?.headers.map(item=>{ + const paramNames2 = this.dataForm.config?.headers.map(item => { const nameList = this.getValName(item.value) - if (nameList && nameList.length){ + if (nameList && nameList.length) { return nameList[0] } }) - const paramNames3 = this.dataForm.config?.params.map(item=>{ + const paramNames3 = this.dataForm.config?.params.map(item => { const nameList = this.getValName(item.value) - if (nameList && nameList.length){ + if (nameList && nameList.length) { return nameList[0] } }) - const paramNames4=this.getValName(this.dataForm.config.body) - const paramNames = new Set([...paramNames1,...paramNames2,...paramNames3,...paramNames4]) + const paramNames4 = this.getValName(this.dataForm.config.body) + const paramNames = new Set([...paramNames1, ...paramNames2, ...paramNames3, ...paramNames4]) const names = this.dataForm.config?.paramsList?.map(item => item.name) const params = [] paramNames.forEach(name => { @@ -918,21 +966,20 @@ export default { type: 'String', value: '', status: 1, - require: 0, + require: 1, remark: '' }) } }) this.dataForm.config.paramsList = _.cloneDeep(params) - }, // 获取字符串中${变量名}中的变量名 - getValName(str){ - const reg = /\$\{(.+?)\}/; - const reg_g = /\$\{(.+?)\}/g; - const result = str.match(reg_g); + getValName (str) { + const reg = /\$\{(.+?)\}/ + const reg_g = /\$\{(.+?)\}/g + const result = str.match(reg_g) const list = [] - if (result){ + if (result) { for (let i = 0; i < result.length; i++) { const item = result[i] list.push(item.match(reg)[1]) @@ -943,26 +990,31 @@ export default { // 执行配置好的接口 scriptExecute (isInit = false) { this.getPramsList() - // 如果是前端代理，则自行组装接口及参数并调接口 - if (this.dataForm.config.requestType === 'front') { - if (this.dataForm.config.paramsList && this.dataForm.config.paramsList.length){ - } - axiosFormatting({ ...this.dataForm.config }).then((res) => { - this.dataPreviewList = res.list - }) + // 如果动态参数未配置，则直接打开配置弹窗 + const flag = this.dataForm.config.paramsList.some(item => !item.value) + if (this.dataForm.config.paramsList && this.dataForm.config.paramsList.length && flag) { + this.$refs.paramsSettingDialog.open() } else { - // 如果是后端代理，则将配置传到后端 - const script = JSON.stringify(this.dataForm.config) - const executeParams = { - script, - params: this.dataForm.paramsList, - dataSetType: 'http' - } - datasetExecuteTest(executeParams).then(res => { - this.dataPreviewList = res - }).catch((e) => { + // 如果动态参数已配置则调接口 + // 如果是前端代理，则自行组装接口及参数并调接口 + if (this.dataForm.config.requestType === 'front') { + axiosFormatting({ ...this.newDataForm.config }).then((res) => { + this.dataPreviewList = res.list + }) + } else { + // 如果是后端代理，则将配置传到后端 + const script = JSON.stringify(this.dataForm.config) + const executeParams = { + script, + params: this.dataForm.paramsList, + dataSetType: 'http' + } + datasetExecuteTest(executeParams).then(res => { + this.dataPreviewList = res + }).catch((e) => { - }) + }) + } } }, // 清空分类 diff --git a/data-room-ui/packages/js/utils/httpParamsFormatting.js b/data-room-ui/packages/js/utils/httpParamsFormatting.js index 3bedf976..339e153f 100644 --- a/data-room-ui/packages/js/utils/httpParamsFormatting.js +++ b/data-room-ui/packages/js/utils/httpParamsFormatting.js @@ -1,13 +1,13 @@ import axios from 'axios' import { Loading, Message } from 'element-ui' export default function axiosFormatting (customConfig) { - //将请求头和请求参数的值转化为对象形式 - const headers = arrToObject(customConfig.headers) - const params = arrToObject(customConfig.params) + // 将请求头和请求参数的值转化为对象形式 + // const headers = arrToObject(customConfig.headers) + // const params = arrToObject(customConfig.params) const httpConfig = { timeout: 1000 * 30, baseURL: '', - headers + headers: customConfig.headers } // let loadingInstance = null // 加载全局的loading const instance = axios.create(httpConfig) @@ -44,12 +44,14 @@ export default function axiosFormatting (customConfig) { return Promise.reject(response.data.message) } }) + const body = {} + eval(customConfig.body) return new Promise((resolve, reject) => { instance({ method: customConfig.method, url: customConfig.url, - params, - data: customConfig.method === 'post' ? customConfig.body : undefined + params: customConfig.params, + data: customConfig.method === 'post' ? body : undefined }).then(response => { resolve(response) }).catch(error => { @@ -58,9 +60,9 @@ export default function axiosFormatting (customConfig) { }) } // 数组转化为对象 -function arrToObject(list) { +function arrToObject (list) { const obj = {} - list.forEach(item=>{ + list.forEach(item => { obj[item.key] = item.value }) return obj