DomainEdit.vue 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. <template>
  2. <a-row>
  3. <a-col :md="12" :sm="24">
  4. <a-card :title="name ? '编辑站点:' + name : '添加站点'">
  5. <std-data-entry :data-list="columns" v-model="config" @change_support_ssl="change_support_ssl"/>
  6. </a-card>
  7. </a-col>
  8. <a-col :md="12" :sm="24">
  9. <a-card title="配置文件实时编辑">
  10. <a-textarea v-model="configText" :rows="36"/>
  11. </a-card>
  12. </a-col>
  13. <footer-tool-bar>
  14. <a-button type="primary" @click="save">保存</a-button>
  15. </footer-tool-bar>
  16. </a-row>
  17. </template>
  18. <script>
  19. import StdDataEntry from "@/components/StdDataEntry/StdDataEntry"
  20. import FooterToolBar from "@/components/FooterToolbar/FooterToolBar"
  21. const columns = [{
  22. title: "配置文件名称",
  23. dataIndex: "name",
  24. edit: {
  25. type: "input"
  26. }
  27. }, {
  28. title: "网站域名 (server_name)",
  29. dataIndex: "server_name",
  30. edit: {
  31. type: "input"
  32. }
  33. }, {
  34. title: "http 监听端口",
  35. dataIndex: "http_listen_port",
  36. edit: {
  37. type: "number",
  38. min: 80
  39. }
  40. }, {
  41. title: "支持 SSL",
  42. dataIndex: "support_ssl",
  43. edit: {
  44. type: "switch",
  45. event: "change_support_ssl"
  46. }
  47. }, {
  48. title: "https 监听端口",
  49. dataIndex: "https_listen_port",
  50. edit: {
  51. type: "number",
  52. min: 443
  53. }
  54. }, {
  55. title: "SSL 证书路径 (ssl_certificate)",
  56. dataIndex: "ssl_certificate",
  57. edit: {
  58. type: "input"
  59. }
  60. }, {
  61. title: "SSL 证书私钥路径 (ssl_certificate_key)",
  62. dataIndex: "ssl_certificate_key",
  63. edit: {
  64. type: "input"
  65. }
  66. }, {
  67. title: "网站根目录 (root)",
  68. dataIndex: "root",
  69. edit: {
  70. type: "input"
  71. }
  72. }, {
  73. title: "网站首页 (index)",
  74. dataIndex: "index",
  75. edit: {
  76. type: "input"
  77. }
  78. }]
  79. export default {
  80. name: "DomainEdit",
  81. components: {FooterToolBar, StdDataEntry},
  82. data() {
  83. return {
  84. name: this.$route.params.name,
  85. columns,
  86. config: {
  87. http_listen_port: 80,
  88. https_listen_port: 443,
  89. server_name: "",
  90. index: "",
  91. root: "",
  92. ssl_certificate: "",
  93. ssl_certificate_key: "",
  94. support_ssl: false
  95. },
  96. configText: ""
  97. }
  98. },
  99. watch: {
  100. $route() {
  101. this.config = {}
  102. this.configText = ""
  103. },
  104. config: {
  105. handler() {
  106. this.unparse()
  107. },
  108. deep: true
  109. }
  110. },
  111. created() {
  112. if (this.name) {
  113. this.$api.domain.get(this.name).then(r => {
  114. this.configText = r.config
  115. this.parse(r)
  116. }).catch(r => {
  117. console.log(r)
  118. this.$message.error("服务器错误")
  119. })
  120. } else {
  121. this.config = {
  122. http_listen_port: 80,
  123. https_listen_port: 443,
  124. server_name: "",
  125. index: "",
  126. root: "",
  127. ssl_certificate: "",
  128. ssl_certificate_key: "",
  129. support_ssl: false
  130. }
  131. this.get_template()
  132. }
  133. },
  134. methods: {
  135. parse(r) {
  136. const text = r.config
  137. const reg = {
  138. http_listen_port: /listen[\s](.*);/i,
  139. https_listen_port: /listen[\s](.*) ssl/i,
  140. server_name: /server_name[\s](.*);/i,
  141. index: /index[\s](.*);/i,
  142. root: /root[\s](.*);/i,
  143. ssl_certificate: /ssl_certificate[\s](.*);/i,
  144. ssl_certificate_key: /ssl_certificate_key[\s](.*);/i
  145. }
  146. this.config['name'] = r.name
  147. for (let r in reg) {
  148. const match = text.match(reg[r])
  149. // console.log(r, match)
  150. if (match !== null) {
  151. if (match[1] !== undefined) {
  152. this.config[r] = match[1]
  153. } else {
  154. this.config[r] = match[0]
  155. }
  156. }
  157. }
  158. if (this.config.https_listen_port) {
  159. this.config.support_ssl = true
  160. }
  161. },
  162. unparse() {
  163. let text = this.configText
  164. // http_listen_port: /listen (.*);/i,
  165. // https_listen_port: /listen (.*) ssl/i,
  166. const reg = {
  167. server_name: /server_name[\s](.*);/ig,
  168. index: /index[\s](.*);/i,
  169. root: /root[\s](.*);/i,
  170. ssl_certificate: /ssl_certificate[\s](.*);/i,
  171. ssl_certificate_key: /ssl_certificate_key[\s](.*);/i
  172. }
  173. text = text.replace(/listen[\s](.*);/i, "listen\t"
  174. + this.config['http_listen_port'] + ';')
  175. text = text.replace(/listen[\s](.*) ssl/i, "listen\t"
  176. + this.config['https_listen_port'] + ' ssl')
  177. text = text.replace(/listen(.*):(.*);/i, "listen\t[::]:"
  178. + this.config['http_listen_port'] + ';')
  179. text = text.replace(/listen(.*):(.*) ssl/i, "listen\t[::]:"
  180. + this.config['https_listen_port'] + ' ssl')
  181. for (let k in reg) {
  182. text = text.replace(new RegExp(reg[k]), k + "\t" +
  183. (this.config[k] !== undefined ? this.config[k] : " ") + ";")
  184. }
  185. this.configText = text
  186. },
  187. async get_template() {
  188. if (this.config.support_ssl) {
  189. await this.$api.domain.get_template('https-conf').then(r => {
  190. this.configText = r.template
  191. })
  192. } else {
  193. await this.$api.domain.get_template('http-conf').then(r => {
  194. this.configText = r.template
  195. })
  196. }
  197. await this.unparse()
  198. },
  199. change_support_ssl() {
  200. const that = this
  201. this.$confirm({
  202. title: '您已修改 SSL 支持状态,是否需要更换配置文件模板?',
  203. content: '更换配置文件模板将会丢失自定义配置',
  204. onOk() {
  205. that.get_template()
  206. },
  207. onCancel() {
  208. },
  209. })
  210. },
  211. save() {
  212. this.$api.domain.save(this.name ? this.name : this.config.name, {content: this.configText}).then(r => {
  213. this.parse(r)
  214. this.$message.success("保存成功")
  215. }).catch(r => {
  216. console.log(r)
  217. this.$message.error("保存错误")
  218. })
  219. }
  220. }
  221. }
  222. </script>
  223. <style lang="less" scoped>
  224. .ant-card {
  225. margin: 10px;
  226. @media (max-width: 512px) {
  227. margin: 10px 0;
  228. }
  229. }
  230. </style>