More
More
文章目录
  1. icework 新建页面
  2. 请求数据CORS 后端处理(spring boot)
  3. post form数据
  4. 关于Pagination current
  5. Icon
  6. webpack path

ice design入门手札(一)

icework 新建页面

  • src/nav.js 中修改菜单显示名字,此外可通过该文件配置首页左侧菜单。
1
2
3
4
5
6
7
const autoGenAsideNavs = [
{
text: "可视化文件管理",
to: "/visualFileTable1",
icon: 'home'
}
];

请求数据CORS 后端处理(spring boot)

细粒度处理(类、方法)加注解:

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

全局处理:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
@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来包装下,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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引入字体图标,故不支持多色。

1
2
3
4
5
6
7
8
9
10
11
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;

其他页面使用

1
2
3
4
5
import CustomIcon from '../../../../components/CustomIcon';
...
<CustomIcon type="dingding" />

webpack path

node_modules\ice-scripts\lib\config\webpack.config.dev.js
node_modules\ice-scripts\lib\config\webpack.config.prod.js

更多有意思的内容,欢迎访问笔者小站: rebey.cn

打赏
手机扫一扫,支持CHE~