请求条件支持参数匹配

web/public/js/components/server/http-cache-refs-box.js

@@ -40,7 +40,6 @@ Vue.component("http-cache-refs-box", {
 					<th>条件</th>
 					<th class="two">分组关系</th>
 					<th class="width10">缓存时间</th>
-					<th class="two op">操作</th>
 				</tr>
 				<tr v-for="(cacheRef, index) in refs">
 					<td :class="{'color-border': cacheRef.conds.connector == 'and'}" :style="{'border-left':cacheRef.isReverse ? '1px #db2828 solid' : ''}">
@@ -54,10 +53,6 @@ Vue.component("http-cache-refs-box", {
 						<span v-if="!cacheRef.isReverse">{{cacheRef.life.count}} {{timeUnitName(cacheRef.life.unit)}}</span>
 						<span v-else class="red">不缓存</span>
 					</td>
-					<td>
-						<a href="" @click.prevent="updateRef(index, cacheRef)">修改</a> &nbsp;
-						<a href="" @click.prevent="removeRef(index)">删除</a>
-					</td>
 				</tr>
 			</thead>
 		</table>

web/public/js/components/server/http-cache-refs-config-box.js

@@ -11,11 +11,7 @@ Vue.component("http-cache-refs-config-box", {
 					}
 				})
 			})
-			that.refs = newRefs
-
-			if (that.vCacheConfig != null) {
-				that.vCacheConfig.cacheRefs = newRefs
-			}
+			that.updateRefs(newRefs)
 		})
 	},
 	data: function () {
@@ -51,9 +47,32 @@ Vue.component("http-cache-refs-config-box", {
 				width: width + "px",
 				height: height + "px",
 				callback: function (resp) {
+					let newRef = resp.data.cacheRef
+					if (newRef.conds == null) {
+						return
+					}
+
 					that.id++
-					resp.data.cacheRef.id = that.id
-					that.refs.push(resp.data.cacheRef)
+					newRef.id = that.id
+
+					if (newRef.isReverse) {
+						let newRefs = []
+						let isAdded = false
+						that.refs.forEach(function (v) {
+							if (!v.isReverse && !isAdded) {
+								newRefs.push(newRef)
+								isAdded = true
+							}
+							newRefs.push(v)
+						})
+						if (!isAdded) {
+							newRefs.push(newRef)
+						}
+
+						that.updateRefs(newRefs)
+					} else {
+						that.refs.push(newRef)
+					}
 				}
 			})
 		},
@@ -87,6 +106,12 @@ Vue.component("http-cache-refs-config-box", {
 				that.refs.$remove(index)
 			})
 		},
+		updateRefs: function (newRefs) {
+			this.refs = newRefs
+			if (this.vCacheConfig != null) {
+				this.vCacheConfig.cacheRefs = newRefs
+			}
+		},
 		timeUnitName: function (unit) {
 			switch (unit) {
 				case "ms":

web/public/js/components/server/http-cond-definitions.js

@@ -311,4 +311,276 @@ Vue.component("http-cond-mime-type", {
 	</div>
 	<p class="comment">服务器返回的内容的MimeType，比如<span class="ui label tiny">text/html</span>、<span class="ui label tiny">image/*</span>等。</p>
 </div>`
+})
+
+// 参数匹配
+Vue.component("http-cond-params", {
+	props: ["v-cond"],
+	mounted: function () {
+		let cond = this.vCond
+		if (cond == null) {
+			return
+		}
+		this.operator = cond.operator
+
+		// stringValue
+		if (["regexp", "not regexp", "eq", "not", "prefix", "suffix", "contains", "not contains", "eq ip", "gt ip", "gte ip", "lt ip", "lte ip", "ip range"].$contains(cond.operator)) {
+			this.stringValue = cond.value
+			return
+		}
+
+		// numberValue
+		if (["eq int", "eq float", "gt", "gte", "lt", "lte", "mod 10", "ip mod 10", "mod 100", "ip mod 100"].$contains(cond.operator)) {
+			this.numberValue = cond.value
+			return
+		}
+
+		// modValue
+		if (["mod", "ip mod"].$contains(cond.operator)) {
+			let pieces = cond.value.split(",")
+			this.modDivValue = pieces[0]
+			if (pieces.length > 1) {
+				this.modRemValue = pieces[1]
+			}
+			return
+		}
+
+		// stringValues
+		let that = this
+		if (["in", "not in", "file ext", "mime type"].$contains(cond.operator)) {
+			try {
+				let arr = JSON.parse(cond.value)
+				if (arr != null && (arr instanceof Array)) {
+					arr.forEach(function (v) {
+						that.stringValues.push(v)
+					})
+				}
+			} catch (e) {
+
+			}
+			return
+		}
+
+		// versionValue
+		if (["version range"].$contains(cond.operator)) {
+			let pieces = cond.value.split(",")
+			this.versionRangeMinValue = pieces[0]
+			if (pieces.length > 1) {
+				this.versionRangeMaxValue = pieces[1]
+			}
+			return
+		}
+	},
+	data: function () {
+		let cond = {
+			isRequest: true,
+			param: "",
+			operator: window.REQUEST_COND_OPERATORS[0].op,
+			value: ""
+		}
+		if (this.vCond != null) {
+			cond = this.vCond
+		}
+		return {
+			cond: cond,
+			operators: window.REQUEST_COND_OPERATORS,
+			operator: window.REQUEST_COND_OPERATORS[0].op,
+			operatorDescription: window.REQUEST_COND_OPERATORS[0].description,
+			variables: window.REQUEST_VARIABLES,
+			variable: "",
+
+			// 各种类型的值
+			stringValue: "",
+			numberValue: "",
+
+			modDivValue: "",
+			modRemValue: "",
+
+			stringValues: [],
+
+			versionRangeMinValue: "",
+			versionRangeMaxValue: ""
+		}
+	},
+	methods: {
+		changeVariable: function () {
+			let v = this.cond.param
+			if (v == null) {
+				v = ""
+			}
+			this.cond.param = v + this.variable
+		},
+		changeOperator: function () {
+			let that = this
+			this.operators.forEach(function (v) {
+				if (v.op == that.operator) {
+					that.operatorDescription = v.description
+				}
+			})
+
+			this.cond.operator = this.operator
+
+			// 移动光标
+			let box = document.getElementById("variables-value-box")
+			if (box != null) {
+				setTimeout(function () {
+					let input = box.getElementsByTagName("INPUT")
+					if (input.length > 0) {
+						input[0].focus()
+					}
+				}, 100)
+			}
+		},
+		changeStringValues: function (v) {
+			this.stringValues = v
+			this.cond.value = JSON.stringify(v)
+		}
+	},
+	watch: {
+		stringValue: function (v) {
+			this.cond.value = v
+		},
+		numberValue: function (v) {
+			// TODO 校验数字
+			this.cond.value = v
+		},
+		modDivValue: function (v) {
+			if (v.length == 0) {
+				return
+			}
+			let div = parseInt(v)
+			if (isNaN(div)) {
+				div = 1
+			}
+			this.modDivValue = div
+			this.cond.value = div + "," + this.modRemValue
+		},
+		modRemValue: function (v) {
+			if (v.length == 0) {
+				return
+			}
+			let rem = parseInt(v)
+			if (isNaN(rem)) {
+				rem = 0
+			}
+			this.modRemValue = rem
+			this.cond.value = this.modDivValue + "," + rem
+		},
+		versionRangeMinValue: function (v) {
+			this.cond.value = this.versionRangeMinValue + "," + this.versionRangeMaxValue
+		},
+		versionRangeMaxValue: function (v) {
+			this.cond.value = this.versionRangeMinValue + "," + this.versionRangeMaxValue
+		}
+	},
+	template: `<tbody>
+	<tr>
+		<td>参数值</td>
+		<td>
+			<input type="hidden" name="condJSON" :value="JSON.stringify(cond)"/>
+			<div>
+				<div class="ui fields inline">
+					<div class="ui field">
+						<input type="text" placeholder="\${xxx}" v-model="cond.param"/>
+					</div>
+					<div class="ui field">
+						<select class="ui dropdown" style="width: 7em; color: grey" v-model="variable" @change="changeVariable">
+							<option value="">[常用参数]</option>
+							<option v-for="v in variables" :value="v.code">{{v.code}} - {{v.name}}</option>
+						</select>
+					</div>
+				</div>			
+			</div>
+			<p class="comment">其中可以使用变量，类似于<code-label>\${requestPath}</code-label>，也可以是多个变量的组合。</p>
+		</td>
+	</tr>
+	<tr>
+		<td>操作符</td>
+		<td>
+			<div>
+				<select class="ui dropdown auto-width" v-model="operator" @change="changeOperator">
+					<option v-for="operator in operators" :value="operator.op">{{operator.name}}</option>
+				</select>
+				<p class="comment">{{operatorDescription}}</p>
+			</div>
+		</td>
+	</tr>
+	<tr v-show="!['file exist', 'file not exist'].$contains(cond.operator)">
+		<td>对比值</td>
+		<td id="variables-value-box">
+			<!-- 正则表达式 -->
+			<div v-if="['regexp', 'not regexp'].$contains(cond.operator)">
+				<input type="text" v-model="stringValue"/>
+				<p class="comment">要匹配的正则表达式，比如<code-label>^/static/(.+).js</code-label>。</p>
+			</div>
+			
+			<!-- 数字相关 -->
+			<div v-if="['eq int', 'eq float', 'gt', 'gte', 'lt', 'lte'].$contains(cond.operator)">
+				<input type="text" maxlength="11" size="11" style="width: 5em" v-model="numberValue"/>
+				<p class="comment">要对比的数字。</p>
+			</div>
+			
+			<!-- 取模 -->
+			<div v-if="['mod 10'].$contains(cond.operator)">
+				<input type="text" maxlength="11" size="11" style="width: 5em" v-model="numberValue"/>
+				<p class="comment">参数值除以10的余数，在0-9之间。</p>
+			</div>
+			<div v-if="['mod 100'].$contains(cond.operator)">
+				<input type="text" maxlength="11" size="11" style="width: 5em" v-model="numberValue"/>
+				<p class="comment">参数值除以100的余数，在0-99之间。</p>
+			</div>
+			<div v-if="['mod', 'ip mod'].$contains(cond.operator)">
+				<div class="ui fields inline">
+					<div class="ui field">除：</div>
+					<div class="ui field">
+						<input type="text" maxlength="11" size="11" style="width: 5em" v-model="modDivValue" placeholder="除数"/>
+					</div>
+					<div class="ui field">余：</div>
+					<div class="ui field">
+						<input type="text" maxlength="11" size="11" style="width: 5em" v-model="modRemValue" placeholder="余数"/>
+					</div>
+				</div>
+			</div>
+			
+			<!-- 字符串相关 -->
+			<div v-if="['eq', 'not', 'prefix', 'suffix', 'contains', 'not contains'].$contains(cond.operator)">
+				<input type="text" v-model="stringValue"/>
+				<p class="comment" v-if="cond.operator == 'eq'">和参数值一致的字符串。</p>
+				<p class="comment" v-if="cond.operator == 'not'">和参数值不一致的字符串。</p>
+				<p class="comment" v-if="cond.operator == 'prefix'">参数值的前缀。</p>
+				<p class="comment" v-if="cond.operator == 'suffix'">参数值的后缀为此字符串。</p>
+				<p class="comment" v-if="cond.operator == 'contains'">参数值包含此字符串。</p>
+				<p class="comment" v-if="cond.operator == 'not contains'">参数值不包含此字符串。</p>
+			</div>
+			<div v-if="['in', 'not in', 'file ext', 'mime type'].$contains(cond.operator)">
+				<values-box @change="changeStringValues" :values="stringValues" size="15"></values-box>
+				<p class="comment" v-if="cond.operator == 'in'">添加参数值列表。</p>
+				<p class="comment" v-if="cond.operator == 'not in'">添加参数值列表。</p>
+				<p class="comment" v-if="cond.operator == 'file ext'">添加扩展名列表，比如<code-label>png</code-label>、<code-label>html</code-label>，不包括点。</p>
+				<p class="comment" v-if="cond.operator == 'mime type'">添加MimeType列表，类似于<code-label>text/html</code-label>、<code-label>image/*</code-label>。</p>
+			</div>
+			<div v-if="['version range'].$contains(cond.operator)">
+				<div class="ui fields inline">
+					<div class="ui field"><input type="text" v-model="versionRangeMinValue" maxlength="200" placeholder="最小版本" style="width: 10em"/></div>
+					<div class="ui field">-</div>
+					<div class="ui field"><input type="text" v-model="versionRangeMaxValue" maxlength="200" placeholder="最大版本" style="width: 10em"/></div>
+				</div>
+			</div>
+			
+			<!-- IP相关 -->
+			<div v-if="['eq ip', 'gt ip', 'gte ip', 'lt ip', 'lte ip', 'ip range'].$contains(cond.operator)">
+				<input type="text" style="width: 10em" v-model="stringValue" placeholder="x.x.x.x"/>
+				<p class="comment">要对比的IP。</p>
+			</div>
+			<div v-if="['ip mod 10'].$contains(cond.operator)">
+				<input type="text" maxlength="11" size="11" style="width: 5em" v-model="numberValue"/>
+				<p class="comment">参数中IP转换成整数后除以10的余数，在0-9之间。</p>
+			</div>
+			<div v-if="['ip mod 100'].$contains(cond.operator)">
+				<input type="text" maxlength="11" size="11" style="width: 5em" v-model="numberValue"/>
+				<p class="comment">参数中IP转换成整数后除以100的余数，在0-99之间。</p>
+			</div>
+		</td>
+	</tr>
+</tbody>`
 })

web/public/js/components/server/http-request-conds-box.js

@@ -67,8 +67,8 @@ Vue.component("http-request-conds-box", {
 					<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">
 							<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">{{typeName(cond)}}: </var>
+								<var v-if="cond.type.length == 0 || cond.type == 'params'" style="font-style: normal">{{cond.param}} <var>{{cond.operator}}</var></var>
+								<var v-if="cond.type.length > 0 && cond.type != 'params'" style="font-style: normal">{{typeName(cond)}}: </var>
 								{{cond.value}}
 							</span>
 							

web/public/js/components/server/http-request-conds-view.js

@@ -1,3 +1,4 @@
+// 浏览条件列表
 Vue.component("http-request-conds-view", {
 	props: ["v-conds"],
 	data: function () {
@@ -54,8 +55,8 @@ Vue.component("http-request-conds-view", {
 			<div v-for="(group, groupIndex) in conds.groups">
 				<var v-for="(cond, index) in group.conds" style="font-style: normal;display: inline-block; margin-bottom:0.5em">
 					<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.typeName}}: </var>
+						<var v-if="cond.type.length == 0 || cond.type == 'params'" style="font-style: normal">{{cond.param}} <var>{{cond.operator}}</var></var>
+						<var v-if="cond.type.length > 0 && cond.type != 'params'" style="font-style: normal">{{cond.typeName}}: </var>
 						{{cond.value}}
 					</span>