做為嵌入式行業(yè)的從業(yè)者，最近經(jīng)常聽(tīng)到PAAS，SAAS等和”云”相關(guān)的概念，被整的一頭霧水。很多時(shí)候咱們的物聯(lián)網(wǎng)硬件設(shè)備都會(huì)有一個(gè)云平臺(tái)，用于設(shè)備管理或者UI應(yīng)用展示等功能，這通常是由專門(mén)的前后端工程師配合美工一起完成。作為一個(gè)門(mén)外漢，我計(jì)劃簡(jiǎn)單學(xué)一下這方面的基礎(chǔ)知識(shí)，以后也好和別人瞎侃，免得出現(xiàn)插不上話的尷尬。

先簡(jiǎn)單說(shuō)說(shuō)什么是前端和后端，以我們每天使用的百度為例，你在瀏覽器，就顯示了如下呈現(xiàn)在你眼前的界面，這就是前端

比如你在搜索框里輸入黑洞，然后點(diǎn)擊百度一下，真的出現(xiàn)了一個(gè)黑洞，

是不是很炫，這就是前端干的事。前端指的是用戶可見(jiàn)的界面，網(wǎng)站前端頁(yè)面也就是網(wǎng)頁(yè)的頁(yè)面開(kāi)發(fā)，比如網(wǎng)頁(yè)上的特效、布局、圖片、視頻，音頻等內(nèi)容。前端的工作內(nèi)容就是將美工設(shè)計(jì)的效果圖的設(shè)計(jì)成瀏覽器可以運(yùn)行的網(wǎng)頁(yè)，并配合后端做網(wǎng)頁(yè)的數(shù)據(jù)顯示和交互等可視方面的工作內(nèi)容。

當(dāng)然要實(shí)現(xiàn)這效果，也不是單單前端自己就完成了，背后離不開(kāi)后端的支持，你百度的那一下，后端是做了很多工作的。后端是指用戶看不見(jiàn)的東西，通常是與前端工程師進(jìn)行數(shù)據(jù)交互及網(wǎng)站數(shù)據(jù)的保存和讀取，相對(duì)來(lái)說(shuō)后端涉及到的邏輯代碼比前端要多的多，后端考慮的是底層業(yè)務(wù)邏輯的實(shí)現(xiàn)，平臺(tái)的穩(wěn)定性與性能等。

那么前端、后端一般用什么編譯語(yǔ)言呢？

前端開(kāi)發(fā)用到的語(yǔ)言主要是html、css、javascript，其他相關(guān)的還包括jquery、Bootstrap、ReactJs，VueJs等技術(shù)。

后端開(kāi)發(fā)，用的編程語(yǔ)言包括java，python，go，還有c＋＋，不同的語(yǔ)言都有自己的主流框架，比如java的框架有spring boot。java最多相關(guān)組件最完善，python最快最輕，go最新。大公司一般用Java。新上手可以用python快速上手，門(mén)檻最低。

剛聽(tīng)到上面一堆名詞，我也是云里霧里，不過(guò)沒(méi)關(guān)系，咱們先入門(mén)，慢慢學(xué)。

我們先實(shí)現(xiàn)一個(gè)簡(jiǎn)單的功能，在瀏覽器里輸入一個(gè)地址，顯示一個(gè)最簡(jiǎn)單的網(wǎng)頁(yè)，網(wǎng)頁(yè)里的內(nèi)容是Hello World。

第一步，我們先新建一個(gè)hello．html，在Nodepad＋＋或者Vscode里編輯

＜！DOCTYPE html＞＜html＞＜head＞＜meta charset＝＂utf－8＂＞＜title＞第一個(gè)html例子＜／title＞＜／head＞＜body＞    Hello World�。迹痓ody＞＜／html＞其中： ＜！DOCTYPEhtml＞ 聲明為 HTML5 文檔＜html＞ 元素是 HTML 頁(yè)面的根元素＜head＞ 元素包含了文檔的元（meta）數(shù)據(jù)，如＜metacharset＝＂utf－8＂＞定義網(wǎng)頁(yè)編碼格式為 utf－8。

＜title＞ 元素描述了文檔的標(biāo)題

＜body＞元素包含了可見(jiàn)的頁(yè)面內(nèi)容大家可以到菜鳥(niǎo)教程里學(xué)習(xí)html，里面介紹的非常詳細(xì)。之后你用瀏覽器就可以直接打開(kāi)了，HTML稱為超文本標(biāo)記語(yǔ)言，是不需要編譯的，HTML 運(yùn)行在瀏覽器上，由瀏覽器來(lái)解析

在瀏覽器的頁(yè)面上使用鍵盤(pán)上的 F12 按鍵開(kāi)啟調(diào)試模式，就可以看到背后的實(shí)現(xiàn)。

下一步我們實(shí)現(xiàn)通過(guò)瀏覽器輸入本機(jī)的IP地址來(lái)訪問(wèn)，先把Python裝起來(lái)，輸入：python －m SimpleHTTPServer 8083快速搭建一個(gè)http服務(wù)。這是python自帶的功能。

如果提示python找不到，修改下環(huán)境變量，添加上python的安裝路徑即可。然后瀏覽器輸入IP加端口即可訪問(wèn)，

把hello．html改為index．html，就可以直接顯示出來(lái)了，

如果你有阿里云服務(wù)器，同樣的做法，就可以遠(yuǎn)程訪問(wèn)部署在阿里云上的網(wǎng)頁(yè)。這樣在任何一臺(tái)可以上網(wǎng)的電腦上都可以遠(yuǎn)程訪問(wèn)該頁(yè)面。剛開(kāi)始我的阿里云一直訪問(wèn)不上，后來(lái)找到原因是安全規(guī)則設(shè)置的問(wèn)題，登錄阿里云配置一下，就可以了。

覺(jué)得有用，就點(diǎn)個(gè)贊或者在看吧。