詳解使用React全家桶搭建一個后臺管理系統

引子

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

其實這套界面風格不僅僅可以作為后臺管理系統界面，也可以修改成一個可以展示項目并且美觀的博客。項目地址在這里(本地跑效果更佳)，如果有好的意見歡迎提issue或pr。

目錄結構

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

下面對目錄結構作以下說明

1. 項目最初始是用create-react-app初始化的，create-react-app 是Facebook官方提供的react腳手架，也是業界最優秀的 React 應用開發工具之一;
2. 中間件目錄到時候可以引人日志中間件等;
3. container和components存放的都是react組件，區別是：只要和主頁樣式有關的組件就放在container中，和功能有關的模塊(比如我實現分裝的表格組件、彈出輸入框組件等)就應放到components中;
4. 前端有些通用配置最好是存到全局(瀏覽器)中，這樣調用起來就不用引用了，方便;
5. 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"}}'
+ },
]

這里利用了 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))

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也能兼容得蠻好。

測試框架

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。