mirror of
https://github.com/TeaOSLab/EdgeAdmin.git
synced 2025-12-09 15:40:27 +08:00
实现重写规则管理
This commit is contained in:
GoEdgeLab
@@ -65,7 +65,7 @@
|
||||
overflow-y: auto;
|
||||
}
|
||||
.right-box.tiny {
|
||||
top: 10em;
|
||||
top: 10.4em;
|
||||
left: 26.5em;
|
||||
}
|
||||
.right-box::-webkit-scrollbar {
|
||||
@@ -130,6 +130,7 @@ p.comment,
|
||||
div.comment {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
padding-top: 0.4em;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
p.comment em,
|
||||
div.comment em {
|
||||
@@ -584,7 +585,6 @@ select.auto-width {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
/** label **/
|
||||
label[for] {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
@@ -675,4 +675,30 @@ var.dash {
|
||||
form .fields {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
/** 排序 **/
|
||||
.sortable-ghost {
|
||||
background: #ddd !important;
|
||||
opacity: 0.1;
|
||||
}
|
||||
.sortable-drag {
|
||||
opacity: 1.0;
|
||||
}
|
||||
.icon.handle {
|
||||
cursor: pointer;
|
||||
}
|
||||
.label.port-label {
|
||||
margin-top: 0.4em !important;
|
||||
margin-bottom: 0.4em !important;
|
||||
display: block;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.label {
|
||||
word-break: break-all;
|
||||
}
|
||||
td .label.small {
|
||||
margin-bottom: 0.2em !important;
|
||||
}
|
||||
td {
|
||||
word-break: break-all;
|
||||
}
|
||||
/*# sourceMappingURL=@layout.css.map */
|
||||
File diff suppressed because one or more lines are too long
@@ -64,6 +64,7 @@ tbody {
|
||||
p.comment, div.comment {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
padding-top: 0.4em;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
p.comment em, div.comment em {
|
||||
@@ -620,7 +621,7 @@ select.auto-width {
|
||||
}
|
||||
}
|
||||
|
||||
/** label **/
|
||||
// label
|
||||
label[for] {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
@@ -731,3 +732,38 @@ form {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/** 排序 **/
|
||||
.sortable-ghost {
|
||||
background: #ddd !important;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.sortable-drag {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
.icon.handle {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.label.port-label {
|
||||
margin-top: 0.4em !important;
|
||||
margin-bottom: 0.4em !important;
|
||||
display: block;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
// .label
|
||||
.label {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
td .label.small {
|
||||
margin-bottom: 0.2em !important;
|
||||
}
|
||||
|
||||
// td
|
||||
td {
|
||||
word-break: break-all;
|
||||
}
|
||||
@@ -87,7 +87,7 @@
|
||||
}
|
||||
|
||||
.right-box.tiny {
|
||||
top: 10em;
|
||||
top: 10.4em;
|
||||
left: 26.5em;
|
||||
}
|
||||
|
||||
|
||||
@@ -9,17 +9,28 @@
|
||||
<input type="hidden" name="serverType" :value="serverType"/>
|
||||
<table class="ui table selectable definition">
|
||||
<tr>
|
||||
<td class="title">绑定端口 *</td>
|
||||
<td class="title">是否启用HTTP</td>
|
||||
<td>
|
||||
<network-addresses-box :v-server-type="serverType" :v-addresses="httpConfig.addresses" :v-protocol="'http'"></network-addresses-box>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>自动跳转到HTTPS</td>
|
||||
<td>
|
||||
<http-redirect-to-https-box :v-redirect-to-https-config="redirectToHTTPSConfig"></http-redirect-to-https-box>
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="isOn" value="1" v-model="httpConfig.isOn"/>
|
||||
<label></label>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tbody v-show="httpConfig.isOn">
|
||||
<tr>
|
||||
<td class="title">绑定端口 *</td>
|
||||
<td>
|
||||
<network-addresses-box :v-server-type="serverType" :v-addresses="httpConfig.addresses" :v-protocol="'http'"></network-addresses-box>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>自动跳转到HTTPS</td>
|
||||
<td>
|
||||
<http-redirect-to-https-box :v-redirect-to-https-config="redirectToHTTPSConfig"></http-redirect-to-https-box>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
|
||||
@@ -8,11 +8,22 @@
|
||||
<input type="hidden" name="serverType" :value="serverType"/>
|
||||
<table class="ui table selectable definition">
|
||||
<tr>
|
||||
<td class="title">绑定端口 *</td>
|
||||
<td class="title">是否启用HTTPS</td>
|
||||
<td>
|
||||
<network-addresses-box :v-server-type="serverType" :v-addresses="httpsConfig.addresses" :v-protocol="'https'"></network-addresses-box>
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="isOn" value="1" v-model="httpsConfig.isOn"/>
|
||||
<label></label>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tbody v-show="httpsConfig.isOn">
|
||||
<tr>
|
||||
<td class="title">绑定端口 *</td>
|
||||
<td>
|
||||
<network-addresses-box :v-server-type="serverType" :v-addresses="httpsConfig.addresses" :v-protocol="'https'"></network-addresses-box>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
|
||||
@@ -26,17 +26,26 @@
|
||||
{{typeName}}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td colspan="2"><more-options-indicator></more-options-indicator></td>
|
||||
</tr>
|
||||
<tbody v-show="moreOptionsVisible">
|
||||
<tr>
|
||||
<td>描述</td>
|
||||
<td>
|
||||
<textarea name="description" rows="3" v-model="server.description"></textarea>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>描述</td>
|
||||
<td>
|
||||
<textarea name="description" rows="3" v-model="server.description"></textarea>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>是否启用</td>
|
||||
<td>
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="isOn" value="1" v-model="server.isOn"/>
|
||||
<label></label>
|
||||
</div>
|
||||
<p class="comment">可以使用此选项整体关闭当前服务。</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<submit-btn></submit-btn>
|
||||
|
||||
@@ -1,32 +1,41 @@
|
||||
{$layout}
|
||||
|
||||
{$template "/left_menu"}
|
||||
|
||||
{$var "header"}
|
||||
<script type="text/javascript" src="/js/sortable.min.js"></script>
|
||||
{$end}
|
||||
|
||||
<div class="right-box">
|
||||
{$template "menu"}
|
||||
|
||||
<p class="comment" v-if="locations.length == 0">暂时还没有路径规则。</p>
|
||||
|
||||
<table class="ui table selectable" v-if="locations.length > 0">
|
||||
<table class="ui table selectable" v-if="locations.length > 0" id="sortable-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:1em"></th>
|
||||
<th>匹配规则</th>
|
||||
<th class="two wide">状态</th>
|
||||
<th class="two op">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr v-for="location in locations">
|
||||
<td>
|
||||
{{location.pattern}}
|
||||
<http-location-labels :v-location-config="location"></http-location-labels>
|
||||
</td>
|
||||
<td>
|
||||
<label-on :v-is-on="location.isOn"></label-on>
|
||||
</td>
|
||||
<td>
|
||||
<a :href="'/servers/server/settings/locations/location?serverId=' + serverId + '&locationId=' + location.id">详情</a>
|
||||
<a href="" @click.prevent="deleteLocation(location.id)">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tbody v-for="location in locations" :v-id="location.id">
|
||||
<tr>
|
||||
<td><i class="icon bars grey handle"></i></td>
|
||||
<td>
|
||||
{{location.pattern}}
|
||||
<http-location-labels :v-location-config="location"></http-location-labels>
|
||||
</td>
|
||||
<td>
|
||||
<label-on :v-is-on="location.isOn"></label-on>
|
||||
</td>
|
||||
<td>
|
||||
<a :href="'/servers/server/settings/locations/location?serverId=' + serverId + '&locationId=' + location.id">详情</a>
|
||||
<a href="" @click.prevent="deleteLocation(location.id)">删除</a>
|
||||
<!--<a :href="'/servers/server/settings/locations/create?serverId=' + serverId + '&webId=' + webId + '&parentId=' + location.id" title="添加子规则">+</a>-->
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="comment" v-if="locations.length > 0">拖动左侧的<i class="icon bars grey"></i>图标可以对路径规则进行排序。</p>
|
||||
</div>
|
||||
@@ -1,4 +1,8 @@
|
||||
Tea.context(function () {
|
||||
this.$delay(function () {
|
||||
this.sort()
|
||||
}, 1000)
|
||||
|
||||
// 删除路径规则
|
||||
this.deleteLocation = function (locationId) {
|
||||
teaweb.confirm("确定要删除此路径规则吗？", function () {
|
||||
@@ -10,4 +14,35 @@ Tea.context(function () {
|
||||
.refresh()
|
||||
})
|
||||
}
|
||||
|
||||
// 排序
|
||||
this.sort = function () {
|
||||
if (this.locations.length == 0) {
|
||||
return
|
||||
}
|
||||
|
||||
let box = this.$find("#sortable-table")[0]
|
||||
let that = this
|
||||
Sortable.create(box, {
|
||||
draggable: "tbody",
|
||||
handle: ".icon.handle",
|
||||
onStart: function () {
|
||||
},
|
||||
onUpdate: function (event) {
|
||||
let rows = box.querySelectorAll("tbody")
|
||||
let locationIds = []
|
||||
rows.forEach(function (row) {
|
||||
locationIds.push(parseInt(row.getAttribute("v-id")))
|
||||
})
|
||||
that.$post(".sort")
|
||||
.params({
|
||||
webId: that.webId,
|
||||
locationIds: locationIds
|
||||
})
|
||||
.success(function () {
|
||||
teaweb.success("保存成功")
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -6,6 +6,9 @@
|
||||
{$template "../left_menu"}
|
||||
|
||||
<div class="right-box tiny">
|
||||
<p class="ui message">此功能暂未开放，敬请期待。</p>
|
||||
<first-menu>
|
||||
<a class="item" @click.prevent="createRewriteRule()">[创建]</a>
|
||||
</first-menu>
|
||||
<http-rewrite-rule-list :v-web-id="webId" :v-rewrite-rules="rewriteRules"></http-rewrite-rule-list>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,11 @@
|
||||
Tea.context(function () {
|
||||
// 创建重写规则
|
||||
this.createRewriteRule = function () {
|
||||
teaweb.popup("/servers/server/settings/rewrite/createPopup?webId=" + this.webId, {
|
||||
height: "26em",
|
||||
callback: function () {
|
||||
window.location.reload()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,73 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<h3>创建重写规则</h3>
|
||||
<form class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<input type="hidden" name="webId" :value="webId"/>
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td class="title">匹配规则 *</td>
|
||||
<td>
|
||||
<input type="text" name="pattern" maxlength="500" placeholder="比如 /post/(.+)" ref="focus"/>
|
||||
<p class="comment">需要符合正则表达式规范，<a href="http://teaos.cn/doc/regexp/Regexp.md" target="_blank">正则表达式语法 »</a></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>目标URL *</td>
|
||||
<td>
|
||||
<input type="text" name="replace" placeholder="比如 /post/${1}.html" maxlength="500"/>
|
||||
<p class="comment">URL中可以包含一些<a href="http://teaos.cn/doc/proxy/Variables.md" target="_blank">内置的变量</a>，也可以是一个完整的URL，比如：http://example.com/hello。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>转发方式</td>
|
||||
<td>
|
||||
<select class="ui dropdown auto-width" name="mode" v-model="rewriteRule.mode">
|
||||
<option value="proxy">隐式</option>
|
||||
<option value="redirect">显式</option>
|
||||
</select>
|
||||
<p class="comment">隐式表示不在客户端显示重写后的URL；显式表示在客户端跳转URL，将会显示重写后的URL。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><more-options-indicator></more-options-indicator></td>
|
||||
</tr>
|
||||
<tbody v-show="moreOptionsVisible">
|
||||
<tr v-show="rewriteRule.mode == 'redirect'">
|
||||
<td>跳转状态码</td>
|
||||
<td>
|
||||
<select class="ui dropdown auto-width" name="redirectStatus" v-model="rewriteRule.redirectStatus">
|
||||
<option v-for="status in statusOptions" :value="status.code">{{status.code}} {{status.text}}</option>
|
||||
</select>
|
||||
<p class="comment">通常使用默认的307即可。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-show="rewriteRule.mode == 'proxy'">
|
||||
<td>代理主机名</td>
|
||||
<td>
|
||||
<input type="text" name="proxyHost" placeholder="比如 example.com" maxlength="100"/>
|
||||
<p class="comment">如果转发的方式为隐式而且目标URL为不同的域名时需要用到此选项，用于修改被代理服务接收到的域名，默认和客户端请求的主机名一致，通常不必填写，支持<a href="http://teaos.cn/doc/proxy/Variables.md#%E8%AF%B7%E6%B1%82%E7%9B%B8%E5%85%B3%E5%8F%98%E9%87%8F" target="_blank">请求变量</a>。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>是否终止往下匹配</td>
|
||||
<td>
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="isBreak" value="1" checked="checked"/>
|
||||
<label></label>
|
||||
</div>
|
||||
<p class="comment">如果选中了此选项，一旦匹配成功，不会继续匹配其他的重写规则或路径规则。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>是否启用</td>
|
||||
<td>
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="isOn" value="1" checked="checked"/>
|
||||
<label></label>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
@@ -0,0 +1,15 @@
|
||||
Tea.context(function () {
|
||||
this.success = NotifyPopup
|
||||
|
||||
this.rewriteRule = {
|
||||
mode: "proxy",
|
||||
redirectStatus: 307
|
||||
}
|
||||
this.statusOptions = [
|
||||
{"code": 301, "text": "Moved Permanently"},
|
||||
{"code": 308, "text": "Permanent Redirect"},
|
||||
{"code": 302, "text": "Found"},
|
||||
{"code": 303, "text": "See Other"},
|
||||
{"code": 307, "text": "Temporary Redirect"}
|
||||
]
|
||||
})
|
||||
@@ -2,5 +2,8 @@
|
||||
{$template "/left_menu"}
|
||||
|
||||
<div class="right-box">
|
||||
<p class="ui message">此功能暂未开放，敬请期待。</p>
|
||||
<first-menu>
|
||||
<a class="item" @click.prevent="createRewriteRule()">[创建]</a>
|
||||
</first-menu>
|
||||
<http-rewrite-rule-list :v-web-id="webId" :v-rewrite-rules="rewriteRules"></http-rewrite-rule-list>
|
||||
</div>
|
||||
11
web/views/@default/servers/server/settings/rewrite/index.js
Normal file
11
web/views/@default/servers/server/settings/rewrite/index.js
Normal file
@@ -0,0 +1,11 @@
|
||||
Tea.context(function () {
|
||||
// 创建重写规则
|
||||
this.createRewriteRule = function () {
|
||||
teaweb.popup("/servers/server/settings/rewrite/createPopup?webId=" + this.webId, {
|
||||
height: "26em",
|
||||
callback: function () {
|
||||
window.location.reload()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,74 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<h3>修改重写规则</h3>
|
||||
<form class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<input type="hidden" name="webId" :value="webId"/>
|
||||
<input type="hidden" name="rewriteRuleId" :value="rewriteRule.id"/>
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td class="title">匹配规则 *</td>
|
||||
<td>
|
||||
<input type="text" name="pattern" maxlength="500" placeholder="比如 /post/(.+)" ref="focus" v-model="rewriteRule.pattern"/>
|
||||
<p class="comment">需要符合正则表达式规范，<a href="http://teaos.cn/doc/regexp/Regexp.md" target="_blank">正则表达式语法 »</a></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>目标URL *</td>
|
||||
<td>
|
||||
<input type="text" name="replace" placeholder="比如 /post/${1}.html" maxlength="500" v-model="rewriteRule.replace"/>
|
||||
<p class="comment">URL中可以包含一些<a href="http://teaos.cn/doc/proxy/Variables.md" target="_blank">内置的变量</a>，也可以是一个完整的URL，比如：http://example.com/hello。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>转发方式</td>
|
||||
<td>
|
||||
<select class="ui dropdown auto-width" name="mode" v-model="rewriteRule.mode">
|
||||
<option value="proxy">隐式</option>
|
||||
<option value="redirect">显式</option>
|
||||
</select>
|
||||
<p class="comment">隐式表示不在客户端显示重写后的URL；显式表示在客户端跳转URL，将会显示重写后的URL。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><more-options-indicator></more-options-indicator></td>
|
||||
</tr>
|
||||
<tbody v-show="moreOptionsVisible">
|
||||
<tr v-show="rewriteRule.mode == 'redirect'">
|
||||
<td>跳转状态码</td>
|
||||
<td>
|
||||
<select class="ui dropdown auto-width" name="redirectStatus" v-model="rewriteRule.redirectStatus">
|
||||
<option v-for="status in statusOptions" :value="status.code">{{status.code}} {{status.text}}</option>
|
||||
</select>
|
||||
<p class="comment">通常使用默认的307即可。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-show="rewriteRule.mode == 'proxy'">
|
||||
<td>代理主机名</td>
|
||||
<td>
|
||||
<input type="text" name="proxyHost" placeholder="比如 example.com" maxlength="100" v-model="rewriteRule.proxyHost"/>
|
||||
<p class="comment">如果转发的方式为隐式而且目标URL为不同的域名时需要用到此选项，用于修改被代理服务接收到的域名，默认和客户端请求的主机名一致，通常不必填写，支持<a href="http://teaos.cn/doc/proxy/Variables.md#%E8%AF%B7%E6%B1%82%E7%9B%B8%E5%85%B3%E5%8F%98%E9%87%8F" target="_blank">请求变量</a>。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>是否终止往下匹配</td>
|
||||
<td>
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="isBreak" value="1" v-model="rewriteRule.isBreak"/>
|
||||
<label></label>
|
||||
</div>
|
||||
<p class="comment">如果选中了此选项，一旦匹配成功，不会继续匹配其他的重写规则或路径规则。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>是否启用</td>
|
||||
<td>
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="isOn" value="1" v-model="rewriteRule.isOn"/>
|
||||
<label></label>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
@@ -0,0 +1,11 @@
|
||||
Tea.context(function () {
|
||||
this.success = NotifyPopup
|
||||
|
||||
this.statusOptions = [
|
||||
{"code": 301, "text": "Moved Permanently"},
|
||||
{"code": 308, "text": "Permanent Redirect"},
|
||||
{"code": 302, "text": "Found"},
|
||||
{"code": 303, "text": "See Other"},
|
||||
{"code": 307, "text": "Temporary Redirect"}
|
||||
]
|
||||
})
|
||||
Reference in New Issue
Block a user