一，/public/js/index.js
//登陆
$login.find('button').on('click',()=>{
$.ajax({
type:'post',
url:'/api/user/login',
data:{
username:$login.find('[name="username"]').val(),
password:$login.find('[name="password"]').val()
},
dataType:'json',
success:(data)=>{
console.log(data)
$user.html(data.userInfo.username)
if(data){
$login.hide();
$register.hide();
$userInfo.show()
}
if(data.userInfo.username=='admin'){
$admin.show();
}else{
$admin.hide();
}
}
})
})
二，/router/api.js
router.post('/user/login',(req,res,next)=>{
//1,获取前端传来的用户名和密码
var username = req.body.username
var password = req.body.password
//2，数据的判断
if(username==''||password==''){
responseData.code = 1
responseData.message = '用户名和密码不能为空'
res.json(responseData)
return
}
//3，从数据中查询用户名和密码
/**
* 在数据库中查询与username 相等的 这个username ， 返回的是一个 mongoose 对象。如果查询不到则返回为空。
* 可以用于判断
*/
User.findOne({
username:username,
password:password
}).then((info)=>{
console.log(info)
if(!info){
responseData.code = 2
responseData.message = '用户名或密码错误'
res.json(responseData)
return
}
responseData.message = " 登陆成功 "
responseData.userInfo = {
_id :info._id,
username : info.username
}
res.json(responseData)
})
三， /view/login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="/public/css/login.css">
<link rel="stylesheet" href="/public/css/bootstrap.css">
<script src="/public/js/jquery.js"></script>
<script src="/public/js/index.js"></script>
</head>
<body>
<div class="left">
</div>
<div class="right">
<div class="jgb">
<div class="j1"></div>
<div class="j2"></div>
<div class="j3"></div>
</div>
<p></p>
<div class="userinfo none">
<h2>hello 。 <span id="user"></span></h2>
<a href="/logout">退出登陆</a>
</div>
<div id="admin" class="none">
你是管理员，<a href="/admin">你可以点击这里进入应用后台管理中心</a><br>
<a href=""></a>
</div>
<div class="form" id="register">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" name="username" placeholder="User">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Password">
</div>
<div class="form-group">
<label for="repassword">密码</label>
<input type="password" class="form-control" id="repassword" name="repassword" placeholder="Password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">注册</button>
<div class="info"></div>
</div>
已有账号？马上<a class="change" href="javascripte:;">登陆</a>
</div>
<div class="form" id="login">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" name="username" placeholder="User">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">登 陆</button>
</div>
还没注册？马上<a class="change" href="javascripte:;">注册</a>
</div>
</div>
</body>
</html>
四，/public/css/login.css
*{
margin: 0;
padding: 0;
box-sizing: border-box
}
body{
padding: 60px 100px;
background: #ecf0f1;
position: relative;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}
.left{
600px;
height: 600px;
border-radius: 10px;
background: url('/public/images/dl.jpg') center;
background-size: cover;
float: left;
}
.right{
525px;
height: 600px;
padding: 10px;
float: left;
margin-left: 50px;
}
.jgb{
100%;
height: 30px;
border-radius: 10px;
margin-bottom: 30px;
}
.jgb .j1{
20%;
height: inherit;
background: #9b59b6;
float: left;
}
.jgb .j2{
60%;
height: inherit;
background: #f1c40f;
float: left;
}
.jgb .j3{
20%;
height: inherit;
background: #9b59b6;
float: left;
}
.form{
100%;
padding: 10px 30px;
margin-top: 30px;
border: 2px solid #9b59b6;
}
a{
text-decoration: none;
color: #ecf0f1
}
p{
margin: 20px;
}
#login{
display: none;
}
.info{
color: red;
font-family: 'Courier New', Courier, monospace;
margin-top: 30px;
}
#userInfo{
background: #2c3e50;
padding: 0px 20px 6px 20px;
color: azure;
border-radius: 5px;
}
.none{
display: none;
}