错误
读取cookie成功，但就是无法在表单中呈现出来，找了很久都没有发现是什么问题。
错误代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 引入css、js等文件 -->
<link rel="import" href="/html/public/include.html">
<!-- 导入基本样式 -->
<link rel="stylesheet" href="../css/default.css">
<script src="../js/qs.js"></script>
<script src="../js/axios.min.js"></script>
<title>登录</title>
</head>
<body>
<form id="loginForm" name="loginForm">
<div class="jumbotron" align="center">
<table cellspacing="0" cellpadding="0">
<tr align="center">
<th colspan="3" >
<h2>登录管理</h2>
</th>
</tr>
<tr>
<td class="text-muted">身份：</td>
<td colspan="2">
<select class="form-control" v-model="identity" name="identity">
<option value="">请选择身份</option>
<option value="学生">学生</option>
<option value="教师">教师</option>
<option value="管理员">管理员</option>
</select>
</td>
</tr>
<tr>
<td class="text-muted">用户名：</td>
<td colspan="2"><input class="form-control" type="text" name="username" v-model="username">
</td>
</tr>
<tr>
<td class="text-muted">密码：</td>
<td colspan="2">
<input class="form-control" type="password" name="password" v-model="password">
</td>
</tr>
<tr>
<td class="text-muted">验证码：</td>
<td><input class="form-control" type="text" name="verificationCode" v-model="verificationCode"></td>
<td><img :src="imageLink"><a href="#" @click="refresh()">看不清</a></td>
</tr>
<tr align="center">
<td><input type="checkbox" value="rememberMe" name="rememberMe" v-model="rememberMe">记住我
</td>
<td><input type="button" class="btn btn-primary" name="loginButton" value="登录" @click="login()">
</td>
<td><input type="button" class="btn btn-warning" name="resetButton" value="重置" @click="reset()">
</td>
</tr>
<tr align="center">
<td colspan="3" class="text-muted">没有账户，立即<a href="/html/register.html">注册</a></td>
</tr>
</table>
</div>
</form>
<script type="text/javascript">
new Vue({
el: "#loginForm",
data: {
identity: "",
username: "",
password: "",
verificationCode: "",
rememberMe: true,
imageLink: ""
},
mounted: function () {
var _this = this;
console.log("加载cookie");
console.log("cookie->" + document.cookie.length);
// 页面加载时获取cookie值
_this.getCookie();
console.log(_this.identity + "->" + _this.username + "->" + _this.password);
},
methods: {
login: function () {
var _this = this;
var postdata = JSON.stringify({
identity: this.identity,
username: this.username,
password: this.password,
verificationCode: this.verificationCode
});
var identity = this.identity;
var username = this.username;
axios.post('/user/login', postdata, {headers: {'Content-Type': 'application/json;charset=UTF-8'}}).then(function (res) {
if (res.data.code === 1) {
localStorage.setItem("identity", identity);
localStorage.setItem("username", username);
localStorage.setItem("userId", res.data.data);
// 判断复选框是否被勾选，勾选则调用cookie方法
if (_this.rememberMe === true) {
console.log("保存cookie");
console.log("identity=" + _this.identity + ";username=" + _this.username + ";password=" + _this.password);
// 保存cookie
_this.setCookie(_this.identity, _this.username, _this.password);
} else {
console.log("清空cookie");
// 清空cookie
_this.clearCookie();
}
// window.location.href = res.data.page;
} else {
alert(res.data.msg);
}
}).catch(function (reason) {
alert(reason);
});
},
reset: function () {
this.identity = "",
this.username = "",
this.password = "",
this.verificationCode = "",
this.rememberMe = false
},
refresh: function () {
var time = new Date();
this.imageLink = "/code/refresh?time=" + time;
},
// 设置cookie
setCookie: function (identity, username, password) {
var date = new Date();
date.setTime(date.getTime() + 24 * 60 * 60 * 1000 * 3);// 这里是设置的是3天
// 拼接cookie
window.document.cookie = "identity" + "=" + identity + ";path=/;expires=" + date.toGMTString();
window.document.cookie = "username" + "=" + username + ";path=/;expires=" + date.toGMTString();
window.document.cookie = "password" + "=" + password + ";path=/;expires=" + date.toGMTString();
},
// 读取cookie
getCookie: function () {
var _this = this;
if (document.cookie.length > 0) {
var arr = document.cookie.split(";");
for (var i = 0; i < arr.length; i++) {
var arr2 = arr[i].split('=');
console.log("读取cookie:" + arr2[0] + "->" + arr2[1]);
// 判断查找相对应的值
if (arr2[0] === 'identity') {
console.log("测试1：" + arr2[0] + "->" + arr2[1]);
_this.identity = arr2[1];
} else if (arr2[0] === 'username') {
console.log("测试2：" + arr2[0] + "->" + arr2[1]);
_this.username = arr2[1];
} else if (arr2[0] === 'password') {
console.log("测试3：" + arr2[0] + "->" + arr2[1]);
_this.password = arr2[1];
}
}
}
},
// 清除cookie
clearCookie: function () {
this.setCookie("", "", -1);// 将值置为空，天数为负即可
}
}
});
</script>
</body>
</html>
原因
解决
添加一个空格，或者让字符串忽略空格。
然后就成功了
第二种就是忽略空格
正确代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 引入css、js等文件 -->
<link rel="import" href="/html/public/include.html">
<!-- 导入基本样式 -->
<link rel="stylesheet" href="../css/default.css">
<script src="../js/qs.js"></script>
<script src="../js/axios.min.js"></script>
<title>登录</title>
</head>
<body>
<form id="loginForm" name="loginForm">
<div class="jumbotron" align="center">
<table cellspacing="0" cellpadding="0">
<tr align="center">
<th colspan="3" >
<h2>登录管理</h2>
</th>
</tr>
<tr>
<td class="text-muted">身份：</td>
<td colspan="2">
<select class="form-control" v-model="identity" name="identity">
<option value="">请选择身份</option>
<option value="学生">学生</option>
<option value="教师">教师</option>
<option value="管理员">管理员</option>
</select>
</td>
</tr>
<tr>
<td class="text-muted">用户名：</td>
<td colspan="2"><input class="form-control" type="text" name="username" v-model="username">
</td>
</tr>
<tr>
<td class="text-muted">密码：</td>
<td colspan="2">
<input class="form-control" type="password" name="password" v-model="password">
</td>
</tr>
<tr>
<td class="text-muted">验证码：</td>
<td><input class="form-control" type="text" name="verificationCode" v-model="verificationCode"></td>
<td><img :src="imageLink"><a href="#" @click="refresh()">看不清</a></td>
</tr>
<tr align="center">
<td><input type="checkbox" value="rememberMe" name="rememberMe" v-model="rememberMe">记住我
</td>
<td><input type="button" class="btn btn-primary" name="loginButton" value="登录" @click="login()">
</td>
<td><input type="button" class="btn btn-warning" name="resetButton" value="重置" @click="reset()">
</td>
</tr>
<tr align="center">
<td colspan="3" class="text-muted">没有账户，立即<a href="/html/register.html">注册</a></td>
</tr>
</table>
</div>
</form>
<script type="text/javascript">
new Vue({
el: "#loginForm",
data: {
identity: "",
username: "",
password: "",
verificationCode: "",
rememberMe: true,
imageLink: ""
},
mounted: function () {
var _this = this;
console.log("加载cookie");
console.log("cookie->" + document.cookie.length);
// 页面加载时获取cookie值
_this.getCookie();
console.log(_this.identity + "->" + _this.username + "->" + _this.password);
},
methods: {
login: function () {
var _this = this;
var postdata = JSON.stringify({
identity: this.identity,
username: this.username,
password: this.password,
verificationCode: this.verificationCode
});
var identity = this.identity;
var username = this.username;
axios.post('/user/login', postdata, {headers: {'Content-Type': 'application/json;charset=UTF-8'}}).then(function (res) {
if (res.data.code === 1) {
localStorage.setItem("identity", identity);
localStorage.setItem("username", username);
localStorage.setItem("userId", res.data.data);
// 判断复选框是否被勾选，勾选则调用cookie方法
if (_this.rememberMe === true) {
console.log("保存cookie");
console.log("identity=" + _this.identity + ";username=" + _this.username + ";password=" + _this.password);
// 保存cookie
_this.setCookie(_this.identity, _this.username, _this.password);
} else {
console.log("清空cookie");
// 清空cookie
_this.clearCookie();
}
// window.location.href = res.data.page;
} else {
alert(res.data.msg);
}
}).catch(function (reason) {
alert(reason);
});
},
reset: function () {
this.identity = "",
this.username = "",
this.password = "",
this.verificationCode = "",
this.rememberMe = false
},
refresh: function () {
var time = new Date();
this.imageLink = "/code/refresh?time=" + time;
},
// 设置cookie
setCookie: function (identity, username, password) {
var date = new Date();
date.setTime(date.getTime() + 24 * 60 * 60 * 1000 * 3);// 这里是设置的是3天
// 拼接cookie
window.document.cookie = "identity" + "=" + identity + ";path=/;expires=" + date.toGMTString();
window.document.cookie = "username" + "=" + username+ ";path=/;expires=" + date.toGMTString();
window.document.cookie = "password" + "=" + password+ ";path=/;expires=" + date.toGMTString();
},
// 读取cookie
getCookie: function () {
var _this = this;
if (document.cookie.length > 0) {
var arr = document.cookie.split(";");
for (var i = 0; i < arr.length; i++) {
var arr2 = arr[i].split('=');
console.log("读取cookie:" + arr2[0] + "->" + arr2[1]);
// 判断查找相对应的值
if (arr2[0].replace(/\s*/g,"") === 'identity') {
console.log("测试1：" + arr2[0] + "->" + arr2[1]);
_this.identity = arr2[1];
} else if (arr2[0].replace(/\s*/g,"") === 'username') {
console.log("测试2：" + arr2[0] + "->" + arr2[1]);
_this.username = arr2[1];
} else if (arr2[0].replace(/\s*/g,"") === 'password') {
console.log("测试3：" + arr2[0] + "->" + arr2[1]);
_this.password = arr2[1];
}
}
}
},
// 清除cookie
clearCookie: function () {
this.setCookie("", "", -1);// 将值置为空，天数为负即可
}
}
});
</script>
</body>
</html>
