微信小程式（二）：登入例項
生活無趣且不易，一起找點樂子吧。歡迎評論，和文章無關也沒問題。
上次寫了小程式與java後臺的簡單鏈接，已經好久以前的事情了，這次嘗試著來寫下登入，捎帶著連結mysql資料庫，jdbc那塊也簡單介紹下。
我們先來看前端，前端，就是展示給使用者的東西。既然是登入，無非就是使用者名稱，密碼之類的。
其實前端的核心點就在於怎樣獲得使用者名稱和密碼輸入框的輸入值，然後怎樣傳遞，僅此而已。
先來看介面：
<form bindsubmit='forSubmit'> <view class="item"> <view class="login-item"> <view class="login-item-info">工號</view> <view><input name='username' bindinput='usernameInput'/></view> </view> <view class="login-item"> <view class="login-item-info">密碼</view> <view class="login-pwd"> <input name='password' style="flex-grow:1" password="true"/> <text> 忘記密碼 </text> </view> </view> <view class="login-item bottom"> <button class="login-btn" form-type='submit'>登入</button> </view> </view> </view> </form>
只需要關注裡面的兩個input標籤，寫好name屬性，name屬性其實是給輸入框起個別名用於區分，稍後便於獲取。核心是表單的提交獲取，也就是form標籤，所有的相關標籤寫入form中，即認為是表單內容，詳細資訊可以去檢視開發者文件，在form中的登陸按鈕，即form-type=‘submit’的按鈕，會被提交到form的bindsubmit函式中去。（表單的提交會將表單中內部所有可提交資料提交）
接下來我們來看js檔案是如何獲取輸入值的：（接受到提交的資料，直接通過函式的引數呼叫就可以。這個時候就需要剛剛的命名，用來區分我是獲取的那個輸入框的內容。）
forSubmit: function (e) { console.log(e.detail.value.username)； console.log(e.detail.value.password) }
沒錯，是通過引數的detial.value.名字來獲取，這時就需要你設定的name屬性了。
接下來我們來看前端和後端的介面：
wx.request({ url: 'http://localhost:8080/Amess/user', data: { username: e.detail.value.username, password: e.detail.value.password, }, header: { 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' // 預設值 }, method: 'POST', success: function (res) { console.log('ok'); } })
（只需關注傳送資料data，返回成功函式success即可）
前一章有詳細介紹，我們就不多講，更詳細的內容可以檢視官方文件的API。我們直接來看後臺伺服器部分：首先建立servlet，（詳細介紹看第一章）處理和上章一樣。
response.setContentType("application/x-www-form-urlencoded;charset=utf-8");
request.setCharacterEncoding("utf-8");
String name = request.getParameter("username");
String password = request.getParameter("password");設定接受相應的編碼，然後通過request方法獲取前端傳過來的值，引數是前端傳遞介面引數名（同連結文章相同）。
接下來是新的內容，伺服器與資料庫的連結問題。我這裡用的資料庫是mysql，首先我們先建立一個DBUtil類，這個類來分裝一些jdbc連結用的方法，方便我們直接呼叫：（如果對jdbc相當熟悉直接跳過吧）
（伺服器與資料庫連結，基本上有這麼幾個步驟，載入驅動--建立連結-執行sql語句--得到查詢結果--關閉連結並返回）
（下面的這個類就是將建立連結步驟打包了，不需要你每次去寫，直接呼叫就好，也省下了每次都輸入資料庫使用者名稱密碼的操作。建立連結很好理解，兩地之間只有先建起了橋，才能進行物資的傳遞。）
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
public class DButil {
private static Connection conn;//�������Ӷ���
private static final String URL = "jdbc:mysql://localhost/amess";
private static final String USERNAME = "root";
private static final String PASSWORD = "4869";
static{
try {
Class.forName("com.mysql.jdbc.Driver");//������ݿ���
} catch (Exception e) {
System.out.println("������ݿ������");
}
}
public static Connection getConn(){
try {
conn=DriverManager.getConnection(URL, USERNAME, PASSWORD);//��ȡconnerctionʵ��
} catch (Exception e) {
}
return conn;
}
public static void closeConn(){
if(conn!=null){
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
}註釋亂碼問題自行忽略，我們看到裡面的方法就是，啟動和關閉連結。大家在自己運用的時候，只需要把url，username，password改成自己的就可以（url中的amess是資料庫的名字）。我這裡用的是mysql，在專案中需要匯入驅動包：
（這個地方就是上面提到的驅動，我們的一切操作建立在驅動之上，驅動包網上很好找到，要和你的資料庫對應，比如我的是mysql，DBUtil類中的驅動也要根據你的驅動包進行修改。）
從網頁上就可以搜尋下載，大家如果用的是其他資料庫就要根據自己的實際情況來下載匯入，DBUtil的驅動也要根據實際情況修改。
我們來看連結的具體實現：新建userDao類：
（基本上就是按照前面說的，先建立連結，現在是不是體會到DBUtil類的好處了，直接呼叫省的一直寫。）
public class userDao {
public static boolean loginUser(String tid,String tname){
Connection conn = DButil.getConn();//建立連結
String sql = "select * from teacher where tid=? and tname=?";//sql語句
try {
PreparedStatement ps = conn.prepareStatement(sql);//執行sql語句
ps.setString(1, tid);//動態設定sql語句，即字串中？的替換
ps.setString(2, tname);//這裡的意思是tname替換掉sql語句的第二個？
ResultSet rs = ps.executeQuery();//獲取結果集物件
if(rs.next()){//有查詢結果
System.out.println(rs.getString(2));
return true;
}else{
return false;
}
} catch (SQLException e) {//異常
// TODO Auto-generated catch block
e.printStackTrace();
return false;
}finally{
DButil.closeConn();
}
}
｝資料庫的sql語句不談。
通過程式碼sql語句我們知道，要查詢teacher表的特定使用者名稱和密碼的記錄。實際上應當先建表，再來寫jdbc，邏輯順序錯誤，但不影響我們理清思路，我們來建表，表一定要和sql語句對應，或者說sql語句一定要和表裡的資料對應：
我這裡用的是mysql的一個檢視化工具，Navicat，為了方便展示，隨便寫了條記錄。
ok，現在讓我們返回jdbc，userDao裡我們寫的loginUser方法到資料庫中查到了相應資料，就返回true，如果沒有就返回false。那我們就在開始建立的servlet裡面來處理它，如果對servlet的作用還不太清楚，請看第一章，會幫你簡單的理清請求和服務的關係。
（縮進出問題了。。。。。。）
userDao user = new userDao();
response.setContentType("application/x-www-form-urlencoded;charset=utf-8");
request.setCharacterEncoding("utf-8");
String name = request.getParameter("username");
String password = request.getParameter("password");//等到前端的資料
Writer out = response.getWriter();
if(user.loginUser(password, name)){//呼叫我們在dao裡寫的方法，根據前端返回的資料到資料庫中查詢
out.write("T");
out.flush();
out.close();
}
else{
out.write("F");
}當我們查到資料的時候就向前端返回一個T，其他情況就返回F。
前端介面的success函式裡面我們也來做出反應：
wx.request({
url: 'http://localhost:8080/Amess/user',
data: {
username: e.detail.value.username,
password: e.detail.value.password,
method:method,
},
header: {
'content-type': 'application/x-www-form-urlencoded;charset=utf-8' // 預設值
},
method: 'POST',
success: function (res) {
console.log(res.data);
if(res.data == "T"){
wx.switchTab({
url: '../homepage/homepage'
})
}else{
wx.showModal({
title: 'Warning',
content: 'The username dose not exist or password error',
success: function (res) {
if (res.confirm) {
console.log('使用者點選確定')
} else if (res.cancel) {
console.log('使用者點選取消')
}
}
})
}
}
})（別看success函式那麼多，並不複雜，就是個判斷，伺服器返回T怎樣，返回F怎樣）
如果後端返回T我們就跳轉頁面（跳轉到主頁啊什麼的，或者跳轉個登入成功的介面），如果是F我們就彈出來個互動框告訴使用者使用者名稱或者密碼錯誤。：
我們來在開發者工具的模擬器上來測試下，我這裡故意把名字輸錯，我們來看下結果：
我們在控制檯看到後端返回的F，介面也彈出了提示框，使用者名稱不存在或密碼錯誤，接下來我們改正來看看。
點選登入：
我們得到了返回T，同時跳轉了主頁，測試成功！！！
細心 地 小朋友可能會注意到（“地”寫錯了，哈，開玩笑），資料明明是John，而你輸入的是john，為什麼也對了呢。這裡其實是資料庫的問題，mysql資料庫的資料型別中varchar，預設是不區分大小寫。而恰巧我就喜歡用varcahr，這樣避免了一些前端的後端的型別轉化，其實就是偷懶啦：
有個小知識，小程式傳遞的資料都是字串，如果是數字，在傳遞前也會自動轉換為字串，而前端接受的也只能是字串，這也是為什麼在沒有必要的情況下我直接在資料庫裡將型別換成varchar而不是int，也算是為懶惰找藉口吧。
ok，這次的內容就寫完了。下次計劃寫下，陣列的遍歷，網上的遍歷有很多，但是乾貨，或者說能解決我問題的很少。計劃下次寫下，我們用icon畫出來個座位表，來遍歷陣列，讓選座的icon呈紅色，沒有的呈綠色。如果你喜歡，記得到時來看呀。
也希望這次的文章有幫助到你。
因為只是個人的閒暇娛樂，從點選量和搜尋量上來說，你很難看到這篇文章，如果我有幸讓你您看到，那也是種緣分吧。有些基礎的東西如在本章中說道，不會做過多原理上的解釋，您可以檢視這個系列的其他章節內容，應該可以幫您濾清一些思路思維上的東西。
後記：
再次看自己寫的東西，像個小孩寫的（雖然我真的不大），還是有很多地方講的並不清楚，括號的內容是後面加入的，就當註釋吧。