使用飛冰+dva快速構建一個後臺系統

awesome23發表於2018-11-17

使用飛冰+dva快速構建一個後臺系統

寫在前面

最近我們接到這樣一個需求，要寫一個後臺管理系統，時間很急，產品也只是給出了原型稿，把功能陳列了一下，給出的要求就是先注重功能，用起來再去考慮美化。但是作為前端，我們怎麼能就這樣滿足呢，也是前一陣剛剛瞭解到了飛冰，於是大家一起商量了一下決定採用飛冰來搭建這套系統。這篇也就是當作記錄這段時間使用飛冰的一些心得和遇到的一些坑。

介紹一下

先介紹一下飛冰，先從先上官網文件上提出幾個關鍵詞，阿里開源，快速搭建，提高開發效率，豐富的物料體系，其目的就是快速搭建起一個面向中後臺的管理系統，其中豐富的模板及區塊可以省去開發者大量的時間，將精力主要集中於邏輯層。然後是dva，基於redux和redux-saga的資料流方案，本片文章不會對dva進行過多的介紹，不過我還是很推薦大家去學習一下dva的，接下來，跟我一步一步的快速搭建起來一個管理系統。

iceworks

iceworks是ice推出的輔助開發者快速開發中後臺前端應用的GUI軟體，下載地址。 你可以通過這個GUI軟體建立你的專案，修改、增加頁面，打包專案。

使用飛冰+dva快速構建一個後臺系統

新建專案

新建專案，首先第一步是選擇模板，我們可以看到飛冰現在為我們提供了近50個模板，其中包括飛冰（React），小程式，Vue，Angular專案模板，現在先選擇一個模板，這裡我選擇的是ICE Application Management這套模板。好的，模板選擇好了之後，點選使用該模板，然後就可以看到我們的專案在快速的安裝當中了。

使用飛冰+dva快速構建一個後臺系統
安裝完成之後，點選啟動除錯服務，啟動成功後，在本地4444埠，就可以訪問到我們的這個專案了。

引入dva

接下來，先不去討論目錄結構，我們開始引入dva。

  • 安裝dva 直接在iceworks中點選新增依賴即可。
  • 啟動dva 將src資料夾中的index.js修改成這樣。
import Dva from 'dva';
// 載入預設全域性樣式 normalize 、.clearfix 和一些 mixin 方法等
import '@icedesign/base/reset.scss';
import router from './router';

// 建立dva例項
const app = new Dva();

// 引入路由
app.router(router);

// 啟動專案
app.start('#ice-container');

複製程式碼

然後router.js檔案也需要做一點點修改

// 引入位置修改
import { HashRouter as Router, Switch, Route } from 'dva/router';

// 將預設匯出修改
export default ({ history }) => <Router history={history}>{routeChildren}</Router>;
複製程式碼

這樣我們已經將dva成功引入了，這是第一步，然後就是引入model和Container Component。 新建models資料夾，然後在裡面寫入dva的model檔案，具體model怎麼定義可以看這裡。 然後在我們需要的元件中對應的index.js中通過dva的connect連線model。

新增頁面

新增頁面的時候我們需要做的事情就很簡單了

  • 點選新建頁面，選擇需要的區塊。比如一個簡單的可過濾的列表頁。
    使用飛冰+dva快速構建一個後臺系統
  • 選擇好區塊後，我們可以先預覽一下效果。確定後就可以點選生成頁面了。
    使用飛冰+dva快速構建一個後臺系統
  • 然後在models中寫入對應dva的model。

mock資料

開發中我們免不了要mock資料，飛冰已經為我們提供了完整的mock方案。

  • 專案根目錄下面建立mock/index.js檔案。
  • 怎麼寫mock資料
// mock/index.js
const foo = require('./foo.json');
const bar = require('./bar');

module.exports = {
  // 同時支援 GET 和 POST
  '/api/users/1': foo,
  '/api/foo/bar': bar(),

  // 支援標準 HTTP
  'GET /api/users': { users: [1, 2] },
  'DELETE /api/users': { users: [1, 2] },

  // 支援自定義函式，API 參考 express4
  'POST /api/users/create': (req, res) => {
    res.end('OK');
  },

  // 支援引數
  'POST /api/users/:id': (req, res) => {
    const { id } = req.params;
    res.send({ id: id });
  },
};
複製程式碼

配置導航及主題顏色

  • 配置導航可以在menuConfig.js檔案中進行修改
  • 主題顏色在package.json中的themeConfig中進行修改

目錄結構

所以我們整體的目錄結構是這樣的。

| -- components         頭部及導航欄元件
| -- layout             佈局元件及公用樣式寫入這裡
| -- pages             
    | -- Home 
        | -- components 負責展示的區塊元件檔案
        | -- Home.jsx
        | -- index.js   我們可以選擇在這裡來寫入connect
| -- models             
    | -- common.js      公用的model，例如各種列舉資料，通用資料
    | -- userInfo.js    各自的model
| -- services           api介面
| -- utils              工具方法
| -- index.js           入口檔案
| -- menuConfig.js      頂部及側部導航欄配置
| -- router.jsx         匯出路由元件
| -- routerConfig.js    路由配置
複製程式碼

表單

表單類元件推薦使用@icedesign/base中的Form及Field，這裡跟官網推薦的完全相反，原因是我發現用官方推薦的formBinder的話，獲取資料真的難，而form和field的組合更加簡單、易用。

最後

這篇文章對於飛冰的介紹沒有太多深入，只是簡單介紹了一下怎麼使用，算是一篇推薦軟文？？？？ 飛冰的 我覺得如果大家如果遇到這樣的專案，不妨試用一下飛冰，你可以產品和UI來選擇頁面、區塊，甚至可以讓他自己把頁面搭起來，然後我們來完成功能就好了，這樣豈不美哉？好了，就這樣。?

相關文章