React全家桶怎樣搭建後台管理系統
- php中世界最好的语言原創
- 2018-04-16 10:24:211165瀏覽
這次帶給大家React全家桶怎樣搭建後台管理系統，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"}}'
+ },
]
這裡利用了 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> <route></route> <route></route> </route>
4.x:
<route></route> <route></route> <route></route>
还有更多的特性和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也能兼容得蛮好。
测试框架
这部分其实我还是没什么经验的，先写上吧，有机会会拿这个项目开刀，并写心得。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是React全家桶怎樣搭建後台管理系統的詳細內容。更多資訊請關注PHP中文網其他相關文章！