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

文章来源: fizzz.blog.csdn.net，作者：拿我格子衫来，版权归原作者所有，如需转载，请联系作者。

原文链接：fizzz.blog.csdn.net/article/details/107920183