登錄服務(wù)##
想想一個應(yīng)用交胚，第一次打開，一般來說都是登錄頁音念，所以在服務(wù)端先完成一個用于用戶登錄的action,首先創(chuàng)建UserController,然后創(chuàng)建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;
}
}
想一下登錄服務(wù)步驟：
- 通過用戶名在db中查詢此用戶
- 如果查詢到用戶浪册，則比對密碼，否則返回登錄失敗
- 如果密碼比對成功愁茁，創(chuàng)建token蚕钦，否則返回登錄失敗
- 返回token
所以最終UserService內(nèi)的服務(wù)方法實現(xiàn)如下：
public String login(String username, String password) {
//判斷用戶名密碼是否符合(此時不加鹽加密)
User user=userRepository.getUserByName(username);
if(user!=null&&user.getPassword().equals(password)){
//創(chuàng)建token
Token token=TokenUtil.generateToken(UUID.randomUUID().toString(),user.getId());
return token.getSignature();
}
return "";
}
JPA內(nèi)的略
此時的action的內(nèi)容就很簡單了：
@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中準(zhǔn)備兩條數(shù)據(jù)：
然后打開postman鹅很，輸入?yún)?shù)嘶居，查看一下：
點(diǎn)擊send后，發(fā)現(xiàn)返回了錯誤信息：
這是因為發(fā)送請求參數(shù)的格式錯了促煮，還記得上一章邮屁，為了配合前端的請求方式，服務(wù)端的請求接收方式改為了RequestBody的方式菠齿，所以佑吝，前端必須使用json方式發(fā)送，恰好我們的postman也支持這種方式绳匀，修改為：
這樣點(diǎn)擊發(fā)送就可以了芋忿，這時候的返回是：
{
"msg": "",
"code": 200,
"data": "0c09472d6d3bf978fe2da968f774e002"
}
data節(jié)點(diǎn)就是我們所需要的token
登錄注冊客戶端##
客戶端炸客，客戶端，這里我都不知道該如何寫了戈钢，畢竟我也是一個后端的開發(fā)人員痹仙，而前端貌似必備的技能，如less啥的逆趣，都不會蝶溶，只能寫css和js，所以這里我只能貼出我現(xiàn)有的代碼宣渗，然后針對vue的一些內(nèi)容進(jìn)行一下說明,下面在views文件夾內(nèi)創(chuàng)建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">
請您檢查用戶名或密碼，如果確認(rèn)輸入無誤痕囱，可以去微信公眾號"還沒有申請呢"報告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節(jié)點(diǎn)內(nèi)可以看到田轧，這個頁包含了登錄頁所需的一切功能：
- 用戶名輸入框
- 密碼輸入框
- 提交按鈕
- 注冊入口
- 找回密碼入口
<mu-content-block>這種mu打頭的標(biāo)簽為MuseUI庫所提供的標(biāo)簽，其余的為普通html標(biāo)簽鞍恢。
輸入npm run dev后運(yùn)行的效果如下：
需要說明的幾點(diǎn)：
- 注釋1,表示將返回的token值存儲在vuex狀態(tài)內(nèi)
- 登錄成功后傻粘，將當(dāng)前頁面換為index頁，index需在router內(nèi)注冊
- 登錄失敗帮掉，彈出提示框弦悉，提示信息
router內(nèi)注冊的代碼：
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蟆炊，F(xiàn)orgetPassword的代碼可參考github上的源碼
繼續(xù)為了東半球最好的記錄軟件努力
謝謝觀看
