登錄頁面圖:
node.js文件代碼:
const express=require("express");
const app=express();
const path=require("path")
const cors=require("cors")
const bodyParser=require("body-parser")
const db=require("./util/configDb.js")
app.listen(3000,()=>{
console.log("app start........")
})
app.use(bodyParser.urlencoded({
extended:true
}))
app.use(bodyParser.json())
app.use(cors())
app.use("/static",express.static(path.join(__dirname,"./views")))
app.post("/login",(req,res)=>{
console.log("服務端",req.body)
const {name,pwd}=req.body;
let sql=`select * from user where name=${name} and pwd=${pwd}`
console.log("sql",sql)
let sqlObj=[]
console.log("sqlObj",sqlObj)
let callBack=function(err,data){
console.log("data:",data.length)
if(err){
console.log("失敗")
return
}
if(data.length!=1){
console.log("密碼或用戶名出錯")
res.send({
msg:"用戶名或密碼出錯",
code:400
})
return
}
res.send({
msg:"成功登錄",
code:200
})
}
db.dbConn(sql,sqlObj,callBack)
})
configDb.js文件代碼
const mysql=require("mysql")
module.exports={
config:{
host:"localhost",
user:"root",
password:"",
database:"infodb"
},
dbConn:function(sql,sqlObj,callBack){
let pool=mysql.createPool(this.config)
pool.getConnection((err,conn)=>{
if(err){
console.log(err)
return;
}
conn.query(sql,sqlObj,callBack)
conn.release();
})
}
}
index.html文件代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>登錄</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } body{ width: 100%; height: 100%; background-color: #f5f5f5; } .area-box{ display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 100px; } .login-group{ /* width: 100%; */ height: 40px; background-color: white; padding: 10px 30px; } .login-group input{ height: 24px; outline: none; border-radius: 20px; padding-left: 10px; } .login-btn{ margin-top: 20px; } .login-btn button{ width: 200px; height: 30px; line-height: 30px; border-radius: 20px; outline: none; } </style> </head> <body> <div class="area-box"> <div class="login-group"> <label>用戶:</label> <input type="text" name="" id="phone" placeholder="請輸入手機號" /> </div> <div class="login-group"> <label>密碼:</label> <input type="password" name="" id="pwd" placeholder="請輸入密碼" /> </div> <div class="login-btn"> <button type="button" id="login">登錄</button> </div> </div> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> let phone=$("#phone") let pwd=$("#pwd") $("#login").click(function(){ if(phone.val().length==0||pwd.val().length==0){ alert("用戶或密碼不能為空") return; } var getPhone=phone.val() var getPwd=pwd.val() var data={ "name":getPhone, "pwd":getPwd } $.ajax({ type:"POST", url:"http://localhost:3000/login", data:data, success:res=>{ console.log(res) if(res.code==200){ alert(res.msg) }else{ alert(res.msg) } }, error:err=>{ console.log(err) } }) }) </script> </body> </html>
下面是注冊代碼：
node.js代碼；
app.post("/register",(req,res)=>{
const name=req.body.name;
console.log(name)
const pwd=req.body.pwd;
console.log(pwd)
let sql="select * from user where nickname=?"
let sqlArr=[name]
let callBack=(err,data1)=>{
if(err){
console.log(err)
return;
}
console.log("wishing數據",data1)
if (data1.length>=1){//測試查找的數據的長度，如果大於0就代表數據庫中存在這個用戶
res.send({
code:400,
msg:"該用戶已存在",
affectedRows:data1.affectedRows
})
return;
}else{
let sql ="insert into user set nickname=?,password=?,state=1";
let sqlArr=[name,pwd]
let callBack=(err,data)=>{
if(err){
console.log(err)
return;
}
res.send({
code:200,
msg:"注冊成功",
affectedRows:data.affectedRows
})
// console.log(data)
return;
}
db.dbConn(sql,sqlArr,callBack)
}
}
db.dbConn(sql,sqlArr,callBack)
})
html代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>登錄</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } body{ width: 100%; height: 100%; background-color: #f5f5f5; } .area-box{ display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 100px; } .login-group{ /* width: 100%; */ height: 40px; background-color: white; padding: 10px 30px; } .login-group input{ height: 24px; outline: none; border-radius: 20px; padding-left: 10px; } .login-btn{ margin-top: 20px; } .login-btn button{ width: 200px; height: 30px; line-height: 30px; border-radius: 20px; outline: none; } </style> </head> <body> <div class="area-box"> <div class="login-group"> <label>用戶:</label> <input type="text" name="" id="username" placeholder="請輸入用戶名" /> </div> <div class="login-group"> <label>密碼:</label> <input type="password" name="" id="pwd" placeholder="請輸入密碼" /> </div> <div class="login-btn"> <button type="button" id="login">注冊</button> </div> </div> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> let username=$("#username") let pwd=$("#pwd") $("#login").click(function(){ console.log("開始") if(username.val().length==0||pwd.val().length==0){ alert("用戶或密碼不能為空") return; } var getPhone=username.val() var getPwd=pwd.val() var data={ name:getPhone, pwd:getPwd } console.log(data) $.ajax({ type:"POST", url:"http://localhost:3000/register", data:data, success:res=>{ console.log(res) if(res.code==200){ alert(res.msg) document.location.href="index.html" }else{ alert(res.msg) } }, error:err=>{ console.log(err) } }) }) </script> </body> </html>
另一個注冊代碼:
app.post("/register",(req,res)=>{
const name=req.body.name;
const pwd=req.body.pwd;
console.log(name,pwd)
// 首先要根據傳遞過來的數據查詢數據庫中是否已經存在該用戶了
function regfun(){
var insert="insert into user (name,pwd) values (?,?)"
let insertArr=[name,pwd]
let insertCallBack=((err,data)=>{
if(err){
console.log(err)
return;
}
if(data..affectedRows==1){
req.session.info={
name:name,
pwd:pwd
}
res.send({
code:200,
msg:"注冊成功"
})
}else{
res.send({
code:400,
msg:"注冊失敗"
})
}
})
db.dbConn(insert,insertArr,insertCallBack)
}
let sql1="select * from user where name=?";
let sqlArr=[name]
let callBack=((err,data)=>{
if(err){
console.log(err)
return;
}
if(data.length==1){
res.send({
code:201,
msg:"該用戶已經存在"
})
}else{
regfun()
}
})
db.dbConn(sql1,sqlArr,callBack)
})