若是你想開發一個應用(1-15)

登陸服務

想一想一個應用，第一次打開，通常來講都是登陸頁，因此在服務端先完成一個用於用戶登陸的action,首先建立UserController,而後建立Login的action，代碼以下：

@Controller
public class UserController extends BaseController {
    @Autowired
    UserService userService;
    @ResponseBody
    @RequestMapping(value = "/login",method = {RequestMethod.POST})
    public Object login(@RequestBody Map map) {
       return null;
    }
}

想一下登陸服務步驟：

1. 經過用戶名在db中查詢此用戶
2. 若是查詢到用戶，則比對密碼，不然返回登陸失敗
3. 若是密碼比對成功，建立token，不然返回登陸失敗
4. 返回token

因此最終UserService內的服務方法實現以下：

public String login(String username, String password) {
    //判斷用戶名密碼是否符合(此時不加鹽加密)
    User user=userRepository.getUserByName(username);
    if(user!=null&&user.getPassword().equals(password)){
        //建立token
        Token token=TokenUtil.generateToken(UUID.randomUUID().toString(),user.getId());
        return token.getSignature();
    }
    return "";
}

JPA內的略

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

@ResponseBody
@RequestMapping(value = "/login",method = {RequestMethod.POST})
public Object login(@RequestBody Map map) {
    String token = userService.login(map.get("username").toString(), map.get("password").toString());
    if (token.equals("")) {
        return result(200, "登陸失敗", "");
    }
    return result(token);
}

接下來用postman來測試一下，咱們在db中準備兩條數據：

而後打開postman，輸入參數，查看一下：

點擊send後，發現返回了錯誤信息：

這是由於發送請求參數的格式錯了，還記得上一章，爲了配合前端的請求方式，服務端的請求接收方式改成了RequestBody的方式，因此，前端必須使用json方式發送，剛好咱們的postman也支持這種方式，修改成：

這樣點擊發送就能夠了，這時候的返回是：

{
    "msg": "",
    "code": 200,
    "data": "0c09472d6d3bf978fe2da968f774e002"
}

data節點就是咱們所須要的token

登陸註冊客戶端

客戶端，客戶端，這裏我都不知道該如何寫了，畢竟我也是一個後端的開發人員，而前端貌似必備的技能，如less啥的，都不會，只能寫css和js，因此這裏我只能貼出我現有的代碼，而後針對vue的一些內容進行一下說明,下面在views文件夾內建立Login.vue文件。

Login.vue：

<style scoped >
.login{
    background:#6fc2f3;
    width:100%;
    height: 100%;
}
.logo{
    width:50%;
    margin:0px auto;
}
.logo img{
    width: 100%;
    border-radius: 10px;
    border:3px solid #075d8b;
}
</style>
<template>
    <div class="login">
        <div style="height:23%"></div>
        <div class="logo">
        <img src="../assets/logo.jpg">
        </div>
        <div style="margin-top:10px; text-align:center">
            <mu-content-block>
                <mu-text-field hintText="請輸入郵箱" v-model="username" fullWidth inputClass="text_center"/><br/>
                <mu-text-field hintText="請輸入密碼" v-model="password"  type="password" inputClass="text_center" fullWidth /><br/>
                <mu-raised-button label="登錄" primary fullWidth  v-on:click="login"/>
                <a @click="toRegister" style="color:#fafafa;margin-top:5px;display:block">沒有帳號?去註冊吧</a>
            </mu-content-block>
        </div>
        <mu-dialog :open="dialog">
            請您檢查用戶名或密碼，若是確認輸入無誤，能夠去微信公衆號"尚未申請呢"報告bug<br>
            <mu-flat-button label="肯定"  slot="actions" fullWidth  @click="close"/>
        </mu-dialog>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                username: "",
                password: "",
                dialog:false,
            }
        },
        methods:{
            login:function (event) {
                if(event){
                    var data={
                        username:this.username,
                        password:this.password
                    }
                    this.$http.post("/login",data).then(res=>{
                        var result=res.data;
                        if(result.msg==""){
                            this.$store.commit('setToken',result.data);//1
                            this.$router.push({name:"Index"})//2
                        }else{
                            this.dialog=true;//3
                        }
                    },res=>{
                    })
                }
            },
            toRegister:function(event){
                if(event){
                    this.$router.push({name:"Register"})
                }
            },
            close:function(event){
                this.dialog=false;
            }
        }
    }
</script>

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

• 用戶名輸入框
• 密碼輸入框
• 提交按鈕
• 註冊入口
• 找回密碼入口

這種mu打頭的標籤爲MuseUI庫所提供的標籤，其他的爲普通html標籤。

輸入npm run dev後運行的效果以下：

須要說明的幾點：

1. 註釋1,表示將返回的token值存儲在vuex狀態內
2. 登陸成功後，將當前頁面換爲index頁，index需在router內註冊
3. 登陸失敗，彈出提示框，提示信息

router內註冊的代碼：

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'Index',
            component: Index
        },
        {
            path: '/login',
            name: 'Login',
            component: Login
        },
        {
            path: '/Register',
            name: 'Register',
            component: Register
        },
        {
            path: '/ForgetPassword',
            name: 'ForgetPassword',
            component: ForgetPassword
        }
    ]
})

其中Indel，Register，ForgetPassword的代碼可參考github上的源碼

繼續爲了東半球最好的記錄軟件努力

謝謝觀看