從hello server開始，到hello client結束

時間 2019-11-15

標籤 hello server 開始 client 結束简体版

原文原文鏈接

你們看標題，《從hello server開始，到hello client結束》，其實也是受了學習C種語言的第一個例子」hello world！「的啓發，這個例子的實現，當年讓咱們對程序充滿了好奇，實現了以後還頗有成就感，打開了我學習計算機語言的大門。

今天主要呢，也是想經過一個例子，給你們展示一個互聯網最多見的先後端的demo，從hello server開始，到hello client結束，來知足你們對互聯網技術的好奇和成就感，簡單洞悉一下互聯網的前端和後端技術，打開互聯網技術的一扇門。大佬飄過便可，小白留步。

首先咱們把這個demo當成一個項目，咱們要有一個需求，這個需求呢通常都是產品經理或者項目經理輸出需求文檔，固然了這裏的需求主要是客戶的需求。咱們這個例子的需求，就是儘量簡單的展示互聯網的先後端技術，一個後端服務，一個帶按鈕和文本框的網頁便可。前端發送一個」hello server「消息，後端給回覆一個」hello client「消息便可。

需求明確了，咱們該幹什麼了，制定技術方案，技術架構，哈哈，這個例子太簡單了，技術架構有點誇張！前端技術有哪些呢？Vue，React，JQuery，原生js，還有html五、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); 
        }   
    });
};複製代碼