详细介绍Web前端与后端有什么区别?(包括定义、特点、所用到的技术等
1.ä»ä¹æ¯å端å¼åï¼
å端ï¼ä¹ç§°ä¸ºâ客æ·ç«¯å¼åâï¼ç®åæ¥è¯´ï¼ä½ å¯ä»¥å¨åºç¨ç¨åºæç½ç«çå±å¹ä¸çå°çææå 容é½å±äºå端ã
éä¿ç¹è¯´ï¼webçæ¬ææ¯èèç½åç½çææï¼å¨ç½é¡µè®¾è®¡ä¸æ们称为ç½é¡µçææãç°å¹¿æ³è¯ä½ç½ç»ãäºèç½çææ¯é¢åã表ç°ä¸ºä¸ç§å½¢å¼ï¼å³è¶ ææ¬(hypertext)ãè¶ åªä½(hypermedia)ãè¶ ææ¬ä¼ è¾åè®®(HTTP)çï¼å æ¬Web页é¢çç»æãWebçå¤è§è§è§è¡¨ç°ä»¥åWebå±é¢ç交äºå®ç°ã
1.1 ç½ç«å移å¨åºç¨çå端
让æ们èèä¸ä¸ªç°å®çä¾åï¼ä½ æ£å¨è®¿é®çç½ç«ãå 容设计ãå¾åã段è½å线æ¡ä¹é´çé´è·ï¼å·¦ä¸è§çå ¬å¸å¾½æ ï¼ä»¥åå³ä¸è§çå°éç¥æé®ââææè¿ä¸åé½æ¯å端ã
移å¨åºç¨çå端ä¸ç½ç«ç¸åãä¾å¦ï¼ä½ å¨ç§»å¨æ Web åºç¨ä¸çå°çå 容ï¼æé®ãå¾åæ¯å端çä¸é¨åãæ¤å¤ç§»å¨å±å¹è¿å ·æ触æ¸ååºåè½ï¼å æ¤å½åºç¨ååºä½ æåçæææå¿æ¶ï¼éè¦è¿è¡ç¼©æ¾æ¾å¤§/缩å°ãåå»ãæ»å¨çæä½ã
å端å¼å人åæ建ææçè¿äºãå®ä»¬åé äºä½ å¨å±å¹ä¸çå°çå¤è§å触æ¸å°çä½éªã
Ionicï¼Swiftï¼Kotlinï¼Bootstrapï¼Angularï¼Vueï¼jQueryï¼React.js æ¯ç¨äºå端å¼åçä¸äºå·¥å ·åææ¯ã
1.2 ç©èç½çå端
è¿æ¥å°äºèç½çä»»ä½å¯¹è±¡é½æ¯IoTï¼ç©èç½ï¼è®¾å¤ãä½ å¯è½å¨æ³ç©èç½è®¾å¤çå端å¦ä½å·¥ä½ï¼ä»»ä½æºè½è®¾å¤ï¼å¦æºè½å°ç®±ãè¿ç¨ PoS ç³»ç»ãæºè½æ表ãæºè½é±å ï¼é½éè¦ç¨æ·å¯ä»¥ä¸ä¹äº¤äºä»¥æä½è®¾å¤çâä¸è¥¿âãå æ¤ï¼âæç©âæ¯ä¸ç§äºå¨åªä»ï¼å ¶å ç´ å°±æ¯ç©èç½çå端ã
ç©èç½è®¾å¤æ²¡æå端ç说æ³ï¼ä½è®¾å¤å å«ä¸ä¸ªåºä»¶ï¼å ¶è¡ä¸ºç±»ä¼¼äºç§»å¨åºç¨ç¨åºä¸çå端ãæ¤å¤è¯¥åºä»¶å¯ä»¥ç¨CãC++ãLuaãPython å JavaScript çè¯è¨ç¼åã
å¦å¤è¿æç©èç½è®¾å¤ç UI/UX 设计åå®ç°ã
2.ä»ä¹æ¯å端å¼åï¼
å端ï¼ä¹ç§°ä¸ºâæå¡å¨ç«¯å¼åâï¼ä¹å°±æ¯å¨ç³»ç»âåé¢âæåççäºæ ãåæ ·ï¼å¨å端æå¡å¨åæµè§å¨æåºç¨ç¨åºä¹é´åå¨ç½ç«ãåºç¨æ°æ®åä¸é´åªä»çæå¡å¨é½å±äºå端ãç®åæ¥è¯´ï¼å¨åºç¨ç¨åºæç½ç«çå±å¹ä¸çä¸å°çææä¸è¥¿é½æ¯å端çå端ãå®æ´å¤çæ¯ä¸æ°æ®åºè¿è¡äº¤äºä»¥å¤çç¸åºçä¸å¡é»è¾ãéè¦èèçæ¯å¦ä½å®ç°åè½ãæ°æ®çååãå¹³å°ç稳å®æ§ä¸æ§è½çã
2.1 ç½ç«å移å¨åºç¨å端
ç½ç«çå端éè¦è®¾ç½®æå¡å¨ï¼åå¨åæ£ç´¢æ°æ®ï¼ä»¥åå°è¿äºæå¡å¨ä¸å端è¿è¡è¿æ¥çæ¥å£ãå¦æ说å端å¼å人åæ¢å ³æ³¨ç½ç«çå¤è§ï¼å端å¼å人ååæ´æ´å ³æ³¨ç½ç«çé度ãæ§è½åååºè½åï¼å端éè¿ç¼ç ãäº API åæ°æ®åºè¿è¡éæã
å°±åå端ä¸æ ·ï¼ç§»å¨åºç¨çå端å¼åå¨å个æ¹é¢é½ä¸ç½ç«å端ç¸åãæ¤å¤ï¼ä½ 为移å¨åºç¨è®¾ç½®å端æå¡å¨çé项å æ¬ï¼äºè®¡ç®ï¼AWSï¼Firebaseï¼å®å¶æå¡å¨æ MBaaSï¼ç§»å¨å端å³æå¡ï¼ã
Rubyï¼Apacheï¼Nginxï¼PHPï¼MySQLï¼MongoDB çç¨äºå端å¼åçå·¥å ·åææ¯å¾å°ã
2.2 ç©èç½å端
ç©èç½å端æéè¦çç»æé¨åä¹ä¸æ¯äºå端ãæ¾ç¶å¤§å¤æ°ç©èç½è®¾å¤é½ä¾èµäºæå¡å¨å¯¹æ°æ®è¿è¡ä¸ä¼ åä¸è½½ï¼å¹¶å°å ¶å¤ç为å¨ä½ã
å¦ææ们è°è®ºé«çº§ç©èç½è§£å³æ¹æ¡ï¼å端å¼åå¯ä»¥æ©å¤§å° AIï¼äººå·¥æºè½ï¼å ML çåè½ï¼æºå¨å¦ä¹ ï¼ã
ç¨äºç©èç½é¡¹ç®çå端ææ¯æ¯Amazon IoTï¼Google Cloudï¼MQTT Brokerï¼IFTTTççã
综ä¸æè¿°ï¼è¯´éä¿ä¸ç¹ï¼
webå端å为ç½é¡µè®¾è®¡å¸ãç½é¡µç¾å·¥ãwebå端å¼åå·¥ç¨å¸ã
é¦å ç½é¡µè®¾è®¡å¸æ¯å¯¹ç½é¡µçæ¶æãè²å½©ä»¥åç½ç«çæ´ä½é¡µé¢ä»£ç è´è´£ï¼ç½é¡µç¾å·¥åªé对UIè¿åçä¸è¥¿ï¼æ¯å¦ç½ç«æ¯å¦åå¾æ¼äº®ï¼webå端å¼åå·¥ç¨å¸æ¯è´è´£äº¤äºè®¾è®¡çï¼éè¦åç¨åºåè¿è¡äº¤äºè®¾è®¡çé åã
webå端éè¦ææ¡çæèæ¬ææ¯javascript DIV+CSSç°ä¸ææµè¡ç页é¢æ建ææ¯ï¼ajaxåjquery以åç®åçå端ç¨åºçã å端çè¯å¯ä¾å¼åçè¯è¨æ aspãphpãjspã.NET è¿äºå端å¼åè¯è¨çè¯æ建ç¯å¢é½ä¸ä¸æ ·
å®é
çå¼åè¿ç¨ä¸ï¼å端ãå端å¼å人åçå®ä½å¦ä¸ï¼
1ï¼å端å¼å人åï¼ç²¾éJSï¼è½çç»åºç¨JQueryï¼æCSSï¼è½çç»è¿ç¨è¿äºç¥è¯ï¼è¿è¡äº¤äºææçå¼åã
2ï¼å端å¼å人åï¼ä¼åJava代ç ï¼ä¼åSQLè¯å¥ï¼è½åç®åçæ°æ®åºè®¾è®¡ï¼ä¼SpringåiBatisï¼æä¸äºè®¾è®¡æ¨¡å¼çã
3.å端 Vs å端æä»ä¹åºå«ï¼
4.å端 Vs å端ï¼è°æ¯æ好çï¼è°æå害ï¼
å端设计å¸æåçå¾å¤§ä¸é¨åå·¥ä½å°±æ¯è®©ç¨æ·å¨ç§»å¨è®¾å¤æ PC å±å¹ä¸çå°çä¸è¥¿çèµ·æ¥é½å¾æ£èä¸æäºä½¿ç¨ãç¸åï¼å端å¼å人åå¯ä¸å ³æ³¨çç¾å¦æ¯ç¼åå¹²åç代ç ã
æ以ä¸åå¨è°æ´å¥½è¿ä¸ªè¯´æ³ï¼äºè æ¯ç¸äºæå°±ç¸äºåä½çï¼ä¸¾ä¸ªæ åï¼æ£æ¯ç±äºå²è夫·ä¹å¸æ¯ï¼å端幻æ³å®¶ï¼ä»¥åå²è夫·æ²å ¹å°¼äºå ï¼å端天æï¼ï¼æå°±äºè¹æç®æ´ç»å ¸ç设计以åæµç çæä½ç³»ç»ã
5.å端 Vs å端å¼å人åï¼èä½å称
6.å端ä¸å端å¼å人åï¼æéæè½
7.å端ä¸å端å¼åè
ï¼è§è²å责任
okï¼æ¥è¿2000åäºï¼åºè¯¥æ¯åçäºä½ çé®é¢äºï¼å¦ææ帮å©å°ä½ ï¼è¯·é纳å¦ï¼è°¢è°¢ï¼