登陆页面
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<h1 style="text-align:center;margin:30px 0;">kw47的小卖铺</h1>
<form class="form-horizontal" style="margin:0 auto;width: 50%;">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="user" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="请输入的密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" id="loginBtn">Sign in</button>
</div>
</div>
</form>
<script src="./jquery-1.12.4.js"></script>
<script>
$('#loginBtn').click(function (e) {
e.preventDefault();//阻止默认事件
//接口
$.post('http://timemeetyou.com:8889/api/private/v1/login', {
username: $('#user').val(),//获取用户名和密码的值
password: $('#pwd').val()
}, function (res) {
console.log(res)
localStorage.token = res.data.token;//token储存
localStorage.username = res.data.username;//存用户名
alert(res.meta.msg)//提示是否获取成功
setTimeout(function () {
location.href = './home.html'//跳转页面
}, 300)
})
})
</script>
</body>
</html>
2.es5写法：let goods = res.data.goods; 再es6中可以这么写：let { data: { goods } } = res;
称为es6 对象解构赋值
3.forEach(function (r, i)：es6 的循环数组的方法 r表示每一个对象 i 表示每一个对象的索引 这个方法不能return 写了return可以终止循环但是不会有返回值
