Web全棧開發基礎(小白入門版本) - 新聞資(zī)訊 - 雲南小程序開發|雲南軟件開發|雲南網站(zhàn)建設-西山區知普網絡科技工作室

159-8711-8523

雲南網建設/小程序開發/軟件開發

知識

不管是網站(zhàn),軟件還是小程序,都要直接或間接能為您産生價值,我們在追求其視覺表現的同時,更側重于功能的便捷,營銷的便利,運營的高效,讓網站(zhàn)成為營銷工具,讓軟件能切實提升企業(yè)内部管理水平和(hé)效率。優秀的程序為後期升級提供便捷的支持!

您當前位置>首頁 » 新聞資(zī)訊 » 網站(zhàn)建設 >

Web全棧開發基礎(小白入門版本)

發表時間:2020-9-10

發布人:葵宇科技

浏覽次數:50

博客傳送門

近幾個(gè)月(yuè)認真寫了寫Web全棧代碼,有點小收獲這裡分享一下(xià)。我還做了個(gè)PPT,資(zī)源路(lù)徑
歡迎拍磚指點!

Web全棧開發是一個(gè)聽起來很虎的名詞。本文(wén)從技術(shù)層面解釋全棧開發,能幫助沒有全棧概念,或者說對相關(guān)技術(shù)比如(rú)DjangoNode-js等沒有什麼認識的讀者搞明白這些名詞之間有什麼關(guān)系。

技術(shù)棧

這裡寫圖片描述
Web全棧,是将前端技術(shù)、後端技術(shù)、前後端交互技術(shù)、數據處理及系統部署等技能都能用起來的開發方式。
既能寫界面,又能寫後台,還可(kě)以把數據庫、系統環境之類的都搞定。

技術(shù)選型

做開發不能純粹為了技術(shù)而技術(shù),在做事情前應現有技術(shù)選型、評估階段。比如(rú):當前技術(shù)團隊有幾個(gè)懂Java、幾個(gè)懂PHP、幾個(gè)懂Python的,将來團隊技術(shù)方向是什麼,現有産品什麼樣,将來是否要繼承,這些都是要考慮的。如(rú)果在一個(gè)純Python環境下(xià)要求用PHP生态鍊,那是要被老闆罵的。

但作為小白入門級的獨立開發者,自然是選擇最簡單入門最容易的環境,那就是windows系統下(xià)的Web開發全家桶——WAMP

這裡推薦WAMP是不帶感情色彩的,理由隻有一個(gè),就是最簡單。Django和(hé)Laveral對新手并不那麼友好。至于Node-JS之類的,也隻是衆多技術(shù)流派中(zhōng)的一種。

Nginx的反向代理對配置環境的新手來說還是有點麻煩的。在Windows下(xià)支持不很好不說,很多東西還得一個(gè)一個(gè)裝。當然,有用MAC的同學可(kě)以忽視。

這裡寫圖片描述

極簡流Web全棧開發

開發環境安裝隻需要wamp、notepad++即可(kě),版本控制用tortoisesvn足矣。

搭配起環境,你(nǐ)隻會感慨,so easy

實際開發中(zhōng),mysql使用對新手來說還是有點麻煩,更方便的做法是借鑒大數據的HDFS存取方式,使用文(wén)件。僅個(gè)人網站(zhàn)開發,文(wén)件私有方法讀取會更高效。

WAP環境最小全棧HelloWorld

文(wén)件目錄結構

WAMPServerwww目錄下(xià),隻需要三個(gè)文(wén)件。404.html是後端入口,404.html是視圖頁面,data.dbdata.txt也行)是數據存儲文(wén)件。

404.html
404.html
data.db

404.html最小代碼

<?php
if (isset($_GET[‘get_msg’])) {
    echo file_get_contents("data.db");
}
else {
    require_once("404.html");
}
?>

404.html最小代碼

<html>
    <head>
        <style>…… </style>	
    </head>
    <body>
        <h1>Hello World</h1>
        ……
    </body>
</html>
<script> ……</script>

為了方便,CSS和(hé)JS都放在HTML代碼中(zhōng)。

請求和(hé)返回

後台功能實現後,需要JS代碼實現與後端的交互,即用戶交互。原生JS最小實現

<script> 
function get_msg_from_server() {
	//console.log(" get_msg_from_server ");
	var em = document.getElementById('content');
	var xmlhttp=new XMLHttpRequest();
	xmlhttp.onreadystatechange=function() {
		if (xmlhttp.readyState==4 && xmlhttp.status==200) {
			 em.innerHtml = xmlhttp.responseText;
		}
	}
	xmlhttp.open("GET","?get_msg",true);
	xmlhttp.send();
}
get_msg_from_server();
</script>

至此,最小全棧開發完成。本文(wén)代碼僅示例,更多請到逐夢小站(zhàn) 開發者模式分析。

結語

這裡寫圖片描述

至此,本文(wén)結束。想了解更對,歡迎留言或郵件我。最後引用Linux之父Linus的格言:

Talk is cheap, show me the code

相關(guān)案例查看更多