登录服务##
想想一个应用，第一次打开，一般来说都是登录页，所以在服务端先完成一个用于用户登录的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;
}
}
想一下登录服务步骤：
- 通过用户名在db中查询此用户
- 如果查询到用户，则比对密码，否则返回登录失败
- 如果密码比对成功，创建token，否则返回登录失败
- 返回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-content-block>这种mu打头的标签为MuseUI库所提供的标签，其余的为普通html标签。
输入npm run dev后运行的效果如下：
5.PNG
需要说明的几点：
- 注释1,表示将返回的token值存储在vuex状态内
- 登录成功后，将当前页面换为index页，index需在router内注册
- 登录失败，弹出提示框，提示信息
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上的源码
继续为了东半球最好的记录软件努力
谢谢观看
网友评论