ant design pro的採坑之旅 (動態建立選單、訪問mock資料、富文字編輯器)
最近公司做一個後臺管理系統,猶豫半天還是想用ant design,後來發現他們有現成的腳手架 ant design pro ( github地址 ),果斷拉程式碼下來執行起來。
一:ant design pro 專案目錄結構和流程
整體目錄大概長這個樣子
src裡面是這樣子
重要的就是mock檔案和src檔案咯,mock檔案裡面主要是用來本地構建請求返回的假資料(不是從伺服器返回的資料),src則是存放整個專案相關的檔案,接下來就重點講解一下。
common:只有menu.js和router.js 前者是定義的選單列表,這是因為ant design pro專案是寫死的選單列表 後面會講如何動態構建選單。後者是定義的整個專案的路由列表(也就是你訪問每一個頁面的路徑都需要提前在這裡定義好。)。
component:封裝的一些基礎UI元件(小零件)
layouts : ant design pro專案一些公共的元件比如:頭部、尾部、構建選單這些
routes:UI 元件(也就是每個路由對應的頁面元件檔案)
models:容器元件(用於元件的資料儲存,接收請求返回的資料等)
services:請求伺服器的介面列表、用於與後臺互動、傳送請求等
utils:封裝的一些工具
index.js :整個專案的入口 有使用dva(小女子還沒研究過,後面會深入研究。)
router.js:整個專案的路由入口 會有許可權判斷 (自己把utils檔案下面幾個檔案的程式碼好好讀一遍就能知道個大概了)
那麼我們就可以好好捋一捋整個流程了
1、首先你要訪問使用者列表,那你就必須先去common資料夾下的router.js檔案裡面定義
也就是將‘/userManage/userlist’這個路由指向routes資料夾下的User/list頁面。而其中dynamicWrapper方法則是將該頁面與models資料夾下的user、login關聯。只有關聯後,頁面才能訪問models的資料。(我自己嘗試後得知其他頁面關聯了的models也能訪問。也就是路由A關聯了user 路由B關聯device 那麼A頁面也是能訪問device的,B頁面是能訪問user的,但是如果都沒關聯customer,那A、B都是沒法訪問customer的,搞不懂為何這麼設計!!)
2、接下來就應該根據定義的路由去構建選單。
可以看出是由父節點選單path+子節點選單path組合而成
3、點選選單的時候是不是就跳轉到了‘../routes/User/list’頁面呢?
進入頁面的時候 是不是就應該請求列表資料?前面已經數過了 routes裡面是純UI元件,只負責頁面展示,那麼要展示的資料以及要提交給伺服器的資料都必須向models去請求,或者提交給models去處理。兩者要互動必須先connect起來。這樣在UI元件就可以通過this.props拿到models的資料。
@connect(({ user, loading }) => ({
user,
loading: loading.models.system,
}))
第一個user表示的是user這個model,也就是當前頁面要訪問那幾個models都必須這麼先關聯起來。loading是來自dva,可以監聽models的狀態。然後在頁面就可以開始請求。
componentDidMount() {
this.props.dispatch({ //dispatch相當於觸發一個action
type: 'user/userListfetch',// models資料夾下user檔案裡面effects下面的*userListfetch方法
payload: data // 提交的引數
});
}
3、然後我們再跟蹤到models資料夾下的user檔案。
namespace:表示改models的名稱,
state:表示這個models下儲存的資料,
effects:主要接收UI元件傳送過來的action,
reducers:資料處理,儲存到state.
*fetch(_, { call, put }) {
const response = yield call(queryUsers); // 請求services資料夾
yield put({ // 請求成功後 執行 reducers裡面的save方法
type: 'save',
payload: response,
});
},
save(state, action) {
return {
...state,
list: action.payload, // 把請求的結果放到state的list裡面
};
},
這樣 在routes/user/list裡面列印 this.props就一定是這樣的結構
{
user:{ // user對應的就是namespace
list:[....] ,// ....表示請求拿到的值
currentUser: {...},
menuData: [....],
}
........// 還有其他屬性 來自dva或者ant design pro自己封裝的東西 比如form、loading、routerData等等
}
4、繼續跟蹤到services資料夾下
就是向伺服器進行請求。
---------------------------------------------自此 整個流程結束---------------------------------------------------------
二、Ant Design Pro使用技巧之mock資料地址改為伺服器地址
第一步:package.json裡面加一行
"start": "cross-env ESLINT=none roadhog dev",
"start:no-proxy": "cross-env NO_PROXY=true ESLINT=none roadhog dev", // 表示配置代理伺服器的啟動方式
第二步:.roadhogrc.mock.js檔案
// 是否禁用代理
const noProxy = process.env.NO_PROXY === 'true';
// 將所有以/api/
開頭的GET
和POST
請求全部直接轉發至‘你的伺服器地址’
export default noProxy ? { 'GET /api/*': '你的伺服器地址','POST /api/*': '你的伺服器地址' } : delay(proxy, 1000);
第三步、啟動
npm start : 不適用代理伺服器 請求mock資料
npm run -r start:no-proxy :使用代理伺服器 請求伺服器資料
三、動態建立選單
四、富文字編輯器
因為專案所需的富文字編輯器比較簡單,糾結了很久選擇了react-draft-wysiwyg(支援把編輯器內容轉化成html、json等格式,也支援將html、json等格式的資料轉化成文字內容。)使用方法也很簡單,跟著官網的幾個demo走就可以了。
暫時就這麼多,以上全都是個人見解,有錯誤的地方希望大家指正,謝謝!!!
相關推薦
ant design pro的採坑之旅 (動態建立選單、訪問mock資料、富文字編輯器)
最近公司做一個後臺管理系統,猶豫半天還是想用ant design,後來發現他們有現成的腳手架 ant design pro ( github地址 ),果斷拉程式碼下來執行起來。 一:ant design pro 專案目錄結構和流程 整體目錄大概長這個樣子
weex採坑之旅(一)初識weex
按照官方文件搭好weex依賴環境後,安裝專案依賴包,執行npm run dev 和 npm run serve開啟watch模式和靜態伺服器。 然後開啟瀏覽器,輸入 http://localhost:8080/index.html,既可以看到 weex h5 的頁面,但
weex採坑之旅(二)JDK version環境搭建
官方文件上說明 安裝JDK version>=1.7 並配置環境變數 但是沒有給出相應的安裝步驟,因此在這裡先給出JDK相應的安裝步驟。 開啟如下網站,下載JDK version 選擇 Accept License Agreement,然後根據自己的系統下
webpack+react+node採坑之旅 (上)
前言 之前一直以為能力已經夠了,想出去找份前端的工作,後來才發現還是自己太差,面試官隨便一個問題就能把我問啞,比如,webpack、gulp、grunt這些工具瞭解多少。這兩天學習webpack,踩了不少坑,也學到不少東西,記錄下來以便後查。 說明 本
vue 整合ueditor(百度富文字編輯器)以及使用後端Java上傳圖片到伺服器,特別注意的大坑
1.import 引入ueditor時,在封裝元件中引入,不要在mian.js內引入,在main.js內引入會造成 1.Uncaught SyntaxError: Unexpected token : 這種錯誤,屬於是跨域問題,目前不清楚是什麼原因和原理,
圖片上傳功能(FastDFS圖片伺服器 kindEditor富文字編輯器)
第一步 : 新增jar包 Commons-io、fileupload,兩個jar包 第二步:在springmvc.xml中配置多媒體解析器 &
django-tinym(富文字編輯器)
1.安裝包 pip install django-tinymce 2.在settings.py中INSTALLED_APPS新增應用 INSTALLED_APPS = ( ... 'tinymce', ) 這一步主要將應用註冊下,讓Djang
js頁面顯示word編輯頁面 kindeditor(富文字編輯器)的使用
1、匯入js: 2、定義多行文字(不可見、給定name) 3、呼叫TT.createEditor 4、效果 1.1. 取文字編輯器中的內容 將編輯器的內容設定到原來的textarea控制元件裡。 editor.sync();
重構wangEditor(web富文字編輯器),歡迎指正!
1. 前言 之所以有這次重構,是因以下原因。 第一,bootstrap。做一個小小的web富文字編輯器,就依賴於bootstrap,未免有點小題大做。當時依賴於bootstrap是為了省去我繪製按鈕、下拉框和彈出框的時間,有些偷懶。因此,本次重構棄用bootstrap
Ubuntu搭建Hadoop的踩坑之旅(三)
namenode 結束 ctu mapreduce 分布 使用 framework 2.6 start 之前的兩篇文章介紹了如何從0開始到搭建好帶有JDK的Ubuntu的過程,本來這篇文章是打算介紹搭建偽分布式集群的。但是後來想想反正偽分布式和完全分布式差不多,所幸直接介紹
dotNet程序員的Java爬坑之旅(一)
是我 方法 轉java 自己的 java pri 也好 工作 計劃 仔細想了下還是轉java吧,因為後期不管是留在北京也好還是回老家也好,java的工作都會好找一點。現在的工作主要還是寫.net,目標是下一次離職的時候可以找到一份全職的java工作,我一直都覺得實踐
webpack入坑之旅(五)加載vue單文件組件
file loader clu html中 type 修改 mode hid extension 需要什麽? 在經過前面的四個練習,相信已經對於webapck有了一定的了解,現在我們就來一個綜合案例,進一步加深對於webpack的理解。 首先我們應該思考要解析.vue類型的
webpack入坑之旅(二)loader入門
pts 文章 加載 dep javascrip mode 這就是 插件 可能 這是一系列文章,此系列所有的練習都存在了我的github倉庫中vue-webpack 在本人有了新的理解與認識之後,會對文章有不定時的更正與更新。下面是目前完成的列表: 引子 在上一篇博客中我們已
webpack入坑之旅(三)webpack.config入門
boot edm com new 使用 ble 內容 require 以及 這是一系列文章,此系列所有的練習都存在了我的github倉庫中vue-webpack,在本人有了新的理解與認識之後,會對文章有不定時的更正與更新。下面是目前完成的列表: 在上面我們已經嘗試過了兩種對
webpack入坑之旅(一)不是開始的開始
targe base 增加 -i pre 版本 uil 靜態頁 obi 最近學習框架,選擇了vue,然後接觸到了vue中的單文件組件,官方推薦使用 Webpack + vue-loader構建這些單文件 Vue 組件,於是就開始了webpack的入坑之旅。因為原來沒有用過
dotNet程序員的Java爬坑之旅(二)
模式 最好的 https servlet 很多 過濾器 () 被調用 回調 囉裏囉唆的寫了一大堆,最後還是全刪除了。哎~ 言歸正傳,最近因爲發生了很多事情,所以更新的有嗲晚了,最近也一直在學習,但是感覺效率什麼的不是很高,這是不對的,反思一下,從這篇博文開始,打起精
dotNet程序員的Java爬坑之旅(三)之spring MVC篇一
www. let ref ide filter ESS pro enc require 使用maven構建springMVC項目,開發工具為IDEA 一、構建Maven項目,模板為WebApp 二、在pom文件中配置SpringMvc配置(springMvc需要以來serv
facenet採坑之旅,主要記錄一些用facenet過程中遇到的大大小小的問題
問題1:Unable to run align_dataset_mtcnn.py getting an attribute error module ‘facenet’ has no attribute ‘store_revision_info’ 使用anaconda的環境,將facen
小程式wepy踩坑之旅(五)----- 購物車的實現
首先大家可以看下演示效果 我先把封裝的幾個元件程式碼放到前面。 1.購物車數量加減cart-count.wpy元件 <template> <view class="cart-count"> <vi
小程式wepy踩坑之旅(四)----- 簡單的動畫
大家可以先看下官網小程式apianimation:https://developers.weixin.qq.com/miniprogram/dev/api/api-animation.html,看完之後推薦看一下http://www.jb51.net/article/102263