文章目錄

1. 前言
2. 創建javaweb專案
3. 創建Server
4. 解決中文亂碼問題
5. 回應后臺資料

目錄
Fdog系列（一）：思來想去，不如寫一個聊天軟體，那就從仿QQ注冊頁面開始吧，

1. 前言

接著第一篇用html完成了注冊頁面，第二篇，我們來完成后臺資料處理，需要用的有Eclipse，tomcat，mysql資料庫，還有云服務器（如果需要外部訪問，可以購買一臺云服務器，選擇最低配置就好，我用的是騰訊云，使用代金券白嫖了四個月，可以通過下面二維碼白嫖代金券，）

若沒有Eclipse，這是博主之前寫的Ecplise下載教程

若沒有tomcat，點擊下載tomcat7下載

若想買服務器，不如看看這個云服務器代金券

若要使用本地資料庫不如看看這個MySQL資料庫學習·如何安裝SQL資料庫和連接Navicat Premium

若要在服務器安裝資料庫，不如看看這個騰訊云云服務器Centos系統安裝MySQL資料庫詳細教程

這里給大家提個醒，若JDK是1.7 ，tomcat，mysql，centos建議都用7的版本，不要問為什么，博主也是趟過坑的人！！！！

2. 創建javaweb專案

File->New->other->Web->Dynamic Web Project

第一個紅框框選擇你剛下載好的tomcat版本，還有路徑，

第二個紅框框有個注意點，現在一般用的是3.0，采用注解的方式，而博主的教程是2.5版本，需要配置web.xml，如果是初學者，建議選擇2.5，有助于學習，我也將以2.5版本為例，

第三個紅框框可以設定一些內容的版本，這里將java設定為1.7版本，
在這里插入圖片描述
然后一直下一步，完成，如圖，

我們點擊下面的servers服務，點擊藍色文字，再次選擇tomcat版本，并將專案添加，完成，如果下面沒有servers選項，可在window->show View下找到servers，添加即可，

分別創建一個js檔案夾，一個img檔案夾，一個css檔案夾（右鍵Webcontent->New->folder）,然后將上篇寫過的代碼拿過來，可以直接將檔案拖進Webcontent目錄下，html檔案直接拖到Webcontent下就好，哦，差點忘了，eclipse的默認字體大小極其不友好，建議大家將字體改成18，在Window->proferences搜索font，選擇Colors and Fonts，選擇Basic下面的Text font，將字體大小設定為你喜歡的值（這里建議18），

創建好之后如圖，至此，我們將昨天用HBuilder X寫的內容全部移植到了Eclipse里面，
在這里插入圖片描述

3. 創建Server

右擊專案，New->other->Web->Servlet，什么是Servlet，其實就是一個java檔案，然后通過網頁去呼叫這個java檔案處理業務邏輯，類似于兩個java檔案互相呼叫，只不過更加復雜而已，

創建好的java檔案，默認有兩個函式，一個是GET，一個是POST，這個是干什么的呢，GET和POST是HTTP請求的兩種基本方法，要說它們的區別，最直觀的區別就是GET把引數包含在URL中，POST通過request body傳遞引數，你可以看到有些鏈接后面有？user=xxxx&id=xxxx，這種就是GET請求方法，
在這里插入圖片描述

4. 解決中文亂碼問題

每一個學過javaweb的人應該都知道GET和POST提交亂碼的問題，業務邏輯不可避免要傳遞中文資料，請在兩個函式中添加如下代碼，同時將Workspace下面的Text file encoding默認GBK改為utf-8（Window->Preferences->Workspace），可解決中文亂碼問題，

protected void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException {
	response.setContentType("text/html;charset=utf-8");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException {
	request.setCharacterEncoding("UTF-8");
	response.setContentType("text/html;charset=utf-8");	
}

除此自外，還可以創建Filter（過濾器），來處理亂碼問題，有興趣可以了解下，你不要問我為什么不用這個，因為我不會，

5. 回應后臺資料

好了好了，我知道你已經等不及了，想要馬上知道如何與前端交換資料，

一般情況下，我們都會使用表單提交的方式，向servlet發送資料，比如我們有一個表單

<form action="FdogMaven" method="post">
	<input tyle="text" placeholder="昵稱"/>
	<input type="submit" value="提交" />
</form>

action屬性表示要提交到哪個servlet，比如剛才我創建的servlet叫FdogMaven，這里action就寫FdogMaven，method屬性表示請求方式，這里選擇POST，

然后我們在對應的FdogMaven里面的POST函式寫一個處理陳述句：

protected void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException {
	request.setCharacterEncoding("UTF-8");
	response.setContentType("text/html;charset=utf-8");	
	response.getWriter().append("我是花狗");
	doGet(request, response);
	}

然后運行它,點擊提交按鈕，將跳轉至FdogMaven，并顯示我是花狗，
在這里插入圖片描述
好了，學到了這里，再來看看如何在文本框輸入內容，在后臺顯示，

在文本框中加一個name屬性，值為username，

<form action="FdogMaven" method="post">
	<input tyle="text" name="username" placeholder="昵稱"/>
	<input type="submit" value="提交" />
</form>

在后臺來接收這個值

String username="";
protected void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException {
	request.setCharacterEncoding("UTF-8");
	response.setContentType("text/html;charset=utf-8");	
	username = request.getParameter("username");
	response.getWriter().append("你輸入的昵稱是："+username);
	doGet(request, response);
	}

效果如下：
在這里插入圖片描述
再回到我們的注冊頁面，你可能已經有疑問，點擊發送短信之后，頁面并沒有發生跳轉，但是后臺已經將前臺的資料處理完畢，并不像上面的這種，如何做到即執行了servlet，又不執行跳轉呢？

在這里插入圖片描述

第一種解決方法是使用轉發，讓頁面跳轉到servlet然后保存資料，再跳轉回來，將保存的資料顯示，代碼如下：

String username="";
protected void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException {
	request.setCharacterEncoding("UTF-8");
	response.setContentType("text/html;charset=utf-8");	
	username = request.getParameter("username");
	response.getWriter().append("你輸入的昵稱是："+username);
	doGet(request, response);
	request.setAttribute("username", username);  //保存昵稱
	request.getRequestDispatcher("index.jsp").forward(request,response);//注冊頁面
	}

servlet回傳的值，前端如何接收呢，這時就需要用到jsp了，需要將我們的html檔案改成jsp檔案，添加第一行代碼，然后在文本框添加value值：

<%@page contentType="text/html;charset=utf-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Fdog注冊</title>
	</head>
	<body>
		<form action="AuthCode" name="form" method="post">
	<input tyle="text" id="userName" name="username" placeholder="昵稱" 
	value='<%=request.getParameter("username")==null?"":request.getParameter("username")%>'/>
	<input type="submit" value="提交" />
	</form>
	</body>
</html>

效果如下：
在這里插入圖片描述

第二種技術叫Ajax（異步獲取請求），也是我推薦的一種，使用Ajax技術網頁應用能夠快速地將增量更新呈現在用戶界面上，而不需要多載（重繪）整個頁面，這使得程式能夠更快地回應用戶的操作，

例如圖中的發送短信按鈕，轉發雖然可以攜帶資料回傳，但是如果首頁有一些資料不需要在發送驗證碼的時候處理，則更應該是Ajax，

為按鈕添加一個點擊事件

<input type="button" id="codebutton" value="獲取短信驗證碼" onclick="codeclick(this)"/>

撰寫對應js

var xmlhttp;
function codeclick(thisBtn) {
	if (window.XMLHttpRequest)
	{// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp=new XMLHttpRequest();
	}
	else
	{// code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.open("POST","FdogMaven",true);
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	//xmlhttp.send("fname=Bill&lname=Gates");//如果是GET請求，可在send添加引數
	xmlhttp.send();
}

好了，這篇就寫到這里，下一篇的內容是如何生成亂數，如何連接資料庫，如何發送短信（免費的），如何部署到服務器讓其他人訪問并注冊，

如果需要原始碼可以添加我的微信群獲取（官方群）
在這里插入圖片描述

如果覺得好的，還可以給我來個一鍵三連哦！

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/275043.html

標籤：其他

上一篇：【JVM進階之路】十：JVM調優總結