clay : 触发器http请求校验规则完成
This commit is contained in:
parent
09bcf14d27
commit
cfd39087d3
|
|
@ -1,94 +0,0 @@
|
|||
<template>
|
||||
<div :class="{'hidden':hidden}" class="pagination-container">
|
||||
<el-pagination
|
||||
:background="background"
|
||||
:current-page.sync="currentPage"
|
||||
:page-size.sync="pageSize"
|
||||
:layout="layout"
|
||||
:page-sizes="pageSizes"
|
||||
:total="total"
|
||||
v-bind="$attrs"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'Pagination',
|
||||
props: {
|
||||
total: {
|
||||
required: true,
|
||||
type: Number
|
||||
},
|
||||
page: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 20
|
||||
},
|
||||
pageSizes: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [10, 20, 30, 50]
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
type: String,
|
||||
default: 'total, sizes, prev, pager, next, jumper'
|
||||
},
|
||||
background: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
autoScroll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
hidden: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentPage: {
|
||||
get() {
|
||||
return this.page
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:page', val)
|
||||
}
|
||||
},
|
||||
pageSize: {
|
||||
get() {
|
||||
return this.limit
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:limit', val)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSizeChange(val) {
|
||||
this.$emit('pagination', { page: this.currentPage, limit: val })
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.$emit('pagination', { page: val, limit: this.pageSize })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pagination-container {
|
||||
background: #fff;
|
||||
padding: 32px 16px;
|
||||
}
|
||||
.pagination-container.hidden {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
<!-- @author Shiyn/ huangmx 20200807优化-->
|
||||
<template>
|
||||
<div class="top-right-btn">
|
||||
<el-row>
|
||||
<el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
|
||||
<el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="刷新" placement="top">
|
||||
<el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
|
||||
</el-tooltip>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "RightToolbar",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
props: {
|
||||
showSearch: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
//搜索
|
||||
toggleSearch() {
|
||||
this.$emit("update:showSearch", !this.showSearch);
|
||||
},
|
||||
//刷新
|
||||
refresh() {
|
||||
this.$emit("queryTable");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -26,7 +26,6 @@ Vue.use(Tip);
|
|||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
Vue.prototype.BASE_URL = 'http://' + (process.env.NODE_ENV === 'development-' ? "localhost" : "localhost");
|
||||
|
||||
Vue.prototype.$isNotEmpty = function (obj) {
|
||||
return (obj !== undefined && obj !== null && obj !== '' && obj !== 'null')
|
||||
|
|
@ -49,13 +48,6 @@ Vue.prototype.$deepCopy = function (obj) {
|
|||
return JSON.parse(JSON.stringify(obj))
|
||||
}
|
||||
|
||||
import Pagination from "@/components/Pagination";
|
||||
//自定义表格工具扩展
|
||||
import RightToolbar from "@/components/RightToolbar"
|
||||
// 全局组件挂载
|
||||
Vue.component('Pagination', Pagination)
|
||||
Vue.component('RightToolbar', RightToolbar)
|
||||
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@
|
|||
<span class="item-desc" v-else>👉 无论请求结果如何，均通过</span>
|
||||
<div v-if="config.http.handlerByScript">
|
||||
<div>
|
||||
<el-button @click="testHander">测试</el-button>
|
||||
<el-button @click="requestTestHandler">测试</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<span>请求成功😀：</span>
|
||||
|
|
@ -161,12 +161,57 @@ export default {
|
|||
delItem(items, index) {
|
||||
items.splice(index, 1)
|
||||
},
|
||||
testHander() {
|
||||
let http = this.config.http;
|
||||
if (http.url == null || http.url === '') {
|
||||
this.$message.error("请填写请求路径!")
|
||||
return
|
||||
//url规范性检查
|
||||
restfulCheck(url) {
|
||||
const httpProtocolPattern = /^http:/;
|
||||
const httpsProtocolPattern = /^https:/;
|
||||
const restfulUrlPattern = /\/\w+\/\w+(\/\{[^}]+\})*/;
|
||||
if (httpProtocolPattern.test(url) || httpsProtocolPattern.test(url)) {
|
||||
return restfulUrlPattern.test(url);
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
//是否含有动态参数
|
||||
hasUrlParams(url) {
|
||||
const pattern = /{[^{}]+}/g;
|
||||
let match;
|
||||
while ((match = pattern.exec(url)) !== null) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
//获取到动态参数的名称
|
||||
getDynamicParamNames(url) {
|
||||
const pattern = /{([^{}]+)}/g;
|
||||
let match;
|
||||
const paramNames = [];
|
||||
while ((match = pattern.exec(url)) !== null) {
|
||||
if (match[0].startsWith('{') && match[0].endsWith('}')) {
|
||||
const paramName = match[1];
|
||||
paramNames.push(paramName);
|
||||
}
|
||||
}
|
||||
return paramNames;
|
||||
},
|
||||
//替换rul动态参数
|
||||
replaceDynamicParams(url, params) {
|
||||
const dynamicParamPattern = /{\s*(\w+)\s*}/g;
|
||||
return url.replace(dynamicParamPattern, (match, param) => {
|
||||
return params[param] || '0';
|
||||
});
|
||||
},
|
||||
//获取到参数值
|
||||
getParamsValue(params, paramName) {
|
||||
for (let param of params) {
|
||||
if (param.name === paramName) {
|
||||
return param.value
|
||||
}
|
||||
}
|
||||
return null;
|
||||
},
|
||||
//设置头部
|
||||
setHeaders(http) {
|
||||
let headers = {}
|
||||
for (let header of http.headers) {
|
||||
if (header.isField) {
|
||||
|
|
@ -182,15 +227,99 @@ export default {
|
|||
} else {
|
||||
this.$set(headers, "Content-Type", "application/json")
|
||||
}
|
||||
return headers;
|
||||
},
|
||||
//设置post和put参数
|
||||
setPostAndPutParams(http) {
|
||||
let params = {}
|
||||
for (let param of http.params) {
|
||||
params[param.name] = param.value
|
||||
}
|
||||
return params;
|
||||
},
|
||||
//设置get和delete的参数
|
||||
setGetAndDeleteParams(http) {
|
||||
let dynamicParams = []
|
||||
let url = http.url
|
||||
let hasParams = this.hasUrlParams(url)
|
||||
if (hasParams) {
|
||||
dynamicParams = this.getDynamicParamNames(url);
|
||||
let replaceParams = {}
|
||||
for (let paramsName of dynamicParams) {
|
||||
let value = this.getParamsValue(http.params, paramsName)
|
||||
if (null == value) {
|
||||
this.$message.error(paramsName + '参数未设置')
|
||||
return;
|
||||
}
|
||||
replaceParams[paramsName] = value
|
||||
}
|
||||
url = this.replaceDynamicParams(url, replaceParams);
|
||||
}
|
||||
if (http.method === "DELETE") {
|
||||
return url;
|
||||
}
|
||||
let getParams = []
|
||||
for (let param of http.params) {
|
||||
if (dynamicParams.indexOf(param.name) === -1 && param.name !== '' && param.value !== '') {
|
||||
getParams.push(param.name + "=" + param.value)
|
||||
}
|
||||
}
|
||||
if (getParams.length > 0) {
|
||||
url += "?"
|
||||
for (let i = 0; i < getParams.length; i++) {
|
||||
if (i !== getParams.length-1) {
|
||||
url += getParams[i] + "&";
|
||||
} else {
|
||||
url += getParams[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
return url;
|
||||
},
|
||||
//请求测试
|
||||
requestTestHandler() {
|
||||
let http = this.config.http;
|
||||
if (http.url == null || http.url === '') {
|
||||
this.$message.error("请填写请求路径!")
|
||||
return
|
||||
}
|
||||
if (!this.restfulCheck(http.url)) {
|
||||
this.$message.error("当前只支持 RESTful URL!")
|
||||
return
|
||||
}
|
||||
let headers = this.setHeaders(http)
|
||||
let request
|
||||
switch (http.method) {
|
||||
case "GET":
|
||||
case "DELETE":
|
||||
let url = this.setGetAndDeleteParams(http)
|
||||
if (null == url) {
|
||||
return;
|
||||
}
|
||||
request = axios.request({
|
||||
method: http.method,
|
||||
url: url,
|
||||
headers: headers,
|
||||
});
|
||||
break;
|
||||
case "POST":
|
||||
case "PUT":
|
||||
request = axios.request({
|
||||
method: http.method,
|
||||
url: http.url,
|
||||
headers: headers,
|
||||
data: this.setPostAndPutParams(http)
|
||||
});
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
console.log("==================[测试打印内容]==================")
|
||||
axios.request({
|
||||
method: http.method,
|
||||
url: http.url,
|
||||
headers: headers
|
||||
}).then(res => {
|
||||
request.then(res => {
|
||||
console.log(res)
|
||||
if (res.status === 200) {
|
||||
let data = res.data
|
||||
console.log(data)
|
||||
let successFun = eval("(false ||" + http.success + ")");
|
||||
let result = successFun(data);
|
||||
console.log(result, "成功函数执行的返回结果")
|
||||
|
|
|
|||
|
|
@ -53,6 +53,12 @@ export default {
|
|||
this.showError = true
|
||||
this.errorInfo = '请设置WEBHOOK的URL地址'
|
||||
}
|
||||
if (this.restfulCheck(this.config.props.http.url)){
|
||||
this.showError = false
|
||||
}else {
|
||||
this.showError = true
|
||||
this.errorInfo = 'WEBHOOK的URL地址不符合RESTful标准'
|
||||
}
|
||||
}else if(this.config.props.type === 'EMAIL'){
|
||||
if(!this.$isNotEmpty(this.config.props.email.subject)
|
||||
|| this.config.props.email.to.length === 0
|
||||
|
|
@ -67,7 +73,18 @@ export default {
|
|||
err.push(`${this.config.name} 触发动作未设置完善`)
|
||||
}
|
||||
return !this.showError
|
||||
}
|
||||
},
|
||||
//url规范性检查
|
||||
restfulCheck(url) {
|
||||
const httpProtocolPattern = /^http:/;
|
||||
const httpsProtocolPattern = /^https:/;
|
||||
const restfulUrlPattern = /\/\w+\/\w+(\/\{[^}]+\})*/;
|
||||
if (httpProtocolPattern.test(url) || httpsProtocolPattern.test(url)) {
|
||||
return restfulUrlPattern.test(url);
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue