缓存条件增加多个匹配方式/优化缓存设置界面

This commit is contained in:
GoEdgeLab
2021-05-12 15:07:30 +08:00
parent 1df0f4a605
commit 37bc3c0879
7 changed files with 87 additions and 11 deletions

View File

@@ -14,9 +14,10 @@ type CondJSComponent struct {
Name string `json:"name"` Name string `json:"name"`
Description string `json:"description"` Description string `json:"description"`
Component string `json:"component"` Component string `json:"component"`
IsRequest bool `json:"isRequest"`
} }
// 读取所有可用的条件 // ReadAllAvailableCondTypes 读取所有可用的条件
func ReadAllAvailableCondTypes() []*CondJSComponent { func ReadAllAvailableCondTypes() []*CondJSComponent {
result := []*CondJSComponent{} result := []*CondJSComponent{}

View File

@@ -44,7 +44,7 @@ Vue.component("http-cache-ref-box", {
}, },
template: `<tbody> template: `<tbody>
<tr> <tr>
<td class="title">匹配条件 *</td> <td class="title">匹配条件分组 *</td>
<td> <td>
<http-request-conds-box :v-conds="ref.conds" @change="changeConds"></http-request-conds-box> <http-request-conds-box :v-conds="ref.conds" @change="changeConds"></http-request-conds-box>

View File

@@ -102,6 +102,53 @@ Vue.component("http-cond-url-prefix", {
</div>` </div>`
}) })
// URL精准匹配
Vue.component("http-cond-url-eq", {
props: ["v-cond"],
data: function () {
let cond = this.vCond
if (cond == null) {
cond = {
isRequest: true,
param: "${requestPath}",
operator: "eq",
value: ""
}
}
return {
cond: cond
}
},
template: `<div>
<input type="hidden" name="condJSON" :value="JSON.stringify(cond)"/>
<input type="text" v-model="cond.value"/>
</div>`
})
// URL正则匹配
Vue.component("http-cond-url-regexp", {
props: ["v-cond"],
data: function () {
let cond = this.vCond
if (cond == null) {
cond = {
isRequest: true,
param: "${requestPath}",
operator: "regexp",
value: ""
}
}
return {
cond: cond
}
},
template: `<div>
<input type="hidden" name="condJSON" :value="JSON.stringify(cond)"/>
<input type="text" v-model="cond.value"/>
</div>`
})
// 根据MimeType // 根据MimeType
Vue.component("http-cond-mime-type", { Vue.component("http-cond-mime-type", {
props: ["v-cond"], props: ["v-cond"],

View File

@@ -63,7 +63,8 @@ Vue.component("http-request-conds-box", {
<div v-if="conds.groups.length > 0"> <div v-if="conds.groups.length > 0">
<table class="ui table"> <table class="ui table">
<tr v-for="(group, groupIndex) in conds.groups"> <tr v-for="(group, groupIndex) in conds.groups">
<td style="background: white"> <td class="title" :style="{'border-bottom':(groupIndex < conds.groups.length-1) ? '1px solid rgba(34,36,38,.15)':''}">分组{{groupIndex+1}}</td>
<td style="background: white;" :style="{'border-bottom':(groupIndex < conds.groups.length-1) ? '1px solid rgba(34,36,38,.15)':''}">
<var v-for="(cond, index) in group.conds" style="font-style: normal;display: inline-block; margin-bottom:0.5em"> <var v-for="(cond, index) in group.conds" style="font-style: normal;display: inline-block; margin-bottom:0.5em">
<span class="ui label tiny"> <span class="ui label tiny">
<var v-if="cond.type.length == 0" style="font-style: normal">{{cond.param}} <var>{{cond.operator}}</var></var> <var v-if="cond.type.length == 0" style="font-style: normal">{{cond.param}} <var>{{cond.operator}}</var></var>
@@ -74,7 +75,7 @@ Vue.component("http-request-conds-box", {
<var v-if="index < group.conds.length - 1"> {{group.connector}} &nbsp;</var> <var v-if="index < group.conds.length - 1"> {{group.connector}} &nbsp;</var>
</var> </var>
</td> </td>
<td style="width: 5em; background: white"> <td style="width: 5em; background: white" :style="{'border-bottom':(groupIndex < conds.groups.length-1) ? '1px solid rgba(34,36,38,.15)':''}">
<a href="" title="修改" @click.prevent="updateGroup(groupIndex, group)"><i class="icon pencil small"></i></a> <a href="" title="删除" @click.prevent="removeGroup(groupIndex)"><i class="icon remove"></i></a> <a href="" title="修改" @click.prevent="updateGroup(groupIndex, group)"><i class="icon pencil small"></i></a> <a href="" title="删除" @click.prevent="removeGroup(groupIndex)"><i class="icon remove"></i></a>
</td> </td>
</tr> </tr>
@@ -85,6 +86,10 @@ Vue.component("http-request-conds-box", {
<div> <div>
<button class="ui button tiny" type="button" @click.prevent="addGroup()">+</button> <button class="ui button tiny" type="button" @click.prevent="addGroup()">+</button>
</div> </div>
<p class="comment">
<span v-if="conds.connector == 'or'">只要满足其中一个条件分组即可。</span>
<span v-if="conds.connector == 'and'">需要满足所有条件分组。</span>
</p>
</div> </div>
</div>` </div>`
}) })

View File

@@ -10,10 +10,16 @@ Vue.component("http-request-conds-view", {
} }
} }
return { return {
conds: conds, initConds: conds,
components: window.REQUEST_COND_COMPONENTS components: window.REQUEST_COND_COMPONENTS
} }
}, },
computed: {
// 之所以使用computed是因为需要动态更新
conds: function () {
return this.initConds
},
},
methods: { methods: {
typeName: function (cond) { typeName: function (cond) {
let c = this.components.$find(function (k, v) { let c = this.components.$find(function (k, v) {

View File

@@ -3,18 +3,35 @@
"type": "url-extension", "type": "url-extension",
"name": "URL扩展名", "name": "URL扩展名",
"description": "根据URL中的文件路径扩展名进行过滤", "description": "根据URL中的文件路径扩展名进行过滤",
"component": "http-cond-url-extension" "component": "http-cond-url-extension",
"isRequest": true
}, },
{ {
"type": "url-prefix", "type": "url-prefix",
"name": "路径前缀", "name": "URL前缀",
"description": "根据URL中的文件路径前缀进行过滤", "description": "根据URL中的文件路径前缀进行过滤",
"component": "http-cond-url-prefix" "component": "http-cond-url-prefix",
"isRequest": true
},
{
"type": "url-eq",
"name": "URL精准匹配",
"description": "检查URL中的文件路径是否一致",
"component": "http-cond-url-eq",
"isRequest": true
},
{
"type": "url-regexp",
"name": "URL正则匹配",
"description": "使用正则表达式检查URL中的文件路径是否一致",
"component": "http-cond-url-regexp",
"isRequest": true
}, },
{ {
"type": "mime-type", "type": "mime-type",
"name": "内容MimeType", "name": "内容MimeType",
"description": "根据服务器返回的内容的MimeType进行过滤", "description": "根据服务器返回的内容的MimeType进行过滤。注意:当用于缓存条件时,此条件需要结合别的请求条件使用。",
"component": "http-cond-mime-type" "component": "http-cond-mime-type",
"isRequest": false
} }
] ]

View File

@@ -2,7 +2,7 @@ Tea.context(function () {
this.success = NotifyPopup this.success = NotifyPopup
this.group = { this.group = {
connector: "or", connector: "and", // 默认为and更符合用户的直觉
description: "", description: "",
isReverse: false, isReverse: false,
conds: [], conds: [],