rancher/ui 路由资源对应表

架构分析

主要技术栈

基础web框架: Ember.js

构建脚手架: Ember CLI

ember-engines: http：//ember-engines.com/

国际化: 读配置文件

打包工具: WebPack

dom操作: jquery

Nodejs框架: express生态+http-proxy

图表使用的: echarts 和 d3

样式: node-sass

没有使用大的组件库,只是使用了一些小插件如 jquery.jgrowl

命令执行使用的: xterm.js

模板引擎: hbs

 

网络层数据流转

本地开发时,接口请求的都是本地的,使用http-proxy 做代理

在server/proxies/api.js 里 可以看到

 

ui
├── .github                    # 存放关于github上的一些“配置”的
├── app                        # 存放插件,组件以及应用的入口文件,路由配置
│   ├── 文件夹                  # 插件,组件 hbs模板,路由文件,控制器
│   ├── app.js                  # 应用js入口文件,引擎,
│   ├── formats.js              # 格式化文件
│   ├── index.html              # 应用html入口,资源都通过此文件注入
│   ├── resolver.js             # 控制器,处理本地的路由方法,页面,数据渲染
│   ├── router.js               # 路由管理主文件
├── blueprints                  # 存放蓝图模板
├── config                      # 应用配置文件
│   ├── ember-intl.js           # 本地化服务注入到视图、路径、模块、控制器和组件中。
│   ├── environment.js          # 应用的环境变量,全局变量
│   ├── optional-features.json  # 依赖,引入的库
│   ├── targets.js              # 浏览器相关
├── dist             			# 编译后的静态文件
├── lib             		    # 全局引入的插件
├── node_modules                # 第三方依赖
├── public                      # 存放不需要编译的静态文件
├── scripts                     # 待运行的脚本,.sh
├── server                      # 服务器相关代码,代理,打印日志,设置请求头部
├── ssl                         # https相关配置ssl文件
├── test                        # test环境
├── tmp                         # 存放临时文件
├── translations                # 翻译文件,国际化
├── vendor                      # 引入的第三方包,会被编译
├── .eslint*                    # eslint的规则,忽略文件
├── *docker*                    # docker相关文件,生成镜像,运行容器相关
├── .editorconfig               # 代码格式
├── .gitignore                  # Git 提交忽略的文件配置
├── yarn-lock.json              # 用来锁定依赖的版本号（Yarn 自动生成）
├── package-lock.json           # 用来锁定依赖的版本号（NPM 自动生成）
├── package.json                # 项目基本信息,依赖包,命令

 

在app/router.js中 有对路由进行封装

 

对应都是lib/目录下

目录 => 路径

nodes => /n

gobal-admin => /g

 

对应app/authenticated/目录

目录 => 路径

dummy-dev => /dev

cluster => /c/:cluster_id

project =>/p/:project_id