ice design 入門手札(一)

icework 新建頁面

• src/nav.js 中修改菜單顯示名字，此外可經過該文件配置首頁左側菜單。

const autoGenAsideNavs = [
  {
    text: "可視化文件管理",
    to: "/visualFileTable1",
    icon: 'home'
  }
];

請求數據CORS 後端處理(spring boot)

細粒度處理（類、方法）加註解：

@CrossOrigin(origins = "http://localhost:4444")

全局處理：

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                    .allowedOrigins("http://localhost:4444");
    //              .allowedMethods("PUT", "DELETE")
    //              .allowedHeaders("header1", "header2", "header3")
    //              .exposedHeaders("header1", "header2")
    //              .allowCredentials(false).maxAge(3600);
            }
        };
    }
}

tips:此處配置的是「localhost」，若是您訪問的是127.0.0.1的話仍是跨域失敗的，聰明的你應該知道怎麼解決。

修改頁面baseURL及url，method默認爲get，data-binder中對應params。若是是post改成data

@DataBinder({
  tableData: {
    // 詳細請求配置請參見 https://github.com/axios/axios
    baseURL: 'http://localhost:8080/',
    url: 'complex-tab-table-list.json',
    params: {
      page: 1,
    },
    defaultBindingData: {
      list: [],
      total: 100,
      pageSize: 10,
      currentPage: 1,
    },
  },
})

@DataBinder({
  tableData: {
    baseURL: 'http://localhost:8080/',
    url: 'user/listUserByCriteria',
    method: 'post',
    data: {},
    //headers: {
    //  Accept: 'application/json',
    //  'Content-Type': 'multipart/form-data'
    //}
    defaultBindingData: {
      list: [],
      total: 100,
      pageSize: 3,
    },
  },
})

data-binder入門傳送，據說近期會開源，坐等。

post form數據

默認post的Content-Type是application/json，習慣了application/x-www-form-urlencoded的話，能夠npm install qs來包裝下，

import qs from 'qs';

// TODO
componentDidMount() {
this.queryCache.pageIndex = 1;
this.queryCache.pageSize = 3;

this.data = qs.stringify({
  ...this.queryCache
});

this.fetchData();
}

// data存放查詢參數
fetchData = () => {
this.props.updateBindingData('tableData', {
  data: this.data,
});
};

關於Pagination current

demo依賴mock數據中currentPage來更新current，改爲實際後臺數據後，不建議這麼照搬。可參照官方Paginationdemo修改current到state裏。

Icon

ice中提供了icon、FoundationSymbol兩套圖標。同時支持自定義圖標DynamicIcon。css從iconfont獲取（找到須要的圖標添加到項目->選擇Font class->生成地址）。注：目前採用fontclass引入字體圖標，故不支持多色。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import DynamicIcon from 'dynamic-icon';

// 使用 custom 生成自定義 ICON 組件
const CustomIcon = DynamicIcon.create({
  fontFamily: 'iconfont',
  prefix: 'icon',
  css: 'https://at.alicdn.com/t/font_1472628097_7496383.css'
});
export default CustomIcon;

其餘頁面使用

import CustomIcon from '../../../../components/CustomIcon';

...

<CustomIcon type="dingding" />

webpack path

node_modulesice-scriptslibconfigwebpack.config.dev.js
node_modulesice-scriptslibconfigwebpack.config.prod.js

關於做者