AntdPro 入門分享beta

2021-10-08 11:17:46 字數 1821 閱讀 3036

按照常理需要對前端有一定的了解,尤其是es6和react的了解,以antdpro為模板快速開啟專案,可以發揮模仿的功夫照著做,我認為大概了解的有如下2個文件

es6,js新的標準,目前有更為新的標準,目前大家普遍解析比較好的還是es6這個版本

react,大致了解,專案就是基於這個開發

本專案路由配置位於config/router.config.js檔案中,框架基於umi建立,配置檔案約定式的讀取根目錄下的.umirc.ts或者config/config.js,如果想知道為什麼這樣定義,可以去檢視umi的原始碼,他的很多檔案或者路由都是約定好的目路或者檔案,再往下不在說這個事情,想不通的大概都是定義好的位置。下面介紹乙個例子:

// user

,,//component,路由指向的頁面,預設讀取src/pages下的頁面

,,// name:多語言配置,檔案在src/locales下面,icon:選單的圖示

],},

這個模仿src/pages下的頁面即可,有大量的例項

資料請求大致為頁面--》redux--》fetch--》redux--》頁面,大致是這樣乙個過程,redux是狀態管理的庫,fetch是瀏覽器支援的資料請求的介面,和ajax、axio差不多,可自行去查詢相關資料,下面詳細介紹下資料的呼叫

如下是src/pages下的乙個頁面裡的**,做一下解釋

import from 'dva';// dva是umi裡包含的功能,antdpro是基於umi開發,關係解釋

@connect(() => ())

// 通過裝飾器就可以把react和redux聯絡在一起了,通過dispatch觸發redux事件就可以完成資料請求和狀態的管理

class analysis extends component

}export default analysis;

src/models下的檔案為例:

import from '@/services/api';//引用的介面請求,@代表src目路,熟悉webpack的就能很容易懂,可以自定義任意的識別符號對應任意的目錄

export default )

state: ,

effects: ) , )

type: 'setloadedstatus',// 對應reducers裡的"setloadedstatus"

payload: loadedallnotices,

});},

reducers: ) ;

},};

以上是大致解釋,通常這些處理簡單的需求足夠

這一步比較簡單,就是對fetch封裝後的函式的呼叫,位置在src/services下的檔案,對應redux介紹中的api介面的引用,方法只介紹post和 get方法,下面拿其中乙個例子說明:

import from 'qs';//把物件轉換成比如:param1=1¶m2=2 這種拼接到url後面的引數的函式

import request from '@/utils/request';// fetch封裝後的函式,進行資料請求

export async function queryrule(params) `);//get形式,method:"get",這個就可以省略,比如下面的post就不能省略

}...params,

method: 'delete',

},});

}

Git入門分享

什麼叫版本控制 首先是需要初始化資料夾 git init 建立乙個.git的隱檔案,裡面含有初始化的git倉庫中所有的必須檔案,這些都是git倉庫的骨幹將檔案工作區加入到版本控制倉庫的快取區中 git add 檔名 新增的是指定的檔案到快取區 git add 將所有檔案或所有非空資料夾加入到快取區第...

Javaweb入門專案分享6

分享幾個專案原始碼!1,電子 專案 採用了struts spring hibernate,資料庫使用了mysql。2,crm客戶關係管理系統 沒有使用框架,採用了jsp servlet,資料庫使用了oracle。3,投票管理系統 採用了struts spring hibernate,資料庫使用了my...

scrapy 自學入門demo分享

本文基於python 3.7.0,win10平台 2018 08 完整專案 注意環境變數是否配置成功 為了安裝順利,請備好梯子安裝過程中注意以下報錯資訊 microsoft visual c 14.0 is required.get it with microsoft visual c build ...