还有
const db= require('../db/index')
const bcrypt = require('bcryptjs')
const jwt = require('jsonwebtoken')
const config = require('../config')
exports.login = (req,res)=>{
//接收表单数据
//定义sql
const userinfo = req.body
const sql = `select * from ev_users where username=?`
db.query(sql,userinfo.username,(err,results)=>{
if(err) return res.cc(err)
//执行sql成功
if(results.length !==1) return res.cc('登录失败1！')
const compareResult =bcrypt.compareSync(userinfo.password, results[0].password)
if(!compareResult) return res.cc('登陆失败2')
//在服务器生成token的字符串
const user = {...results[0], password:'',user_pic:'' }
//console.log(user)
//对用户信息进行加密，生成token字符串
const tokenStr = jwt.sign(user,config.jwtSecretKey,{expiresIn:config.expiresIn})
console.log(tokenStr)
console.log(results[0].username)
res.send(
{
status:0,
token:'Bearer '+tokenStr,
message:'登录成功！',
result:'欢迎你！'+results[0].username}
)
}
)
}
前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户登录</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div style="width:130px;margin:0 auto;font-size:xx-large;margin-top: 20px;">开源社区</div>
<div class="container" style="width: 250px;margin-top: 20vh;border:1px solid rgba(128, 128, 128, 0.831);border-radius: 20px;padding:30px;" >
<h5>用户登录</h5><h5 id="h3"></h5><form action="" class="" onsubmit="return false">
<input type="text" name="" id="user" class="form-control" placeholder="用户名">
<br>
<input type="text" name="" id="pwd" class="form-control" placeholder="密码">
<button class="btn btn-primary" type="submit" style="margin-top: 20px;">登录</button>
</form></div>
<script>
function func(event){
event.preventDefault();
}
document.querySelector('.btn').onclick = function(){
const name = document.querySelector('#user').value
const pwd = document.querySelector('#pwd').value
const xhr = new XMLHttpRequest()
xhr.open('post','http://47.92.228.109:3007/api/login')
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.send(
'username='+name+'&password='+pwd
)
xhr.onreadystatechange = function(){
if(xhr.readyState ===4){
if(xhr.status >=200 && xhr.status <300){
function getjson(key){
let val = xhr.responseText
var finval = jQuery.parseJSON(val)
console.log(finval)
console.log(typeof(finval))
var eValue=eval('finval.'+key)
alert(eValue);
}
function logininfo(key){
let val = xhr.responseText
var finval = jQuery.parseJSON(val)
//console.log(finval)
//console.log(typeof(finval))
var eValue=eval('finval.'+key)
if(eValue != undefined){
document.querySelector('#h3').append(eValue)
$('登出
').appendTo($('#h3'));
}
}
getjson('message')
logininfo('result')
}}
}}
function dengchu(){
window.location.href = './login_in.html'
}
</script>
</body>
</html>
