如果你想开发一个应用(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-content-block>这种mu打头的标签为MuseUI库所提供的标签，其余的为普通html标签。

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

5.PNG

需要说明的几点：

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

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

谢谢观看