需求:
若用户信息与数据库中信息相匹配,将可登录,反之不可登录。
需求分析:
1.前端发送用户登录信息给后台。
2.后台校验用户信息是否正确,若完全匹配则可登陆成功,反之登陆失败。
前端代码:
//导入封装好的ajax请求(封装的Ajax请求下方有链接)
<script src="./ajax.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div#d1 {
width: 510px;
height: 350px;
margin: 150px auto;
background: #f2f2f2;
padding: 30px;
box-shadow: 0px 0px 5px #aaa;
position: relative;
}
input {
width: 250px;
height: 30px;
margin-top: 20px;
margin-left: 10px;
}
button {
margin-top: 20px;
width: 50px;
height: 30px;
}
span {
font-size: 12px;
color: red;
margin-left: 5px;
display: none;
}
a {
width: 50px;
height: 30px;
border: 1px solid gray;
display: inline-block;
text-decoration: none;
color: black;
text-align: center;
line-height: 30px;
border-radius: 5px;
position: absolute;
bottom: 85px;
right: 160px;
}
</style>
<div id="d1">
<h2>用户登录</h2>
<label for="o1">用户名:</label><input type="text" id="o1"><span id="s1">用户名4-16位</span><br>
<label for="o2">密 码:</label><input type="text" id="o2"><span id="s2">密码至少6位</span><br>
<label for="o3">电 话:</label><input type="text" id="o3"><span id="s3">请输入有效的手机号码</span><br>
<button>登录</button>
<div id="d2"><a href="../注册/register.html">注册</a></div>
</div>
<script>
let inp1 = document.querySelector('#o1');
let inp2 = document.querySelector('#o2');
let inp3 = document.querySelector('#o3');
document.querySelector('button').onclick = function () {
let inp11 = inp1.value;
let inp22 = inp2.value;
let inp33 = inp3.value;
let url = `http://localhost:9099`;
let ourl = `username=${inp11}&psd=${inp22}&tel=${inp33}`;
request('get', url,ourl).then(data => {
document.write(data);
}, err => {
console.log(err);
});
}
</script>
后端代码(支持get与post两种方式):
let http = require('http');
let mysql = require("mysql");
let result1 = {};
let server = http.createServer(function (req, res) {
res.setHeader("Access-Control-Allow-Origin", "*");
if (req.method === 'get' || req.method === 'GET') {
let url = req.url.split('?')[1].split('&');
console.log(url);
let name, psd, tel;
url.forEach(function (item) {
let a = item.split('=');
if (a[0] == 'username') {
name = a[1]
} else if (a[0] == 'psd') {
psd = a[1]
} else if (a[0] == 'tel') {
tel = a[1]
}
});
console.log(name, psd, tel);
//校验数据库中的信息;若一致则可登录成功,不一致则失败;
find(name, psd, tel, function (data) {
console.log(data);
res.write(JSON.stringify(data));
res.end();
});
} else {
let data = '';
req.on('data', function (chunk) {
data += chunk;
});
req.on('end', function () {
console.log('接收完毕', data);
let url = data.split('&');
console.log(url);
let name, psd, tel;
url.forEach(function (item) {
let a = item.split('=');
if (a[0] == 'username') {
name = a[1]
} else if (a[0] == 'psd') {
psd = a[1]
} else if (a[0] == 'tel') {
tel = a[1]
}
});
console.log(name, psd, tel);
//校验数据库中的信息;若一致则可登录成功,不一致则失败;
find(name, psd, tel, function (data) {
console.log(data);
res.write(JSON.stringify(data));
res.end();
});
})
}
}).listen('9099');
console.log('running.....9099');
function find(name, psd, tel, fn) {
//1创建连接
let conn = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'root',
database: 's1',
});
//2建立连接
conn.connect();
//3操作
let sql = `select * from new_table where username='${name}'and psd=${psd} and tel=${tel}`;
conn.query(sql, function (err, result) {
if (!err) {
console.log('数据库访问成功', result);
if (result.length == 0) {
console.log(name, '用户未注册');
result1.code = 201;
result1.msg = '登陆失败,请输入正确的用户信息';
fn(result1);
} else {
console.log('登录成功');
result1.code = 200;
result1.msg = '登录成功';
fn(result1);
}
} else {
console.log('数据库访问失败', err);
result1.code = 202, result1.msg = '登录失败'
fn(result1);
}
});
//4断开连接
conn.end();
}