BodeAbp前端介绍

BodeAbp的前端可以根据自己的喜好选型，推荐React.js、angular2.js、vue.js，后续我会以react.js为例说明BodeAbp前端的一些设计思路。

BodeAbp提供的前端demo涉及到一些最新的前端技术，需要一定的学习成本。主要涉及到的技术：react.js、es6、webpack、babel、fetch等。

react采用了蚂蚁金服组件库：antd

相关的学习资料：

react官方文档：http://reactjs.cn/react/docs/getting-started.html

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/

 

前端目录结构

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

浏览器打开：http://localhost:8080/admin/identity/roles

运行效果图如下：

 

前端React.js示例地址

https://github.com/liuxx001/react-demo