使用React全家桶搭建一個後臺管理系統

引子

學生時代爲了掌握某個知識點會不斷地作習題，作總結，步入崗位以後未嘗不是同樣呢？作業務就如同作習題，若是‘課後’適當地進行總結，必然更快地提高本身的水平。 因爲公司採用的react+node的技術棧，因而就完成了一個reactSPA小項目，計劃往後把平時工做中遇到的業務以及學習中遇到有趣的東西給抽象成demo展現出來。目前該項目只是把雛形搭好，效果以下。在此文的基礎上，寫了篇新文章使用React全家桶搭建一個後臺管理系統,歡迎圍觀。(附註：由於項目不時更新，文章不必定會即時更新，因此以實際的項目爲準)

 

其實這套界面風格不只僅能夠做爲後臺管理系統界面，也能夠修改爲一個能夠展現項目而且美觀的博客。項目地址在這裏(本地跑效果更佳)，若是有好的意見歡迎提issue或pr。

目錄結構

項目的初始結構和構造緣由已羅列如上，因爲過些日子會引人ts，因此項目結構必然還會改動，但確定基於這基本雛形擴展的。

下面對目錄結構做如下說明

• 項目最初始是用create-react-app初始化的，create-react-app 是Facebook官方提供的react腳手架，也是業界最優秀的 React 應用開發工具之一;
• 中間件目錄到時候能夠引人日誌中間件等;
• container和components存放的都是react組件，區別是：只要和主頁樣式有關的組件就放在container中，和功能有關的模塊(好比我實現分裝的表格組件、彈出輸入框組件等)就應放到components中;
• 前端有些通用配置最好是存到全局(瀏覽器)中，這樣調用起來就不用引用了，方便;
• ajax模塊須要本身實現的緣由是到時候要是本身須要有跨域cors之類的需求，須要自定義多種Ajax請求(用fetch的狀況下，將來fetch會愈來愈強大)

技術棧相關

雖然用到的技術棧衆多，可是本身也談不上熟練運用，多半是邊查API邊用的，因此只羅列些本身用相關的技術棧解決的點;

webpack(2.6)

①按需加載：

babel-plugin-import 是一個用於按需加載組件代碼和樣式的 babel 插件（原理），在config/webpack.config.dev.js 文件中做以下修改:

{
  test: /\.(js|jsx)$/,
  include: paths.appSrc,
  loader: 'babel',
  query: {
     plugins: [
       ['import', [{ libraryName: "antd", style: 'css' }]],
     ],
    cacheDirectory: true
  }
},

②引人less:

首先引人 less-loader 來加載 less 樣式，同時修改 config/webpack.config.dev.js 文件

loaders: [
  {
    exclude: [
      /\.html$/,
      /\.(js|jsx)$/,
+     /\.less$/,
      /\.css$/,
      /\.json$/,
      /\.svg$/
    ],
    loader: 'url',
  },

...

  // Process JS with Babel.
  {
    test: /\.(js|jsx)$/,
    include: paths.appSrc,
    loader: 'babel',
    query: {
      plugins: [
-       ['import', [{ libraryName: "antd", style: 'css' }]],
+       ['import', [{ libraryName: "antd", style: true }]],  // 加載 less 文件
      ],
   },

...

+ // 解析 less 文件，並加入變量覆蓋配置
+ {
+   test: /\.less$/,
+   loader: 'style!css!postcss!less?{modifyVars:{"@primary-color":"#1DA57A"}}'
+ },
]

引人les 

這裏利用了 less-loader 的 modifyVars 來進行主題配置， 變量和其餘配置方式能夠參考 配置主題 文檔。

③一鍵發佈到gh-pages：

用到了gh-pages,使用 npm run deploy 一鍵發佈到本身的gh-pages上，姑且把gh-pages當成生產環境吧，因此在修改config/webpack.config.dev.js 文件的同時也要對config/webpack.config.prod.js做出如出一轍的修改。

ps:儘管我是這樣發佈到gh-pages的，該項目的gh-pages展現地址爲這裏，在gh-pages上展現圖明顯比本地大了好些像素，若是有朋友知道是爲何，不吝賜教啊。

④引用路徑的縮寫：

  resolve: {
    fallback: paths.nodePaths,
    alias: {
      'react-native': 'react-native-web',
      components: path.resolve(__dirname, '..') + '/src/common/components',
      container: path.resolve(__dirname, '..') + '/src/common/container',
      images: path.resolve(__dirname, '..') + '/src/common/images',
      pages: path.resolve(__dirname, '..') + '/src/common/pages',
      utils: path.resolve(__dirname, '..') + '/src/common/utils',
      data: path.resolve(__dirname, '..') + '/src/server/data',
    }
  },

配置了引用路徑的縮寫後，就能夠在任意地方如這樣引用，好比

antd(2.10)

antd是（螞蟻金服體驗技術部）通過大量的項目實踐和總結，沉澱出的一箇中臺設計語言 Ant Design，使用者包括螞蟻金服、阿里巴巴、口碑、美團、滴滴等一系列知名公司，並且我從他們的設計理念也學到了不少關於UI、UX的知識。

該項目採用的是antd最新的版本2.10.0,因爲2.x的版本和1.x的版本仍是相差蠻大的，以前參考的項目(基於1.x)改起來太費勁，因此在組件那塊就乾脆本身從新封裝了一遍。這部分知識點我建議仍是看文檔，文檔解決不了扒扒源碼。

react-router(4.x)

react-router 4.x和2.x的差別又是特別的大，召喚文檔,網上基本上都仍是2.x的教程，看過文檔以後，反正簡而言之其就是要讓使用者更容易上手。印象最深的是之前嵌套路由寫法在4.x中寫到同層了。以下示例他們的效果是相同的。

2.x：

<Route path="/" component={App}>
    <Route path="/aaaa" component={AAAA} />
    <Route path="/bbbb" component={BBBB} />
</Route>

 4.x:

<Route path="/" component={App} />
<Route path="/aaaa" component={AAAA} />
<Route path="/bbbb" component={BBBB} />

還有更多的特性和API的出現，期待有更好的分析文章的出現，有機會我也會來總結下react-router(4.x)和(2.x)的差別。

fetch

先推薦這篇文章《傳統Ajax已死，Fetch永生》，再推薦API;

fetch是個好東西，好在簡單，除了promise最基本的用法，還能這樣寫

fetch(url).then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.log("Oops, error", e))

Promise

try {
  let response = await fetch(url);
  let data = await response.json();
  console.log(data);
} catch(e) {
  console.log("Oops, error", e);
}

可是其簡潔的特色是爲了讓咱們能夠自定義其擴展，仍是其自己就還不完善呢？我在調用JSONP的請求時，發現用fetch掉不一樣，後來在文檔上才發現其不支持JSONP的調用，所幸社區仍是很給力的找到了fetch-jsonp這個模塊，實現了對百度音樂接口的JSONP調用。fetch-jsonp使用也和fetch相似，代碼以下

fetchJsonp(url,{method: 'GET'})
　　.then((res) =>res.json())
　　.then((data) => {})

redux

使用了redux也已經有段時日了，我對redux的定義就是更好的管理組件的狀態，沒有redux的時候就像如今這個應用同樣，邏輯少狀態變化也還不太複雜，可是一旦邏輯複雜起來，各類組件狀態、界面耦合起來，就容易出岔子，那redux就是爲了解決這個而生的，讓咱們能夠更多地關注UI層，而下降對狀態的關注。以前也寫了些redux的文章，紙上得來終覺淺，絕知此事要躬行。

--------------------------更新---------------------------

已經在項目中加入了redux技術棧。

項目的一些待擴展計劃

封裝組件

無論組件封裝得好很差，我的感受其是提升水平很高效的方法，多練，繼續封裝出各式各樣的功能組件。

typescript

公司大概會在6月份開始，新的項目就要採用ts開發了，因此我也到時會在該項目中引人ts的語法，我如今的感受是使用ts後，先後端對接會更加輕鬆，不會有一些類型不匹配的低級錯誤，並且antd貌似和ts也能兼容得蠻好。

測試框架 

這部分其實我仍是沒什麼經驗的，先寫上吧，有機會會拿這個項目開刀，並寫心得。