鍓嶅悗绔垎绂昏繃

Posted 2021-04-30 BD鐗涚墰

澶у閮借鎴戠┛瑗挎湇鍍忓崠鎴跨殑锛屽叾瀹炴垜鏄崠璇楃殑銆傪煒?/p>

涓€銆佺畝鍗曟槑蹇殑鏃╂湡鏃朵唬

鍙О涔嬩负 Web 1.0 鏃朵唬锛岄潪甯搁€傚悎鍒涗笟鍨嬪皬椤圭洰锛屼笉鍒嗗墠鍚庣锛岀粡甯?/span> 3-5 浜哄畬鎴愭墍鏈夊紑鍙戙€傞〉闈㈢敱 JSP銆?/span>php 绛夊伐绋嬪笀鍦ㄦ湇鍔＄鐢熸垚锛屾祻瑙堝櫒璐熻矗灞曠幇銆傚熀鏈笂鏄湇鍔＄缁欎粈涔堟祻瑙堝櫒灏卞睍鐜颁粈涔堬紝灞曠幇鐨勬帶鍒跺湪 Web Server 灞傘€?/span>

杩欑妯″紡鐨勫ソ澶勬槸锛氱畝鍗曟槑蹇紝鏈湴璧蜂竴涓?/span> Tomcat 鎴?/span> Apache 灏辫兘寮€鍙戯紝璋冭瘯浠€涔堢殑閮借繕濂斤紝鍙涓氬姟涓嶅お澶嶆潅銆?/span>

鐒惰€屼笟鍔℃€讳細鍙樺鏉傦紝杩欐槸濂戒簨鎯咃紝鍚﹀垯寰堝彲鑳藉氨鎰忓懗鐫€鍒涗笟澶辫触浜嗐€備笟鍔＄殑澶嶆潅浼氳 Service 瓒婃潵瓒婂锛屽弬涓庡紑鍙戠殑浜哄憳涔熷緢鍙兘浠庡嚑涓汉蹇€熸墿鎷涘埌鍑犲崄浜恒€傚湪杩欑鎯呭喌涓嬶紝浼氶亣鍒颁竴浜涘吀鍨嬮棶棰橈細

 

1銆?/span>Service 瓒婃潵瓒婂锛岃皟鐢ㄥ叧绯诲彉澶嶆潅锛屽墠绔惌寤烘湰鍦扮幆澧冧笉鍐嶆槸涓€浠剁畝鍗曠殑浜嬨€傝€冭檻鍥㈤槦鍗忎綔锛屽線寰€浼氳€冭檻鎼缓闆嗕腑寮忕殑寮€鍙戞湇鍔″櫒鏉ヨВ鍐炽€傝繖绉嶈В鍐虫柟妗堝缂栬瘧鍨嬬殑鍚庣寮€鍙戞潵璇翠篃璁歌繕濂斤紝浣嗗鍓嶇寮€鍙戞潵璇村苟涓嶅弸濂姐€傚ぉ鍝紝鎴戝彧鏄兂璋冩暣涓嬫寜閽牱寮忥紝鍗磋鏈湴寮€鍙戙€佷唬鐮佷笂浼犮€侀獙璇佺敓鏁堢瓑濂藉嚑涓楠ゃ€備篃璁镐範鎯簡涔熻繕濂斤紝浣嗗紑鍙戞湇鍔″櫒鎬绘槸涓嶉偅涔堢ǔ瀹氾紝鍑洪棶棰樻椂寰€寰€闇€瑕佷緷璧栧悗绔紑鍙戞悶瀹氥€傜湅浼间粎浠呮槸鍓嶇寮€鍙戦毦浠ユ湰鍦板寲锛屼絾杩欏鐮斿彂鏁堢巼鐨勫奖鍝嶅叾瀹炶洰澶с€?/span>

2銆?/span>JSP 绛変唬鐮佺殑鍙淮鎶ゆ€ц秺鏉ヨ秺宸€?/span>JSP 闈炲父寮哄ぇ锛屽彲浠ュ唴宓?/span> Java 浠ｇ爜銆傝繖绉嶅己澶т娇寰楀墠鍚庣鐨勮亴璐ｄ笉娓呮櫚锛?/span>JSP 鍙樻垚浜嗕竴涓伆鑹插湴甯︺€傜粡甯镐负浜嗚刀椤圭洰锛屼负浜嗗悇绉嶇揣鎬ラ渶姹傦紝浼氬湪 JSP 閲屾弶鏉傚ぇ閲忎笟鍔′唬鐮併€傜Н鏀掑埌涓€瀹氶樁娈垫椂锛屽線寰€浼氬甫鏉ュぇ閲忕淮鎶ゆ垚鏈€?/span>

杩欎釜鏃舵湡锛屼负浜嗘彁楂樺彲缁存姢鎬э紝鍙互閫氳繃涓嬮潰鐨勬柟寮忓疄鐜板墠绔殑缁勪欢鍖栵細

鐞嗚涓婏紝濡傛灉澶у閮借兘鎸夌収鏈€浣冲疄璺靛幓涔﹀啓浠ｇ爜锛岄偅涔堟棤璁烘槸 JSP 杩樻槸 PHP锛屽彲缁存姢鎬ч兘涓嶄細宸€?span>浣嗗彲缁存姢鎬ф洿澶氭槸宸ョ▼鍚箟锛屾湁鏃跺€欓渶瑕侀€氳繃闄愬埗甯︽潵鑷敱锛岄渶瑕佹煇绉嶇害瀹氾紝浣垮緱鍗充究鏄柊鎵嬩篃涓嶄細鍐欏嚭澶碂绯曠殑浠ｇ爜銆?/strong>

濡備綍璁╁墠鍚庣鍒嗗伐鏇村悎鐞嗛珮鏁堬紝濡備綍鎻愰珮浠ｇ爜鐨勫彲缁存姢鎬э紝鍦?/span> Web 寮€鍙戜腑寰堥噸瑕併€備笅闈㈡垜浠户缁潵鐪嬶紝鎶€鏈灦鏋勭殑婕斿彉濡備綍瑙ｅ喅杩欎袱涓棶棰樸€?/span>

浜屻€佸悗绔负涓荤殑 MVC 鏃朵唬

涓轰簡闄嶄綆澶嶆潅搴︼紝浠ュ悗绔负鍑哄彂鐐癸紝鏈変簡 Web Server 灞傜殑鏋舵瀯鍗囩骇锛屾瘮濡?/span> Structs銆?/span>Spring MVC 绛夛紝杩欐槸鍚庣鐨?/span> MVC 鏃朵唬銆?/span>

浠ｇ爜鍙淮鎶ゆ€у緱鍒版槑鏄惧ソ杞紝MVC 鏄釜闈炲父濂界殑鍗忎綔妯″紡锛屼粠鏋舵瀯灞傞潰璁╁紑鍙戣€呮噦寰椾粈涔堜唬鐮佸簲璇ュ啓鍦ㄤ粈涔堝湴鏂广€備负浜嗚 View 灞傛洿绠€鍗曞共鑴嗭紝杩樺彲浠ラ€夋嫨 Velocity銆?/span>Freemaker 绛夋ā鏉匡紝浣垮緱妯℃澘閲屽啓涓嶄簡 Java 浠ｇ爜銆傜湅璧锋潵鏄姛鑳藉彉寮变簡锛屼絾姝ｆ槸杩欑闄愬埗浣垮緱鍓嶅悗绔垎宸ユ洿娓呮櫚銆傜劧鑰屼緷鏃у苟涓嶆槸閭ｄ箞娓呮櫚锛岃繖涓樁娈电殑鍏稿瀷闂鏄細

1銆佸墠绔紑鍙戦噸搴︿緷璧栧紑鍙戠幆澧冦€傝繖绉嶆灦鏋勪笅锛屽墠鍚庣鍗忎綔鏈変袱绉嶆ā寮忥細涓€绉嶆槸鍓嶇鍐?/span> demo锛屽啓濂藉悗锛岃鍚庣鍘诲妯℃澘銆傛窐瀹濇棭鏈熷寘鎷幇鍦ㄤ緷鏃ф湁澶ч噺涓氬姟绾挎槸杩欑妯″紡銆傚ソ澶勫緢鏄庢樉锛?/span>demo 鍙互鏈湴寮€鍙戯紝寰堥珮鏁堛€備笉瓒虫槸杩橀渶瑕佸悗绔妯℃澘锛屾湁鍙兘濂楅敊锛屽瀹屽悗杩橀渶瑕佸墠绔‘瀹氾紝鏉ュ洖娌熼€氳皟鏁寸殑鎴愭湰姣旇緝澶с€傚彟涓€绉嶅崗浣滄ā寮忔槸鍓嶇璐熻矗娴忚鍣ㄧ鐨勬墍鏈夊紑鍙戝拰鏈嶅姟鍣ㄧ鐨?/span> View 灞傛ā鏉垮紑鍙戯紝鏀粯瀹濇槸杩欑妯″紡銆傚ソ澶勬槸 UI 鐩稿叧鐨勪唬鐮侀兘鏄墠绔幓鍐欏氨濂斤紝鍚庣涓嶇敤澶叧娉紝涓嶈冻灏辨槸鍓嶇寮€鍙戦噸搴︾粦瀹氬悗绔幆澧冿紝鐜鎴愪负褰卞搷鍓嶇寮€鍙戞晥鐜囩殑閲嶈鍥犵礌銆?/span>

2銆佸墠鍚庣鑱岃矗渚濇棫绾犵紶涓嶆竻銆?/span>Velocity 妯℃澘杩樻槸铔己澶х殑锛屽彉閲忋€侀€昏緫銆佸畯绛夌壒鎬э紝渚濇棫鍙互閫氳繃鎷垮埌鐨勪笂涓嬫枃鍙橀噺鏉ュ疄鐜板悇绉嶄笟鍔￠€昏緫銆傝繖鏍凤紝鍙鍓嶇寮卞娍涓€鐐癸紝寰€寰€灏变細琚悗绔姹傚湪妯℃澘灞傚啓鍑轰笉灏戜笟鍔′唬鐮併€傝繕鏈変竴涓緢澶х殑鐏拌壊鍦板甫鏄?/span> Controller锛岄〉闈㈣矾鐢辩瓑鍔熻兘鏈簲璇ユ槸鍓嶇鏈€鍏虫敞鐨勶紝浣嗗嵈鏄敱鍚庣鏉ュ疄鐜般€?/span>Controller 鏈韩涓?/span> Model 寰€寰€涔熶細绾犵紶涓嶆竻锛岀湅浜嗚浜哄挰鐗欑殑浠ｇ爜缁忓父浼氬嚭鐜板湪 Controller 灞傘€傝繖浜涢棶棰樹笉鑳藉叏褰掔粨浜庣▼搴忓憳鐨勭礌鍏伙紝鍚﹀垯 JSP 灏卞浜嗐€?/span>

缁忓父浼氭湁浜哄悙妲?/span> Java锛屼絾 Java 鍦ㄥ伐绋嬪寲寮€鍙戞柟闈㈢湡鐨勫仛浜嗗ぇ閲忔€濊€冨拰鏋舵瀯灏濊瘯銆?/span>Java 铔鍚堥┈浜戠殑涓€鍙ヨ瘽锛氳骞冲嚒浜哄仛闈炲嚒浜嬨€?/span>

涓夈€?/span>Ajax 甯︽潵鐨?/span> SPA 鏃朵唬

鍘嗗彶婊氭粴寰€鍓嶏紝2004 骞?/span> Gmail 鍍忛涓€鏍风殑濂冲瓙鏉ュ埌浜洪棿锛屽緢蹇?/span> 2005 骞?/span> Ajax 姝ｅ紡鎻愬嚭锛屽姞涓?/span> CDN 寮€濮嬪ぇ閲忕敤浜庨潤鎬佽祫婧愬瓨鍌紝浜庢槸鍑虹幇浜?/span> javascript 鐜嬭€呭綊鏉ョ殑 SPA 锛?/span>Single Page Application 鍗曢〉闈㈠簲鐢級鏃朵唬銆?/span>

杩欑妯″紡涓嬶紝鍓嶅悗绔殑鍒嗗伐闈炲父娓呮櫚锛屽墠鍚庣鐨勫叧閿崗浣滅偣鏄?/span> Ajax 鎺ュ彛銆傜湅璧锋潵鏄姝ょ編濡欙紝浣嗗洖杩囧ご鏉ョ湅鐪嬬殑璇濓紝杩欎笌 JSP 鏃朵唬鍖哄埆涓嶅ぇ銆傚鏉傚害浠庢湇鍔＄鐨?/span> JSP 閲岀Щ鍒颁簡娴忚鍣ㄧ殑 JavaScript锛屾祻瑙堝櫒绔彉寰楀緢澶嶆潅銆傜被浼?/span> Spring MVC锛岃繖涓椂浠ｅ紑濮嬪嚭鐜版祻瑙堝櫒绔殑鍒嗗眰鏋舵瀯锛?/span>

瀵逛簬 SPA 搴旂敤锛屾湁鍑犱釜寰堥噸瑕佺殑鎸戞垬锛?/span>

1銆佸墠鍚庣鎺ュ彛鐨勭害瀹氥€傚鏋滃悗绔殑鎺ュ彛涓€濉岀硦娑傦紝濡傛灉鍚庣鐨勪笟鍔℃ā鍨嬩笉澶熺ǔ瀹氾紝閭ｄ箞鍓嶇寮€鍙戜細寰堢棝鑻︺€傝繖涓€鍧楀湪涓氱晫鏈?/span> API Blueprint 绛夋柟妗堟潵绾﹀畾鍜屾矇娣€鎺ュ彛锛屽湪闃块噷锛屼笉灏戝洟闃熶篃鏈夌被浼煎皾璇曪紝閫氳繃鎺ュ彛瑙勫垯銆佹帴鍙ｅ钩鍙扮瓑鏂瑰紡鏉ュ仛銆傛湁浜嗗拰鍚庣涓€璧锋矇娣€鐨勬帴鍙ｈ鍒欙紝杩樺彲浠ョ敤鏉ユā鎷熸暟鎹紝浣垮緱鍓嶅悗绔彲浠ュ湪绾﹀畾鎺ュ彛鍚庡疄鐜伴珮鏁堝苟琛屽紑鍙戙€傜浉淇¤繖涓€鍧椾細瓒婂仛瓒婂ソ銆?/span>

2銆佸墠绔紑鍙戠殑澶嶆潅搴︽帶鍒躲€?/span>SPA 搴旂敤澶у浠ュ姛鑳戒氦浜掑瀷涓轰富锛?/span>JavaScript 浠ｇ爜杩囧崄涓囪寰堟甯搞€傚ぇ閲?/span> JS 浠ｇ爜鐨勭粍缁囷紝涓?/span> View 灞傜殑缁戝畾绛夛紝閮戒笉鏄鏄撶殑浜嬫儏銆傚吀鍨嬬殑瑙ｅ喅鏂规鏄笟鐣岀殑 Backbone锛屼絾 Backbone 鍋氱殑浜嬭繕寰堟湁闄愶紝渚濇棫瀛樺湪澶ч噺绌虹櫧鍖哄煙闇€瑕佹寫鎴樸€?/span>

SPA 璁╁墠绔湅鍒颁簡涓€涓濈豢鑹诧紝浣嗕緷鏃ф槸鍦ㄨ崚婕犱腑琛岃蛋銆?/span>

鍥涖€佸墠绔负涓荤殑 MV 鏃朵唬

涓轰簡闄嶄綆鍓嶇寮€鍙戝鏉傚害锛岄櫎浜?/span> Backbone锛岃繕鏈夊ぇ閲忔鏋舵秾鐜帮紝姣斿 EmberJS銆?/span>KnockoutJS銆?/span>AngularJS 绛夌瓑銆傝繖浜涙鏋舵€荤殑鍘熷垯鏄厛鎸夌被鍨嬪垎灞傦紝姣斿 Templates銆?/span>Controllers銆?/span>Models锛岀劧鍚庡啀鍦ㄥ眰鍐呭仛鍒囧垎锛屽涓嬪浘锛?/span>

濂藉寰堟槑鏄撅細

1銆佸墠鍚庣鑱岃矗寰堟竻鏅般€傚墠绔伐浣滃湪娴忚鍣ㄧ锛屽悗绔伐浣滃湪鏈嶅姟绔€傛竻鏅扮殑鍒嗗伐锛屽彲浠ヨ寮€鍙戝苟琛岋紝娴嬭瘯鏁版嵁鐨勬ā鎷熶笉闅撅紝鍓嶇鍙互鏈湴寮€鍙戙€傚悗绔垯鍙互涓撴敞浜庝笟鍔￠€昏緫鐨勫鐞嗭紝杈撳嚭 RESTful 绛夋帴鍙ｃ€?/span>

2銆佸墠绔紑鍙戠殑澶嶆潅搴﹀彲鎺с€傚墠绔唬鐮佸緢閲嶏紝浣嗗悎鐞嗙殑鍒嗗眰锛岃鍓嶇浠ｇ爜鑳藉悇鍙稿叾鑱屻€傝繖涓€鍧楄洰鏈夋剰鎬濈殑锛岀畝鍗曞妯℃澘鐗规€х殑閫夋嫨锛屽氨鏈夊緢澶氬緢澶氳绌躲€傚苟闈炶秺寮哄ぇ瓒婂ソ锛岄檺鍒朵粈涔堬紝鐣欎笅鍝簺鑷敱锛屼唬鐮佸簲璇ュ浣曠粍缁囷紝鎵€鏈夎繖涓€鍒囪璁★紝寰楄姳涓€鏈殑鍘氬害鍘昏鏄庛€?/span>

3銆?span>閮ㄧ讲鐩稿鐙珛锛屼骇鍝佷綋楠屽彲浠ュ揩閫熸敼杩涖€?/span>

浣嗕緷鏃ф湁涓嶈冻涔嬪锛?/span>

1銆佷唬鐮佷笉鑳藉鐢ㄣ€傛瘮濡傚悗绔緷鏃ч渶瑕佸鏁版嵁鍋氬悇绉嶆牎楠岋紝鏍￠獙閫昏緫鏃犳硶澶嶇敤娴忚鍣ㄧ鐨勪唬鐮併€傚鏋滃彲浠ュ鐢紝閭ｄ箞鍚庣鐨勬暟鎹牎楠屽彲浠ョ浉瀵圭畝鍗曞寲銆?/span>
2銆佸叏寮傛锛屽 SEO 涓嶅埄銆傚線寰€杩橀渶瑕佹湇鍔＄鍋氬悓姝ユ覆鏌撶殑闄嶇骇鏂规銆?/span>
3銆佹€ц兘骞堕潪鏈€浣筹紝鐗瑰埆鏄Щ鍔ㄤ簰鑱旂綉鐜涓嬨€?/span>
4銆?/span>SPA 涓嶈兘婊¤冻鎵€鏈夐渶姹傦紝渚濇棫瀛樺湪澶ч噺澶氶〉闈㈠簲鐢ㄣ€?/span>URL Design 闇€瑕佸悗绔厤鍚堬紝鍓嶇鏃犳硶瀹屽叏鎺屾帶銆?/span>