vue前后端分离初体验（二）

我就想知道vue前端写完了怎么跟后端交互，但是百度都没怎么看懂，作为一个新手来说看的晕晕的。但是我终于在github上找到不错的项目学习了一下就是这个 ：https://github.com/TyCoding/ssm-redis-solr

一、vue打包

先是根据api接口写好前端代码，然后npm run build生成static文件夹存放静态资源，以及html作为访问入口，然后放到webapp文件夹下。

---

二、登录界面

先把配置文件改了，之前的login界面改成vue.js写的登陆界面，然后页面就不说了，我们看看js是怎么跟后端交互的。

---

submitForm(login) {

            this.$refs[login].validate((valid) => {

                if (valid) {

                    this.loadings(); //加载动画

                    //提交表单

                    this.$http.post('/login', {

                        username: this.login.username,

                        password: this.login.password,

                        remember: this.login.remember

                    }).then(result => {

                    //window.alert(result);

                        // 判断用户是否登录成功，后端返回JSON格式数据，不然娶不到数据

                        if (result.body.success) {

                        alert("success");

                            window.location.href = "/listStudentInfo";

                            this.loading.close(); //关闭动画加载

                        } else {

                            // 弹出错误信息框

                            this.$emit(

                                'submit-form',

                                this.$message({

                                    message: '用户名或密码错误！',

                                    type: 'warning',

                                    duration: 6000

                                }),

                            );

                            // 清空表单状态

                            this.$refs[login].resetFields();

                        }

                    });

                } else {

                    this.$emit(

                        'submit-form',

                        this.$message({

                            message: '输入信息有误！',

                            type: 'warning',

                            duration: 6000

                        }),

                    );

                    return false;

                }

            });

        },

---

这个方法提交表单，到后端验证用户信息，这里是post请求，请求路径是login,找到后端的Controller，返回json数据，然后我就在这里踩了一个坑，调试的时候发现success不是true,但是后端输出的success明明就是true,就后来突然想到这个是json数据，然后又研究了一下json数据，然后偶然看到说要得到json数据，就得用@requestBody,然后又去看了github的代码，发现我的注解是@Controller,所以就导致出错

总结就是：如果要拿到json数据，要用@Controller+@RequestBody或者RestController

---

然后Controller代码如下：

---

@RestController

public class LoginController {

@RequestMapping("/login")

public Result Login( @RequestParam(value = "username", required = false) String username,

            @RequestParam(value = "password", required = false) String password,

            @RequestParam(value = "remember", required = false) String remember) {

String error = null;

if(username==null) {

//System.out.println("null");

return new Result(false, error);

}

//System.out.println(password);

//System.out.println("调试");

Subject subject=SecurityUtils.getSubject();

UsernamePasswordToken token=new UsernamePasswordToken(username,password);

System.out.println(token.getPassword());

//System.out.println(token);

try {

subject.login(token);

Result re=new Result(true, "success");

return new Result(true,error);

} catch (UnknownAccountException e) {

      System.out.println( "登陆出错");

        error = "用户账户不存在，错误信息：" + e.getMessage();

    }catch (IncorrectCredentialsException ex) {

    System.out.println( "用户名和密码不匹配");

    error = "用户名或密码错误，错误信息：" + ex.getMessage();

    }catch (AuthenticationException e) {

    System.out.println( "其他的登陆错误");

    error = "错误信息：" + e.getMessage();

    }

return new Result(false, error);

}

}

---

而且我还发现一个坑就是我的shiro md5加密在第一次登录的时候会login那里有问题，第二次登陆就可以了，真是奇怪。这个坑明天解决！

三、运行截图

登录之后进入系统,感觉界面确实比之前的美观了

---

之前我用css写的这样的，看起来没什么毛病，但是好像不够精致，我应该会找时间把界面重新写吧。虽然在课程结束之前做不完了。

---

---

四、json学习

json就是用来做数据传输的，它比xml好的地方就在于它的格式简单，解释信息少，就不会浪费了。json数据就是用{}来装载的数据，里面以key-value键值对形式存储，而且可以多个json数据形成一个数组

得，我又累了，有空再写。。。

转载一个博主写的json和jsonp，写的简单易懂！

http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html

五、接下来任务

做验证码，研究md5加密为什么第一次登录失败，shiro配置一下rememberMe功能，帮队友找bug,大概就先这些吧