web前後臺互動瞭解(asp,php,nodejs)
接著前面來,說完了與移動端互動,再來說說與後臺互動。這塊東西只能淺嘗則止,畢竟太多了,簡單介紹下,留個印象。當然如果有錯,歡迎指正。
對於前端來說,更多的作用在於展示內容。如果是靜態的內容,前端完全可以勝任不需要後臺支援,比如顯示一張圖片,或一段文字。所以後臺的作用在於,處理資料,動態返回要顯示的內容給前端,前端把接收到的資料顯示出來。比如前端需要顯示登入使用者資訊,於是做了個登入的靜態頁面,使用者輸入了賬號,密碼。這個時候需要把資料傳輸給後臺,後臺就執行一些程式碼,比如驗證賬號密碼,再比如驗證通過後獲取使用者的頭像,暱稱,等級,其他資訊等等,返回給前端。前端就可以在頁面上顯示使用者的頭像,暱稱等資訊。
所以涉及到的技術必須有,如何傳資料給後臺?如何接收後臺傳過來的資料?
前面4種方式差不多:
1.表單形式,點選表單的提交,觸發表單action,然後在後臺啟動對應執行檔案,最後執行內部方法,然後將結果回傳
2.通過路徑直接訪問後臺啟動對應執行檔案,最後執行內部方法,然後將結果回傳
3.通過ajax執行非同步操作訪問後臺啟動對應執行檔案,最後執行內部方法,然後將結果回傳
4.使用Service sent Event(暫時不知道是啥,反正有這麼個機制)指定後臺檔案,最後執行內部方法,然後將結果回傳
都是指定後臺執行檔案,然後拿到結果。.action字尾的檔案是Structs框架可以識別的,我們不用管,知道後臺可以識別這個字尾找到對應檔案就行。這裡他採用的都是這種相對路徑,所以很顯然我們寫好的前端頁面必須和這些後臺檔案部署在伺服器的同一位置,這樣才能找到。據瞭解asp,php都是類似這種方式進行互動的。所以可以直接在提交表單的時候直接訪問一個php或者asp檔案。
asp程式碼:
//下面開始就是asp內容
<%
dim fname
fname=Request.QueryString(“fname”)
If fname<>”” Then
Response.Write(“你好!” & fname & “!
”)
Response.Write(“今天過得怎麼樣?”)
End If
%>
php類似asp可以嵌入到html
第5種類方式:
5.通過websocket的方式進行互動。這種方式之所以感覺不一樣,實在是因為太類似socket了。做過其他平臺開發的弟兄們肯定清楚,利用socket與服務端socket建立連線,然後互動。這種不是指定檔案,而是建立與後臺的連線,類似打電話,電話通了就可以對話了。
而我們說的nodejs與第5種本質類似,但是不是顯示使用socket的。nodejs實際上就是編寫js指令碼,只不過這個指令碼執行在服務端,比如
‘use strict’;
// 匯入http模組:
var http = require(‘http’);
// 建立http server,並傳入回撥函式:
var server = http.createServer(function (request, response) {
// 回撥函式接收request和response物件,
// 獲得HTTP請求的method和url:
console.log(request.method + ‘: ’ + request.url);
// 將HTTP響應200寫入response, 同時設定Content-Type: text/html:
response.writeHead(200, {‘Content-Type’: ‘text/html’});
// 將HTTP響應的HTML內容寫入response:
response.end(‘
Hello world!
‘);});
// 讓伺服器監聽8080埠:
server.listen(8080);
這樣一段指令碼,部署後啟動執行,在伺服器端監聽8080埠,當有訪問http://伺服器ip:8080的時候,就會響應,此時頁面跳轉顯示“hello world”
大概流程:我是windows64位系統
nodejs官網下載最新版本6.6.0 https://nodejs.org/en/
直接安裝木有什麼特殊的地方
因為已經add to path 所以可以直接在命令列命令
C:\Users\CD>node -v
v6.6.0
進入方式
C:\Users\CD>node
>
退出方式 兩次Ctrl+C
C:\Users\CD>npm -v
3.10.3
此時node執行環境ok,代表著可以在機器上執行nodejs服務端程式了。
就剛才那段helloworld,此時在命令列中執行 node helloworld.js即可啟動,然後在開啟瀏覽器訪問:http://localhost:8080就粗來啦!
接著下去用vs code做開發環境,主要的好處是有提示和可斷點一步步除錯,安裝就不說了。
安裝好開啟helloworld.js
1,2兩步後會發現彈出這個
明顯要選擇nodejs
然後顯示出了一個json讓你進行啟動配置用的,於是配置一下你要啟動的js
對,就是將app.js替換成你的js相對路徑
然後再執行一遍2就可以看到第一張圖,啟動服務了,再次去瀏覽器上看看http://localhost:8080也是可以的(如果80被佔用就換一個)