Node.js实现登陆注册

此练习采用移动端+bootstrap布局 mysql数据库 express框架
首页（views文件夹中的index.ejs文件）
script和link引入的文件皆在public文件夹中

<html>
	<head>
		<title></title>
		<meta charset="UTF-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<script src="/jq.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/rem.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="/reset.min.css"/>
		<script src="/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="/bootstrap.min.css"/>
		<style type="text/css">
			#app{
				width: 100%;
				height: 100%;
				background: skyblue;
				display: flex;
				flex-direction: column;
			}
			header,footer{
				height: 1rem;
				background: black;
			}
			section{
				flex: 1;
			}
			#cen{
				width: 80%;
				margin-left: 10%;
				background: greenyellow;
				overflow-y: scroll;
				height: 50%;
				align-items: center;
				margin-top: 28%;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<header>
				
			</header>
			<section>
				<div id="cen">
					 <div class="container">

					      <div class="form-signin" role="form">
					        <h2 class="form-signin-heading">**</h2><br />
					        
					        <input type="text" class="form-control" placeholder="用户名" required autofocus id="inp1"><br />
					        
					        <input type="password" class="form-control" placeholder="密码" required id="inp2"><br />
					        
					       <button class="btn btn-lg btn-primary btn-block btn-success" id="login">登陆</button>
					      </div>
					
					</div> <!-- /container -->
					<div id=""  style="padding-left: 4.2rem;margin-top: 0.2rem;">
							<a href="/zc">注册</a>
					</div>
				
				</div>
			</section>
			<footer>
				
			</footer>
		</div>
	</body>
</html>
<script type="text/javascript">
	$("#login").click(function(){
		$.ajax({
			type:"post",
			url:"/login",
			data:{
				name:$("#inp1").val(),
				password:$("#inp2").val()
			},
			async:true,
			success:function(data){
				if(data=="no"){
					alert("此用户不存在")
				}else if(data=="yes"){
					alert("登陆成功")
				}else if(data=="pok"){
					alert("密码错误")
				}
			}
		});
	})
</script>

注册页面（views文件夹中的zc.ejs文件）

<html>
	<head>
		<title></title>
		<meta charset="UTF-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<script src="/jq.js" type="text/javascript" charset="utf-8"></script>
		<script src="/rem.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="/reset.css"/>
		<script src="/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="/bootstrap.css"/>
		<style type="text/css">
			#app{
				width: 100%;
				height: 100%;
				background: skyblue;
				display: flex;
				flex-direction: column;
			}
			header,footer{
				height: 1rem;
				background: black;
			}
			section{
				flex: 1;
			}
			#cen{
				width: 80%;
				margin-left: 10%;
				background: greenyellow;
				overflow-y: scroll;
				height: 50%;
				align-items: center;
				margin-top: 28%;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<header>
				
			</header>
			<section>
				<div id="cen">
					 <div class="container">

					      <div class="form-signin" role="form">
					        <h2 class="form-signin-heading">注册页面</h2><br />
					        
					        <input type="text" class="form-control" placeholder="用户名" required autofocus id="inp1"><br />
					        
					        <input type="password" class="form-control" placeholder="密码" required id="inp2"><br />
					        
					        <input type="password" class="form-control" placeholder="确认密码" required id="inp3"><br />
					       
					        <button class="btn btn-lg btn-primary btn-block btn-success" id="create">注册</button>
					      </div>
					
					</div> <!-- /container -->
				</div>
			</section>
			<footer>
				
			</footer>
		</div>
	</body>
</html>
<script type="text/javascript">
	$("#create").click(function(){
		if($("#inp2").val()!==$("#inp3").val()){
					alert("两次输入的密码不一致")
		}else{
					$.ajax({
						type:"post",
						url:"/create",
						data:{
							name:$("#inp1").val(),
							password:$("#inp2").val()
						},
						async:true,
						success:function(data){
							location.href="/"
						}
					});
		}
		
	})
</script>

js文件（routers文件夹中的index.js文件）

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

var mysql=require("mysql")

var mc=mysql.createConnection({
	url:"localhost",
	user:"root",
	password:"123",
	port:3306,
	database:"database"
})

mc.connect()



router.get("/zc",function(req,res){
	res.render("zc")
})

router.post("/create",function(req,res){
	var name=req.body.name
	var password=req.body.password
	
	var sql=`insert into table(name,password) values("${name}","${password}")`
	mc.query(sql,function(err,result){
		res.send(result)
	})
})

router.post("/login",function(req,res){
	var name=req.body.name
	var password=req.body.password
	
	var sql=`select * from table where name="${name}"`
	
	mc.query(sql,function(err,result){
		if(result.length==0){
			res.send("no")
		}else{
			if(result[0].password==password){
				res.send("yes")
			}else{
				res.send("pok")
			}
		}
	})
})

Node.js实现登陆注册

猜你喜欢