如果你想开发一个应用(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后运行的效果如下:

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

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

谢谢观看