文档目录

前提
安装
使用
示例
常见问题

前提

EOS开发环境
Node 4.3.2+

安装

下载项目

克隆devops Git项目 git clone [email protected]:devops10/devops.git
cd 到devops-fe-core目录下执行
```
npm install
```

设置环境变量

设置用户环境变量EOS_WEB_ROOT, 值为EOS 服务器web根目录，如tomcat的webapps

# MacOS/Linux
export EOS_WEB_ROOT=/Users/jinxinxi/Work/eos/eosbps75/apache-tomcat-7.0.54/webapps

# Windows
# 临时有效
set EOS_WEB_ROOT=D:\primeton\platform\apache-tomcat-7.0.54\webapps
# 永久有效则配置系统环境变量

使用

配置pages.config.js

devops-fe-core/pages.config.js 是前端页面的统一配置文件，产品上线前需要统一配置。但开发期间开发人员可以在自己的项目的WEB目录下复制一份pages.config.js，方便本地开发调试。示例: devops-sample/eos-web/pages.config.js
注意: 自己项目下的pages.config.js 仅供开发调试使用，请不要提交

var pages = [{
  id: "portal", // 一级页面标示符
  urlPath: "portal", // 浏览器路由地址,  localhost:8080/default/index.html/#/portal
  page: "sample/pages/portal/index.html", // HTML文件目录，相对于webcontent的路径，如：devops-sample/com.primeton.devops.sample/src/webcontent/pages/portal/index.html, 注意别忘了加构建包的webPath
  root: true // 如果设置root为true, 该页面默认为首页
}, {
  id: "signup",
  urlPath: "signup",
  page: "sample/pages/portal/signup.html"
}, {
  id: "home",
  urlPath: "home",
  pages: [{
    id: "form", // 二级页面标示符
    urlPath: "form", // 浏览器路由地址，,  localhost:8080/default/index.html/#/home/form
    page: "sample/pages/home/form/index.html",  // HTML文件路径，相对于webcontent的路径，如devops-sample/com.primeton.devops.sample/src/webcontent/pages/home/form/index.html, 注意别忘了加构建包的webPath
    sidebarName: "Form", //二级目录名
    sidebarIcon: "assets/images/home/product.svg" // 二级目录icon路径
  }, {
    id: "grid",
    urlPath: "grid",
    name: "Grid",
    icon: "assets/images/home/ziyuan.svg",
    pages: [{
      id: "gridBasic", // 三级页面标示符
      urlPath: "basic", // 浏览器路由地址，,  localhost:8080/default/index.html/#/home/grid/basic
      page: "sample/pages/home/grid/index.html",  // HTML文件路径，相对于webcontent的路径，如devops-sample/com.primeton.devops.sample/src/webcontent/pages/home/grid/index.html, 注意别忘了加构建包的webPath
      name: "Grid", //三级目录名
      icon: "assets/images/home/ziyuan.svg" // 三级目录icon路径
    }, {
      id: "gridI",
      urlPath: "iframe",
      page: "sample/pages/home/grid/DataBinding.html",
      name: "Grid in Iframe",
      icon: "assets/images/home/ziyuan.svg"
    }]

  }]
}]
var config = {
  pages: pages
}
module.exports = config

页面编写

传统的HTML/CSS/JavaScript的代码开发

按如上配置，创建常规的html文件
以传统的html元素做页面布局
内联/外联CSS做样式
内联/外联JavaScript做页面交互、使用JS组件

示例：已编写一个二级目录的form表单为例

确保pages.config.js配置正确，如上 *创建devops-sample/com.primeton.devops.sample/src/webcontent/pages/home/form/index.html 文件
可以参考NUI/minui的相关示例
确保资源路径正确（注意：资源路径都是相对于eos context的路径，eos的项目context经常是default, 所以href="demo/css/foo.css"就等于href="/default/demo/css/foo.css"）
- css文件资源
- javascript文件资源
- 图片资源

启动前端框架

启动EOS 本地服务器
启动devops-fe-core cd 到devops-fe-core目录下，执行
```
npm start
```
启动成功后，访问localhost:8080/default/index.html

增删改页面

重复页面编写步骤，注意pages.config.js配置正确( 每次配置后，devops-fe-core会自动更新，不必重启)

示例

前端提供了示例项目共大家参考
Git 地址

运行

导入到eos studio中
重新启动前端框架

常见问题

启动devops-fe-core报错？答：确保已经按照上述安装步骤
按照上述操作增删改了html文件或修改pages.config.js，可是不生效? 答：确保所有更新已经同步于eos server web root目录下，如果在eos studio外面编辑的，是不会同步到web root目录下的。
nui window需要与父页面进行数据同步? 答：在window里通过init方法拿到当前nui的window对象，需要数据同步的时候，调用该window对象的getOwner方法，如 nuiWin.getOwner().getFn("parentFunction")(dataToSync) 或 nuiWin.getOwner().execFn("parentFunction", dataToSync) 注: 原nuiWin.getOwner().get/exec已经deprecated
javascript里动态加载html无法加html事件? 答：如果需要添加事件，html需要用双引号括起来, 如

var htmlInJS = "<button onclick='clickFn'>Click me</button>"

page scope是什么?
答：每个页面里的自定义script需要添加page=scope属性，这样script里定义的函数、变量只会当前页面生效, 就不会污染global变量

页面跳转及数据传输？

  答：页面跳转及数据传输使用nui.go\(path,{data}\)方法（使用案例见devops-sample\com.primeton.devops.sample\src\webcontent\pages  
  \home\grid\employeeList.html），  
 获取数据使用

       nui.getPathParams([pathname])

       //或

       nui.getParams([queryname]) （

使用案例见devops-sample\com.primeton.devops.sample\src\webcontent\pages\employee\detail.html）

此外还需要在pages.config.js中需要配置页面的urlPath等属性（其中urlPath: ":employeeid/detail"中的employeeid为传递参数名）

运行环境搭建