此练习采用移动端+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")
}
}
})
})