前端框架ice飞冰与java后台交互分享

飞冰开发环境配置

node.js 安装

https://alibaba.github.io/ice/docs/basis/env-config

Iceworks 快速开始文档

https://alibaba.github.io/ice/docs/iceworks

iceworks下载

https://alibaba.github.io/ice/iceworks

Visual studio code mac版下载

http://www.pc6.com/mac/147684.html

一、ES6基础语法

1.import const var 加大括号和不加大括号的区别

import axios from ‘axios’;

import { Dialog, Grid, Button, Feedback, Tag } from ‘@icedesign/base’;

import { removeObj, unique } from ‘./…/…/…/…/components/Util’;

const { Row } = Grid;

const Toast = Feedback.toast;

2. var const let let 只在代码块里有效

二、React基础语法

react 语法教程：http://www.runoob.com/react/react-tutorial.html

1.props 作用域 组件本身的props 可以在组件内部被接收到使用，父组件可以传state给子组件的props

子组件取值用this.props.selectedKey

2.state 作用域 只能是组件本身的值传递。 组件与组件之间值传递需要用到props

3.React 组件之间传值 父子组件传值 兄弟组件传值。 在组件上自定义标签 在组件内部通过this.props.标签名获取传递过来的值。

4.react 事件处理 http://www.runoob.com/react/react-event-handle.html

export default class FilterTable extends Component {

constructor(props) {

    super(props);

 }

// 请求参数缓存

this.queryCache = {};

this.state = {

  filterFormValue: {},

  isDisabled: true,

};

}

fetchData= (sysInfo) => {

this.props.updateBindingData('tableData', {

  params: this.queryCache,

});

};

}

this.fetchData()

{this.renderStatus.bind(this)}

{this.renderStatus.bind(this, sysInfo)};

5.React 组件生命周期 http://www.runoob.com/react/react-component-life-cycle.html

componentDidMount : 在第一次渲染后调用 state

componentWillReceiveProps 在组件接收到一个新的 props (更新后)时被调用。这个方法在初始化render时不会被调用

6. React 条件渲染 http://www.runoob.com/react/react-conditional-rendering.html

三、飞冰：

1.@DataBinder 统一用Result.java类作为返回，默认取 json串中的key为data的值，data只能是{} Object对象类型，不能是数组

如果是数组的话，要加key 默认为list作为key

下拉框数据字典共用方法 查询和表单会经常用到

注意后台请求的次数，尽量一个页面能一次请求完就用一次请求 请求合并。

2.共用js方法 Util.js

3.css样式修改 styles css标签驼峰写法

4.chrome常用插件

JsonView

http://chromecj.com/web-development/2017-11/850/download.html 网页最下方下载地址一 链接可以下载

Restlet Client

http://chromecj.com/productivity/2017-08/789/download.html 网页最下方下载地址一 链接可以下载