javascript - 請問做一個動態網站的原理是什麼呢?

來源:互聯網
上載者:User
關鍵字 javascript php html5 html
其實我對製作網頁時間也不長,但是我以前用 vb vc 寫過遊戲輔助軟體,對編程還是瞭解點的;
我經過一段時間學習,對js,php,sql,html 函數,對象,文法變數也都有一定的瞭解了;

我會用php 配合 sql 在 MySQL 提取資料;
也會用css改介面樣式;
也會用JavaScript處理一些事件;
但是我不會連起來用........

比如別人提交了一個資訊之後,
我會返回一個獨一無二的網址,就比如我們都在

segmentfault.com
但是我的頁面是:
https://segmentfault.com/u/duofei/;
你的就是一個
https://segmentfault.com/u/樂於助人的好人甲/

我們的首頁分別有我們的文章數,提問數,回答數,等等等;

我想問問,這個過程是怎麼回事?

當然,我會 用 PHP echo".. .." 出一個網頁,
但是我覺得不可能一個網頁是用 PHP echo 做的,肯定是先設計好一個 html 網頁,存到伺服器的硬碟;

然後還有 js ,css檔案,也存到伺服器,你點的時候,串連到事先準備好的html檔案,把js,css等檔案下到你電腦的緩衝;

然後你的電腦去解析這個html,執行css 樣式表 和 js 檔案,把html 的文章啊,粉絲啊,提問啊,回答啊,積分啊,都反饋給你;

我想問問,這些都是怎麼回事?我還得學什麼,才能獨立的弄個簡單的網站?

回複內容:

其實我對製作網頁時間也不長,但是我以前用 vb vc 寫過遊戲輔助軟體,對編程還是瞭解點的;
我經過一段時間學習,對js,php,sql,html 函數,對象,文法變數也都有一定的瞭解了;

我會用php 配合 sql 在 MySQL 提取資料;
也會用css改介面樣式;
也會用JavaScript處理一些事件;
但是我不會連起來用........

比如別人提交了一個資訊之後,
我會返回一個獨一無二的網址,就比如我們都在

segmentfault.com
但是我的頁面是:
https://segmentfault.com/u/duofei/;
你的就是一個
https://segmentfault.com/u/樂於助人的好人甲/

我們的首頁分別有我們的文章數,提問數,回答數,等等等;

我想問問,這個過程是怎麼回事?

當然,我會 用 PHP echo".. .." 出一個網頁,
但是我覺得不可能一個網頁是用 PHP echo 做的,肯定是先設計好一個 html 網頁,存到伺服器的硬碟;

然後還有 js ,css檔案,也存到伺服器,你點的時候,串連到事先準備好的html檔案,把js,css等檔案下到你電腦的緩衝;

然後你的電腦去解析這個html,執行css 樣式表 和 js 檔案,把html 的文章啊,粉絲啊,提問啊,回答啊,積分啊,都反饋給你;

我想問問,這些都是怎麼回事?我還得學什麼,才能獨立的弄個簡單的網站?

MVC架構模式,html模板和後端代碼分離,實現各自的操作;
來回答你的問題,為什麼每個使用者在同一個介面所顯示的效果(資料)不一樣呢?其實也很簡單,在資料表中分別是不同的使用者儲存的資訊也就不同,而儲存這些資訊可能由多個表組成。就像每個人的首頁,以我的首頁舉例:

這裡多個不同的區塊之間的統計和輸出就由mysql語句、PHP代碼、和前端html檔案之間的配合實現。例如:圖片左邊的統計,舉例:我的回答的次數,或許在資料表中就有這樣一個欄位,我每回答一次問題,這個欄位裡的資料就會自加1,然後當我進入這個頁面的時候,mysql直接讀取我這個欄位的值就好了(當然,更複雜的資料統計也皆由sql語句實現,而且這些資料皆是在資料表中讀取),再由PHP代碼在html頁面輸出;

這之間的開始、過程、結束,皆由sql語句、php(或者其他後端語言)、前端代碼(html、css、js等)構成。

動態網頁是將頁面的資料邏輯和顯示邏輯分開的東西,顯示邏輯就相當與HTML布局的固定部分,比如某個div的定義部分,而其中的資料內容比如

[there are some php echo]

這樣來實現動態網頁面的,當然了,你也可以將div的echo出來

你可以去研究下thinkphp了

簡單的說一下,很多細節不完全準確。
動態網站的根本原理在於html檔案可以不是一個硬碟上存好的檔案,而是可以直接由程式動態產生,也可以動態修改。

比如你訪問'https://segmentfault.com/u/樂於助人的好人甲/'這個URL
伺服器收到你的訪問請求之後,把'樂於助人的好人甲'從URL裡提取出來,到資料庫裡查到對應ID的資料,然後產生一個包含html檔案資訊的字串填入這些資料,比如
樂於助人的好人甲男,回答xx,提問xxx,聲望……,這些資料無需儲存到磁碟上,直接用網路傳輸給你的瀏覽器,瀏覽器把它當作檔案解析出來,你就看到結果了。
有一些相同的東西比如{{ }}{{ }},回答{{ }},提問{{ }},聲望{{ }}……,如果每次都動態產生效率就太低了,我們可以把這些儲存成一個模板檔案,這樣查看個人首頁時,不同的ID把資訊分門別類填入對應的括弧裡就行了。
此外還可以通過javascript在瀏覽器已經載入出頁面之後,動態從伺服器擷取資料然後更新html頁面。

我認為樓主的最終目的是寫個簡單的網站,可以先從搭建一個伺服器開始,這樣可以去瞭解代理、路由等這些是怎麼回事,如果只是想寫個可訪問的頁面,可以在新浪雲做代碼管理

1、前端頁面
2、後台管理
3、資料庫連接
4、表單設計
5、表單處理

當你在瀏覽器輸入使用者名稱密碼後瀏覽器發送資料給伺服器,伺服器端的PHP根據你輸入的內容去尋找使用者,然後返回你自己的頁面。返回的裡面的動態資料是PHP產生的,PHP從資料庫裡找到然後放到HTML裡的,HTML裡的其他固定內容(像網頁的結構什麼的)是存在伺服器的裡的html檔案裡的(也許是寸在幾個不同的檔案裡,然後PHP把他們和從資料庫裡查詢的資訊整合在一起發給你的瀏覽器)。然後瀏覽器收到HTML檔案,看看裡面應用了哪些css,javascript和圖片檔案,然後向伺服器請求這些檔案,得到這些檔案後才能將整個網頁渲染出來。

先瞭解一下這個~當你在瀏覽器中輸入 google.com 並且按下斷行符號之後發生了什麼?
瞭解完以後,簡單說一下。
比如這個url:https://segmentfault.com/u/duofei/
/u/duofei/ 裡麵包含了兩個參數,伺服器上的動態語言會根據該參數去資料庫查詢,並將結果返回。比如有可能是查詢user表裡,使用者名稱為duofei的使用者。

暴力一點:-)

https://segmentfault.com/u/duofei/實際上是一個伺服器上的一個function,你用瀏覽器開啟這個url就是調用這個function參數是由瀏覽器發送的,然後伺服器等function運行完把return value(可能是html)給你,瀏覽器再把這個html渲染成你看到的樣子

順便說一下我省略了很多很重要的東西,但其中的socket題主需要的

感覺B/S其實就是特化(HTTP)的C/S

其實動態網站比靜態網站就多了一點東西,本質來說就是你請求一些檔案,伺服器發送給你一些檔案,你瀏覽器解釋一些檔案罷了。
在你發送請求之後,伺服器發送給你一些檔案之前先經過服務端語言(php、jsp等等)處理一下
如何處理的?為什麼每個人的sf頁面不同?
這些是基於從資料庫取出資料,並根據資料產生頁面內容。動態要點就是:這些資料是在改變的。比如你訪問小明的網站,他今天寫了一段話(日誌資料更改),造成粉絲關注度大漲(粉絲資料被更改),或者修改了狀態(狀態資料更改)等等,然後服務端語言從資料庫調取資料的時候,加上一些邏輯,比如根據粉絲度進行排行,那些粉絲度高的就被產生到前面,最終就是訪問的頁面和上次不一樣(因為資料改變了,導致產生的頁面就不一樣了)。然後服務端把一坨html,css,js等發給你,你瀏覽器乖乖的按照規則顯示絢麗的頁面,並執行js代碼。配合js,你在頁面上的一些即時操作,js會把這些操作資料發到伺服器,伺服器再返回一些資料,js由這些資料再去更改一些頁面內容,瀏覽器顯示。就是這樣子...

原理就是:動態改變網站結構,就是進行資料互動

動態網站其實就是把資料庫的資料和前台使用者進行互動操作提供一個渠道

  • 相關文章

    聯繫我們

    該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

    如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.