1.nodejsåå端å离ï¼
nodejsåå端å离ï¼
åå端å离åä¸å离åªä¸ªé度快
åå端å离å¼ã
åå端å离åå¯ä»¥å¾å¥½ç解å³åå端åå·¥ä¸åçé®é¢ï¼å°æ´å¤ç交äºé»è¾åé ç»å端æ¥å¤çï¼èå端åå¯ä»¥ä¸æ³¨äºå ¶æ¬èå·¥ä½ãèå端å¼å人ååå¯ä»¥å©ç¨nodejsæ¥æ建èªå·±çæ¬å°æå¡å¨ï¼ç´æ¥å¨æ¬å°å¼åï¼ç¶åéè¿ä¸äºæ件æ¥å°api请æ±è½¬åå°åå°ï¼è¿æ ·å°±å¯ä»¥å®å ¨æ¨¡æ线ä¸çåºæ¯ï¼å¹¶ä¸ä¸åå°è§£è¦ãå端å¯ä»¥ç¬ç«å®æä¸ç¨æ·äº¤äºçæ´ä¸ä¸ªè¿ç¨ï¼ä¸¤è é½å¯ä»¥åæ¶å¼å·¥ï¼ä¸äºç¸ä¾èµï¼å¼åæçæ´å¿«ï¼èä¸åå·¥æ¯è¾åè¡¡ã
å¨åå端å离çåºç¨æ¨¡å¼ä¸ï¼åç«¯ä» è¿åå端æéçæ°æ®ï¼ä¸å渲æHTML页é¢ï¼ä¸åæ§å¶å端çææãè³äºå端ç¨æ·çå°ä»ä¹ææï¼ä»å端请æ±çæ°æ®å¦ä½å è½½å°å端ä¸ï¼é½ç±å端èªå·±å³å®ï¼ç½é¡µæç½é¡µçå¤çæ¹å¼ï¼AppæAppçå¤çæ¹å¼ï¼ä½æ 论åªç§å端ï¼æéçæ°æ®åºæ¬ç¸åï¼åç«¯ä» éå¼åä¸å¥é»è¾å¯¹å¤æä¾æ°æ®å³å¯ã
å¦ä½å¨åå端项ç®çªåºç½ç»ä¼å¿ 1.åå端å离çæ¶æï¼1.åå端ä¸å离ï¼é¡µé¢åæ°æ®é½æ¯åä¸ä¸ªæå¡å¨è¿åçã
2.åå端å离ï¼1.å端æå¡å¨ï¼å¤ç请æ±ï¼å è½½æ°æ®ï¼è¿åååº
2.å端æå¡å¨ï¼è¿å页é¢ï¼æ°æ®é¨åéè¦ä»å端å è½½ï¼åéå¼æ¥è¯·æ±ã
2.åå端å离çä¼å¿ï¼1.å端ï¼è´è´£é¡µé¢çæ¾ç¤ºææï¼ç¨æ·çä½éªï¼æµè§å¨çå ¼å®¹æ§å端ï¼?目源码php版ftp源码è´è´£æå¡å¨ç稳å®æ§å¹¶åæ§ï¼æé«æå¡å¨æ§è½ã2.并è¡å¼åï¼æé«å¼åæçã3.å¯ä»¥å©ç¨å®¢æ·ç«¯æ¥å¤çä¸é¨åæ°æ®ï¼éä½æå¡å¨çååã4.å端è¿åçé误信æ¯ï¼ä¸ç´è§å°å±ç¤ºç»ç¨æ·ãæå¡å¨
å端
è¿ç»´
åºå车åºå®
ç²¾éæ¨è
广å
ä¼ ç»MVCæ¶æååå端å离æ¶æ模å¼å¯¹æ¯
ä¸è½½Â·0è¯è®º
å¹´2ææ¥
åå端æ¶æ设计
é 读·0è¯è®ºÂ·0ç¹èµ
å¹´5ææ¥
nginxæ建åå端å离æ¶æ
é 读·0è¯è®ºÂ·4ç¹èµ
å¹´8ææ¥
åå端å离æ¶ææ¦è¿°
é 读·0è¯è®ºÂ·0ç¹èµ
å¹´6æ8æ¥
ç®åäºè§£åå端å离æ¶æï¼MVVMï¼
é 读·0è¯è®ºÂ·2ç¹èµ
å¹´3æ2æ¥
åå端åºæ¬æ¶æ
é 读·0è¯è®ºÂ·3ç¹èµ
å¹´6æ4æ¥
ä»æ¥å¿ çï¼è¶ ç«ççé©å½é©å§APPï¼èµ¶å¿«ä¸è½½ï¼
ç²¾éæ¨è
广å
åå端å离æ¶æï¼è¶ å ¨é¢è¯¦è§£~
é 读·1è¯è®ºÂ·ç¹èµ
å¹´ææ¥
çµåç³»ç»æ¶ææ»è®ºç¯
é 读·0è¯è®ºÂ·0ç¹èµ
å¹´3ææ¥
åå端å离æ¡æ¶çå®ç¨åä¼ç¹
é 读·0è¯è®ºÂ·2ç¹èµ
å¹´8æ6æ¥
åå端å离æ¶æçç¹ç¹åå«æ¯ä»ä¹ï¼
é 读·0è¯è®ºÂ·0ç¹èµ
å¹´ææ¥
åå端å离æ¶æ设计
é 读·0è¯è®ºÂ·3ç¹èµ
å¹´1ææ¥
åå端å离å¼åæ¶æ
é 读·6è¯è®ºÂ·3ç¹èµ
å¹´6æ7æ¥
Node.jsåWebå端ä¼å¿ä¸ºä»ä¹è¿ä¹å¤§ï¼
é 读·0è¯è®ºÂ·1ç¹èµ
å¹´3æ6æ¥
åºäºNodeJSçåå端å离
é 读·0è¯è®ºÂ·3ç¹èµ
å¹´5ææ¥
ææææ建åå端å¼åæ¡æ¶
é 读·è¯è®ºÂ·ç¹èµ
å¹´8ææ¥
åå端å离ææ¯ââå端æ¡æ¶
é 读·2è¯è®ºÂ·2ç¹èµ
å¹´4ææ¥
åå端å离æ¶æææ¯
é 读·0è¯è®ºÂ·0ç¹èµ
å¹´3æ9æ¥
åå端å离çä¼å¿æ¯ä»ä¹ï¼
é 读·0è¯è®ºÂ·2ç¹èµ
å¹´æ9æ¥
å端ææ¯ä½ç³»æ¡æ¶
é 读·0è¯è®ºÂ·2ç¹èµ
å¹´8ææ¥
å»é¦é¡µ
ççæ´å¤çé¨å 容
å¦ä½æ£ç¡®ç解软件系ç»æ¶æçåå端å离ï¼
é¦å ï¼è½¯ä»¶ç³»ç»æ¶æçåå端å离æ´å¤æ¯å¨è¿å å¹´ä¼´éäºèç½ççè¡ä¸ºæé«å端ä¸å端交äºçååºéçï¼æåç¨æ·çä½éªè¿è¡è¡çåºäºåå端å离æ¶æãå¦ï¼VueãNodeJSä¸å¾®æå¡æ¶æç»åãå端页é¢è¿è¡UIå±ç¤ºææ渲æï¼å端è´è´£ç¼åAPIæå¡è¿è¡æ°æ®æä¾ï¼ä¹å¯ä»¥å¼å ¥NodeJSæ¥ä½ä¸ºæ¡¥æ¢æ¶æ¥å端APIè¾åºçJSONï¼è¿åå端è¿è¡é¡µé¢å±ç°ã
å ¶æ¬¡ï¼åºäºåå端å离æ¶æä¸æ¹é¢æåååºé度ï¼å°æ°æ®è®¡ç®çè¿ç¨å¨ä¸é´å±å¤çï¼å端è¿è¡å±ç¤ºï¼é¿å ä¼ ç»ç大éæ°æ®è¯·æ±æå¡å¨çåååºäºä¸é´å±å¨å é¨å¤çæ¼æ¥å®æï¼æ§è½å¾å°äºæåï¼ä»¥å¤ç»ä»¶ãç段ãå¡çç模å¼å®ç°å¹¶è¡çå è½½ãæ¾ç¤ºï¼å¨éWiFIç3Gã2Gçå¼±ç½ç»ç¯å¢ä¸ä¼å¿æ´ä¸ºææ¾ï¼æ¨¡æ¿å¹¶è¡å è½½ï¼ä¼å å è½½ä¼å æ¾ç¤ºï¼æåç¨æ·ç交äºä½éªã
æåï¼ä»ç»å ¸çMVCæ¶æå°SSMãSSHçJavaæ¡æ¶æ¶ä»£ï¼åå°å端æ¡æ¶å¦ï¼AngularJSãVueçï¼è½ç¶ææ¯ãæ¶æä¸ç´å¨æ¼åè¿æ¥æ¬è´¨ä¸åæ¯ä¸ºäºæ´æ¹ä¾¿ç解å³éæ±ï¼åå端å离æ¶ææ´å¤çä¹æ¯å®ç°è§£è¦çè¿ç¨ï¼ä¸å°å端ä¸å端ç»å®ï¼è¿ä¹ä¸SOAçç念æ¯ç¸å»åçï¼åºäºä¼ä¸æå¡æ»çº¿å®ç°åºç¨ç³»ç»å¯¹æ¥çæ¾è¦åï¼ä»¥ææç模å¼å°åºç¨ãåæ®ãæ°æ®è¿è¡ææçè¿éä¸å¯¹æ¥ï¼ä»¥ç»ä»¶æ建ãå¹³å°æ建ãæ¶ææ¯æç模å¼å ±åé¸å»ºä¼ä¸çä¿¡æ¯å建设ï¼ä»¥æ´ä¸ä¸çå¹³å°å®ç°å ¶ä¸ä¸é¢åçå·¥ä½ï¼å©åä¼ä¸ä¿¡æ¯åçåå±ã
nodejs-koa2ï¼mvc模å¼ï¼åå端å离å端设计åå端å离ï¼å端nodejsè¿è¡ç¯å¢ï¼ä½¿ç¨koa2éæè´è´£èµæºåé ä¸ç¨æ·äº¤äºï¼å®ç°tokenéªè¯ç¨æ·èº«ä»½ï¼è·¯ç±æ§å¶ãçï¼
èªè¡ç¾åº¦è§£å³ï¼
"program":"${ workspaceFolder}\app.js"
æ¤å¤å°±æ¯æ¯å°app.jsä½ä¸ºå¯å¨æ件ã${ workspaceFolder}ä»£è¡¨æ ¹ç®å½ï¼vscå¯å¨æ¶ä¼å¨æ ¹ç®å½ä¸æ¾å°å¹¶å è½½app.jsæ件ã
åæ°ä»ç»ï¼name项ç®å称ãversionçæ¬å·ãdescription项ç®æè¿°ãmain项ç®å¯å¨æ件ãscriptså¯å¨å¿«æ·è®¾ç½®ï¼authorä½è ï¼dependencies第3æ¹ä¸é´ä»¶å称åçæ¬ã
æéè¦ç
âdependenciesâè¿éæ·»å ä¸äºè¦ç¨å°çå ï¼ä»¥ä¸æ¯è¿æ¬¡è¦ç¨å°çææçå ï¼çæ¬èªå·±æ´æ¹ã
âscriptsâè¿éæ¯ä¸äºnodejsç便æ·å½ä»¤ï¼ä¸çº¿çæ¶åä¼ç¨å°ï¼ç´æ¥å¨ç»ç«¯ä¸ï¼package.jsonå级ç®å½ï¼æ§è¡ânpmstartâå³å¯å¯å¨app.jsã
å«ç没å¥å¤ªå¤§ä½ç¨çåå³å¯ã
å¯å¨ç¸å ³é ç½®ï¼å°è£ å°config/init.jsä¸ï¼å¯å¨æ件ç´æ¥å¼ç¨å³å¯
3-6-1ãinit.js项ç®æ ¸å¿ã
å¼å¸¸å好å¤çæ¹æ³å°è£
è·¯ç±é ç½®
è§å¾æ¸²æ
æ ¸å¿éæ
3-6-2ãconfig.js项ç®åæ°é ç½®ã为ä»ä¹ä¸ç¨jsonæ件å 为jsonä¸è½å 注é
3-6-3ãtoken.js项ç®tokenç¸å ³æ¹æ³å°è£ ã
æ§è¡å项ç®ç»æä¼å¢å 两个æ件
æ°å¢
src/hello.jsã
views/index.html
æµè§å¨è®¿é®ï¼
è¾å ¥å¼è·åtoken
è·åçtokenå¦å¾ï¼
å ä¸ç¨å¸¦tokenè¿è¡è®¿é®:hello/jiaobaba,被tokenæ¦æªï¼è¿å
带ä¸token访é®ï¼hello/jiaobaba
æµè¯é¡µé¢æ¸²æï¼å跳转html页é¢ï¼ç´æ¥è®¿é®/views
ç»æï¼ï¼ï¼ï¼ï¼ï¼
éè¦æºç èç³»æ
åå端å离æ¹æ¡ä»¥åææ¯éåä½è ï¼å ³å¼å
ä¸.ä»ä¹æ¯åå端å离ï¼
ç解åå端å离大æ¦å¯ä»¥ä»3个æ¹é¢ç解ï¼
1.交äºå½¢å¼
2.代ç ç»ç»å½¢å¼
3.å¼å模å¼ä¸æµç¨
1.1交äºå½¢å¼
åå端ä¸å离
å端å°æ°æ®å页é¢ç»è£ ã渲æ好äºä¹åï¼åæµè§å¨è¾åºæç»çhtmlï¼æµè§å¨æ¥æ¶å°åä¼è§£æhtmlï¼è§£æå¼å ¥çcssãæ§è¡jsèæ¬ï¼å®ææç»ç页é¢å±ç¤ºã
åå端å离
å端åªéè¦åå端约å®å¥½æ¥æ¶ä»¥åè¿åçæ°æ®æ ¼å¼ï¼ä¸è¬ç¨JSONæ ¼å¼ï¼ï¼åå端æä¾APIæ¥å£ãå端就å¯ä»¥éè¿HTTP请æ±è°ç¨APIçæ¹å¼è¿è¡äº¤äºãå端è·åå°æ°æ®åï¼è¿è¡é¡µé¢ç»è£ ã渲æï¼æç»å¨æµè§å¨åç°ã
1.2代ç ç»ç»å½¢å¼
åå端ä¸å离
å¨webåºç¨æ©æçæ¶åï¼å端页é¢ä»¥ååå°ä¸å¡æ°æ®å¤çç代ç é½æ¾å¨ä¸ä¸ªå·¥ç¨ä¸ï¼çè³æ¾å¨åä¸ç®å½ä¸ï¼å端页é¢å¤¹æçå端代ç ãåãå端å¼åå·¥ç¨å¸é½éè¦ææ´å¥ä»£ç å¯¼å ¥å¼åå·¥å ·æè½å¼åãæ¤é¶æ®µä¸åå端代ç 以åå·¥ä½è¦å度太é«ï¼å端ä¸è½ç¬ç«å¼ååæµè¯ï¼å端人åä¹è¦ä¾èµå端å®æ页é¢åæè½å®æå¼åãæç³ç³çæ åµæ¯å端工ç¨å¸éè¦ä¼å端模æ¿ææ¯ï¼jspï¼ï¼å端工ç¨å¸è¿è¦ä¼ç¹å端ææ¯ï¼éè¦å£å¤´è¯´æ页é¢æ°æ®æ¥å£ï¼æè½é åå®æå¼åãå¦åå端åªè½å½ä¸ä¸ªâåå¾ä»âï¼åªè¾åºHTMLãCSSã以åå¾å°éä¸ä¸å¡é»è¾æ å ³çjsï¼ç¶åç±å端转å为å端jspï¼å¹¶ä¸è¿è¦åä¸å¡çjs代ç ã
åå端å离
åå端代ç æ¾å¨ä¸åçå·¥ç¨ä¸ï¼å端代ç å¯ä»¥ç¬ç«å¼åï¼éè¿mock/easy-mockææ¯æ¨¡æå端APIæå¡å¯ä»¥ç¬ç«è¿è¡ãæµè¯ï¼å端代ç ä¹å¯ä»¥ç¬ç«å¼åï¼è¿è¡ãæµè¯ï¼éè¿swaggerææ¯è½èªå¨çæAPIææ¡£ä¾å端é 读ï¼è¿å¯ä»¥è¿è¡èªå¨åæ¥å£æµè¯ï¼ä¿è¯APIçå¯ç¨æ§ï¼éä½éæé£é©ã
1.3å¼å模å¼ä¸æµç¨
åå端ä¸å离
å¨é¡¹ç®å¼åé¶æ®µï¼åç«¯æ ¹æ®åååUI设计稿ï¼ç¼åHTMLãCSS以åå°éä¸ä¸å¡æ å ³çjsï¼çº¯ææé£äºï¼ï¼å®æå交ç»åå°äººåï¼åå°äººåå°HTML转为jspï¼å¹¶éè¿JSPç模æ¿è¯æ³è¿è¡æ°æ®ç»å®ä»¥åä¸äºé»è¾æä½ãåå°å®æåï¼å°å ¨é¨ä»£ç æå ï¼å å«å端代ç ãå端代ç ææä¸ä¸ªwarï¼ç¶åé¨ç½²å°åä¸å°æå¡å¨è¿è¡ã顶å¤åä¸ä¸å¨éå离ï¼ä¹å°±æ¯æå¾çãcssãjsåå¼é¨ç½²å°nginxã
å ·ä½å¼åæµç¨å¦ä¸ï¼å¾ç¥
åå端å离
å®ç°åå端å离ä¹åï¼åç«¯æ ¹æ®åååUI设计稿ç¼åHTMLãCSS以åå°éä¸ä¸å¡æ å ³çjsï¼çº¯ææé£äºï¼ï¼å端ä¹åæ¶æ ¹æ®ååè¿è¡API设计ï¼å¹¶ä¸å端åå®APIæ°æ®è§èãçå°åå°APIå®æï¼æä» ä» æ¯APIæ°æ®è§è设å®å®æä¹åãå端å³å¯éè¿HTTPè°ç¨APIï¼æéè¿mockæ°æ®å®ææ°æ®ç»è£ 以åä¸å¡é»è¾ç¼åãåå端å¯ä»¥å¹¶è¡ï¼æè å端å è¡äºå端å¼åäºã
å ·ä½å¼åæµç¨å¦ä¸ï¼å¾ç¥
äºãåå端å离ç好å¤ä¸åå¤ã
ä»ä¸é¢3个æ¹é¢å¯¹æ¯äºä¹åï¼åå端å离æ¶æåä¼ ç»çwebæ¶æç¸æ¯ï¼æå¾å¤§çååï¼çèµ·æ¥å¥½å¤å¤å¤ãå°åºæ¯åè¿æ¯ä¸åï¼æ们è¿æ¯è¦çæ§åææ¯å¦å¼å¾æå»åã
ä»ç®ååºç¨è½¯ä»¶å¼åçåå±è¶å¿æ¥çï¼ä¸»è¦æ两æ¹é¢éè¦æ³¨æï¼
·è¶æ¥è¶æ³¨éç¨æ·ä½éªï¼éçäºèç½çåå±ï¼å¼å§å¤ç»ç«¯åã
·大ååºç¨æ¶æ模å¼æ£å¨åäºåãå¾®æå¡ååå±ã
æ们主è¦éè¿åå端å离æ¶æï¼ä¸ºæ们带æ¥ä»¥ä¸å个æ¹é¢çæåï¼
·为ä¼è´¨äº§åæé ç²¾çå¢é
éè¿å°å¼åå¢éåå端å离åï¼è®©åå端工ç¨å¸åªéè¦ä¸æ³¨äºå端æå端çå¼åå·¥ä½ï¼æ¯çåå端工ç¨å¸å®ç°èªæ²»ï¼å¹å »å ¶ç¬ç¹çææ¯ç¹æ§ï¼ç¶åæ建åºä¸ä¸ªå ¨æ å¼çç²¾çå¼åå¢éã
·æåå¼åæç
åå端å离以åï¼å¯ä»¥å®ç°åå端代ç ç解è¦ï¼åªè¦åå端æ²é约å®å¥½åºç¨æéæ¥å£ä»¥åæ¥å£åæ°ï¼ä¾¿å¯ä»¥å¼å§å¹¶è¡å¼åï¼æ éçå¾ å¯¹æ¹çå¼åå·¥ä½ç»æãä¸æ¤åæ¶ï¼å³ä½¿éæ±åçåæ´ï¼åªè¦æ¥å£ä¸æ°æ®æ ¼å¼ä¸åï¼å端å¼å人åå°±ä¸éè¦ä¿®æ¹ä»£ç ï¼åªè¦å端è¿è¡åå¨å³å¯ãå¦æ¤ä¸æ¥æ´ä¸ªåºç¨çå¼åæçå¿ ç¶ä¼æè´¨çæåã
·å®ç¾åºå¯¹å¤æå¤åçå端éæ±
å¦æå¼åå¢éè½å®æåå端å离ç转åï¼æé ä¼ç§çåå端å¢éï¼å¼åç¬ç«åï¼è®©å¼å人ååå°ä¸æ³¨ä¸ç²¾ï¼å¼åè½åå¿ ç¶ä¼æææåï¼è½å¤å®ç¾åºå¯¹åç§å¤æå¤åçå端éæ±ã
·å¢å¼ºä»£ç å¯ç»´æ¤æ§
åå端å离åï¼åºç¨ç代ç ä¸åæ¯åå端混åï¼åªæå¨è¿è¡ææä¼æè°ç¨ä¾èµå ³ç³»ãåºç¨ä»£ç å°ä¼åå¾æ´æ´æ¸ æ°ï¼ä¸è®ºæ¯ä»£ç é 读è¿æ¯ä»£ç ç»´æ¤é½ä¼æ¯ä»¥åè½»æ¾ã
é£ä¹åå端å离æä»ä¹ä¸å¥½çå°æ¹åï¼æç®åæ¯æ²¡ææ³å°ï¼é¤éä½ è¯´ä¼å¢å å端å¢éçé å¤ï¼å端工ç¨å¸ä¼åçä¸å ¨è½ããã
äºãåå端å离æ¶ææ¹æ¡ã
å®ç°åå端å离ï¼ä¸»è¦æ¯å端çææ¯æ¶æååè¾å¤§ï¼å端主è¦å为restfullé£æ ¼APIï¼ç¶åå ä¸Swaggerææ¯èªå¨çæå¨çº¿æ¥å£æ档就差ä¸å¤äºã
对äºç®åç¨äºåå端å离æ¹æ¡çå端ææ¯æ¶æ主è¦æ两ç§ï¼
Â·ä¼ ç»SPA
·æå¡ç«¯æ¸²æSSR
2.1ä¼ ç»SPA
ä¼ ç»SPAæçæ¯å页é¢åºç¨ï¼ä¹å°±æ¯æ´ä¸ªç½ç«åªæä¸ä¸ªé¡µé¢ï¼ææåè½é½éè¿è¿ä¸ä¸ªé¡µé¢æ¥åç°ãå 为ä¸ä¸ªäººçèç¼ï¼æä¸ä¸ªæ¶é´ç¹çä¸ä¸ªé¡µé¢ï¼æ¢ç¶å¦æ¤ä½å¿ è¦ä¸ååè½åå¤ä¸ªé¡µé¢å¢ï¼åªä¿çä¸ä¸ªé¡µé¢ä½ä¸ºæ¨¡æ¿ï¼ç¶åéè¿è·¯ç±è·³è½¬æ¥æ´æ°è¿ä¸ªæ¨¡æ¿é¡µé¢çå 容ä¸å°±å¯ä»¥äºåï¼ç¡®å®å¦æ¤ï¼ç°å¨éè¿reacå ¨å®¶æ¡¶ãtvueå ¨å®¶æ¡¶ï¼æ¨¡ååãè·¯ç±ãwabpackçææ¯è½»èæ举就è½å®ç°ä¸ä¸ªå页é¢åºç¨ã
å页é¢åºç¨çè¿è¡æµç¨
1.ç¨æ·éè¿æµè§å¨è®¿é®ç½ç«url
2.å页é¢çhtmlæ件ï¼index.htmlï¼è¢«ä¸è½½å°æµè§å¨ï¼æ¥çä¸è½½htmléé¢å¼ç¨çcssï¼jsã
3.cssï¼jsä¸è½½å°æµè§å¨å®æä¹åï¼æµè§å¨å¼å§è§£ææ§è¡jsåå端æå¡å¼æ¥è¯·æ±æ°æ®ã
4.请æ±æ°æ®å®æåï¼è¿è¡æ°æ®ç»å®ã渲æï¼æç»å¨ç¨æ·æµè§å¨åç°å®æ´ç页é¢ã
2.2æå¡ç«¯æ¸²æ
æå¡ç«¯æ¸²æçæ¹æ¡æçæ¯æ°æ®ç»å®ï¼æ¸²æçå·¥ä½é½æ¾å¨æå¡ç«¯å®æï¼æå¡ç«¯åæµè§å¨è¾åºæç»çhtmlã大家çå®è¿ä¸ªæ¯ä¸æ¯æ个çé®ï¼è¿ä¸æ¯ååå°äºåå端ä¸å离çæ¶ä»£äºåï¼çæ¡æ¯å¦å®çï¼å 为è¿éçæå¡ç«¯æ¯ç¨æ¥æ§è¡å端æ°æ®ç»å®ã渲æçï¼ä¹å°±æ¯ææµè§å¨çä¸é¨åå·¥ä½åæ å°äºæå¡ç«¯ãèç®åå ·å¤è¿åªç§è½åçæå¡ç«¯æ¯NodeJsæå¡ç«¯ã
å®çåçå ¶å®å°±æ¯å¨æµè§å¨ä¸å端代ç ä¸é´æå ¥äºä¸ä¸ªNodeJsæå¡ç«¯ãæµè§å¨è¯·æ±å端页é¢æ¶ï¼ä¼å ç»è¿NodeJSæå¡ç«¯ï¼ç±NodeJså»è¯»åå端页é¢ï¼å¹¶æ§è¡å¼æ¥å端APIï¼è·åå°æ°æ®åè¿è¡é¡µé¢æ°æ®ç»å®ï¼æ¸²æçå·¥ä½ï¼å®æä¸ä¸ªæç»çhtmlç¶åè¿åæµè§å¨ï¼æåæµè§å¨è¿è¡å±ç¤ºã
æå¡ç«¯æ¸²æåºç¨çè¿è¡æµç¨ï¼
1.ç¨æ·éè¿æµè§å¨è®¿é®ç½ç«url
2.NodeJSæå¡ç«¯æ¥æ¶å°è¯·æ±ï¼è¯»åå°å¯¹åºçå端htmlï¼cssï¼jsã
3.NodeJS解ææ§è¡jsåå端APIå¼æ¥è¯·æ±æ°æ®ã
4.NodeJs请æ±æ°æ®å®æä¹åï¼è¿è¡æ°æ®ç»å®ã渲æï¼å¾å°ä¸ä¸ªæç»çhtmlã
5.NodeJsåæµè§å¨è¾åºhtmlï¼æµè§å¨è¿è¡å±ç¤ºã
PSï¼å ¶å®æ¬è´¨å°±æ¯æå端ç¼åæä¸ä¸ªnodeJsçæå¡ç«¯webåºç¨ãå®æ½æå¡ç«¯æ¸²æåï¼æ们æç»è¿è¡çæ¯ä¸ä¸ªNodejsæå¡ç«¯åºç¨ãèå页é¢åºç¨æ¯æéæ页é¢é¨ç½²å°éæèµæºæå¡å¨è¿è¡è¿è¡ã
çå°è¿éï¼ä½ æ¯å¦åæçé®ï¼ä¸ºä»ä¹è¦è¿ä¹éº»ç¦ææå¡ç«¯æ¸²æå¢ï¼
2.3SPAä¸æå¡ç«¯æ¸²ææ¹æ¡å¯¹æ¯
SPAçä¼ç¹æ¯å¼åç®åï¼é¨ç½²ç®åï¼ç¼ºç¹æ¯é¦æ¬¡å è½½è¾æ ¢ï¼éè¦è¾å¥½çç½ç»ï¼ä¸å好çSEOã
soï¼ä»¥ä¸å°±æ¯ä½¿ç¨æå¡ç«¯æ¸²æççç±äºï¼æåvueå®æ¹è¯´æ³ï¼ï¼
ä¸ä¼ ç»SPA(å页åºç¨ç¨åº(Single-PageApplication))ç¸æ¯ï¼æå¡å¨ç«¯æ¸²æ(SSR)çä¼å¿ä¸»è¦å¨äºï¼
·æ´å¥½çSEOï¼ç±äºæç´¢å¼æç¬è«æåå·¥å ·å¯ä»¥ç´æ¥æ¥çå®å ¨æ¸²æç页é¢ã
请注æï¼æªè³ç®åï¼GoogleåBingå¯ä»¥å¾å¥½å¯¹åæ¥JavaScriptåºç¨ç¨åºè¿è¡ç´¢å¼ãå¨è¿éï¼åæ¥æ¯å ³é®ãå¦æä½ çåºç¨ç¨åºåå§å±ç¤ºloadingèè±å¾ï¼ç¶åéè¿Ajaxè·åå 容ï¼æåå·¥å ·å¹¶ä¸ä¼çå¾ å¼æ¥å®æååè¡æå页é¢å 容ãä¹å°±æ¯è¯´ï¼å¦æSEOå¯¹ä½ çç«ç¹è³å ³éè¦ï¼èä½ ç页é¢åæ¯å¼æ¥è·åå 容ï¼åä½ å¯è½éè¦æå¡å¨ç«¯æ¸²æ(SSR)解å³æ¤é®é¢ã
·æ´å¿«çå 容å°è¾¾æ¶é´(time-to-content)ï¼ç¹å«æ¯å¯¹äºç¼æ ¢çç½ç»æ åµæè¿è¡ç¼æ ¢ç设å¤ã
æ éçå¾ ææçJavaScripté½å®æä¸è½½å¹¶æ§è¡ï¼ææ¾ç¤ºæå¡å¨æ¸²æçæ è®°ï¼æä»¥ä½ çç¨æ·å°ä¼æ´å¿«éå°çå°å®æ´æ¸²æç页é¢ãé常å¯ä»¥äº§çæ´å¥½çç¨æ·ä½éªï¼å¹¶ä¸å¯¹äºé£äºãå 容å°è¾¾æ¶é´(time-to-content)ä¸è½¬åçç´æ¥ç¸å ³ãçåºç¨ç¨åºèè¨ï¼æå¡å¨ç«¯æ¸²æ(SSR)è³å ³éè¦ã
使ç¨æå¡å¨ç«¯æ¸²æ(SSR)æ¶è¿éè¦æä¸äºæè¡¡ä¹å¤ï¼
·å¼åæ¡ä»¶æéãæµè§å¨ç¹å®ç代ç ï¼åªè½å¨æäºçå½å¨æé©åå½æ°(lifecyclehook)ä¸ä½¿ç¨ï¼ä¸äºå¤é¨æ©å±åº(externallibrary)å¯è½éè¦ç¹æ®å¤çï¼æè½å¨æå¡å¨æ¸²æåºç¨ç¨åºä¸è¿è¡ã
·æ¶åæ建设置åé¨ç½²çæ´å¤è¦æ±ãä¸å¯ä»¥é¨ç½²å¨ä»»ä½éææ件æå¡å¨ä¸çå®å ¨éæå页é¢åºç¨ç¨åº(SPA)ä¸åï¼æå¡å¨æ¸²æåºç¨ç¨åºï¼éè¦å¤äºNode.jsserverè¿è¡ç¯å¢ã
·æ´å¤çæå¡å¨ç«¯è´è½½ãå¨Node.jsä¸æ¸²æå®æ´çåºç¨ç¨åºï¼æ¾ç¶ä¼æ¯ä» ä» æä¾éææ件çserveræ´å 大éå ç¨CPUèµæº(CPU-intensive-CPUå¯é)ï¼å æ¤å¦æä½ é¢æå¨é«æµéç¯å¢(hightraffic)ä¸ä½¿ç¨ï¼è¯·åå¤ç¸åºçæå¡å¨è´è½½ï¼å¹¶ææºå°éç¨ç¼åçç¥ã
以vue为ä¾ï¼å®æ½æå¡ç«¯æ¸²æå¯ä»¥æ¥çå®æ¹æåï¼ï¼æéæ©Nuxt.js
2.4é¢æ¸²æææ¯
å¦æä½ è°ç æå¡å¨ç«¯æ¸²æ(SSR)åªæ¯ç¨æ¥æ¹åå°æ°è¥é页é¢ï¼ä¾å¦/,/about,/contactçï¼çSEOï¼é£ä¹ä½ å¯è½éè¦é¢æ¸²æãæ é使ç¨webæå¡å¨å®æ¶å¨æç¼è¯HTMLï¼èæ¯ä½¿ç¨é¢æ¸²ææ¹å¼ï¼å¨æ建æ¶(buildtime)ç®åå°çæé对ç¹å®è·¯ç±çéæHTMLæ件ãä¼ç¹æ¯è®¾ç½®é¢æ¸²ææ´ç®åï¼å¹¶å¯ä»¥å°ä½ çå端ä½ä¸ºä¸ä¸ªå®å ¨éæçç«ç¹ã
å¦æä½ ä½¿ç¨webpackï¼ä½ å¯ä»¥ä½¿ç¨prerender-spa-pluginè½»æ¾å°æ·»å é¢æ¸²æãå®å·²ç»è¢«Vueåºç¨ç¨åºå¹¿æ³æµè¯-äºå®ä¸ï¼ä½è æ¯Vueæ ¸å¿å¢éçæåã
prerender-spa-plugin:
ä¸ãåå端å离ææ¯éå
-artTemplate+bootstrapï¼ä¸æ¨èï¼ä¸ç®å®å ¨åå端å离ï¼
-vueå ¨å®¶æ¡¶ï¼æ¨èï¼
-reactå ¨å®¶æ¡¶ï¼æ¨èï¼çæå ¨ï¼
市售鮮奶茶調查 知名手搖標「小農鮮奶」卻用別牌、還有濃縮乳加水
ecjia源码下载
java源码讲解
python django源码
本輪巴以衝突已致加沙地帶2.49萬名巴勒斯坦人死亡
javaweb论坛源码_java论坛系统源码