PS：
項(xiàng)目創(chuàng)建我這里就不贅述了，請(qǐng)大家看官網(wǎng)：http://bee.tinper.org/tinper-bee/project

1.項(xiàng)目整體框架結(jié)構(gòu)截圖：

此項(xiàng)目為基于react的框架

docs：此文件夾主要存放一些說明文檔，熟悉此項(xiàng)目后可刪除。
node_modules: npm install 自動(dòng)生成的文件夾，里面文件參照package.json所配置的文件。
ucf-apps：存放頁(yè)面的目錄，所有的子頁(yè)面均在此目錄下。
ucf-common：顧名思義存放工程所有公用文件的目錄。
gitattributes+gitignore：git相關(guān)文件。
describe：描述文件。
package：包配置文件。
package-lock：鎖包文件。
ucf.config.js：項(xiàng)目整體配置文件。
2.啟動(dòng)端口號(hào)設(shè)置的問題，默認(rèn)端口號(hào)為3000，如果本機(jī)3000端口號(hào)被占用，會(huì)隨機(jī)使用端口號(hào)，自己設(shè)置端口號(hào)，需要在package.json，"scirpt"配置中增加 --port屬性即可，如下：

"scripts": {
//在start命令中增加 --port=端口號(hào)；即可
    "start": "ucf-scripts start --homepage=iuap_train_example/helloworld --port=3033",
    "build": "ucf-scripts build",
    "war": "rimraf war && mkdir war && jar cvfM0 ./war/dist.war ./ucf-publish/"
  },

<1>（單頁(yè)面文件結(jié)構(gòu)）在ucf-apps內(nèi)，任意選擇一個(gè)文件，我這里選擇的是helloword,打開src目錄下的helloword目錄，然后打開compoents文件夾里面的index.js（屬于UI視圖層）。

import React, { Component } from 'react';
import { actions } from 'mirrorx';
import { Button } from 'tinper-bee';

import './index.less';
// es6語(yǔ)法 創(chuàng)建一個(gè)standard類，繼承react standard首字母必須大寫，react命名規(guī)則，為了和HTML原生標(biāo)簽做區(qū)分
class HelloWorld extends Component {
  constructor(props) {
    super(props);
    this.state = {
         //這里可以定義頁(yè)面初始值
    }
  }
// 生命周期函數(shù) 頁(yè)面初始化加載觸發(fā) 一般展示寫在此方法內(nèi)
  componentDidMount() {

  }

  render() {

    return (
      <div >
        helloworld test
      </div>
    )
  }
}
// 默認(rèn)導(dǎo)出 HelloWorld 創(chuàng)建好UI層，將UI層導(dǎo)出去
export default HelloWorld

<2>index.less:樣式文件。
<3>contianer.js（我這里理解為容器層，主要作用就是將數(shù)據(jù)和UI層進(jìn)行綁定，以便實(shí)時(shí)更新）：

import React from 'react';
import mirror, {connect} from 'mirrorx';
// 組件引入
import Single from './components/IndexView';
// 數(shù)據(jù)模型引入
import model from './model'

mirror.model(model);
// 數(shù)據(jù)和組件UI關(guān)聯(lián)、綁定   hellowrold對(duì)應(yīng)model里面的name進(jìn)行綁定  HelloWorld對(duì)應(yīng)UI層也就是 components里面的index 完成操作即是將model請(qǐng)求到的數(shù)據(jù)和index顯示的UI進(jìn)行綁定
export const ConnectedSingle= connect(state => state.helloworld,null)(Single);

<4>model.js（數(shù)據(jù)模型層）

import React from 'react';
import { actions } from "mirrorx";
// 引入services，如不需要接口請(qǐng)求可不寫
import * as api from "./service";

import { processData } from 'utils';
import { localeData } from 'moment';

export default {
  // 確定 Store 中的數(shù)據(jù)模型作用域
  name: "singleedit",
  // 設(shè)置當(dāng)前 Model 所需的初始化 state 初始化設(shè)置
  initialState: {
    helloMsg:'',
  },
  reducers: {
    /**
     * 純函數(shù)，相當(dāng)于 Redux 中的 Reducer，只負(fù)責(zé)對(duì)數(shù)據(jù)的更新。
     * @param {*} state
     * @param {*} data
     */
    updateState(state, data) { //更新state
      return {
        ...state,
        ...data
      };
    }
  },
  effects: {
    // 兩種函數(shù)寫法，第一種傳統(tǒng)寫法
    async loadData(param){
      let {result} = processData(await api.getData(param))
      let {data:res}=result
      if(res){
        // actions代表動(dòng)作，后面跟model的名字
        actions.helloworld.updateState({
          helloMsg:res.content[0].name
        })
      }
    },
    // 第二種箭頭函數(shù)
    getMsg:()=>{
      actions.helloworld.updateState({
        helloMsg:'helloworld,無請(qǐng)求。'
      })
    }
  }
};

<5>service.js（服務(wù)層，用于請(qǐng)求數(shù)據(jù)）

import request from "utils/request";
// 后臺(tái)請(qǐng)求地址
const URL = {
    "GET_DATA" : `${GROBAL_HTTP_CTX}/hello_world/list`
}

/**
 * 獲取數(shù)據(jù) 
 * @param{*}param
*/
export const getData = (param) =>{
    return request(URL.GET_DATA,{
        method:"get",
        param
    })
}

4.index.js（這個(gè)外層index.js不同于compoent里面的index，此處不屬于視圖，而是用來配置前端路由的，該功能節(jié)點(diǎn)內(nèi)的功能頁(yè)面都由這里配置）：

/**
 * 前端路由說明：
 * 1、基于瀏覽器 History 的前端 Hash 路由
 * 2、按業(yè)務(wù)模塊和具體頁(yè)面功能劃分了一級(jí)路由和二級(jí)路由
 */
import React from "react";
import { Route } from "mirrorx";
import { ConnectedSingle } from "./Single/container";

export default () => (
  <div className="route-content">
    <Route exact path="/" component={ConnectedSingle} />
  </div>

)

5.app.js（整個(gè)應(yīng)用的入口）

 * 整個(gè)應(yīng)用的入口，包含路由，數(shù)據(jù)管理加載
 */
import  "babel-polyfill"

import React from "react";
import mirror, { render, Router } from "mirrorx";
import Routes from './routes'

import "./app.less";

const MiddlewareConfig = [];

mirror.defaults({
  historyMode: "hash",
  middlewares: MiddlewareConfig
});

render(<Router>
  <Routes />
</Router>, document.querySelector("#app"));

6.index.html（模板文件）
7.頁(yè)面執(zhí)行步驟：
?頁(yè)面在components內(nèi)（即UI層），進(jìn)行交互產(chǎn)生交互后，調(diào)用model里面的方法，發(fā)起數(shù)據(jù)請(qǐng)求，返回?cái)?shù)據(jù)后，對(duì)數(shù)據(jù)進(jìn)行處理，處理完成后將數(shù)據(jù)傳入到updateState內(nèi)，更新初始值。service，model發(fā)起數(shù)據(jù)請(qǐng)求調(diào)用service里面的接口請(qǐng)求，獲取到數(shù)據(jù)index.js取model內(nèi)的值進(jìn)行前端頁(yè)面展示