詳解使用React全家桶搭建一個后臺管理系統(tǒng)

引子

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

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

目錄結(jié)構(gòu)

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

下面對目錄結(jié)構(gòu)作以下說明

1. 項目最初始是用create-react-app初始化的，create-react-app 是Facebook官方提供的react腳手架，也是業(yè)界最優(yōu)秀的 React 應(yīng)用開發(fā)工具之一;
2. 中間件目錄到時候可以引人日志中間件等;
3. container和components存放的都是react組件，區(qū)別是：只要和主頁樣式有關(guān)的組件就放在container中，和功能有關(guān)的模塊(比如我實現(xiàn)分裝的表格組件、彈出輸入框組件等)就應(yīng)放到components中;
4. 前端有些通用配置最好是存到全局(瀏覽器)中，這樣調(diào)用起來就不用引用了，方便;
5. ajax模塊需要自己實現(xiàn)的原因是到時候要是自己需要有跨域cors之類的需求，需要自定義多種Ajax請求(用fetch的情況下，未來fetch會越來越強(qiáng)大)

技術(shù)棧相關(guān)

雖然用到的技術(shù)棧眾多，但是自己也談不上熟練運用，多半是邊查API邊用的，所以只羅列些自己用相關(guān)的技術(shù)棧解決的點;

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 來進(jìn)行主題配置， 變量和其他配置方式可以參考 配置主題 文檔。

③一鍵發(fā)布到gh-pages：

用到了gh-pages,使用 npm run deploy 一鍵發(fā)布到自己的gh-pages上，姑且把gh-pages當(dāng)成生產(chǎn)環(huán)境吧，所以在修改config/webpack.config.dev.js 文件的同時也要對config/webpack.config.prod.js作出一模一樣的修改。

ps:盡管我是這樣發(fā)布到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是（螞蟻金服體驗技術(shù)部）經(jīng)過大量的項目實踐和總結(jié)，沉淀出的一個中臺設(shè)計語言 Ant Design，使用者包括螞蟻金服、阿里巴巴、口碑、美團(tuán)、滴滴等一系列知名公司，而且我從他們的設(shè)計理念也學(xué)到了很多關(guān)于UI、UX的知識。

該項目采用的是antd最新的版本2.10.0,由于2.x的版本和1.x的版本還是相差蠻大的，之前參考的項目(基于1.x)改起來太費勁，所以在組件那塊就干脆自己重新封裝了一遍。這部分知識點我建議還是看文檔，文檔解決不了扒扒源碼。

react-router(4.x)

react-router 4.x和2.x的差異又是特別的大，召喚文檔,網(wǎng)上基本上都還是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的出現(xiàn)，期待有更好的分析文章的出現(xiàn)，有機(jī)會我也會來總結(jié)下react-router(4.x)和(2.x)的差異。

fetch

先推薦這篇文章《傳統(tǒng)Ajax已死，F(xiàn)etch永生》，再推薦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);
}

但是其簡潔的特點是為了讓我們可以自定義其擴(kuò)展，還是其本身就還不完善呢？我在調(diào)用JSONP的請求時，發(fā)現(xiàn)用fetch掉不同，后來在文檔上才發(fā)現(xiàn)其不支持JSONP的調(diào)用，所幸社區(qū)還是很給力的找到了fetch-jsonp這個模塊，實現(xiàn)了對百度音樂接口的JSONP調(diào)用。fetch-jsonp使用也和fetch類似，代碼如下

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

redux

使用了redux也已經(jīng)有段時日了，我對redux的定義就是更好的管理組件的狀態(tài)，沒有redux的時候就像現(xiàn)在這個應(yīng)用一樣，邏輯少狀態(tài)變化也還不太復(fù)雜，但是一旦邏輯復(fù)雜起來，各種組件狀態(tài)、界面耦合起來，就容易出岔子，那redux就是為了解決這個而生的，讓我們可以更多地關(guān)注UI層，而降低對狀態(tài)的關(guān)注。之前也寫了些redux的文章，紙上得來終覺淺，絕知此事要躬行。

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

已經(jīng)在項目中加入了redux技術(shù)棧。

項目的一些待擴(kuò)展計劃

封裝組件

不管組件封裝得好不好，個人感覺其是提高水平很高效的方法，多練，繼續(xù)封裝出各式各樣的功能組件。

typescript

公司大概會在6月份開始，新的項目就要采用ts開發(fā)了，所以我也到時會在該項目中引人ts的語法，我現(xiàn)在的感覺是使用ts后，前后端對接會更加輕松，不會有一些類型不匹配的低級錯誤，而且antd貌似和ts也能兼容得蠻好。

測試框架

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。