fagongzi / gateway-ui-vue

gateway ui by element ui

Gateway UI By Element UI

Gateway 可视化管理界面,thanks to Element UI

3.0.0 版本

配合 gateway 3.x 版本，同步更新了 gateway-ui-vue 的3.x 版本 3.x

install

# install
npm install

# serve with hot reload at localhost:3000
npm run dev

# build for production with minification
npm run build

见package.json 文件的 script操作

"scripts": {
    "dev": "vue-cli-service serve",
    "preview": "node build/preview.js",
    "build": "vue-cli-service build"
  },

开箱即用

Gateway 后端服务 export 9093 端口之后，指定一下ui的npm run build后的dist目录就可以了

浏览器直接访问 localhost:9093/ui/index.html

基本使用方法

Gateway 后端核心服务请查阅 fagongzi/gateway

dev 环境修改配置

见 vue.config.js 文件的 devServer 配置

{
        host: 'localhost',
        port: 3000, // 启动端口
        proxy: {
            [process.env.VUE_APP_BASE_API]: {
                target: 'http://localhost:9093', // 转发地址
                changeOrigin: true,
                pathRewrite: {
                    [process.env.VUE_APP_BASE_API]: ''
                }
            }
        }
    }

见 .env.development文件

#
ENV = 'development'
# base api
VUE_APP_BASE_API = '/Web'
# base URL
VUE_APP_BASE_URL = ''

VUE_CLI_BABEL_TRANSPILE_MODULES = true

VUE_APP_BASE_URL 表示 访问gateway http 服务的地址。 VUE_APP_BASE_API 表示请求url 地址的根的path，在dev 环境下面 主要是用于为了代理请求，防止浏览器访问的时候，报跨域错误。

preview 环境配置

preview 指的是在生成dist 文件夹之后，在部署在服务器端之前，通过启本地服务，配置 proxy 服务器端地址。

直接访问服务器端地址会引发跨域报错

在 build 文件下面的 preview.js

var config = {
  target: 'http://localhost:9093',
  port: 3001,
  host: '0.0.0.0',
  dir: '../dist',
  prefix: '/v1',
  debug: true
};

比如 preview 启动之后，在network 中可以看到 请求的 地址是http://localhost:3001/v1/clusters 由于配置了 前缀是 /v1 开头的 url 是会被转发到 http://localhost:9093上面去的。 所以最终的请求地址是http://localhost:9093/v1/clusters

origin /v1/clusters =====> to href http://localhost:9093/v1/clusters

从而起到了 转发的作用。

prod 环境配置

见.env.production

#
ENV = 'production'
# base api
VUE_APP_BASE_API = ''
# base url
VUE_APP_BASE_URL = ''

部署到 nginx 静态服务器上面

npm run build

生成了 dist 文件夹，直接通过 nginx 配置一个 静态服务。

在通过浏览器访问的时候，会报跨域报错，自行百度下，如何关闭chrome 浏览器的跨域报错问题。

nginx转发服务器，gateway 服务器，gateway-ui 服务器

当遇到 gateway 部署在单独一台服务器上面，例如1.0.0.1 ，gateway-ui 部署在另外一台服务器上面。

ps: 这两个服务器只能通过nginx 转发服务器才能访问的到。

步骤一

情况一：直接部署gateway-ui的production环境

修改 .env.production 文件

#
ENV = 'production'
# base api
VUE_APP_BASE_API = '换成nginx转发服务器转发到 gateway 服务器的路径，例如 /Web'
# base url
VUE_APP_BASE_URL = '换成nginx转发服务器的域名'

需要在 gateway-ui 所在的服务器启动一个 http静态服务器。将 npm run build 生成的dist文件夹部署在上面。

情况二：直接部署 gateway-ui 的 development环境

修改 .env.development文件

#
ENV = 'development'
# base api
VUE_APP_BASE_API = '换成nginx转发服务器转发到 gateway 服务器的路径，例如 /Web'
# base url
VUE_APP_BASE_URL = '换成nginx转发服务器的域名'

删除 vue.config.js 文件里面的 devServer 对象

proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: 'http://localhost:9093',
        changeOrigin: true,
        logLevel: 'debug',
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },

同时将，devServer.host 修改为 所在服务器的IP地址。

步骤二

配置 nginx 转发服务器

配置转发到 gateway-ui 服务器

location / {
    proxy_pass http://gateway-ui所在的服务器的ip:端口;
}

配置转发到 gateway 服务器

location /Web {
    if ($request_uri ~ /Web/(.+)){
        set $param $1;
    }

    proxy_pass http://gateway所在的服务器的ip:端口/$1;
}

gateway-ui-vue's Issues

在Routing的路由匹配条件中， 无法新增匹配条件

Should remove 'dist' directory

README 添加部分截图

一个小小的建议：如果想吸引更多的人参与、使用、加星星✨，可以在Readme添加部分预览截图。

要使用一种webui工具，开始总要看一眼部署完会是什么样子~

数据缓存模块获取PathValue时提示的index设置错误

在数据缓存模块，当设置匹配规则或者关键词为PathValue时，提示
http://example.com/path1/path2/path3?xxx=aa,填写1匹配path1，2匹配path2，3匹配path3

gateway中取PathValue时使用的代码：
`
func getPathValue(idx int, req *fasthttp.Request) string {
path := hack.SliceToString(req.URI().Path()[1:])
values := strings.Split(path, "/")
if len(values) <= idx {
return ""
}

return values[idx]

}
`
可知index起始位置不一致

建议修改提示文案为
http://example.com/path0/path1/path2?xxx=aa,填写0匹配path0，1匹配path1，2匹配path2

v3.0 js bug

app.4d269715.js:1 Uncaught TypeError: Cannot read property 'zh' of undefined
at Module.Vtdi (app.4d269715.js:1)
at h ((index):4)
at c ((index):4)
at Array.n [as push] ((index):4)
at app.4d269715.js:1

v3.0

英文页面选项

来谈谈如何做吧