目录
注册前端页面
登录页面
登录进去的首页面
Node.js内容
注册前端页面
<!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="微信图片_0714085344.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="微信图片_0714091514.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() //获取编号idlet 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尝试请求快速结束elsenext();})//登录路由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.stuldlet 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("服务已经开启")
![[Node]node.js实现登录注册](https://900zi.500zi.com/uploadfile/img/15/215/01be21a9d4a214b8c49937280d0caec5.jpg)
