鍘熸枃锛欻owtocreateaReactfrontendandaNode/Expressbackendandconnectthem浣滆€咃細Jo茫oHenrique璇戣€咃細鍗氳僵鏈枃灏嗘寚瀵间綘鍒涘缓涓€涓畝鍗曠殑Reactapp锛屼互鍙婁竴涓畝鍗曠殑Node/ExpressAPI鏉ュ皢涓よ€呯浉浜掕繛鎺ャ€傛垜涓嶄細璇︾粏浠嬬粛鏈枃涓彁鍒扮殑浠讳綍鎶€鏈紝浣嗗鏋滄偍鎯充簡瑙ｆ洿澶氫俊鎭紝鎴戜細鐣欎笅閾炬帴銆傛偍鍙互鍦ㄦ垜涓烘湰鏁欑▼鍒涘缓鐨勪唬鐮佸瓨鍌ㄥ簱涓壘鍒版簮浠ｇ爜銆傝瘧娉細鍢匡紝鎴戣繕鍐欎簡Demo鐨?..client-react-001,api-node-001杩欓噷鐨勭洰鏍囨槸涓烘偍鎻愪緵涓€涓叧浜庡浣曡缃拰杩炴帴鍓嶇瀹㈡埛绔拰鍚庣鐨勫疄鐢ㄦ寚鍗楀簲鐢ㄧ▼搴忔帴鍙ｃ€傚湪鎴戜滑寮€濮嬩箣鍓嶏紝璇风‘淇濇偍鐨勬満鍣ㄤ笂瀹夎浜哊ode.js鍒涘缓涓€涓」鐩富鐩綍鍦ㄧ粓绔腑锛屽鑸埌鎮ㄨ淇濆瓨椤圭洰鐨勭洰褰曘€傜幇鍦ㄤ负鎮ㄧ殑椤圭洰鍒涘缓涓€涓柊鐩綍骞跺鑸埌鍏朵腑锛歮kdirmy_awesome_projectcdmy_awesome_project鍒涘缓涓€涓猂eact搴旂敤绋嬪簭杩欎釜杩囩▼闈炲父绠€鍗曘€傛垜浠皢浣跨敤Facebook鐨刢reate-react-app鏉?..鎮ㄧ寽瀵逛簡锛屽彧闇€鍒涘缓涓€涓悕涓篶lient鐨勫簲鐢ㄧ▼搴忥細npxcreate-react-appclientcdclientnpmstart璁╂垜浠湅鐪嬭繖閲屽彂鐢熶簡浠€涔堬細1.鍒涘缓涓€涓猂eact搴旂敤绋嬪簭npm鐨刵px骞跺皢鍏跺懡鍚嶄负client銆?.cd锛堟敼鍙樼洰褰曪級杩涘叆瀹㈡埛绔洰褰曘€?.鍚姩搴旂敤绋嬪簭銆傚湪娴忚鍣ㄤ腑璁块棶锛歨ttp://localhost:3000/濡傛灉涓€鍒囨甯革紝鎮ㄥ皢鐪嬪埌React娆㈣繋椤甸潰銆傛伃鍠滐紒杩欐剰鍛崇潃鎮ㄧ幇鍦ㄦ湁涓€涓湪鏈湴璁＄畻鏈轰笂杩愯鐨勫熀鏈琑eact搴旂敤绋嬪簭銆傛槸涓嶆槸寰堢畝鍗曪紵瑕佸仠姝eact搴旂敤绋嬪簭锛屽彧闇€鍦ㄧ粓绔腑鎸塁trl+c銆傚垱寤轰竴涓狤xpress搴旂敤绋嬪簭濂界殑锛岃繖灏嗕笌鍓嶉潰鐨勭ず渚嬩竴鏍风畝鍗曘€備笉瑕佸繕璁拌繑鍥為」鐩殑鏍规枃浠跺す銆傛垜浠皢浣跨敤ExpressApplicationGenerator蹇€熺敓鎴愬簲鐢ㄧ▼搴忕殑妗嗘灦锛屽苟灏嗗叾鍛藉悕涓篴pi锛歯pxexpress-generatorapicdapinpminstallnpmstart璁╂垜浠湅鐪嬭繖閲屽仛浜嗕粈涔堬細1.浣跨敤npm鐨刵px鍏ㄥ眬瀹夎express-generator銆?銆佷娇鐢╡xpress-generator蹇€熷垱寤轰竴涓猠xpress搴旂敤锛屽苟鍛藉悕涓猴細api銆?.杩涘叆API鐩綍銆?.瀹夎鎵€鏈変緷璧栭」銆?.鍚姩搴旂敤绋嬪簭銆傚湪娴忚鍣ㄤ腑锛岃浆鍒帮細http://localhost:3000/濡傛灉涓€鍒囬『鍒╋紝鎮ㄥ皢鐪嬪埌Express娆㈣繋椤甸潰銆傛伃鍠滐紒杩欐剰鍛崇潃鎮ㄧ幇鍦ㄦ湁涓€涓湪鏈湴璁＄畻鏈轰笂杩愯鐨勫熀鏈珽xpress搴旂敤绋嬪簭銆傛槸涓嶆槸寰堢畝鍗曪紵瑕佸仠姝㈡偍鐨凟xpress搴旂敤绋嬪簭锛屽彧闇€鍦ㄧ粓绔腑鎸塁trl+c銆傚湪Express涓厤缃柊璺敱锛岀幇鍦ㄦ槸瀹為檯鎿嶄綔鏃堕棿銆傛槸鏃跺€欐墦寮€浣犳渶鍠滄鐨勪唬鐮佺紪杈戝櫒锛堟垜浣跨敤鐨勬槸VSCode锛夊苟瀵艰埅鍒颁綘鐨勯」鐩枃浠跺す銆傚鏋滄偍鍛藉悕浜哛eact搴旂敤绋嬪簭瀹㈡埛绔拰Express搴旂敤绋嬪簭api锛屾偍浼氬彂鐜颁袱涓富瑕佹枃浠跺す锛歝lient鍜宎pi銆?.鍦╝pi鐩綍涓嬶紝鎵撳紑bin/www锛屾妸绗?5琛岀殑绔彛鍙蜂粠3000鏀规垚9000銆傛垜浠悓鏃惰繍琛屼袱涓簲鐢紝杩欐牱鍙互閬垮厤鍑虹幇闂銆備慨鏀圭粨鏋滃涓嬶細//my_awesome_project/api/bin/wwwvarport=normalizePort(process.env.PORT||'9000');2.鍦╝pi/routes涓婏紝鍒涘缓涓€涓猼estAPI.js鏂囦欢骞剁矘璐翠互涓嬩唬鐮侊細varexpress=require("express");varrouter=express.Router();router.get("/",function(req,res,next){res.send("API宸ヤ綔姝ｅ父");});module.exports=router;3.鍦╝pi/app.js鏂囦欢涓紝鍦ㄧ24琛屾彃鍏ヤ竴涓柊璺敱锛歛pp.use("/testAPI",testAPIRouter);4.骞跺湪绗?琛屽紩鍏ヤ竴涓柊鐨勮矾鐢辨枃浠秜artestAPIRouter=require("./routes/testAPI");5.鎭枩锛佹偍宸茬粡鍒涘缓浜嗕竴鏉℃柊璺嚎銆傚鏋滃惎鍔╝pi搴旂敤绋嬪簭锛堝湪缁堢涓紝瀵艰埅鍒癮pi鐩綍锛岄敭鍏pmstart锛夛紝骞跺湪娴忚鍣ㄤ腑璁块棶http://localhost:9000/testAPI锛屾偍灏嗙湅鍒颁互涓嬫秷鎭細API姝ｅ湪姝ｅ父宸ヤ綔銆傝瘧娉細浣犲彲浠ユ案杩滀娇鐢╪pm妯″潡鏉ュ畧鎶や綘鐨勮繘绋嬶紝杩欐牱浠ュ悗浣犲氨鍙互鍦ㄥ叾浠栨満鍣ㄤ笂閮ㄧ讲鏈嶅姟浜嗐€傚皢React瀹㈡埛绔繛鎺ュ埌ExpressAPI1銆傝鎴戜滑浣跨敤浠ｇ爜缂栬緫鍣ㄦ墦寮€瀹㈡埛绔洰褰曞苟缂栬緫app.js銆?.鎴戝皢浣跨敤FetchAPI浠巃pi妯″潡涓幏鍙栨暟鎹€傚湪Class澹版槑涔嬪悗鍜宺ender鏂规硶涔嬪墠绮樿创浠ヤ笅浠ｇ爜锛歝onstructor(props){super(props);this.state={apiResponse:""};}callAPI(){fetch("http://localhost:9000/testAPI").then(res=>res.text()).then(res=>this.setState({apiResponse:res}));}componentWillMount(){this.callAPI();}3.鍦ㄦ覆鏌撴柟娉曚腑锛屾偍浼氭壘鍒颁竴涓?p>鏍囩銆傝鎴戜滑鐢ㄥ畠鏉ユ樉绀篈PI鐨勫唴瀹广€?pclassName="App-intro">;{this.state.apiResponse}
杩欐槸锛屾枃浠跺涓嬫墍绀猴細璁╂垜浠湅鐪嬭繖閲屽仛浜嗕粈涔堬細1.鍦ㄧ6鍒?琛岋紝鎴戜滑鎻掑叆鍒濆鍖栭粯璁ょ姸鎬佺殑鏋勯€犲嚱鏁般€?.鍦ㄧ11鍒?6琛岋紝鎴戜滑鎻掑叆鏂规硶callAPI()锛屽畠灏嗕粠API涓幏鍙栨暟鎹苟灏嗗叾瀛樺偍鍦╰his.state.apiResponse涓€?.鍦ㄧ18鍒?0琛岋紝鎴戜滑鎻掑叆涓€涓悕涓篶omponentDidMount()鐨凴eact鐢熷懡鍛ㄦ湡鏂规硶锛岃鏂规硶灏嗗湪鎸傝浇缁勪欢鍚庢墽琛宑allAPI()鏂规硶銆?.鏈€鍚庯紝鍦ㄧ29琛岋紝鎴戜娇鐢?p>鏍囪鍦ㄦ垜浠殑瀹㈡埛绔〉闈笂鏄剧ず涓€涓钀斤紝鍏朵腑鍖呭惈鎴戜滑浠嶢PI鑾峰彇鐨勬枃鏈€傛病鏈夐敊璇紒锛丆ORS锛熷湪杩欎竴鐐逛笂锛屾垜浠嚑涔庡畬鎴愪簡銆傚綋鎴戜滑鍚姩搴旂敤绋嬪簭锛堝鎴风鍜孉PI锛夊苟璁块棶http://localhost:3000/鏃讹紝鎴戜滑鍙戠幇骞舵病鏈夌湅鍒伴鏈熺殑缁撴灉銆傚鏋滀綘鎵撳紑chrome寮€鍙戣€呭伐鍏凤紝浣犱細鍦ㄦ帶鍒跺彴鎵惧埌鍘熷洜锛欶ailedtoloadhttp://localhost:9000/testAPI:No'Access-Control-Allow-Origin'headerispresentontherequestedresource銆傚洜姝や笉鍏佽璁块棶婧愨€渉ttp://localhost:3000鈥濄€傚鏋滀笉閫忔槑鐨勫搷搴旀弧瓒虫偍鐨勯渶姹傦紝璇峰皢璇锋眰鐨勬ā寮忚缃负鈥渘o-cors鈥濅互鍦ㄧ鐢–ORS鐨勬儏鍐典笅鑾峰彇璧勬簮銆傝繖寰堝鏄撹В鍐炽€傛垜浠彧闇€瑕佸皢CORS娣诲姞鍒版垜浠殑API涓互鍏佽璺ㄥ煙璇锋眰銆傚叧浜嶤ORS锛屾垜浠彲浠ユ煡鐪嬩笂闈㈢殑閾炬帴浠ヨ幏鍙栨洿澶氫俊鎭€?.瀵艰埅鍒扮粓绔腑鐨刟pi鐩綍骞跺畨瑁匔ORS渚濊禆椤广€俷pm瀹夎--savecors2銆傛墦寮€my_awesome_project/api/app.js鏂囦欢骞舵坊鍔犱互涓嬩唬鐮侊細varcors=require("cors");...app.use(cors());APIapp.js鏂囦欢鏈€缁堝簲璇ユ槸Hereitis:beautifullydone銆傛垜浠畬浜嗭紒锛佺幇鍦ㄤ娇鐢╪pmstart鍚姩搴旂敤绋嬪簭瀹㈡埛绔拰API銆傝闂甴ttp://localhost:3000/锛屼綘浼氱湅鍒板涓嬪唴瀹癸細褰撶劧锛岃繖涓」鐩殑浠ｇ爜涓嶄細寰堝锛屼絾瀹冩槸涓€涓叏鏍堥」鐩殑寮€濮嬨€傛偍鍙互鍦ㄦ瀛樺偍搴撲腑鎵惧埌璇ラ」鐩殑鎵€鏈変唬鐮併€傛帴涓嬫潵锛屾垜灏嗘坊鍔犳暀绋嬶紝渚嬪灏嗗畠杩炴帴鍒癕ongoDB鏁版嵁搴擄紝鐢氳嚦鍦―ocker瀹瑰櫒涓繍琛屽畠銆傝瘧娉細杩欐槸鎴戦儴缃茬殑搴旂敤鐨勫湴鍧€锛屾垜浼氬湪涓嬩竴绡囨枃绔犱腑缈昏瘧銆傚氨鍍忔垜鐨勪竴涓湅鍙嬪鎴戣鐨勶細BeStrongandCodeOn!!!...鍒繕浜嗕粖澶╀篃鏄編濂界殑涓€澶煒樻湰鏂囧凡鑱旂郴鍘熶綔鑰呭拰鎺堟潈缈昏瘧锛岃浆杞借淇濈暀鍘熸枃閾炬帴杞浇