（一）：小程式與伺服器的連結

SpearCoder發表於2024-07-04

伺服器

首

原文寫於18年5月，因不再想繼續使用C站，現將主要檔案遷移至部落格園。文中涉及技術部分已相對過時，但依舊對初始web的小朋友具有一定參考價值，權且玩樂。

環境

IDE：myeclipse，伺服器容器Tomcat，服務端主要用servlet。

建立servlet

小程式與伺服器連結（前端和後端的互動）的基本流程：小程式向伺服器傳送帶參或不帶參的請求，其後伺服器對請求作出反應，並將處理結果返回，最後小程式接受並顯示。

首先我們需要知道，伺服器端依靠servlet處理請求，即小程式需要向servlet傳送請求，如何去建立一個servlet呢？file->new->servlet：

填寫Name，建立的方法點選doget和doput就好，這兩種方法分別是處理get和put方法請求的。簡單情況下我們不區別對待，所以，完全可以doput函式里只寫this.doGet();（讓put方法去呼叫get）。（請求的方式有很多種，get和put是最基本的兩種，一般put請求會新增資料，而get則用於查詢資料）

建好servlet前一定要寫好jsp mapping url，也就是圖中第三行內容，這就是客戶端傳送請求時需要的url（可以理解成地址，我們開啟瀏覽器輸入www.xxxxxx.com，位址列裡這個連結就是url【Uniform Resource Locator】，統一資源定位符）。建好servlet後就可以透過專案裡webroot資料夾web—inf裡的web.xml檢視建立情況：

url沒問題就可以。開啟sevlet，把一些沒必要的東西刪掉簡單些，像這樣：

import java.io.IOException;
import java.io.PrintWriter;
 
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
public class textServlet extends HttpServlet {
 
 
public void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
 
        response.setContentType("text/html;charset=utf-8");
        request.setCharacterEncoding("utf-8");//這裡是設定一下編碼格式
 
        System.out.println("收到！");
}
 
 
 
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
 
        this.doGet(request, response);
 
}
}

可以看到這個servlet的功能就是收到請求後，在控制檯打出“收到！”

部署伺服器

IDE不同，按鈕位置可能也不相同，可以去搜下~

選擇好你的專案工程，選擇tomcat伺服器，點“ok”（不是tomcat的需要先把服務容器配好，一般搜尋下就能找到詳細的配置過程，windows - performance裡面，選中容器後出現Successful deployed算是沒問題，不然你可能需要重新配置下伺服器了。)

啟動tomcat伺服器，啟動成功後控制檯顯示資訊：

ok，到這裡伺服器就算佈置完了。接下來我們來談一下什麼是客戶端，又怎樣與伺服器建立連結。

向伺服器傳送請求

其實我們經常使用的瀏覽器就算一種客戶端，通常說的網址，可簡單理解成要傳送到伺服器上的某個地址，也就是我們剛剛設定的url。

我們的服務請求的處理已經編寫完畢（servlet），而且url也已經設定好（web.xml），tomcat也處於開啟狀態（也就是處在可以接受請求的狀態）。現在，我們以瀏覽器為客戶端，向剛才我們寫的服務端的servlet傳送請求，這時候就要用到我們設定的url了。

圖例分別是域名:埠/專案名稱/servlet的url，因為我們的伺服器是本地的，所以域名是localhost，至於8080是tomcat的埠（不同的伺服器容器埠不同），這裡不做過多解釋，需要的大家去查一下，可以查到。Amess是專案的名稱，text就是我們設定的url還記得嗎？

（補充內容:在你的DOS視窗下輸入ipconfig，就可以看到你的區域網IP地址，上面的localhost就可以換成那個IP。例如https://www.cnblogs.com/，這個連結裡面的www.cnblogs.com就是域名，本質是IP地址，簡單理解就是種替換。當我們購買了伺服器後，我們只能透過IP去請求它，IP地址就直接公之於眾了，出於保護，我們可以再買個域名，然後把域名和IP繫結，之後我們就可以透過域名來訪問。我們都知道百度的域名www.baidu.com，但誰知道它的IP地址是啥呢？也沒人在乎呀。所以，上面的localhost理解成自己本機的域名也沒有什麼問題。）

ok，當我們敲擊回車後，瀏覽器（客戶端）就向我們編寫的servlet傳送了請求，但網頁卻什麼也不顯示。這是當然，因為我們對請求的處理就是在服務端控制檯輸出個“收到”，而如果想在瀏覽器上顯示資訊，就是伺服器向客戶端傳送資訊了。（記得把瀏覽器理解成客戶端）我們再切換到後臺：

可以看到，伺服器打出了“收到”，客戶端向伺服器傳送請求沒問題。那麼，伺服器怎樣向瀏覽器（也就是客戶端）發東西呢？

向客戶端返回資料

我們需要透過response輸出想要的內容，不要忘記close，只有關閉了輸出流，才能將內容輸出。（像許多程式語言中，開啟檔案後進行編寫，close後才能實現儲存，如果忘記close直接退出了程式，那寫的東西就白寫了）現在我們更新網頁，看看效果。

現在，大家對客戶端向伺服器發請求，及伺服器向客戶端返回資料，都有了基本的瞭解。你現在可以去衝杯咖啡或者刷下手機，再回來我們就進入主題：小程式和後臺伺服器的連結

建立連結

來具體說，小程式（客戶端）怎樣去與伺服器建立連線。

簡單事例，我們只寫一個按鈕，繫結點選事件click，在js裡邊來處理事件，向伺服器傳送請求。（前端語言是種標籤語言，不是這篇文章的重點，我們不詳談。如果是零基礎，可以先去粗略學習下html+css+js。）js編寫click函式功能：

其實很簡單，我們需要呼叫微信提供的一個API，request，用它向伺服器傳送請求。開發者工具有具體介紹，大家可以去檢視，之後就是設定引數，url和瀏覽器一樣，依舊是伺服器servlet的地址，data內是你要向伺服器傳送的資料。如圖，我們傳送了一個資料叫做username,他的值是一個字串“haha”。（header是請求頭資訊，不作為主要講述的內容，感興趣的可以去查下。）success函式就是成功請求伺服器，伺服器返回後進行的處理，這裡我們讓他輸出res的data內容，res引數（當然名字你可以自定義）是伺服器返回的資訊，他的data就是後臺返回的資料。我們用console.log函式輸出下，這個語句當成print就行（學會類比）。這時重新編譯後，點選按鈕就可以了。注意，小程式編譯時會對協議進行檢查，不允許向本地的伺服器傳送請求的，所以之前要設定下除錯模式。

在開發者工具中右上角的詳情裡，選擇不校驗http。（新版本開發者工具，具體位置在哪裡去查一下）接下來我們來看伺服器端的編寫：

首先我們要獲得客戶端給我們的username，這時我們要呼叫request的getParameter函式獲取，引數就是資料的名字。如圖，我們的變數name就得到了客戶端發來的username的值，也就是"hhh"。

之後，我們向客戶端返回資料，依舊需要response來返回，記得close。如果你傳送的資料過多，一個緩衝流不夠用，可以用flush函式，先傳送一批，再傳送下一批。大家有興趣自己查詢，這裡我們返回了“man”字串，那麼客戶端的success函式的res.data就應該得到“man”。萬事俱備，差你一滑鼠。點選按鈕吧。看看效果。