PS：
项目创建我这里就不赘述了，请大家看官网：http://bee.tinper.org/tinper-bee/project
1.项目整体框架结构截图：
此项目为基于react的框架
docs：此文件夹主要存放一些说明文档，熟悉此项目后可删除。
node_modules: npm install 自动生成的文件夹，里面文件参照package.json所配置的文件。
ucf-apps：存放页面的目录，所有的子页面均在此目录下。
ucf-common：顾名思义存放工程所有公用文件的目录。
gitattributes+gitignore：git相关文件。
describe：描述文件。
package：包配置文件。
package-lock：锁包文件。
ucf.config.js：项目整体配置文件。
2.启动端口号设置的问题，默认端口号为3000，如果本机3000端口号被占用，会随机使用端口号，自己设置端口号，需要在package.json，"scirpt"配置中增加 --port属性即可，如下：
"scripts": {
//在start命令中增加 --port=端口号；即可
"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>（单页面文件结构）在ucf-apps内，任意选择一个文件，我这里选择的是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语法 创建一个standard类，继承react standard首字母必须大写，react命名规则，为了和HTML原生标签做区分
class HelloWorld extends Component {
constructor(props) {
super(props);
this.state = {
//这里可以定义页面初始值
}
}
// 生命周期函数 页面初始化加载触发 一般展示写在此方法内
componentDidMount() {
}
render() {
return (
<div >
helloworld test
</div>
)
}
}
// 默认导出 HelloWorld 创建好UI层，将UI层导出去
export default HelloWorld
<2>index.less:样式文件。
<3>contianer.js（我这里理解为容器层，主要作用就是将数据和UI层进行绑定，以便实时更新）：
import React from 'react';
import mirror, {connect} from 'mirrorx';
// 组件引入
import Single from './components/IndexView';
// 数据模型引入
import model from './model'
mirror.model(model);
// 数据和组件UI关联、绑定 hellowrold对应model里面的name进行绑定 HelloWorld对应UI层也就是 components里面的index 完成操作即是将model请求到的数据和index显示的UI进行绑定
export const ConnectedSingle= connect(state => state.helloworld,null)(Single);
<4>model.js（数据模型层）
import React from 'react';
import { actions } from "mirrorx";
// 引入services，如不需要接口请求可不写
import * as api from "./service";
import { processData } from 'utils';
import { localeData } from 'moment';
export default {
// 确定 Store 中的数据模型作用域
name: "singleedit",
// 设置当前 Model 所需的初始化 state 初始化设置
initialState: {
helloMsg:'',
},
reducers: {
/**
* 纯函数，相当于 Redux 中的 Reducer，只负责对数据的更新。
* @param {*} state
* @param {*} data
*/
updateState(state, data) { //更新state
return {
...state,
...data
};
}
},
effects: {
// 两种函数写法，第一种传统写法
async loadData(param){
let {result} = processData(await api.getData(param))
let {data:res}=result
if(res){
// actions代表动作，后面跟model的名字
actions.helloworld.updateState({
helloMsg:res.content[0].name
})
}
},
// 第二种箭头函数
getMsg:()=>{
actions.helloworld.updateState({
helloMsg:'helloworld,无请求。'
})
}
}
};
<5>service.js（服务层，用于请求数据）
import request from "utils/request";
// 后台请求地址
const URL = {
"GET_DATA" : `${GROBAL_HTTP_CTX}/hello_world/list`
}
/**
* 获取数据
* @param{*}param
*/
export const getData = (param) =>{
return request(URL.GET_DATA,{
method:"get",
param
})
}
4.index.js（这个外层index.js不同于compoent里面的index，此处不属于视图，而是用来配置前端路由的，该功能节点内的功能页面都由这里配置）：
/**
* 前端路由说明：
* 1、基于浏览器 History 的前端 Hash 路由
* 2、按业务模块和具体页面功能划分了一级路由和二级路由
*/
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（整个应用的入口）
* 整个应用的入口，包含路由，数据管理加载
*/
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.页面执行步骤：
页面在components内（即UI层），进行交互产生交互后，调用model里面的方法，发起数据请求，返回数据后，对数据进行处理，处理完成后将数据传入到updateState内，更新初始值。service，model发起数据请求调用service里面的接口请求，获取到数据index.js取model内的值进行前端页面展示
网友评论