BodeAbp的前端可以根据自己的喜好选型,推荐React.js、angular2.js、vue.js,后续我会以react.js为例说明BodeAbp前端的一些设计思路。
BodeAbp提供的前端demo涉及到一些最新的前端技术,需要一定的学习成本。主要涉及到的技术:react.js、es6、webpack、babel、fetch等。
react采用了蚂蚁金服组件库:
antd
相关的学习资料:
es6学习文档:
http://es6.ruanyifeng.com/
webpack使用文档:
https://segmentfault.com/a/1190000002552008
蚂蚁金服react组件库:
http://ant.design/
Bootstrap的react组件库:
http://react-bootstrap.github.io/
react官方组件库:
http://react-components.com/
前端目录结构
![](https://i-blog.csdnimg.cn/blog_migrate/a0c4919de2b040e46890f5f5dc7c7255.png)
assets:css、img、js资源
components:react组件
pages:页面
前端采用了蚂蚁金服的前端react组件库ant design,官方网址:http://ant.design/
前端开发工具:WebStorm
配置前端路由
每个页面都是一个react组件,页面加载与切换通过前端路由来实现,路由配置代码如下:
import React from 'react';
import { render } from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';
import AdminApp from './index/page';
import Login from './index/login';
import DashBoard from './index/dashboard';
import Users from './identity/users';
import Roles from './identity/roles';
import OrganizationUnits from './identity/organization-unit';
import Classifies from './activity/classifies';
import Activities from './activity/activities';
import AuditLogs from './log/auditlogs';
const Bootstrapper = {
start() {
render((
<Router history={browserHistory}>
<Route path="/admin/login" component={Login} />
<Route path="/admin" component={AdminApp}>
<Route path="index" component={DashBoard} />
<Route path="identity">
<Route path="users" component={Users} />
<Route path="roles" component={Roles}/>
<Route path="organizationUnits" component={OrganizationUnits}/>
</Route>
<Route path="activity">
<Route path="classifies" component={Classifies} />
<Route path="activities" component={Activities}/>
</Route>
<Route path="log">
<Route path="auditLogs" component={AuditLogs} />
</Route>
</Route>
</Router>
), document.getElementById('mainContainer'));
},
};
export default Bootstrapper;
运行
前端项目根目录下执行
npm start
运行效果图如下:
![](https://i-blog.csdnimg.cn/blog_migrate/a086f593b82f476740192a44b113b706.png)
前端React.js示例地址