|
|
|
@ -5,7 +5,7 @@
|
|
|
|
|
<el-col :span="3">
|
|
|
|
|
<a>Nginx 控制中心</a>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="2">
|
|
|
|
|
<el-col :span="5">
|
|
|
|
|
<a @click="nginxStart">
|
|
|
|
|
<el-image v-if="run" :src="'${Uri.getUrl('/static/img/start_.png')}'"
|
|
|
|
|
style="width: 50px; height: 50px"
|
|
|
|
@ -14,8 +14,6 @@
|
|
|
|
|
style="width: 50px; height: 50px"
|
|
|
|
|
fit="fill"></el-image>
|
|
|
|
|
</a>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="2">
|
|
|
|
|
<a @click="nginxStop">
|
|
|
|
|
<el-image v-if="run" :src="'${Uri.getUrl('/static/img/stop.png')}'"
|
|
|
|
|
style="width: 50px; height: 50px"
|
|
|
|
@ -24,8 +22,6 @@
|
|
|
|
|
style="width: 50px; height: 50px"
|
|
|
|
|
fit="fill"></el-image>
|
|
|
|
|
</a>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="2">
|
|
|
|
|
<a @click="nginxReload">
|
|
|
|
|
<el-image v-if="run" :src="'${Uri.getUrl('/static/img/reload.png')}'"
|
|
|
|
|
style="width: 50px; height: 50px"
|
|
|
|
@ -40,13 +36,13 @@
|
|
|
|
|
|
|
|
|
|
<el-card class="box-card" v-for="item in services" :key="item.id">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="5">
|
|
|
|
|
<el-col :span="4">
|
|
|
|
|
<el-input size="small" v-model="item.value" placeholder="请输入端口" style="width: 160px;text-align: center"
|
|
|
|
|
suffix-icon="el-icon-edit">
|
|
|
|
|
<template slot="prepend">端口</template>
|
|
|
|
|
</el-input>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
<el-col :span="5">
|
|
|
|
|
<el-input size="small" v-model="item.bz" placeholder="请输入备注" style="width: 200px;text-align: center"
|
|
|
|
|
suffix-icon="el-icon-collection-tag">
|
|
|
|
|
<template slot="prepend">备注</template>
|
|
|
|
@ -55,37 +51,12 @@
|
|
|
|
|
<el-col :span="2">
|
|
|
|
|
<el-button type="primary" size="small" icon="el-icon-refresh">保存</el-button>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="11">
|
|
|
|
|
<el-col :span="13">
|
|
|
|
|
<span style="float: right;">
|
|
|
|
|
<el-button type="success" size="small" icon="el-icon-plus" @click="onAction(['create',item])">新增
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button size="small" icon="el-icon-refresh" @click="onFind"></el-button>
|
|
|
|
|
<el-button size="small" icon="el-icon-refresh" @click="onRefresh"></el-button>
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
<el-dialog :title="form.title" :visible.sync="form.dialog">
|
|
|
|
|
<el-form :model="form" :rules="formRules" ref="form" label-width="90px"
|
|
|
|
|
style="width: 290px;">
|
|
|
|
|
<el-form-item label="名称" prop="name">
|
|
|
|
|
<el-input v-model="form.name" clearable size="small" placeholder="简要描述"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="路径" prop="context">
|
|
|
|
|
<el-input v-model="form.context" clearable size="small" placeholder="字母数字组合">
|
|
|
|
|
<template slot="prepend">:{{form.port}}/</template>
|
|
|
|
|
</el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="地址" prop="location">
|
|
|
|
|
<el-input v-model="form.location" clearable size="small" placeholder="路径或URL"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="备注" prop="bz">
|
|
|
|
|
<el-input type="textarea" v-model="form.bz" clearable size="small"
|
|
|
|
|
placeholder="备注信息"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button size="small" @click="form.dialog = false">取 消</el-button>
|
|
|
|
|
<el-button size="small" type="primary" @click="onAction(['save',''])">保存</el-button>
|
|
|
|
|
</span>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
@ -108,12 +79,12 @@
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
width="150px"
|
|
|
|
|
width="130px"
|
|
|
|
|
label="路径"
|
|
|
|
|
prop="context">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
width="150px"
|
|
|
|
|
width="220px"
|
|
|
|
|
label="地址"
|
|
|
|
|
prop="location">
|
|
|
|
|
</el-table-column>
|
|
|
|
@ -143,17 +114,75 @@
|
|
|
|
|
<el-button
|
|
|
|
|
size="mini"
|
|
|
|
|
type="danger"
|
|
|
|
|
@click="onAction('delete', scope.row)">删除
|
|
|
|
|
@click="onAction(['delete', scope.row])">删除
|
|
|
|
|
</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
</el-card>
|
|
|
|
|
|
|
|
|
|
<el-dialog :title="form.title" :visible.sync="form.dialog" width="550px">
|
|
|
|
|
<el-form :model="form" :rules="formRules" ref="form" label-width="80px"
|
|
|
|
|
style="width: 400px;margin: 0 auto">
|
|
|
|
|
<el-form-item label="映射名称" required prop="name">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="22">
|
|
|
|
|
<el-input v-model="form.name" clearable size="small" placeholder="映射名称"></el-input>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="映射路径" required prop="context">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="22">
|
|
|
|
|
<el-input v-model="form.context" clearable size="small" placeholder="字母数字组合">
|
|
|
|
|
<template slot="prepend">:{{form.port}}</template>
|
|
|
|
|
</el-input>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="映射类型" required prop="type">
|
|
|
|
|
<el-radio v-model="form.type" label="HTTP">HTTP</el-radio>
|
|
|
|
|
<el-radio v-model="form.type" label="FILE">FILE</el-radio>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="映射地址" required prop="location">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="22">
|
|
|
|
|
<el-input v-model="form.location" clearable size="small"
|
|
|
|
|
:placeholder="form.type=='HTTP'?'代理地址http://':'文件地址D:\ or /root'"></el-input>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="2" style="text-align: right">
|
|
|
|
|
<el-popover
|
|
|
|
|
placement="top-start"
|
|
|
|
|
width="200"
|
|
|
|
|
trigger="hover"
|
|
|
|
|
content="映射类型为文件时,映射路径名需和即将映射的文件夹一样,且不以“\”结尾,映射地址为该文件夹的上一层,则可正常访问。">
|
|
|
|
|
<i slot="reference" class="el-icon-warning-outline"></i>
|
|
|
|
|
</el-popover>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="映射备注" prop="bz">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="22">
|
|
|
|
|
<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 5}" v-model="form.bz" clearable
|
|
|
|
|
size="small"
|
|
|
|
|
placeholder="备注信息"></el-input>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button size="small" @click="form.dialog = false">取 消</el-button>
|
|
|
|
|
<el-button size="small" type="primary" @click="onAction(['save',''])">保存</el-button>
|
|
|
|
|
</span>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
<style>
|
|
|
|
|
#app {
|
|
|
|
|
padding: 10px;
|
|
|
|
|
width: 900px;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
width: 1080px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.box-card {
|
|
|
|
@ -187,19 +216,41 @@
|
|
|
|
|
title: "",
|
|
|
|
|
dialog: false,
|
|
|
|
|
id: '',
|
|
|
|
|
type: 'HTTP',
|
|
|
|
|
context: '',
|
|
|
|
|
location: '',
|
|
|
|
|
name: '',
|
|
|
|
|
bz: ''
|
|
|
|
|
},
|
|
|
|
|
formRules: {
|
|
|
|
|
roleName: [
|
|
|
|
|
{required: true, message: '不能为空', trigger: 'blur'},
|
|
|
|
|
name: [
|
|
|
|
|
{required: true, message: '映射名称不能为空', trigger: 'blur'},
|
|
|
|
|
{min: 1, max: 50, message: '长度在 1 到 50 字符', trigger: 'blur'}
|
|
|
|
|
],
|
|
|
|
|
roleCode: [
|
|
|
|
|
{required: true, message: '不能为空', trigger: 'blur'},
|
|
|
|
|
{min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
|
|
|
|
|
context: [
|
|
|
|
|
{required: true, message: '映射路径不能为空', trigger: 'blur'},
|
|
|
|
|
{pattern: "^/[a-zA-Z][a-zA-Z0-9_-]*$|^/$", message: '上下文须是(/)或(/+字母+字母数字及_', trigger: 'blur'},
|
|
|
|
|
],
|
|
|
|
|
location: [
|
|
|
|
|
{required: true, message: '映射地址不能为空', trigger: 'change'},
|
|
|
|
|
{
|
|
|
|
|
validator: function (rule, value, callback) {
|
|
|
|
|
if (app.form.type == "HTTP") {
|
|
|
|
|
if (value.match("http:\/\/.*")) {
|
|
|
|
|
callback();
|
|
|
|
|
} else {
|
|
|
|
|
callback(new Error("需以http://协议开始"))
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (app.form.type == "FILE") {
|
|
|
|
|
if (value.match("^[A-Z]:\\\\.*$|^[A-Z]:/.*$|^/.*$")) {
|
|
|
|
|
callback();
|
|
|
|
|
} else {
|
|
|
|
|
callback(new Error("windows目录(C:\\)或linux目录(\\)"))
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}, trigger: 'blur'
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
services: [],
|
|
|
|
@ -207,7 +258,7 @@
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
onFind: function () {
|
|
|
|
|
ajax.portLoad().then(function (response) {
|
|
|
|
|
ajax.serviceLoad().then(function (response) {
|
|
|
|
|
if (response.errors.length > 0) {
|
|
|
|
|
nav.e(response.errors[0].message);
|
|
|
|
|
} else {
|
|
|
|
@ -228,6 +279,7 @@
|
|
|
|
|
this.form.id = '';
|
|
|
|
|
this.form.name = '';
|
|
|
|
|
this.form.context = '';
|
|
|
|
|
this.form.type = 'HTTP';
|
|
|
|
|
this.form.location = '';
|
|
|
|
|
this.form.bz = '';
|
|
|
|
|
this.form.dialog = true;
|
|
|
|
@ -239,32 +291,45 @@
|
|
|
|
|
this.form.port = arg[2].value;
|
|
|
|
|
this.form.name = arg[1].name;
|
|
|
|
|
this.form.context = arg[1].context;
|
|
|
|
|
this.form.type = arg[1].type;
|
|
|
|
|
this.form.location = arg[1].location;
|
|
|
|
|
this.form.bz = arg[1].bz;
|
|
|
|
|
this.form.dialog = true;
|
|
|
|
|
break;
|
|
|
|
|
case "save":
|
|
|
|
|
if (this.form.id) {
|
|
|
|
|
ajax.mappingUpdate(this.form).then(function (response) {
|
|
|
|
|
if (response.errors.length > 0) {
|
|
|
|
|
nav.e(response.errors[0].message);
|
|
|
|
|
} else {
|
|
|
|
|
this.onFind();
|
|
|
|
|
this.nginxReload();
|
|
|
|
|
this.form.dialog = false;
|
|
|
|
|
}
|
|
|
|
|
}.bind(this))
|
|
|
|
|
} else {
|
|
|
|
|
ajax.mappingCreate(this.form).then(function (response) {
|
|
|
|
|
if (response.errors.length > 0) {
|
|
|
|
|
nav.e(response.errors[0].message);
|
|
|
|
|
this.$refs['form'].validate(function (valid) {
|
|
|
|
|
if (valid) {
|
|
|
|
|
if (this.form.id) {
|
|
|
|
|
ajax.mappingUpdate(this.form).then(function (response) {
|
|
|
|
|
if (response.errors.length > 0) {
|
|
|
|
|
nav.e(response.errors[0].message);
|
|
|
|
|
} else {
|
|
|
|
|
this.onFind();
|
|
|
|
|
this.form.dialog = false;
|
|
|
|
|
this.configFlush();
|
|
|
|
|
if (this.run) {
|
|
|
|
|
this.nginxReload();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}.bind(this))
|
|
|
|
|
} else {
|
|
|
|
|
this.onFind();
|
|
|
|
|
this.nginxReload();
|
|
|
|
|
this.form.dialog = false;
|
|
|
|
|
ajax.mappingCreate(this.form).then(function (response) {
|
|
|
|
|
if (response.errors.length > 0) {
|
|
|
|
|
nav.e(response.errors[0].message);
|
|
|
|
|
} else {
|
|
|
|
|
this.onFind();
|
|
|
|
|
this.form.dialog = false;
|
|
|
|
|
this.configFlush();
|
|
|
|
|
if (this.run) {
|
|
|
|
|
this.nginxReload();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}.bind(this))
|
|
|
|
|
}
|
|
|
|
|
}.bind(this))
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
}.bind(this));
|
|
|
|
|
break;
|
|
|
|
|
case "delete":
|
|
|
|
|
this.$confirm('将删除该项, 是否继续?', '提示', {
|
|
|
|
@ -278,7 +343,10 @@
|
|
|
|
|
} else {
|
|
|
|
|
nav.s("删除成功");
|
|
|
|
|
this.onFind();
|
|
|
|
|
this.nginxReload();
|
|
|
|
|
this.configFlush();
|
|
|
|
|
if (this.run) {
|
|
|
|
|
this.nginxReload();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}.bind(this))
|
|
|
|
|
}.bind(this)).catch(function (action) {
|
|
|
|
@ -298,7 +366,8 @@
|
|
|
|
|
|
|
|
|
|
this.$notify.info({
|
|
|
|
|
title: '提示',
|
|
|
|
|
message: "Nginx 运行状态发生变化:"
|
|
|
|
|
message: "Nginx 运行状态发生变化。",
|
|
|
|
|
duration: 5000
|
|
|
|
|
});
|
|
|
|
|
this.run = msg.object.run;
|
|
|
|
|
}
|
|
|
|
@ -326,13 +395,19 @@
|
|
|
|
|
}
|
|
|
|
|
}.bind(this))
|
|
|
|
|
},
|
|
|
|
|
configFlush: function () {
|
|
|
|
|
ajax.configFlush();
|
|
|
|
|
},
|
|
|
|
|
onRefresh: function () {
|
|
|
|
|
this.configFlush();
|
|
|
|
|
this.onFind();
|
|
|
|
|
},
|
|
|
|
|
nginxReload: function () {
|
|
|
|
|
ajax.nginxReload().then(function (response) {
|
|
|
|
|
if (response.errors.length > 0) {
|
|
|
|
|
nav.e(response.errors[0].message);
|
|
|
|
|
} else {
|
|
|
|
|
this.onFind();
|
|
|
|
|
this.form.dialog = false;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}.bind(this))
|
|
|
|
|
}
|
|
|
|
|