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