123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237 |
- <template>
- <a-row>
- <a-col :md="12" :sm="24">
- <a-card :title="name ? '编辑站点:' + name : '添加站点'">
- <std-data-entry :data-list="columns" v-model="config" @change_support_ssl="change_support_ssl"/>
- </a-card>
- </a-col>
- <a-col :md="12" :sm="24">
- <a-card title="配置文件实时编辑">
- <a-textarea v-model="configText" :rows="36"/>
- </a-card>
- </a-col>
- <footer-tool-bar>
- <a-button type="primary" @click="save">保存</a-button>
- </footer-tool-bar>
- </a-row>
- </template>
- <script>
- import StdDataEntry from "@/components/StdDataEntry/StdDataEntry"
- import FooterToolBar from "@/components/FooterToolbar/FooterToolBar"
- const columns = [{
- title: "配置文件名称",
- dataIndex: "name",
- edit: {
- type: "input"
- }
- }, {
- title: "网站域名 (server_name)",
- dataIndex: "server_name",
- edit: {
- type: "input"
- }
- }, {
- title: "http 监听端口",
- dataIndex: "http_listen_port",
- edit: {
- type: "number",
- min: 80
- }
- }, {
- title: "支持 SSL",
- dataIndex: "support_ssl",
- edit: {
- type: "switch",
- event: "change_support_ssl"
- }
- }, {
- title: "https 监听端口",
- dataIndex: "https_listen_port",
- edit: {
- type: "number",
- min: 443
- }
- }, {
- title: "SSL 证书路径 (ssl_certificate)",
- dataIndex: "ssl_certificate",
- edit: {
- type: "input"
- }
- }, {
- title: "SSL 证书私钥路径 (ssl_certificate_key)",
- dataIndex: "ssl_certificate_key",
- edit: {
- type: "input"
- }
- }, {
- title: "网站根目录 (root)",
- dataIndex: "root",
- edit: {
- type: "input"
- }
- }, {
- title: "网站首页 (index)",
- dataIndex: "index",
- edit: {
- type: "input"
- }
- }]
- export default {
- name: "DomainEdit",
- components: {FooterToolBar, StdDataEntry},
- data() {
- return {
- name: this.$route.params.name,
- columns,
- config: {
- http_listen_port: 80,
- https_listen_port: 443,
- server_name: "",
- index: "",
- root: "",
- ssl_certificate: "",
- ssl_certificate_key: "",
- support_ssl: false
- },
- configText: ""
- }
- },
- watch: {
- $route() {
- this.config = {}
- this.configText = ""
- },
- config: {
- handler() {
- this.unparse()
- },
- deep: true
- }
- },
- created() {
- if (this.name) {
- this.$api.domain.get(this.name).then(r => {
- this.configText = r.config
- this.parse(r)
- }).catch(r => {
- console.log(r)
- this.$message.error("服务器错误")
- })
- } else {
- this.config = {
- http_listen_port: 80,
- https_listen_port: 443,
- server_name: "",
- index: "",
- root: "",
- ssl_certificate: "",
- ssl_certificate_key: "",
- support_ssl: false
- }
- this.get_template()
- }
- },
- methods: {
- parse(r) {
- const text = r.config
- const reg = {
- http_listen_port: /listen[\s](.*);/i,
- https_listen_port: /listen[\s](.*) ssl/i,
- server_name: /server_name[\s](.*);/i,
- index: /index[\s](.*);/i,
- root: /root[\s](.*);/i,
- ssl_certificate: /ssl_certificate[\s](.*);/i,
- ssl_certificate_key: /ssl_certificate_key[\s](.*);/i
- }
- this.config['name'] = r.name
- for (let r in reg) {
- const match = text.match(reg[r])
- // console.log(r, match)
- if (match !== null) {
- if (match[1] !== undefined) {
- this.config[r] = match[1]
- } else {
- this.config[r] = match[0]
- }
- }
- }
- if (this.config.https_listen_port) {
- this.config.support_ssl = true
- }
- },
- unparse() {
- let text = this.configText
- // http_listen_port: /listen (.*);/i,
- // https_listen_port: /listen (.*) ssl/i,
- const reg = {
- server_name: /server_name[\s](.*);/ig,
- index: /index[\s](.*);/i,
- root: /root[\s](.*);/i,
- ssl_certificate: /ssl_certificate[\s](.*);/i,
- ssl_certificate_key: /ssl_certificate_key[\s](.*);/i
- }
- text = text.replace(/listen[\s](.*);/i, "listen\t"
- + this.config['http_listen_port'] + ';')
- text = text.replace(/listen[\s](.*) ssl/i, "listen\t"
- + this.config['https_listen_port'] + ' ssl')
- text = text.replace(/listen(.*):(.*);/i, "listen\t[::]:"
- + this.config['http_listen_port'] + ';')
- text = text.replace(/listen(.*):(.*) ssl/i, "listen\t[::]:"
- + this.config['https_listen_port'] + ' ssl')
- for (let k in reg) {
- text = text.replace(new RegExp(reg[k]), k + "\t" +
- (this.config[k] !== undefined ? this.config[k] : " ") + ";")
- }
- this.configText = text
- },
- async get_template() {
- if (this.config.support_ssl) {
- await this.$api.domain.get_template('https-conf').then(r => {
- this.configText = r.template
- })
- } else {
- await this.$api.domain.get_template('http-conf').then(r => {
- this.configText = r.template
- })
- }
- await this.unparse()
- },
- change_support_ssl() {
- const that = this
- this.$confirm({
- title: '您已修改 SSL 支持状态,是否需要更换配置文件模板?',
- content: '更换配置文件模板将会丢失自定义配置',
- onOk() {
- that.get_template()
- },
- onCancel() {
- },
- })
- },
- save() {
- this.$api.domain.save(this.name ? this.name : this.config.name, {content: this.configText}).then(r => {
- this.parse(r)
- this.$message.success("保存成功")
- }).catch(r => {
- console.log(r)
- this.$message.error("保存错误")
- })
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .ant-card {
- margin: 10px;
- @media (max-width: 512px) {
- margin: 10px 0;
- }
- }
- </style>
|