1. 程式人生 > >Web全棧開發基礎(小白入門版本)

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

近幾個月認真寫了寫Web全棧程式碼,有點小收穫這裡分享一下。我還做了個PPT,資源路徑
歡迎拍磚指點!

Web全棧開發是一個聽起來很虎的名詞。本文從技術層面解釋全棧開發,能幫助沒有全棧概念,或者說對相關技術比如DjangoNode-js等沒有什麼認識的讀者搞明白這些名詞之間有什麼關係。

技術棧

這裡寫圖片描述
Web全棧,是將前端技術、後端技術、前後端互動技術、資料處理及系統部署等技能都能用起來的開發方式。
既能寫介面,又能寫後臺,還可以把資料庫、系統環境之類的都搞定。

技術選型

做開發不能純粹為了技術而技術,在做事情前應現有技術選型、評估階段。比如:當前技術團隊有幾個懂Java、幾個懂PHP、幾個懂Python的,將來團隊技術方向是什麼,現有產品什麼樣,將來是否要繼承,這些都是要考慮的。如果在一個純Python環境下要求用PHP生態鏈,那是要被老闆罵的。

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

這裡推薦WAMP是不帶感情色彩的,理由只有一個,就是最簡單。DjangoLaveral對新手並不那麼友好。至於Node-JS之類的,也只是眾多技術流派中的一種。

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

這裡寫圖片描述

極簡流Web全棧開發

搭配起環境,你只會感慨,so easy

實際開發中,mysql使用對新手來說還是有點麻煩,更方便的做法是借鑑大資料的HDFS存取方式,使用檔案。僅個人網站開發,檔案私有方法讀取會更高效。

WAP環境最小全棧HelloWorld

檔案目錄結構

WAMPServerwww目錄下,只需要三個檔案。index.php是後端入口,home.html是檢視頁面,data.dbdata.txt也行)是資料儲存檔案。

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>

為了方便,CSSJS都放在HTML程式碼中。

請求和返回

後臺功能實現後,需要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>

至此,最小全棧開發完成。本文程式碼僅示例,更多請到逐夢小站 開發者模式分析。

結語

這裡寫圖片描述

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

Talk is cheap, show me the code