当前位置: 首页 > 后端技术 > Node.js

基于React.js开发后台管理系统全过程(五)

时间:2023-04-03 20:10:39 Node.js

澶忓ぉ濂界儹~鏈枃鎺ㄨ崘寮€鐫€绌鸿皟闃呰馃槉馃憠闅忚韩灏忕┖璋冪敤榛戠鎶€锛屾墜鏈虹鍙互鍚硅劯锛岀數鑴戠鏆傛椂娌℃湁瀹炵幇锛屼互鍚庝細缁х画浼樺寲~锛?.杩涗竴姝ヤ紭鍖栫敤鎴蜂綋楠屻€傜洰鍓嶇敤鎴风涓€娆¤闂甽ocalhost:3000浼氳嚜鍔ㄨ烦杞埌棣栭〉锛屼絾鏄乏杈圭殑棣栭〉鍦ㄧ涓€娆℃覆鏌撶殑鏃跺€欑‘瀹炴病鏈夎閫変腑銆傚彲浠ョ湅鍒板綋antd閫変腑瀹冪殑鏃跺€欏苟娌℃湁鍙樻垚钃濊壊銆傝繖涓В鍐虫柟妗堜篃寰堢畝鍗曘€俛ntd鏈夊皝瑁呭ソ鐨凙PI锛屽彲浠ョ洿鎺ヤ娇鐢ㄣ€傚彧闇€鍦?Menu>缁勪欢涓娇鐢ㄧ幇鏈夌殑API銆俤efaultSelectedKeys={[siderBarList[0].key]}銆傝嚦浜庝负浠€涔堥噷闈㈢殑鍙橀噺瑕佽繖鏍峰啓锛岃繖涓暀缁欏ぇ瀹跺幓鎬濊€冦€傛湁鍏磋叮鐨勫彲浠ュ弬鑰冭繖涓摼鎺ヤ腑渚ц竟鏍忔覆鏌撳彉閲忕殑瀹氫箟銆傚熀浜嶳eact.js寮€鍙戝悗鍙扮鐞嗙郴缁熺殑鍏ㄨ繃绋嬶紙浜旓級鎺ヤ笅鏉ワ紝杩涘叆棣栭〉鏃朵細鑷姩娓叉煋棣栭〉鐨刄I棰滆壊鍝釜鍒楄〃锛屽埛鏂帮紝铏界劧椤甸潰杩樺湪浣滅敤锛屼絾鏄竴鏃﹀埛鏂帮紝UI鍥炬爣浼氶噸鏂板嚭鐜板湪棣栭〉锛岃繖涓嶆槸鎴戞兂瑕佺殑鏁堟灉銆傚湪杩欓噷锛屾垜浣跨敤浜嗕竴绉嶆瀬鍏朵笉鏄庣‘鐨勬柟娉曟潵瀹屾垚杩欎釜浠诲姟銆傝櫧鐒朵笉寤鸿璇昏€呬娇鐢紝浣嗘槸鏁堟灉鏄畬鍏ㄥ彲浠ヨ揪鍒扮殑锛佹垜鍦╯idebar缁勪欢涓畾涔変簡涓€涓彉閲弍ath鏉ュ瓨鏀惧綋鍓島rl鐨勫湴鍧€锛屽苟灏嗕箣鍓嶇殑dashboard鍦板潃鏇挎崲涓虹┖瀛楃涓诧紝杩欐牱鍗充娇鎴戞槸antd涓殑APIdefaultSelectedKeys={[path]}涔熷彲浠ュ畬缇庡~鍏呭湪鐢ㄦ埛鐣岄潰鍒锋柊鍚庯紝娣¤摑鑹茬殑鑳屾櫙鑹蹭緷鐒朵細姝g‘鍛堢幇鍦ㄧ敤鎴疯韩涓娿€?>.<)铏界劧杩欎釜鏂规硶寰堜笉姝e畻锛屼絾鍏堣繖鏍峰惂锛屼互鍚庝細鏇存柊鍏朵粬鐨勬柟娉曘€?---琛ュ厖锛氱洰鍓峝efaultSelectedKeys={[path]}鏀逛负selectedKeys={[path]}鍥犱负default...鍙細鍦ㄩ〉闈㈠姞杞芥椂娓叉煋涓€娆★紝鑰宻elected浼氬姩鎬佹覆鏌撱€傜綉椤靛厛涓嶈浜嗭紝鍐嶈涓€涓澶栫殑鐭ヨ瘑鐐癸紝涓€浜涚綉椤垫晥鏋滅殑瀹炵幇鎴戜笉鎯崇畝鍗曢噸澶嶃€傛垜鏇村笇鏈涜兘閫氳繃杩欎釜椤圭洰瀛﹀埌鏇村鐨勯澶栫煡璇嗐€傚鏋滄垜鍙槸涓轰簡缁撴灉鍘诲疄鏂斤紝鑰屽繕浜嗗甫涓婅嚜宸辩殑鎬濇兂锛岄偅瀛﹁捣鏉ユ槸澶氫箞鐨勪箯鍛炽€侻aterialUI涓娇鐢ㄤ簡jss鐨勬牱寮忥紝瀹冪殑鍐欐硶鍜宭ess棰勭紪璇戝櫒绫讳技锛屼絾鏄槸鐪熸渚濊禆js鏂囦欢涓殑鍐欐硶銆備竴寮€濮嬩笉涔犳儻锛屼絾鏄啓鐨勫ソ鍍忕湡鐨勫緢鑸掓湇銆傞鍏堬紝鎴戜滑鍦―ashboard涓垱寤轰竴涓猻tyle.js鏂囦欢锛屽皢浠庡畼鏂瑰鍒剁殑缁勪欢灞炴€у鍒跺埌杩欎釜鏂囦欢涓€傚厛浠嬬粛涓€涓噸瑕佺殑鏍稿績hook锛宮akeStyles銆備粖澶╁materialUI鐨凙PI鐮旂┒浜嗗緢涔咃紝鎵€浠ユ洿鏂扮殑寰堝皯.......杩樻槸閭e彞璇濓紝鎴戜滑鍦ㄥ涔犵殑杩囩▼涓苟涓嶆槸涓轰簡鐩殑鑰屽疄鐜扮殑鐩殑锛屾槸鍚︽槸瀛︿範杩囩▼涓涔犵殑鏃х煡璇嗘垨鏂颁簨鐗╋紝鏄渶瀹濊吹鐨勩€傚揩鐐癸紒