如果你想開發乙個應用 1 15

想想乙個應用，第一次開啟，一般來說都是登入頁，所以在服務端先完成乙個用於使用者登入的action,首先建立usercontroller,然後建立login的action，**如下：

@controller
public class usercontroller extends basecontroller 
}

想一下登入服務步驟：

通過使用者名稱在db中查詢此使用者

如果查詢到使用者，則比對密碼，否則返回登入失敗

如果密碼比對成功，建立token，否則返回登入失敗

返回token

所以最終userservice內的服務方法實現如下：

public string login(string username, string password) 
return "";
}

jpa內的略

此時的action的內容就很簡單了：

@responsebody
public object login(@requestbody map map) 
return result(token);
}

接下來用postman來測試一下，我們在db中準備兩條資料：

然後開啟postman，輸入引數，檢視一下：

點選send後，發現返回了錯誤資訊：

這是因為傳送請求引數的格式錯了，還記得上一章，為了配合前端的請求方式，服務端的請求接收方式改為了requestbody的方式，所以，前端必須使用json方式傳送，恰好我們的postman也支援這種方式，修改為：

這樣點選傳送就可以了，這時候的返回是：

data節點就是我們所需要的token

客戶端，客戶端，這裡我都不知道該如何寫了，畢竟我也是乙個後端的開發人員，而前端貌似必備的技能，如less啥的，都不會，只能寫css和js，所以這裡我只能貼出我現有的**，然後針對vue的一些內容進行一下說明,下面在views資料夾內建立login.vue檔案。

沒有賬號?去註冊吧

在template節點內可以看到，這個頁包含了登入頁所需的一切功能：

這種mu打頭的標籤為museui庫所提供的標籤，其餘的為普通html標籤。

輸入npm run dev後執行的效果如下：

需要說明的幾點：

注釋1,表示將返回的token值儲存在vuex狀態內

登入成功後，將當前頁面換為index頁，index需在router內註冊

登入失敗，彈出提示框，提示資訊

router內註冊的**：

export default new router(,
, ,]})

其中indel，register，forgetpassword的**可參考github上的原始碼

繼續為了東半球最好的記錄軟體努力

謝謝**