从hello server开始，到hello client结束
生活随笔
收集整理的這篇文章主要介紹了
从hello server开始，到hello client结束
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
大家看標(biāo)題，《從hello server開(kāi)始，到hello client結(jié)束》，其實(shí)也是受了學(xué)習(xí)C種語(yǔ)言的第一個(gè)例子”hello world！“的啟發(fā)，這個(gè)例子的實(shí)現(xiàn)，當(dāng)年讓我們對(duì)程序充滿了好奇，實(shí)現(xiàn)了之后還很有成就感，打開(kāi)了我學(xué)習(xí)計(jì)算機(jī)語(yǔ)言的大門。
今天主要呢，也是想通過(guò)一個(gè)例子，給大家展現(xiàn)一個(gè)互聯(lián)網(wǎng)最常見(jiàn)的前后端的demo，從hello server開(kāi)始，到hello client結(jié)束，來(lái)滿足大家對(duì)互聯(lián)網(wǎng)技術(shù)的好奇和成就感，簡(jiǎn)單洞悉一下互聯(lián)網(wǎng)的前端和后端技術(shù)，打開(kāi)互聯(lián)網(wǎng)技術(shù)的一扇門。大佬飄過(guò)即可，小白留步。
首先我們把這個(gè)demo當(dāng)成一個(gè)項(xiàng)目，我們要有一個(gè)需求，這個(gè)需求呢一般都是產(chǎn)品經(jīng)理或者項(xiàng)目經(jīng)理輸出需求文檔，當(dāng)然了這里的需求主要是客戶的需求。我們這個(gè)例子的需求，就是盡可能簡(jiǎn)單的展現(xiàn)互聯(lián)網(wǎng)的前后端技術(shù)，一個(gè)后端服務(wù)，一個(gè)帶按鈕和文本框的網(wǎng)頁(yè)即可。前端發(fā)送一個(gè)”hello server“消息，后端給回復(fù)一個(gè)”hello client“消息即可。
需求明確了，我們?cè)摳墒裁戳?#xff0c;制定技術(shù)方案，技術(shù)架構(gòu)，哈哈，這個(gè)例子太簡(jiǎn)單了，技術(shù)架構(gòu)有點(diǎn)夸張！前端技術(shù)有哪些呢？Vue，React，JQuery，原生js，還有html5、css3。我們這個(gè)需求就不用上框架了，這樣對(duì)新手同學(xué)也比較友好。
后端技術(shù)有哪些呢？Java SSM和Springboot，Nodejs Express，Python Flask，Go Web，這些就是目前主流的Web開(kāi)發(fā)吧，當(dāng)然PHP是最好的語(yǔ)言！這里使用Nodejs去實(shí)現(xiàn)后端服務(wù)，是不是有種立馬全棧的感覺(jué)。我個(gè)人是非常看好JavaScript的前景的，我覺(jué)得是程序員必須學(xué)習(xí)的一門語(yǔ)言。
然后該干什么了，擼起代碼來(lái)！我這里推薦使用ubuntu系統(tǒng)，不會(huì)使用Linux系統(tǒng)的程序員不是好程序員。今天推薦使用的IDE工具是微軟開(kāi)發(fā)的Vscode。前端和后端都可以使用這個(gè)工具開(kāi)發(fā)。下圖就是Vscode的界面。
大家可以看到，我用Vscode創(chuàng)建了一個(gè)DEMO的WORKSPACE。我創(chuàng)建了兩個(gè)文件夾，demoserver文件夾和democlient文件夾。我們先用Nodejs開(kāi)發(fā)后端服務(wù)，我在demoserver文件夾中創(chuàng)建了一個(gè)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 ,可根據(jù)瀏覽器的F12查看,把對(duì)應(yīng)的粘貼在這里就行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'); })復(fù)制代碼
這里我們使用了express，是Nodejs的一個(gè)流行Web框架。const app = express();實(shí)例化了一個(gè)express對(duì)象。app.listen，實(shí)現(xiàn)了偵聽(tīng)本地3000端口，app.get實(shí)現(xiàn)了路由和后端服務(wù)API，前端可以調(diào)用這個(gè)API，來(lái)獲取message，app.all部分則是解決了網(wǎng)絡(luò)的跨域問(wèn)題。進(jìn)入debug界面，點(diǎn)擊調(diào)試按鈕，即可運(yùn)行這個(gè)服務(wù)，界面如下：
下面我們使用h5+js+jQuery去實(shí)現(xiàn)前端頁(yè)面，我在democlient創(chuàng)建了index.html和client.js兩個(gè)文件。index.html主要是頁(yè)面實(shí)現(xiàn)，一個(gè)按鍵和一個(gè)段落，很簡(jiǎn)單，引入了兩個(gè)js文件，一個(gè)是jQuery，一個(gè)是我們要實(shí)現(xiàn)的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>復(fù)制代碼
client.js中主要實(shí)現(xiàn)了偵聽(tīng)button按鍵，在按下button按鍵的同時(shí)，通過(guò)AJAX發(fā)送GET請(qǐng)求到后端，并接收后端的響應(yīng)，將響應(yīng)信息解析之后顯示在頁(yè)面上。代碼如下：
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("請(qǐng)求對(duì)象XMLHttpRequest: "+XMLHttpRequest);alert("錯(cuò)誤類型textStatus: "+textStatus); alert("異常對(duì)象errorThrown: "+errorThrown); } }); };復(fù)制代碼
如何打開(kāi)網(wǎng)頁(yè)？選中index.html，右鍵點(diǎn)擊，選擇Open in Other Browers，可以選擇在Google Chrome中打開(kāi) 頁(yè)面。
打開(kāi)頁(yè)面后，點(diǎn)擊hello server按鈕，就可以看到下方顯示hello client，如下圖所示。
當(dāng)然我們還可以擴(kuò)展這個(gè)例子，前端的實(shí)現(xiàn)，除了可以增加功能外，還可以使用框架去實(shí)現(xiàn)，vue和eact，甚至可以用小程序或者微信網(wǎng)頁(yè)去做。后端服務(wù)的實(shí)現(xiàn)除了可以增加功能外，還可以用Java、pyhton和go去實(shí)現(xiàn)，還可以增加數(shù)據(jù)庫(kù)的交互。這些都是在我們學(xué)習(xí)的過(guò)程中要去實(shí)現(xiàn)的。
希望這個(gè)例子可以讓你了解前后端開(kāi)發(fā)的一個(gè)影子，激發(fā)你學(xué)習(xí)前后端的興趣，給你帶來(lái)一點(diǎn)成就感。
今天主要呢，也是想通過(guò)一個(gè)例子，給大家展現(xiàn)一個(gè)互聯(lián)網(wǎng)最常見(jiàn)的前后端的demo，從hello server開(kāi)始，到hello client結(jié)束，來(lái)滿足大家對(duì)互聯(lián)網(wǎng)技術(shù)的好奇和成就感，簡(jiǎn)單洞悉一下互聯(lián)網(wǎng)的前端和后端技術(shù)，打開(kāi)互聯(lián)網(wǎng)技術(shù)的一扇門。大佬飄過(guò)即可，小白留步。
首先我們把這個(gè)demo當(dāng)成一個(gè)項(xiàng)目，我們要有一個(gè)需求，這個(gè)需求呢一般都是產(chǎn)品經(jīng)理或者項(xiàng)目經(jīng)理輸出需求文檔，當(dāng)然了這里的需求主要是客戶的需求。我們這個(gè)例子的需求，就是盡可能簡(jiǎn)單的展現(xiàn)互聯(lián)網(wǎng)的前后端技術(shù)，一個(gè)后端服務(wù)，一個(gè)帶按鈕和文本框的網(wǎng)頁(yè)即可。前端發(fā)送一個(gè)”hello server“消息，后端給回復(fù)一個(gè)”hello client“消息即可。
需求明確了，我們?cè)摳墒裁戳?#xff0c;制定技術(shù)方案，技術(shù)架構(gòu)，哈哈，這個(gè)例子太簡(jiǎn)單了，技術(shù)架構(gòu)有點(diǎn)夸張！前端技術(shù)有哪些呢？Vue，React，JQuery，原生js，還有html5、css3。我們這個(gè)需求就不用上框架了，這樣對(duì)新手同學(xué)也比較友好。
后端技術(shù)有哪些呢？Java SSM和Springboot，Nodejs Express，Python Flask，Go Web，這些就是目前主流的Web開(kāi)發(fā)吧，當(dāng)然PHP是最好的語(yǔ)言！這里使用Nodejs去實(shí)現(xiàn)后端服務(wù)，是不是有種立馬全棧的感覺(jué)。我個(gè)人是非常看好JavaScript的前景的，我覺(jué)得是程序員必須學(xué)習(xí)的一門語(yǔ)言。
然后該干什么了，擼起代碼來(lái)！我這里推薦使用ubuntu系統(tǒng)，不會(huì)使用Linux系統(tǒng)的程序員不是好程序員。今天推薦使用的IDE工具是微軟開(kāi)發(fā)的Vscode。前端和后端都可以使用這個(gè)工具開(kāi)發(fā)。下圖就是Vscode的界面。
大家可以看到，我用Vscode創(chuàng)建了一個(gè)DEMO的WORKSPACE。我創(chuàng)建了兩個(gè)文件夾，demoserver文件夾和democlient文件夾。我們先用Nodejs開(kāi)發(fā)后端服務(wù)，我在demoserver文件夾中創(chuàng)建了一個(gè)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 ,可根據(jù)瀏覽器的F12查看,把對(duì)應(yīng)的粘貼在這里就行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'); })復(fù)制代碼
這里我們使用了express，是Nodejs的一個(gè)流行Web框架。const app = express();實(shí)例化了一個(gè)express對(duì)象。app.listen，實(shí)現(xiàn)了偵聽(tīng)本地3000端口，app.get實(shí)現(xiàn)了路由和后端服務(wù)API，前端可以調(diào)用這個(gè)API，來(lái)獲取message，app.all部分則是解決了網(wǎng)絡(luò)的跨域問(wèn)題。進(jìn)入debug界面，點(diǎn)擊調(diào)試按鈕，即可運(yùn)行這個(gè)服務(wù)，界面如下：
下面我們使用h5+js+jQuery去實(shí)現(xiàn)前端頁(yè)面，我在democlient創(chuàng)建了index.html和client.js兩個(gè)文件。index.html主要是頁(yè)面實(shí)現(xiàn)，一個(gè)按鍵和一個(gè)段落，很簡(jiǎn)單，引入了兩個(gè)js文件，一個(gè)是jQuery，一個(gè)是我們要實(shí)現(xiàn)的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>復(fù)制代碼
client.js中主要實(shí)現(xiàn)了偵聽(tīng)button按鍵，在按下button按鍵的同時(shí)，通過(guò)AJAX發(fā)送GET請(qǐng)求到后端，并接收后端的響應(yīng)，將響應(yīng)信息解析之后顯示在頁(yè)面上。代碼如下：
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("請(qǐng)求對(duì)象XMLHttpRequest: "+XMLHttpRequest);alert("錯(cuò)誤類型textStatus: "+textStatus); alert("異常對(duì)象errorThrown: "+errorThrown); } }); };復(fù)制代碼
如何打開(kāi)網(wǎng)頁(yè)？選中index.html，右鍵點(diǎn)擊，選擇Open in Other Browers，可以選擇在Google Chrome中打開(kāi) 頁(yè)面。
打開(kāi)頁(yè)面后，點(diǎn)擊hello server按鈕，就可以看到下方顯示hello client，如下圖所示。
當(dāng)然我們還可以擴(kuò)展這個(gè)例子，前端的實(shí)現(xiàn)，除了可以增加功能外，還可以使用框架去實(shí)現(xiàn)，vue和eact，甚至可以用小程序或者微信網(wǎng)頁(yè)去做。后端服務(wù)的實(shí)現(xiàn)除了可以增加功能外，還可以用Java、pyhton和go去實(shí)現(xiàn)，還可以增加數(shù)據(jù)庫(kù)的交互。這些都是在我們學(xué)習(xí)的過(guò)程中要去實(shí)現(xiàn)的。
希望這個(gè)例子可以讓你了解前后端開(kāi)發(fā)的一個(gè)影子，激發(fā)你學(xué)習(xí)前后端的興趣，給你帶來(lái)一點(diǎn)成就感。
轉(zhuǎn)載于:https://juejin.im/post/5cf68cb35188254a6c23d8e1
總結(jié)
以上是生活随笔為你收集整理的从hello server开始，到hello client结束的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 【转载】Linux命令-自动挂载文件/e
- 下一篇： 带参数二维码如何跟踪用户来自哪个推广人员