嵌入式工程師跨界學習前後端系列1:訪問一個網頁

       我是做嵌入式的,最近聽了很多關於雲平臺的名詞,比如PAAS,SAAS等,整的我一頭霧水。於是準備學一下這方面的技術知識,不然出去又沒法和人聊天了。計算機相關專業或者本身就是做前後端技術的童鞋可以忽略此文章了,我寫的文章適用於前後端零基礎的同學。

       先簡單說說什麼是前端和後端,以我們每天使用的百度爲例,你在瀏覽器輸入www.baidu.com ,就顯示瞭如下呈現在你眼前的界面,這就是前端

比如你在搜索框裏輸入黑洞,然後點擊百度一下,真的出現了一個黑洞,

是不是很炫,這就是前端乾的事。前端指的是用戶可見的界面,網站前端頁面也就是網頁的頁面開發,比如網頁上的特效、佈局、圖片、視頻,音頻等內容。前端的工作內容就是將美工設計的效果圖的設計成瀏覽器可以運行的網頁,並配合後端做網頁的數據顯示和交互等可視方面的工作內容。

當然要實現這效果,也不是單單前端自己就完成了,背後離不開後端的支持,你百度的那一下,後端是做了很多工作的。後端是指用戶看不見的東西,通常是與前端工程師進行數據交互及網站數據的保存和讀取,相對來說後端涉及到的邏輯代碼比前端要多的多,後端考慮的是底層業務邏輯的實現,平臺的穩定性與性能等。

學一個東西,你肯定關心用什麼編譯語言,用到哪些技術。

前端開發用到的語言主要是html、css、javascript。其他相關的還包括jquery、Bootstrap、ReactJs,VueJs等技術。

後端開發,用的編程語言包括java,python,go,還有c++,不同的語言都有自己的主流框架,比如java的框架有spring boot。java最多相關組件最完善,python最快最輕,go最新。大公司一般用Java。新上手可以用python快速上手,門檻最低。

剛聽到上面一堆名詞,我也是雲裏霧裏,不過沒關係,咱們先入門,慢慢學。

我們先實現一個簡單的功能,在瀏覽器裏輸入一個地址,顯示一個最簡單的網頁,網頁裏的內容是Hello World。

   第一步,我們先新建一個hello.html,用Nodepad++或者visual studio code

https://code.visualstudio.com/  裏編輯

其中:

<!DOCTYPE html> 聲明爲 HTML5 文檔

<html> 元素是 HTML 頁面的根元素

<head> 元素包含了文檔的元(meta)數據,如 <meta charset="utf-8"> 定義網頁編碼格式爲 utf-8。

<title> 元素描述了文檔的標題

<body> 元素包含了可見的頁面內容

https://www.runoob.com/html/html-tutorial.html 大家可以到菜鳥教程裏學習html,裏面介紹的非常詳細。

之後你用瀏覽器就可以直接打開了,HTML稱爲超文本標記語言,是不需要編譯的,HTML 運行在瀏覽器上,由瀏覽器來解析

在瀏覽器的頁面上使用鍵盤上的 F12 按鍵開啓調試模式,就可以看到背後的實現。

下一步我們實現通過瀏覽器輸入本機的IP地址來訪問,

那麼先把Python裝起來吧,https://www.python.org/downloads/release/python-2717/

python -m SimpleHTTPServer 8083

搭建一個http的服務。

 

如果提示python找不到,修改下環境變量,添加上python的安裝路徑即可。

 

然後瀏覽器輸入IP加端口即可訪問,

把hello.html改爲index.html

如果你有阿里雲的服務器,同樣的做法,就可以遠程訪問部署在阿里雲上的網頁。

阿里雲上午一直訪問不上,後來想到可能是防火牆或者安全規則設置的問題,

登錄阿里雲後配置一下,就可以了

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章