Skip to main content
Version: 1.x

开始使用

一、 总体介绍​

前端应用开发由 UI 展示层和 BFF （ Backend For Frontend 即 服务于前端的后端 ） 服务层组成，在本地开发模式下，需要同时启动两个服务，所有的 UI 请求都需要经过 BFF 转发到 web 后端，不建议在 UI 直接调用 web 后端的接口。

前端应用图

二、 应用初始化​

我们可以用 Create Godzilla App 一键生成前端应用的两个服务，非常方便

1. 设置 npm 镜像仓库​

依赖 node10.x 及以上版本，我们默认您已经安装 node 环境，如果您本地没有安装 node 环境，请安装

  1. 外部用户

    • 外部用户需要登录 npm 仓库，请联系客服索取 npm 账户信息，需要登录后才可以安装脚手架

      npm login -registry=https://artifact.iquantex.com/repository/npm-local/ -scope=@gza
      - Username: 【npm user】
      - Password: 【npm password】
      - Email: 【your email】

    • 如果您是首次使用 npm ，我们建议您设置 npm 国内镜像，否则可能会导致安装依赖很慢甚至失败

      npm config set registry=https://registry.npm.taobao.org

  2. 内部用户

    • 内部用户（宽拓员工）使用公司内部的 npm 源，无需执行以上登录操作

      npm config set registry=http://10.116.18.70:8081/content/groups/npm-quantex-group

2. 全局安装 @gza/create-godzilla-app​

不推荐用 yarn 安装，目前框架暂没有去验证 yarn 模式下是否可用

npm i -g @gza/create-godzilla-app@1.1.13 #

3. 使用gza命令创建 UI 和 BFF 应用​

  1. 创建 UI 应用

    • 方法一：可直接使用 gza init [project name] 初始化 UI 应用

      gza init godzilla-portal # 初始化UI应用，`godzilla-portal` is your project name
      cd godzilla-portal
      npm start

    • 方法二：先创建应用目录，再使用 gza init 初始化

      mkdir godzilla-portal  #新建目录，`godzilla-portal` is your project name
      cd godzilla-portal
      gza init
      npm start

    • 注意：在 MacOS 环境，如果出现如下错误，则参考此链接 https://github.com/schnerd/d3-scale-cluster/issues/7 修复

      PNG

  2. 创建 BFF 应用

    • 可直接使用 gza init [project name] 初始化 BFF 应用

      gza init  godzilla-bff --bff # 注意增加--bff参数
      cd godzilla-bff
      npm run dev

    • 注意：运行后，会出现如下命令，请对号入座

      create-godzilla-app v1.0.0
      ✨  Generating godzilla application in my-app
      ? What is the name of the new project app my-app   -- 应用名称，默认是文件夹名称
      ? How would you descripe the new project           -- 应用描述，默认为空
      ? What is the version of the new project 1.0.0     -- 应用版本，默认1.0.0

  3. 启动项目

    两个应用都启动成功后，打开浏览器 http://127.0.0.1:8888 输入用户名密码（任意）即可进入系统

    PNG

4. 配置 License Key​

默认系统右下角会有一个水印，如果您想隐藏水印，请联系客户获取试用版 license，没有 license 并不会影响系统使用

打开配置文件 config/config.ts,设置 godzillaLicenseKey

{
  godzillaLicenseKey: 'your license key';
}

三、 安装示例代码​

  • 脚手架内含了一些系统功能菜单，如果是你是新手，可以安装一些示例代码进行学习

    1. 安装 UI 应用示例代码

      cd godzilla-portal
      npm i @gza/quantex-samples -D # @gza/quantex-samples包含了丰富的示例代码
      npx quantex-samples # 将代码拷贝到当前目录
      npm start

    2. 安装 BFF 应用示例代码

      cd godzilla-bff
      npm i @gza/quantex-samples-bff -D # @gza/quantex-samples-bff主要是示例代码所对应的接口服务
      npx quantex-samples-bff
      npm run dev

  • 按照如上命令进行操作后，会在 app/pages 目录下新增 sample 目录，里面存放了丰富的示例代码

    然后重启这两个应用，并刷新浏览器，如果出现如下界面，就说明示例跑起来了

    PNG

接下来，您就可以通过看示例代码快速了解 Godzilla 框架

进阶：独立使用 UI​

如果您不想使用 BFF 层，可以参考 独立使用 UI