从hello server开始，到hello client结束
生活随笔
收集整理的這篇文章主要介紹了
从hello server开始，到hello client结束
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
大家看標題，《從hello server開始，到hello client結束》，其實也是受了學習C種語言的第一個例子”hello world！“的啟發，這個例子的實現，當年讓我們對程序充滿了好奇，實現了之后還很有成就感，打開了我學習計算機語言的大門。
今天主要呢，也是想通過一個例子，給大家展現一個互聯網最常見的前后端的demo，從hello server開始，到hello client結束，來滿足大家對互聯網技術的好奇和成就感，簡單洞悉一下互聯網的前端和后端技術，打開互聯網技術的一扇門。大佬飄過即可，小白留步。
首先我們把這個demo當成一個項目，我們要有一個需求，這個需求呢一般都是產品經理或者項目經理輸出需求文檔，當然了這里的需求主要是客戶的需求。我們這個例子的需求，就是盡可能簡單的展現互聯網的前后端技術，一個后端服務，一個帶按鈕和文本框的網頁即可。前端發送一個”hello server“消息，后端給回復一個”hello client“消息即可。
需求明確了，我們該干什么了，制定技術方案，技術架構，哈哈，這個例子太簡單了，技術架構有點夸張！前端技術有哪些呢？Vue，React，JQuery，原生js，還有html5、css3。我們這個需求就不用上框架了，這樣對新手同學也比較友好。
后端技術有哪些呢？Java SSM和Springboot，Nodejs Express，Python Flask，Go Web，這些就是目前主流的Web開發吧，當然PHP是最好的語言！這里使用Nodejs去實現后端服務，是不是有種立馬全棧的感覺。我個人是非常看好JavaScript的前景的，我覺得是程序員必須學習的一門語言。
然后該干什么了，擼起代碼來！我這里推薦使用ubuntu系統，不會使用Linux系統的程序員不是好程序員。今天推薦使用的IDE工具是微軟開發的Vscode。前端和后端都可以使用這個工具開發。下圖就是Vscode的界面。
大家可以看到，我用Vscode創建了一個DEMO的WORKSPACE。我創建了兩個文件夾，demoserver文件夾和democlient文件夾。我們先用Nodejs開發后端服務，我在demoserver文件夾中創建了一個server.js文件。代碼如下：
const express =require('express'); const app = express(); app.all('*', function (req, res, next) {res.header('Access-Control-Allow-Origin', '*');//Access-Control-Allow-Headers ,可根據瀏覽器的F12查看,把對應的粘貼在這里就行res.header('Access-Control-Allow-Headers', 'Content-Type');res.header('Access-Control-Allow-Methods', '*');res.header('Content-Type', 'application/json;charset=utf-8');next();}); app.get('/',(req , res) => {res.statusCode = 200;res.send('{"message":"hello client","status":"true"}'); }) app.listen(3000 , () =>{console.log('Express web app on localhost：3000'); })復制代碼
這里我們使用了express，是Nodejs的一個流行Web框架。const app = express();實例化了一個express對象。app.listen，實現了偵聽本地3000端口，app.get實現了路由和后端服務API，前端可以調用這個API，來獲取message，app.all部分則是解決了網絡的跨域問題。進入debug界面，點擊調試按鈕，即可運行這個服務，界面如下：
下面我們使用h5+js+jQuery去實現前端頁面，我在democlient創建了index.html和client.js兩個文件。index.html主要是頁面實現，一個按鍵和一個段落，很簡單，引入了兩個js文件，一個是jQuery，一個是我們要實現的js文件，代碼如下：
<html> <head><title>hello client</title> </head> <body><button id="button">hello server</button><p id="text"></p><script src="client.js"></script><script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> </body> </html>復制代碼
client.js中主要實現了偵聽button按鍵，在按下button按鍵的同時，通過AJAX發送GET請求到后端，并接收后端的響應，將響應信息解析之后顯示在頁面上。代碼如下：
document.getElementById("button").onclick=function(){//document.write("aaaaaa") ;$.ajax({ type:'GET', contentType :'application/json', dataType:'json', url :'http://localhost:3000/',success :function(result){ if (result.status=="true"){document.getElementById("text").innerHTML=result.message;}else{document.getElementById("text").innerHTML = "error";}},error: function(xmlHttpRequest, textStatus, errorThrown){alert("請求對象XMLHttpRequest: "+XMLHttpRequest);alert("錯誤類型textStatus: "+textStatus); alert("異常對象errorThrown: "+errorThrown); } }); };復制代碼
如何打開網頁？選中index.html，右鍵點擊，選擇Open in Other Browers，可以選擇在Google Chrome中打開 頁面。
打開頁面后，點擊hello server按鈕，就可以看到下方顯示hello client，如下圖所示。
當然我們還可以擴展這個例子，前端的實現，除了可以增加功能外，還可以使用框架去實現，vue和eact，甚至可以用小程序或者微信網頁去做。后端服務的實現除了可以增加功能外，還可以用Java、pyhton和go去實現，還可以增加數據庫的交互。這些都是在我們學習的過程中要去實現的。
希望這個例子可以讓你了解前后端開發的一個影子，激發你學習前后端的興趣，給你帶來一點成就感。
今天主要呢，也是想通過一個例子，給大家展現一個互聯網最常見的前后端的demo，從hello server開始，到hello client結束，來滿足大家對互聯網技術的好奇和成就感，簡單洞悉一下互聯網的前端和后端技術，打開互聯網技術的一扇門。大佬飄過即可，小白留步。
首先我們把這個demo當成一個項目，我們要有一個需求，這個需求呢一般都是產品經理或者項目經理輸出需求文檔，當然了這里的需求主要是客戶的需求。我們這個例子的需求，就是盡可能簡單的展現互聯網的前后端技術，一個后端服務，一個帶按鈕和文本框的網頁即可。前端發送一個”hello server“消息，后端給回復一個”hello client“消息即可。
需求明確了，我們該干什么了，制定技術方案，技術架構，哈哈，這個例子太簡單了，技術架構有點夸張！前端技術有哪些呢？Vue，React，JQuery，原生js，還有html5、css3。我們這個需求就不用上框架了，這樣對新手同學也比較友好。
后端技術有哪些呢？Java SSM和Springboot，Nodejs Express，Python Flask，Go Web，這些就是目前主流的Web開發吧，當然PHP是最好的語言！這里使用Nodejs去實現后端服務，是不是有種立馬全棧的感覺。我個人是非常看好JavaScript的前景的，我覺得是程序員必須學習的一門語言。
然后該干什么了，擼起代碼來！我這里推薦使用ubuntu系統，不會使用Linux系統的程序員不是好程序員。今天推薦使用的IDE工具是微軟開發的Vscode。前端和后端都可以使用這個工具開發。下圖就是Vscode的界面。
大家可以看到，我用Vscode創建了一個DEMO的WORKSPACE。我創建了兩個文件夾，demoserver文件夾和democlient文件夾。我們先用Nodejs開發后端服務，我在demoserver文件夾中創建了一個server.js文件。代碼如下：
const express =require('express'); const app = express(); app.all('*', function (req, res, next) {res.header('Access-Control-Allow-Origin', '*');//Access-Control-Allow-Headers ,可根據瀏覽器的F12查看,把對應的粘貼在這里就行res.header('Access-Control-Allow-Headers', 'Content-Type');res.header('Access-Control-Allow-Methods', '*');res.header('Content-Type', 'application/json;charset=utf-8');next();}); app.get('/',(req , res) => {res.statusCode = 200;res.send('{"message":"hello client","status":"true"}'); }) app.listen(3000 , () =>{console.log('Express web app on localhost：3000'); })復制代碼
這里我們使用了express，是Nodejs的一個流行Web框架。const app = express();實例化了一個express對象。app.listen，實現了偵聽本地3000端口，app.get實現了路由和后端服務API，前端可以調用這個API，來獲取message，app.all部分則是解決了網絡的跨域問題。進入debug界面，點擊調試按鈕，即可運行這個服務，界面如下：
下面我們使用h5+js+jQuery去實現前端頁面，我在democlient創建了index.html和client.js兩個文件。index.html主要是頁面實現，一個按鍵和一個段落，很簡單，引入了兩個js文件，一個是jQuery，一個是我們要實現的js文件，代碼如下：
<html> <head><title>hello client</title> </head> <body><button id="button">hello server</button><p id="text"></p><script src="client.js"></script><script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> </body> </html>復制代碼
client.js中主要實現了偵聽button按鍵，在按下button按鍵的同時，通過AJAX發送GET請求到后端，并接收后端的響應，將響應信息解析之后顯示在頁面上。代碼如下：
document.getElementById("button").onclick=function(){//document.write("aaaaaa") ;$.ajax({ type:'GET', contentType :'application/json', dataType:'json', url :'http://localhost:3000/',success :function(result){ if (result.status=="true"){document.getElementById("text").innerHTML=result.message;}else{document.getElementById("text").innerHTML = "error";}},error: function(xmlHttpRequest, textStatus, errorThrown){alert("請求對象XMLHttpRequest: "+XMLHttpRequest);alert("錯誤類型textStatus: "+textStatus); alert("異常對象errorThrown: "+errorThrown); } }); };復制代碼
如何打開網頁？選中index.html，右鍵點擊，選擇Open in Other Browers，可以選擇在Google Chrome中打開 頁面。
打開頁面后，點擊hello server按鈕，就可以看到下方顯示hello client，如下圖所示。
當然我們還可以擴展這個例子，前端的實現，除了可以增加功能外，還可以使用框架去實現，vue和eact，甚至可以用小程序或者微信網頁去做。后端服務的實現除了可以增加功能外，還可以用Java、pyhton和go去實現，還可以增加數據庫的交互。這些都是在我們學習的過程中要去實現的。
希望這個例子可以讓你了解前后端開發的一個影子，激發你學習前后端的興趣，給你帶來一點成就感。
轉載于:https://juejin.im/post/5cf68cb35188254a6c23d8e1
總結
以上是生活随笔為你收集整理的从hello server开始，到hello client结束的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【转载】Linux命令-自动挂载文件/e
- 下一篇： 带参数二维码如何跟踪用户来自哪个推广人员