功能:在网页输入注册信息,数据库自动添加信息; 在网页输入登录,数据库自动查找已注册的信息
页面:localhost:8080/1.html
数据库:localhost/phpmyadmin
一.模块安装:
安装cnpm:cnpm init -y
安装mysql:cnpm i mysql -D
安装co-mysql:cnpm i co-mysql -D
二.封装:公共校验(validator.js)
module.exports={
username(user){
if(!user){
return '用户名不能为空';
}else if(user.length>32){
return '用户名最长32位';
}else if(!/^\w{4,32}$/.test(user)){
return '格式不对';
}else{
return null;
}
},
password(password){
if(!password){
return '密码不能为空';
}else if(password.length>32){
return '密码最长32位';
}else{
return null;
}
}
};
三.新建文件 server.js
const http=require('http');
const mysql=require('mysql');
const co=require('co-mysql');
const url=require('url');
const fs=require('fs');
const validator=require('./validator');
//1.连接到服务器
//database: '2021'数据库名
let conn=mysql.createPool({host: 'localhost', user: 'root', password: '', database: '2021'});
let db=co(conn);
//2.跟http配合
http.createServer(async (req, res)=>{
const {pathname, query}=url.parse(req.url, true);
if(pathname=='/reg'){
let {username, password}=query;
//0.参数是否正确
let err=validator.username(query.username);
if(err){
res.write(err);
}else{
let err=validator.password(query.password);
if(err){
res.write(err);
}else{
//1.检查用户名是不是用过
try{
let data=await db.query(`SELECT ID FROM user_table WHERE username='${username}'`);
if(data.length>0){
res.write('此用户名已被占用');
}else{
await db.query(`INSERT INTO user_table (username, password) VALUES('${username}', '${password}')`);
res.write('注册成功');
}
}catch(e){
res.write('数据库有错');
}
}
}
res.end();
}else if(pathname=='/login'){
//0.检查用户名密码、格式
//1.检查用户是否存在
//2.密码对不对
//3.返回
let {username, password}=query;
//0.参数是否正确
let err=validator.username(query.username);
if(err){
res.write(err);
}else{
let err=validator.password(query.password);
if(err){
res.write(err);
}else{
try{
let data=await db.query(`SELECT ID,password FROM user_table WHERE username='${username}'`);
if(data.length==0){
res.write('用户名不存在');
}else if(data[0].password!=password){
res.write('密码不对');
}else{
res.write('成功');
}
}catch(e){
res.write('数据库出错');
console.log(e);
}
}
}
res.end();
}else{
fs.readFile('www'+pathname, (err, buffer)=>{
if(err){
res.writeHeader(404);
res.write('not found');
}else{
res.write(buffer);
}
res.end();
});
}
}).listen(8080);
//数据库(网页):localhost/phpmyadmin(wamp自带)
// database: '2021’数据库名
五.在本地窗口运行命令:node server.js
六.新建文件 1.html
(1.html位于server.js同层目录,www文件夹里)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
//导入jquery.js
<script src="jquery.js" charset="utf-8"></script>
</head>
<body>
用户:<input type="text" id="user" /><br>
密码:<input type="password" id="pass" /><br>
<input type="button" value="注册" id="reg" />
<input type="button" value="登录" id="login" />
</body>
<script>
$('#reg').click(async ()=>{
let data=await $.ajax({
url: 'http://localhost:8080/reg',
data: {
username: $('#user').val(),
password: $('#pass').val(),
}
});
alert(data);
});
$('#login').click(async ()=>{
let data=await $.ajax({
url: 'http://localhost:8080/login',
data: {
username: $('#user').val(),
password: $('#pass').val(),
}
});
alert(data);
});
</script>
</html>
七.打开浏览器:localhost:8080/1.html