React全家桶怎樣搭建后臺(tái)管理系統(tǒng)

這次給大家?guī)鞷eact全家桶怎樣搭建后臺(tái)管理系統(tǒng)，React全家桶搭建后臺(tái)管理系統(tǒng)的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。

引子

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

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

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

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

1. 項(xiàng)目最初始是用create-react-app初始化的，create-react-app 是Facebook官方提供的react腳手架，也是業(yè)界最優(yōu)秀的 React 應(yīng)用開發(fā)工具之一;

2. 中間件目錄到時(shí)候可以引人日志中間件等;
3. container和components存放的都是react組件，區(qū)別是：只要和主頁樣式有關(guān)的組件就放在container中，和功能有關(guān)的模塊(比如我實(shí)現(xiàn)分裝的表格組件、彈出輸入框組件等)就應(yīng)放到components中;
4. 前端有些通用配置最好是存到全局(瀏覽器)中，這樣調(diào)用起來就不用引用了，方便;
5. ajax模塊需要自己實(shí)現(xiàn)的原因是到時(shí)候要是自己需要有跨域cors之類的需求，需要自定義多種Ajax請(qǐng)求(用fetch的情況下，未來fetch會(huì)越來越強(qiáng)大)

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

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

webpack(2.6)

①按需加載：

babel-plugin-import 是一個(gè)用于按需加載組件代碼和樣式的 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 樣式，同時(shí)修改 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 文件的同時(shí)也要對(duì)config/webpack.config.prod.js作出一模一樣的修改。

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

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

react-router(4.x)

react-router 4.x和2.x的差異又是特別的大，召喚文檔,網(wǎng)上基本上都還是2.x的教程，看過文檔之后，反正簡(jiǎn)而言之其就是要讓使用者更容易上手。印象最深的是以前嵌套路由寫法在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ī)會(huì)我也會(huì)來總結(jié)下react-router(4.x)和(2.x)的差異。

fetch

先推薦這篇文章《傳統(tǒng)Ajax已死，F(xiàn)etch永生》，再推薦API;

fetch是個(gè)好東西，好在簡(jiǎn)單，除了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);
}

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

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

redux

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

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

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

項(xiàng)目的一些待擴(kuò)展計(jì)劃

封裝組件

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

typescript

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

測(cè)試框架

這部分其實(shí)我還是沒什么經(jīng)驗(yàn)的，先寫上吧，有機(jī)會(huì)會(huì)拿這個(gè)項(xiàng)目開刀，并寫心得。

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注Gxl網(wǎng)其它相關(guān)文章！

推薦閱讀：

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com