node.js连接数据库实现注册登录拼接添加到页面 （增删改查）
目录注册前端页面登录页面登录进去的首页面Node.js内容注册前端页面<!DOCTYPE html><html><head><meta charset="utf-8"><title>注册</title><script src="js源文件/jquery-1.8.3.js" type="text/javascript" c
·
目录
注册前端页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册</title>
<script src="js源文件/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.table {
margin: auto;
width: 400px;
height: 500px;
border: 1px solid #ccc;
border-radius: 15px;
text-align: center;
margin-top: 50px;
background-color: #FFFFFF;
}
.table input {
border-radius: 10px;
height: 30px;
border: 1px solid #ccc;
outline: none;
margin-top: 100px;
}
#main {
width: 500px;
height: 600px;
margin: auto;
border: 1px solid #ccc;
background-color: #109FCA;
}
.blue input {
width: 250px;
background-color: #109FCA;
border: none;
color: white;
height: 40px;
}
.table img {
position: absolute;
text-align: center;
margin-left: -145px;
top: 100px;
}
p{height: 50px;}
</style>
</head>
<body>
<div id="main">
<div class="table">
<img src="微信图片_20210714085344.png">
<form action="login.html" method="get" onsubmit="return box()">
<p>用户名：
<input type="text" name="uname" value="" id="uname" />
</p>
<p>密码：
<input type="password" name="pwd" value="" id="pwd" />
</p>
<p>确认密码：
<input type="password" name="pwd" value="" id="repwd" />
</p>
<p class="blue">
<input type="submit" value="注册" />
</p>
</form>
</div>
</div>
</body>
<script type="text/javascript">
function box(){
let uname=document.getElementById("uname").value;
if(uname.trim()==""){
alert("用户名不能为空！")
return false;
}
let pwd=document.getElementById("pwd").value;
if(pwd.trim()==""){
alert("密码不能为空！");
return false;
}
if(pwd.trim().length<6){
alert("密码长度不能少于6位！");
return false;
}
let repwd=document.getElementById("repwd").value;
if(repwd.trim()!=pwd.trim()){
alert("两次密码不一样！");
return false;
}
let bool = false;
let url = `http://127.0.0.1:3555/login?uname=${uname}&pwd=${pwd}`
$.ajax({
method: "get",
url: url,
async: false,
success: function(rs) {
if (rs == "1") {
bool = true;
alert(rs)
}else{
alert("用户名已存在！")
}
},
error: function(err) {
console.log(err)
}
})
if (bool) {
return true;
} else {
return false;
}
return false;
}
</script>
</html>登录页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
<style type="text/css">
#main{width: 500px;height: 600px;border: 1px solid #CCCCCC;margin: auto;background-color: #109FCA;}
.table img{margin-top: 10px;margin-left: 40px;}
.table{width: 400px;height: 500px;border: 1px solid #CCCCCC;margin: auto;margin-top: 50px;background-color: #FFFFFF;}
form{margin-left: 50px;}
.table input{height: 30px;border: 1px solid #CCCCCC;border-radius: 10px;margin-left: 40px;margin-top: 20px;width: 200px;outline: none;}
.blue input{width: 250px;background-color: #109FCA;height: 40px;border: none;color: #FFFFFF;width: 270px;margin-left: 10px;}
a{margin-left: 120px;text-decoration: none;}
</style>
<script src="js源文件/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="main">
<div class="table">
<img src="微信图片_20210714091514.png">
<form method="get" action="主页.html" onsubmit="return check()">
<p>用户名：
<input type="text" name="uname" value="" id="uname" />
</p>
<p>密 码：
<input type="password" name="pwd" value="" id="pwd" />
</p>
<p class="blue">
<input type="submit" value="登录" />
</p>
<p><a href="主页.html">注 册</a></p>
</form>
</div>
</div>
</body>
<script>
function check() {
let uname = document.getElementById("uname").value;
let pwd = document.getElementById("pwd").value;
console.log(uname, pwd)
let bool = false;
let url = `http://127.0.0.1:3555/login?uname=${uname}&pwd=${pwd}`
$.ajax({
method: "get",
url: url,
async: false,
success: function(rs) {
if (rs == "1") {
bool = true;
}
},
error: function(err) {
console.log(err)
}
})
if (bool) {
return true;
} else {
return false;
}
return false;
}
</script>
</html>
登录进去的首页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>主页</title>
<style type="text/css">
body{margin: 0;padding: 0;}
#main{width: 1000px;height: 500px;border: 1px solid #CCCCCC;margin: auto;background-color: #BCBCDE;}
.box1{background-color: #858ED7;height: 40px;}
.aaa{float:right;line-height: 35px;margin-right:30px;}
.box2{width: 800px;height: 300px;border: 1px solid #ccc;background-color: #D8E6DA;margin: auto;margin-top: 60px;}
table tr{text-align: center; height: 45px;}
table{width: 800px;}
table input{background-color: #BCBCDE;margin: 5px;border: 1px solid #CCCCCC;border-radius: 5px;color: #FFFFFF;height: 30px;}
.inputs input{background-color: #BCBCDE;margin: 5px;border: 1px solid #CCCCCC;border-radius: 5px;color: #FFFFFF;height: 30px;margin-left: 650px}
#box3{width: 100%;height:100%;position: absolute;top: 0px;background-color: rgba(0,0,0,0.5);display: none;}
.center{width: 370px;height: 420px;border: 1px solid #ccc;border-radius: 15px;background-color: #FFFFFF;}
.center span{position:relative;left: 160px;top: -5px;cursor:pointer;}
.shuru {text-align: center;font-size: 20px;margin-top: 60px;}
.center p{text-align: center;text-align: center;}
.center input{height: 30px;border: 2px solid #9FA6D7;border-radius: 8px;outline: none;margin-top: 10px;}
.center p input{margin-top: 20px;height: 30px;}
.sub input{width: 80px;height: 35px;background: #9FA6D7;border: none;color: #FFFFFF;border-radius: 8px;margin-top: 20px;}
.content{position: absolute;top: 100px;left: 500px;}
#box4{width: 100%;height:100%;position: absolute;top: 0px;background-color: rgba(0,0,0,0.5);display: none;}
.center-1{width: 370px;height: 420px;border: 1px solid #ccc;border-radius: 15px;background-color: #FFFFFF;}
.center-1 span{position:relative;left: 160px;top: -5px;cursor:pointer;}
.shuru {text-align: center;font-size: 20px;margin-top: 60px;}
.center-1 p{text-align: center;text-align: center;}
.center-1 input{height: 30px;border: 2px solid #9FA6D7;border-radius: 8px;outline: none;margin-top: 10px;}
.center-1 p input{margin-top: 20px;height: 30px;}
.sub input{width: 80px;height: 35px;background: #9FA6D7;border: none;color: #FFFFFF;border-radius: 8px;margin-top: 20px;}
.content-1{position: absolute;top: 100px;left: 500px;}
</style>
<script src="js源文件/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="main">
<div class="box1">
<div class="aaa">
<span>欢迎</span><span id="user"> 登录</span>
</div>
</div>
<div class="box2">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<th>编号</th>
<th>用户名</th>
<th>密码</th>
<th>操作</th>
</tr>
<tbody id="tbody">
</tbody>
</table>
<p class="inputs"><input type="button" value="添加" onclick="tab()"/></p>
</div>
</div>
<div id="box3">
<div class="content">
<div class="center">
<!-- <form action="now.html" method="get" onsubmit="return rabct()"> -->
<p><span class="close">✘</span></p>
<p class="shuru">请输入你要添加的信息</p>
<p>用户名：<input type="text" name="uname" value="" id="uname"/></p>
<p>密码：<input type="password" name="pwd" value="" id="pwd"/></p>
<p class="sub"><input type="button" name="submit" value="确认" onclick="rabct()"/></p>
<!-- </form> -->
</div>
</div>
</div>
<form action="now.html" method="get" onsubmit="return tab()">
<div id="box4">
<div class="content-1">
<div class="center-1">
<!-- <form action="now.html" method="get" onsubmit="return rabct()"> -->
<p><span class="close">✘</span></p>
<p class="shuru">请输入你要添加的信息</p>
<p>用户名：<input type="text" name="uname" value="" id="uname1"/></p>
<p>密码：<input type="password" name="pwd" value="" id="pwd1"/></p>
<p class="sub"><input type="submit" name="submit" value="确认" /></p>
<!-- </form> -->
</div>
</div>
</div>
</form>
</body>
<script type="text/javascript">
//添加
function zhuye(){
let url = `http://127.0.0.1:3555/apps`
$.ajax({
method: "get",
url: url,
async: false,
success: function(rs) {
let htmls ="";
for (var i = 0; i < rs.length; i++) {
// alert(rs[i].stuld)
htmls+="<tr>"+
"<td>"+rs[i].stuld+"</td>"+
"<td>"+rs[i].uname+"</td>"+
"<td>"+rs[i].pwd+"</td>"+
"<td><input type='button' value='编辑' class='ck1'/><input type='button' value='删除' class='ck2'/></td>"+
"</tr>";
}
$("#tbody").append(htmls)
},
error: function(err) {
console.log(err)
}
})
}
zhuye()
//删除
$(".ck2").click(function(){
if (confirm("是否确认删除")) {
let uid = $(this).parents("tr").children().eq(0).html() //获取编号id
let url = `http://127.0.0.1:3555/dele?stuld=${uid}`
$.ajax({
method: "get", //请求方式
url: url, //路径
async: false, //是否异步
success: function(rs) { //成功时执行的方法
console.log(rs)
// zhuye() //删除刷新页面
location.href="now.html"
},
error: function(err) { //失败时执行的方法
console.log(err)
}
})
}
})
//添加弹出信息框
let idspkan;
$(".ck1").live('click','.ck1',function(){
$("#box3").css("display","block")
idspkan=$(this).parents("tr").children().eq(0).html()
})
$(".close").click(function(){
$("#box3").css("display","none")
})
//修改
function rabct() {
let uname = document.getElementById("uname").value;
let pwd = document.getElementById("pwd").value;
console.log(uname,pwd)
let url = `http://127.0.0.1:3555/rabbit?
stuld=${idspkan}&uname=${uname}&pwd=${pwd}`
$.ajax({
method: "get", //请求方式
url: url, //路径
async: false, //是否异步
success: function(rs) { //成功时执行的方法
location.href="now.html";
console.log(rs)
},
error: function(err) { //失败时执行的方法
console.log(err)
}
})
//return false;
}
//添加账号密码的弹出框
$(".inputs").live('click','.inputs',function(){
$("#box4").css("display","block")
// $(".shuru").html("请输入你要添加的信息")
})
$(".close").click(function(){
$("#box4").css("display","none")
})
function tab() { //添加账号密码数据执行的方法
let uname = document.getElementById("uname1").value; //获得输入的账号
let pwd = document.getElementById("pwd1").value; //获得输入的密码
console.log(uname,pwd)
let bool = false; //用来判断返回的数据是成功还是失败
let url = `http://127.0.0.1:3555/bcc?uname=${uname}&pwd=${pwd}`;
$.ajax({ //进行ajax请求
method: "get", //请求方式
url: url, //请求的路径
async: false, //是否异步false表示同步
success: function(rs) { //成功时执行以下代码
if (rs=="1") {
bool=true;
}
if (rs == "0") {//如果收到的是0说明此数据以及存在，禁止注册并提示用户
alert("账号已存在请重新输入")
}
},
error: function(err) { //失败时执行以下代码
console.log(err)
}
})
//判断bool的值是否被改变来判断是成功还是失败
if (bool) {
//如果bool的值被改变了说明验证成功则将true返回出去允许跳转到主页
return true;
} else { //否则就返回false不允许跳转
return false;
}
return false;//如果bool的值没有被改变说明没有验证成功就返回false阻止跳转
}
</script>
</html>
Node.js内容
var express = require("express");
var app = express();
var mysql = require("mysql");
var connt =mysql.createConnection({
host:"192.168.1.62",//ip地址
user:"root",//数据库登录用户
password:"123456",//登录密码
port:"3306",//端口号
database:"school"//需要连接的数据库
})
connt.connect();
//node 跨域处理
app.all("*",function(req,res,next){
//设置允许跨域的域名，*代表允许任意域名跨域
res.header("Access-Control-Allow-Origin","*");
//允许的header类型
res.header("Access-Control-Allow-Headers","content-type");
//跨域允许的请求方式
res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");
if (req.method.toLowerCase() == 'options')
res.send(200); //让options尝试请求快速结束
else
next();
})
//登录路由
app.get("/login",function (req,res) {
// http://127.0.0.1:3001/login?uname=&pwd=
// 1.获取表单提交的数据
let uname = req.query.uname;
let pwd = req.query.pwd;
// let sql = "select * from liujiaming where uname =? and pwd=?";
//查询
let sql = "select * from user where uname =?";
let params = [uname];
connt.query(sql,params,function (err,rs) {
if(err) { //查询失败
console.log(err)
}
console.log(rs) //打印查询成功
if(rs.length<1){ //查询成功出来的长度小于1就说明数据库里还没有
res.send("1") //然后返回一个1给前端
var sql = "insert into user(stuld,uname,pwd) values(null,?,?)";
var params = [uname,pwd];
connt.query(sql,params,function (err,rs) {
if(err) { //添加失败
console.log(err)
}
console.log(rs) //打印添加成功
})
}else{ //查询成功出来的长度大于1就说明数据库里面已经有此用户
res.send("0") //然后返回一个0给前端
}
})
})
//主页路由
app.get("/apps",function (req,res) {
// http://127.0.0.1:3001/login?uname=&pwd=
// 1.获取表单提交的数据
// let uname = req.query.uname;
// let pwd = req.query.pwd;
let sql = "select * from user";
// let params = [null,uname];
connt.query(sql,function (err,rs) {
if(err) {
console.log(err)
}
// console.log(rs)
if (rs.length>0){
res.send(rs)
}else {
res.send("0")
}
})
})
//删除数据路由
app.get("/dele",function (req,res) {
// 1.获取表单提交的数据
let ids = req.query.stuld //数据id名
let sql = "delete from user where stuld=?"; //删除数据
let mes = [ids] //用数组保存数据
connt.query(sql,mes,function (err, rs) {
if (err) {
console.log(err)
}
res.send("ok")
})
})
//修改路由
app.get("/rabbit",function (req,res) {
// http://127.0.0.1:3001/login?uname=&pwd=
// 1.获取表单提交的数据
let uname = req.query.uname;
console.log(uname)
let pwd = req.query.pwd;
let id = req.query.stuld
let sql = "update user set uname=?,pwd=? where stuld=?";
let params = [uname,pwd,id];
console.log(params)
connt.query(sql,params,function (err,rs) {
if(err) {
console.log(err)
}
res.send("ok")
})
})
//添加到输入框
app.get("/bcc",function (req,res) {
// http://127.0.0.1:3001/login?uname=&pwd=
// 1.获取表单提交的数据
let uname = req.query.uname;
// console.log(uname)
let pwd = req.query.pwd;
// console.log(pwd)
let sql = "select * from user where uname =?";
// console.log(sql)
let params = [uname];
connt.query(sql,params,function (err,rs) {
if(err) { //查询失败
console.log(err)
}
console.log(rs) //打印查询成功
if(rs.length<1){ //查询成功出来的长度小于1就说明数据库里还没有
res.send("1") //然后返回一个1给前端
var sql = "insert into user(stuld,uname,pwd) values(null,?,?)";
var params = [uname,pwd];
connt.query(sql,params,function (err,rs) {
if(err) { //添加失败
console.log(err)
}
console.log(rs) //打印添加成功
})
}else{ //查询成功出来的长度大于1就说明数据库里面已经有此用户
res.send("0") //然后返回一个0给前端
}
})
})
app.listen("3555")
console.log("服务已经开启")
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
7
0- 0
已为社区贡献1条内容
所有评论(0)