Web全棧開(kāi)發(fā)基礎(chǔ)（小白入門(mén)版本）

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

發(fā)布人：葵宇科技

瀏覽次數(shù)：72

博客傳送門(mén)

近幾個(gè)月認(rèn)真寫(xiě)了寫(xiě)Web全棧代碼，有點(diǎn)小收獲這里分享一下。我還做了個(gè)PPT，資源路徑
歡迎拍磚指點(diǎn)！

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

技術(shù)棧

這里寫(xiě)圖片描述
Web全棧，是將前端技術(shù)、后端技術(shù)、前后端交互技術(shù)、數(shù)據(jù)處理及系統(tǒng)部署等技能都能用起來(lái)的開(kāi)發(fā)方式。
既能寫(xiě)界面，又能寫(xiě)后臺(tái)，還可以把數(shù)據(jù)庫(kù)、系統(tǒng)環(huán)境之類(lèi)的都搞定。

技術(shù)選型

做開(kāi)發(fā)不能純粹為了技術(shù)而技術(shù)，在做事情前應(yīng)現(xiàn)有技術(shù)選型、評(píng)估階段。比如：當(dāng)前技術(shù)團(tuán)隊(duì)有幾個(gè)懂Java、幾個(gè)懂PHP、幾個(gè)懂Python的，將來(lái)團(tuán)隊(duì)技術(shù)方向是什么，現(xiàn)有產(chǎn)品什么樣，將來(lái)是否要繼承，這些都是要考慮的。如果在一個(gè)純Python環(huán)境下要求用PHP生態(tài)鏈，那是要被老板罵的。

但作為小白入門(mén)級(jí)的獨(dú)立開(kāi)發(fā)者，自然是選擇最簡(jiǎn)單入門(mén)最容易的環(huán)境，那就是windows系統(tǒng)下的Web開(kāi)發(fā)全家桶——WAMP

這里推薦WAMP是不帶感情色彩的，理由只有一個(gè)，就是最簡(jiǎn)單。Django和Laveral對(duì)新手并不那么友好。至于Node-JS之類(lèi)的，也只是眾多技術(shù)流派中的一種。

Nginx的反向代理對(duì)配置環(huán)境的新手來(lái)說(shuō)還是有點(diǎn)麻煩的。在Windows下支持不很好不說(shuō)，很多東西還得一個(gè)一個(gè)裝。當(dāng)然，有用MAC的同學(xué)可以忽視。

這里寫(xiě)圖片描述

極簡(jiǎn)流Web全棧開(kāi)發(fā)

開(kāi)發(fā)環(huán)境安裝只需要wamp、notepad++即可，版本控制用tortoisesvn足矣。

搭配起環(huán)境，你只會(huì)感慨，so easy

實(shí)際開(kāi)發(fā)中，mysql使用對(duì)新手來(lái)說(shuō)還是有點(diǎn)麻煩，更方便的做法是借鑒大數(shù)據(jù)的HDFS存取方式，使用文件。僅個(gè)人網(wǎng)站開(kāi)發(fā)，文件私有方法讀取會(huì)更高效。

WAP環(huán)境最小全棧HelloWorld

文件目錄結(jié)構(gòu)

在WAMPServer的www目錄下，只需要三個(gè)文件。index.php是后端入口，home.html是視圖頁(yè)面，data.db（data.txt也行）是數(shù)據(jù)存儲(chǔ)文件。

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>

為了方便，CSS和JS都放在HTML代碼中。

請(qǐng)求和返回

后臺(tái)功能實(shí)現(xiàn)后，需要JS代碼實(shí)現(xiàn)與后端的交互，即用戶(hù)交互。原生JS最小實(shí)現(xiàn)

<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>

至此，最小全棧開(kāi)發(fā)完成。本文代碼僅示例，更多請(qǐng)到逐夢(mèng)小站開(kāi)發(fā)者模式分析。