我就想知道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,大概就先这些吧