流程
第一步:前台输入用户名密码
=>
第二步:点击提交向后台发送数据
=>
第三步:后台接收数据并验证
=>
第四步:验证完成向前台发送成功,失败标识
=>
第五步:前台接接收标识,做页面处理
登录
前台处理
登录页面
<p>
<label for="">用户名:</label>
<input type="text" name="username" id="login_username">
</p>
<p>
<label for="">密 码:</label>
<input type="password" name="userpassword" id="login_userpassword">
</p>
<span class="yanz"></span>
<button>登录</button>
注册页面
<h1>用户注册</h1>
<p>
<label for="">用户名:</label>
<input type="text" name="username" id="cancel_username">
</p>
<p>
<label for="">密 码:</label>
<input type="password" name="userpassword" id="cancel_userpassword">
</p>
<span class="yanz"></span>
<button>注册</button>
点击通过ajax发送请求
//点击登录
$('.login_box button').click(function(){
var username = $('#login_username').val();
var userpassword = $('#login_userpassword').val();
var pointspassword = $('.yanz');
var username_reg = /^[\w]{3,12}$/;
var password_reg = /^[\S]{6,12}$/;
console.log($('#login_username'));
//登录用户名正则验证
if(password_reg.test(userpassword)){
pointspassword.html('');
$.ajax({
url:'/login',
type:'POST',
data:{
uname:username,
upassword:userpassword
},
success:function(response){
// 请求成功以后才会执行
if(response == '1'){
//登录成功
alert('登录成功');
//跳转页面
// window.location.href='/';
}else if(response == 2){
//用户名或密码错误
alert('用户名或密码错误');
}
},
});
}else{
pointspassword.html('必须是6-12位');
}
});
//点击注册
$('.cancel_box button').click(function(){
var username = $('#cancel_username').val();
var userpassword = $('#cancel_userpassword').val();
var pointspassword = $('.yanz');
var username_reg = /^[\w]{4,12}$/;
var password_reg = /^[\S]{6,12}$/;
if(password_reg.test(userpassword)){
$.ajax({
url:'/register',
type:'POST',
data:{
uname:username,
upassword:userpassword
},
success:function(response){
// 请求成功以后才会执行
console.log(response);
console.log(this);
if(response == 1){
pointspassword.html('成功');
}else if(response == 0){
pointspassword.html('失败');
}else if(response == 3){
pointspassword.html('已存在');
}
},
});
}else{
pointspassword.html('必须是6-12位');
}
})
后台处理
这里没有使用数据库,使用一个josn文件代替
const http = require("http");
const fs = require("fs");
const querystring = require("querystring");
//设置端口号
const post = 3000;
//通过http模块创建服务器
const server = http.createServer();
server.on("request",(req,res)=>{
//登录接口
if(req.url == "/login" && req.method == "POST"){
let str = '';
//接受前台传送的数据
req.on('data',(chunk)=>{
str += chunk;
})
req.on('end',()=>{
let dataObj = querystring.parse(str);
//读取数据库用户,判断用户名密码是否正确
fs.readFile("./data.json","utf8",(err,data)=>{
let obj = JSON.parse(data);
for(let i = 0; i < obj.length; i++){
if(dataObj.uname == obj[i].uname && dataObj.upassword == obj[i].upassword){
//用户密码正确返回1
return res.end('1');
}else if(i == obj.length -1){
//用户不存在或密码错误返回2
return res.end('2');
}
}
})
})
}
//注册接口
else if(req.url == "/register" && req.method == "POST"){
let str = '';
req.on('data',(chunk)=>{
str += chunk;
})
req.on('end',()=>{
let dataObj = querystring.parse(str);
console.log(dataObj);
fs.readFile("./data.json","utf8",(err,data)=>{
let obj = JSON.parse(data);
console.log(obj);
for(let i = 0; i < obj.length; i++){
console.log(obj[i].uname)
if(obj[i].uname == dataObj.uname){
return res.end('3');
}
}
obj.push(dataObj);
fs.writeFile('./data.json',JSON.stringify(obj),'utf8',(err,result)=>{
if(err){
return res.end('2');
}
return res.end('1');
})
})
})
}
}
server.listen(post);