Node.js web登录功能的实现
首先是登录页面，先来看一下效果
首先是login.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title><%= title %></title>
<link rel="stylesheet" href="stylesheets/bootstrap.min.css" media="screen">
<style type="text/css">
.m15{ margin: 15px;}
.tc{ text-align: center;font-size: 18px;font-weight: 600;}
</style>
</head>
<body screen_capture_injected="true">
<div class="container">
<%- message %>
<form class="col-sm-offset-4 col-sm-4 form-horizontal" role="form" method="post" οnsubmit="return false">
<fieldset>
<legend></legend>
<div class="panel panel-default">
<div class="panel-heading">
<p class="tc">登录页面</p>
</div>
<div class="panel-body m15">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名" required>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-lock"></span>
</span>
<input type="password" class="form-control" id="password" name="password" placeholder="请输入密码" required>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block" id="login0">登录</button>
</div>
<div class="form-group">
</div>
</div>
</div>
</fieldset>
</form>
</div>
<script type="text/javascript" src="javascripts/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
$("#register0").click(function(){
location.href = 'register';
});
$("#login0").click(function(){
var username = $("#username").val();
var password = $("#password").val();
var data = {"username":username,"password":password};
$.ajax({
url:'/check',
type:'post',
data: data,
success: function(data,status){
if(status == 'success'){
location.href = '/index';
}
},
error: function(data,status){
if(status == 'error'){
location.href = '/';
}
}
});
});
});
</script>
</body>
</head>
</html>var express = require('express');
var router = express.Router();
//引入数据库包
var db = require("./db.js");
/* GET home page. */
router.get('/', function (req, res, next) {
res.render('./admin/login/login', {title: '', message: ''});
});
/**
* 登录校验
* */
router.post('/check', function (req, res) {
var username = req.body.username;
var password = req.body.password;
// console.log(username);
// console.log(password);
var sql = "select username from login where username='" + username + "' and password='" + password + "'";
console.log(sql)
db.query(sql, function (err, rows) {
console.log(rows)
var str = JSON.stringify(rows).replace(/},{/g, '},\n{');
console.log(str);
for (var le in rows) {
console.log(rows[le].username)
if ((rows[le].username) == username) {
console.log("账号和密码都是可以的")
res.redirect('/index');
} else {
console.log("不可以登录")
}
}
})
});
module.exports = router;
浙公网安备 33010602011771号