如果你想开发一个应用(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;
}
}

想一下登录服务步骤：

通过用户名在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 "";
}

此时的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节点内可以看到，这个页包含了登录页所需的一切功能：

用户名输入框

密码输入框

提交按钮

注册入口

找回密码入口


输入npm run dev后运行的效果如下：



需要说明的几点：

注释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上的源码

继续为了东半球最好的记录软件努力

谢谢观看