Login
\n\n \n© Kong Admin UI 2019 Kong中文文档
5 |
5 | For a guide and recipes on how to configure / customize this project,
6 | check out the
7 | vue-cli documentation.
8 |
Are you sure you would like to delete<
{id}?
', 29 | deleted:'{type} deleted', 30 | edit:'Edit', 31 | add:'Add', 32 | save:'Save', 33 | addTarget:'Add Target', 34 | action:'Action', 35 | split_by_comma:'Split by comma' 36 | 37 | }, 38 | breadcrumb:{ 39 | home:'Home', 40 | info:'Kong info', 41 | service_list:'Service List', 42 | service_detail: 'Service Detail', 43 | route_list:'Route List', 44 | upstream_list:'Upstream List', 45 | consumer_list:'Consumer List', 46 | plugin_list:'Plugin List', 47 | addPlugin:'Add Plugin', 48 | addService: 'Add Service', 49 | addRoute: 'Add Route', 50 | certificate_list: 'Certificate List', 51 | add_certificate: 'Add Certificate', 52 | }, 53 | basicInfo:{ 54 | configuration:'Configuration', 55 | status:'Status' 56 | }, 57 | service: { 58 | 59 | serviceInfo:'Service Info', 60 | routeInfo:'Route Info', 61 | service_upstream:'Service\'s Upstream', 62 | upstreamNotExisted:'Upstream `{host}` is not existed,if it\'s not a external host,You must add a Upstream named `{host}`', 63 | fieldServiceName:'The Service name', 64 | fieldRetries:'The number of retries to execute upon failure to proxy.', 65 | fieldProtocol:'The protocol used to communicate with the upstream.', 66 | fieldHost:'The host of the upstream server.', 67 | fieldPort:'The upstream server port.', 68 | fieldPath:'The path to be used in requests to the upstream server.', 69 | fieldConnectTimeout:'The timeout in milliseconds for establishing a connection to the upstream server. ', 70 | fieldWriteTimeout:'The timeout in milliseconds between two successive write operations for transmitting a request to the upstream server.', 71 | fieldReadTimeout:'The timeout in milliseconds between two successive read operations for transmitting a request to the upstream server. ', 72 | fieldUrl:'Shorthand attribute to set protocol, host, port and path at once. This attribute is write-only (the Admin API never “returns” the url). ', 73 | }, 74 | target:{ 75 | addTarget:'Add Target', 76 | targetHint:'enter target,default port is 8000', 77 | targetNotice:'Please fill target', 78 | weightNotice:'Please fill weight', 79 | deleteTarget:'Delete Target' 80 | }, 81 | plugin:{ 82 | }, 83 | upstream:{ 84 | health:'health', 85 | healthCheck:'Health check', 86 | unhealthy:'unhealthy', 87 | healthy:'healthy', 88 | healthCheckOff:'Health check off' 89 | }, 90 | route: { 91 | fieldName: 'The name of the Route.', 92 | fieldProtocols: 'A list of the protocols this Route should allow. When set to ["https"], HTTP requests are answered with a request to upgrade to HTTPS.', 93 | fieldMethods: 'A list of HTTP methods that match this Route. When using http or https protocols, at least one of hosts, paths, or methods must be set.', 94 | fieldHosts: 'A list of domain names that match this Route. When using http or https protocols, at least one of hosts, paths, or methods must be set.', 95 | fieldPaths: 'A list of paths that match this Route. When using http or https protocols, at least one of hosts, paths, or methods must be set.', 96 | fieldHeaders: 'One or more lists of values indexed by header name that will cause this Route to match if present in the request. The Host header cannot be used with this attribute: hosts should be specified using the hosts attribute.', 97 | fieldRegexPriority: 'A number used to choose which route resolves a given request when several routes match it using regexes simultaneously. When two routes match the path and have the same regex_priority, the older one (lowest created_at) is used. Note that the priority for non-regex routes is different (longer non-regex routes are matched before shorter ones).', 98 | fieldHttpsRedirectStatusCode: 'The status code Kong responds with when all properties of a Route match except the protocol i.e. if the protocol of the request is HTTP instead of HTTPS. Location header is injected by Kong if the field is set to 301, 302, 307 or 308. Defaults to 426.', 99 | fieldStripPath: 'When matching a Route via one of the paths, strip the matching prefix from the upstream request URL.', 100 | fieldPreserveHost: 'When matching a Route via one of the hosts domain names, use the request Host header in the upstream request headers. If set to false, the upstream Host header will be that of the Service’s host.', 101 | fieldSnis: 'A list of SNIs that match this Route when using stream routing. When using tcp or tls protocols, at least one of snis, sources, or destinations must be set.', 102 | fieldSources: 'A list of IP sources of incoming connections that match this Route when using stream routing. Each entry is an object with fields “ip” (optionally in CIDR range notation) and/or “port”. When using tcp or tls protocols, at least one of snis, sources, or destinations must be set.', 103 | fieldDestinations: 'A list of IP destinations of incoming connections that match this Route when using stream routing. Each entry is an object with fields “ip” (optionally in CIDR range notation) and/or “port”. When using tcp or tls protocols, at least one of snis, sources, or destinations must be set.', 104 | }, 105 | certificate: { 106 | cert: 'PEM-encoded public certificate of the SSL key pair.', 107 | key:'PEM-encoded private key of the SSL key pair.', 108 | tags:'An optional set of strings associated with the Certificate, for grouping and filtering.', 109 | snis:'An array of zero or more hostnames to associate with this certificate as SNIs. This is a sugar parameter that will, under the hood, create an SNI object and associate it with this certificate for your convenience.' 110 | } 111 | } 112 | -------------------------------------------------------------------------------- /src/lang/zh.js: -------------------------------------------------------------------------------- 1 | export default { 2 | app: { 3 | name: 'Kong管理控制台' 4 | }, 5 | config: { 6 | button: { 7 | enter: '进入', 8 | clear: '清除地址', 9 | notice1: '我们不会连接除了您的Kong服务器以外的其他服务器，您的配置保存在浏览器的localStorage里.', 10 | notice2: '所有发送给Kong管理接口的请求都是通过你的浏览器发出的，所以确保当前网络可以无需任何验证直接访问Kong管理接口。这个应用的目的是帮助您图形化操作kong,所以，所有Kong里的名词字段都不会翻译，请自行看文档理解。', 11 | }, 12 | error: { 13 | urlEmpty: '请输入Kong管理接口地址', 14 | urlError: 'URL错误，必须是http:// 或 https://开头', 15 | urlEndWithSlash: 'URL错误,不能以/结尾 ', 16 | apiError: '无法获取Kong的版本号，请检查您输入的接口地址', 17 | connectFail: '连接管理接口失败，请检测您输入的地址，或者您的网络没有权限访问管理接口', 18 | urlInvalid: 'Kong管理接口地址错误', 19 | versionNotSupport: '不支持 {version} 版本,我们只支持 0.14.0或更高版本', 20 | header_format:'header 格式错误，必须是json', 21 | connect_fail:'连接到Kong admin 接口失败，请检查您的输入，确保当前设备有权限访问接口' 22 | 23 | } 24 | }, 25 | common: { 26 | view: '查看', 27 | delete: '删除', 28 | deleteMessage: '是否删除
{id}?
', 29 | deleted:'{type} 已删除', 30 | edit:'编辑', 31 | add:'添加', 32 | save:'保存', 33 | addTarget:'添加Target', 34 | action:'操作', 35 | split_by_comma:'逗号隔开' 36 | }, 37 | breadcrumb: { 38 | home: '首页', 39 | info: '基本信息', 40 | service_list: 'Service列表', 41 | service_detail: 'Service详情', 42 | route_list: 'Route列表', 43 | upstream_list: 'Upstream列表', 44 | consumer_list: 'Consumer列表', 45 | plugin_list: 'Plugin列表', 46 | addPlugin:'添加 Plugin', 47 | addService: '添加Service', 48 | addRoute: '添加Route', 49 | certificate_list: '证书列表', 50 | add_certificate: '添加证书', 51 | }, 52 | basicInfo: { 53 | configuration: '配置', 54 | status: '状态' 55 | }, 56 | service: { 57 | serviceInfo:'Service信息', 58 | routeInfo:'Route信息', 59 | service_upstream:'Service的Upstream', 60 | upstreamNotExisted:'名为`{host}`的上游服务器不存在，如果不是外部host,您需要添加一个叫{host}的上游服务器', 61 | fieldServiceName:'Service名称', 62 | fieldRetries:'失败时重试次数.', 63 | fieldProtocol:'与上游服务器通讯使用的协议', 64 | fieldHost:'上游服务器的主机名(外部填域名).', 65 | fieldPort:'上游服务器端口.', 66 | fieldPath:'请求上游服务器的路径.', 67 | fieldConnectTimeout:'连接上游服务器的超时时间，单位：毫秒', 68 | fieldWriteTimeout:'向上游服务器发送写操作的超时时间，单位：毫秒.', 69 | fieldReadTimeout:'从上游服务器读的超时时间，单位：毫秒', 70 | fieldUrl:'一次同时设置protocol, host, port 和 path. 该属性只读', 71 | 72 | 73 | }, 74 | target:{ 75 | addTarget:'添加Target', 76 | targetHint:'输入target,默认端口是8000', 77 | targetNotice:'请输入target', 78 | weightNotice:'请输入weight', 79 | deleteTarget:'删除Target' 80 | }, 81 | plugin:{ 82 | }, 83 | upstream:{ 84 | health:'健康', 85 | healthCheck:'健康检测', 86 | unhealthy:'不健康', 87 | healthy:'健康', 88 | healthCheckOff:'健康检测未开启' 89 | }, 90 | route: { 91 | fieldName: 'Route名称', 92 | fieldProtocols: '该Route允许的协议.', 93 | fieldMethods: '该Route允许的HTTP 方法列表.使用http或https 协议时, hosts, paths, 或者 methods至少设置一个', 94 | fieldHosts: '该Route允许的域名列表。使用http或https 协议时, hosts, paths, 或者 methods至少设置一个', 95 | fieldPaths: '该Route允许的路径列表。 使用http或https 协议时, hosts, paths, 或者 methods至少设置一个.', 96 | fieldHeaders: '该Route允许的请求头。Host 请求头不能通过此属性设置，请使用hosts属性', 97 | fieldRegexPriority: '权重。当多个Route同时使用正则表达式匹配时，用于选择哪个Route解析给定请求。当两条路path配路径并具有相同的regex_priority时，将使用最早创建的path。请注意，非正则表达式路由的优先级不同（较长的非正则表达式Route在较短的Route之前匹配）', 98 | fieldHttpsRedirectStatusCode: '重定向到https的状态码。当除了协议以外的属性全都匹配时(用http而不是https协议发起请求)，如果该字段值是301、302、307或308，则Kong会添加Location Header,执行重定向到https。默认为426。注: 要使重定向生效，需要关闭http协议访问。', 99 | fieldStripPath: '当通过path匹配Route，向上游服务器请求时，删除匹配前缀(不带path).', 100 | fieldPreserveHost: '当通过域名配置，向上游服务请求时，header是否使用该域名，若选否，使用Service的host', 101 | fieldSnis: 'A list of SNIs that match this Route when using stream routing. When using tcp or tls protocols, at least one of snis, sources, or destinations must be set.', 102 | fieldSources: 'A list of IP sources of incoming connections that match this Route when using stream routing. Each entry is an object with fields “ip” (optionally in CIDR range notation) and/or “port”. When using tcp or tls protocols, at least one of snis, sources, or destinations must be set.', 103 | fieldDestinations: 'A list of IP destinations of incoming connections that match this Route when using stream routing. Each entry is an object with fields “ip” (optionally in CIDR range notation) and/or “port”. When using tcp or tls protocols, at least one of snis, sources, or destinations must be set.', 104 | }, 105 | certificate: { 106 | cert: 'PEM编码的SSL证书公钥.一般以.crt为后缀，复制里面的内容。', 107 | key:'PEM编码的SSL证书私钥.一般以.key为后缀，复制里面的内容。', 108 | tags:'用于分组和过滤，多个逗号隔开', 109 | snis:'证书的域名，多个逗号隔开' 110 | } 111 | } 112 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import './plugins/iview.js' 4 | import router from './router' 5 | import request from './request' 6 | import iView from 'iview'; 7 | import VueI18n from 'vue-i18n'; 8 | import iViewEn from 'iview/dist/locale/en-US'; 9 | import iViewZh from 'iview/dist/locale/zh-CN'; 10 | import {default as en} from './lang/en.js' 11 | import {default as zh} from './lang/zh.js' 12 | 13 | // Vue.use(VueI18n); 14 | // Vue.use(iView); 15 | // 16 | // Vue.config.lang = 'en-US'; 17 | // Vue.locale('en-US', en); 18 | // Vue.locale('zh-CN', zh); 19 | // 20 | // Vue.config.productionTip = true; 21 | // Vue.use(request); 22 | // 23 | // new Vue({ 24 | // render: h => h(App), 25 | // router:router 26 | // }).$mount('#app'); 27 | 28 | Vue.use(request); 29 | 30 | Vue.use(VueI18n); 31 | Vue.use(iView, { 32 | i18n: function(path, options) { 33 | let value = i18n.t(path, options) 34 | if (value !== null && value !== undefined) { 35 | return value 36 | } 37 | return '' 38 | } 39 | }); 40 | Vue.locale = () => {}; 41 | 42 | const messages = { 43 | en: Object.assign(en, iViewEn), 44 | zh: Object.assign(zh, iViewZh) 45 | }; 46 | 47 | // Create VueI18n instance with options 48 | const i18n = new VueI18n({ 49 | locale: localStorage.language==null?'en':localStorage.language, // set locale 50 | messages // set locale messages 51 | }); 52 | iView.i18n((key, value) => i18n.t(key, value)) 53 | new Vue({ 54 | i18n, 55 | render: h => h(App), 56 | router:router 57 | }).$mount('#app'); 58 | -------------------------------------------------------------------------------- /src/plugins/iview.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import iView from 'iview' 3 | 4 | Vue.use(iView) 5 | 6 | import 'iview/dist/styles/iview.css' 7 | -------------------------------------------------------------------------------- /src/request.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | export default { 3 | install: function(Vue,) { 4 | Vue.prototype._post= function (path,data,callback) { 5 | let _this=this; 6 | let checkResult = checkAddress(_this); 7 | if(!checkResult) { 8 | return; 9 | } 10 | let address=localStorage.address; 11 | 12 | axios 13 | .post(address + path, data,getConfig()) 14 | .then(response => { 15 | callback(response); 16 | }) 17 | .catch(function (error) { 18 | errorHandler(error,_this); 19 | }); 20 | }; 21 | Vue.prototype._get= function (path,callback,errorCallback) { 22 | let _this=this; 23 | let checkResult = checkAddress(_this); 24 | if(!checkResult) { 25 | return; 26 | } 27 | let address=localStorage.address; 28 | axios 29 | .get(address + path,getConfig()) 30 | .then(response => { 31 | callback(response); 32 | }) 33 | .catch(function (error) { 34 | if(errorCallback!=null) { 35 | errorCallback(error) 36 | }else{ 37 | errorHandler(error,_this); 38 | } 39 | }); 40 | }; 41 | Vue.prototype._delete = function (path,callback,errorCallback) { 42 | let _this=this; 43 | let checkResult = checkAddress(_this); 44 | if(!checkResult) { 45 | return; 46 | } 47 | let address=localStorage.address; 48 | axios.delete(address + path,getConfig()) 49 | .then(response => { 50 | callback(response); 51 | }) 52 | .catch(function (error) { 53 | if(errorCallback!=null) { 54 | errorCallback(error) 55 | }else{ 56 | errorHandler(error,_this); 57 | } 58 | }); 59 | 60 | }; 61 | Vue.prototype._patch = function (path, data, callback) { 62 | let _this=this; 63 | let checkResult = checkAddress(_this); 64 | if(!checkResult) { 65 | return; 66 | } 67 | let address=localStorage.address; 68 | axios 69 | .patch(address + path, data,getConfig()) 70 | .then(response => { 71 | callback(response); 72 | }) 73 | .catch(function (error) { 74 | errorHandler(error,_this); 75 | }); 76 | }; 77 | function checkAddress(_this) { 78 | let address=localStorage.address; 79 | if(address==null) { 80 | _this.$router.push('/config'); 81 | return false; 82 | } 83 | return true; 84 | } 85 | function errorHandler(error,_this) { 86 | if(error.response&&error.response.status!==404) { 87 | _this.$Message.error({content: error.response.data.message, duration: 5}); 88 | }else{ 89 | console.log(error); 90 | _this.$Message.error({content: 'Failed to connect with your kong admin api,please check the address you input,or your computer has no permission to visit the admin api', duration: 10}); 91 | _this.$router.push('/config'); 92 | } 93 | } 94 | 95 | function getConfig() { 96 | let config={}; 97 | if(localStorage.headers==='null') { 98 | localStorage.removeItem('headers'); 99 | return config; 100 | } 101 | if(localStorage.headers) { 102 | try{ 103 | config.headers=JSON.parse(localStorage.headers); 104 | }catch (e) { 105 | localStorage.removeItem('headers'); 106 | } 107 | 108 | } 109 | return config; 110 | } 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /src/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | 4 | Vue.use(Router) 5 | 6 | export default new Router({ 7 | routes: [ 8 | { 9 | path: '/login', 10 | name: 'login', 11 | component: () => import('./views/Login'), 12 | }, 13 | { 14 | path: '/config', 15 | name: 'config', 16 | component: () => import('./views/Config.vue'), 17 | }, 18 | { 19 | path: '/', 20 | component: () => import('./views/Index'), 21 | children: [ 22 | 23 | { 24 | path:'services', 25 | component: () => import('./views/services/ServiceList.vue'), 26 | }, 27 | { 28 | path:'services/add', 29 | component: () => import('./views/services/AddService'), 30 | }, 31 | { 32 | path:'services/edit/:id', 33 | component: () => import('./views/services/AddService'), 34 | 35 | }, 36 | { 37 | path:'services/:id', 38 | component: () => import('./views/services/ServiceDetail'), 39 | 40 | }, 41 | { 42 | path:'routes', 43 | component: () => import('./views/routes/RouteList'), 44 | 45 | }, 46 | { 47 | path:'routes/add', 48 | component: () => import('./views/routes/AddRoute'), 49 | 50 | }, 51 | { 52 | path:'routes/edit/:id', 53 | component: () => import('./views/routes/AddRoute'), 54 | 55 | }, 56 | { 57 | path:'routes/add/:serviceId', 58 | component: () => import('./views/routes/AddRoute'), 59 | 60 | }, 61 | { 62 | path:'upstreams', 63 | component: () => import('./views/upstreams/UpstreamList'), 64 | 65 | }, 66 | { 67 | path:'upstreams/add', 68 | component: () => import('./views/upstreams/AddUpstream'), 69 | 70 | }, 71 | { 72 | path:'upstreams/edit/:id', 73 | component: () => import('./views/upstreams/AddUpstream'), 74 | 75 | }, 76 | { 77 | path:'upstreams/add/:name', 78 | component: () => import('./views/upstreams/AddUpstream'), 79 | 80 | }, 81 | { 82 | path:'consumers', 83 | component: () => import('./views/consumers/ConsumerList'), 84 | }, 85 | { 86 | path:'consumers/add', 87 | component: () => import('./views/consumers/AddConsumer'), 88 | }, 89 | { 90 | path:'consumers/edit/:id', 91 | component: () => import('./views/consumers/AddConsumer'), 92 | }, 93 | { 94 | path:'plugins', 95 | component: () => import('./views/plugins/PluginList'), 96 | 97 | }, 98 | { 99 | path:'plugins/add', 100 | component: () => import('./views/plugins/AddPlugin'), 101 | }, 102 | { 103 | path:'plugins/add/service/:serviceId', 104 | component: () => import('./views/plugins/AddPlugin'), 105 | }, 106 | { 107 | path:'plugins/add/consumer/:consumerId', 108 | component: () => import('./views/plugins/AddPlugin'), 109 | }, 110 | { 111 | path:'plugins/edit/:pluginId', 112 | component: () => import('./views/plugins/AddPlugin'), 113 | }, 114 | { 115 | path:'certificates', 116 | component: () => import('./views/certificates/CertificateList'), 117 | 118 | }, 119 | { 120 | path:'certificates/add', 121 | component: () => import('./views/certificates/AddCertificate'), 122 | }, 123 | { 124 | path:'certificates/edit/:certificateId', 125 | component: () => import('./views/certificates/AddCertificate'), 126 | }, 127 | { 128 | path:'', 129 | component: () => import('./views/BasicInfo'), 130 | }, 131 | 132 | ] 133 | } 134 | ] 135 | }) 136 | 137 | -------------------------------------------------------------------------------- /src/views/BasicInfo.vue: -------------------------------------------------------------------------------- 1 | 2 |{{$t('config.button.notice1')}}
22 |{{$t('config.button.notice2')}}
23 | 24 |
28 | {{language}}
29 | Login
7 | 8 | 23 |