Web全棧開發基礎（小白入門版本）

發表時(shí)間：2020-9-10

發布人(rén)：融晨科技

浏覽次數：72

博客傳送門

近幾個(gè)月認真寫了(le／liǎo)寫Web全棧代碼，有點小收獲這(zhè)裏分享一下。我還做了(le／liǎo)個(gè)PPT，資源路徑
歡迎拍磚指點！

Web全棧開發是(shì)一個(gè)聽起來(lái)很虎的(de)名詞。本文從技術層面解釋全棧開發，能幫助沒有全棧概念，或者說(shuō)對相關技術比如Django、Node-js等沒有什麽認識的(de)讀者搞明白這(zhè)些名詞之(zhī)間有什麽關系。

技術棧

這(zhè)裏寫圖片描述
Web全棧，是(shì)将前端技術、後端技術、前後端交互技術、數據處理及系統部署等技能都能用起來(lái)的(de)開發方式。
既能寫界面，又能寫後台，還可以(yǐ)把數據庫、系統環境之(zhī)類的(de)都搞定。

技術選型

做開發不(bù)能純粹爲(wéi / wèi)了(le／liǎo)技術而(ér)技術，在(zài)做事情前應現有技術選型、評估階段。比如：當前技術團隊有幾個(gè)懂Java、幾個(gè)懂PHP、幾個(gè)懂Python的(de)，将來(lái)團隊技術方向是(shì)什麽，現有産品什麽樣，将來(lái)是(shì)否要(yào / yāo)繼承，這(zhè)些都是(shì)要(yào / yāo)考慮的(de)。如果在(zài)一個(gè)純Python環境下要(yào / yāo)求用PHP生态鏈，那是(shì)要(yào / yāo)被老闆罵的(de)。

但作爲(wéi / wèi)小白入門級的(de)獨立開發者，自然是(shì)選擇最簡單入門最容易的(de)環境，那就(jiù)是(shì)windows系統下的(de)Web開發全家桶——WAMP

這(zhè)裏推薦WAMP是(shì)不(bù)帶感情色彩的(de)，理由隻有一個(gè)，就(jiù)是(shì)最簡單。Django和(hé / huò)Laveral對新手并不(bù)那麽友好。至于(yú)Node-JS之(zhī)類的(de)，也(yě)隻是(shì)衆多技術流派中的(de)一種。

Nginx的(de)反向代理對配置環境的(de)新手來(lái)說(shuō)還是(shì)有點麻煩的(de)。在(zài)Windows下支持不(bù)很好不(bù)說(shuō)，很多東西還得一個(gè)一個(gè)裝。當然，有用MAC的(de)同學可以(yǐ)忽視。

這(zhè)裏寫圖片描述

極簡流Web全棧開發

開發環境安裝隻需要(yào / yāo)wamp、notepad++即可，版本控制用tortoisesvn足矣。

搭配起環境，你隻會感慨，so easy

實際開發中，mysql使用對新手來(lái)說(shuō)還是(shì)有點麻煩，更方便的(de)做法是(shì)借鑒大(dà)數據的(de)HDFS存取方式，使用文件。僅個(gè)人(rén)網站開發，文件私有方法讀取會更高效。

WAP環境最小全棧HelloWorld

文件目錄結構

在(zài)WAMPServer的(de)www目錄下，隻需要(yào / yāo)三個(gè)文件。index.php是(shì)後端入口，home.html是(shì)視圖頁面，data.db（data.txt也(yě)行）是(shì)數據存儲文件。

index.php
home.html
data.db

index.php最小代碼

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

home.html最小代碼

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

爲(wéi / wèi)了(le／liǎo)方便，CSS和(hé / huò)JS都放在(zài)HTML代碼中。

請求和(hé / huò)返回

後台功能實現後，需要(yào / yāo)JS代碼實現與後端的(de)交互，即用戶交互。原生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>

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