Node.js原生及Express方法实现注册登录原理
2021-06-06 16:01
标签：思路 url 静态文件 stat 制造 框架 ajax btn 客户 由于本文只是实现其原理，所以没有使用数据库，只是在js里面模拟数据库，当然实际中还是需要用数据库的。 1.node.js原生方法 ①html页面，非常简单，没有一丝美化~我们叫它user.html ②然后，我们来写node服务器,关键的点我都注释出来了，起个名字叫server.js吧 ③服务器写好了，我们来写触发事件（我用的封装过的Ajax.js，大家用jQuery也是可以的，稍微改一下即可） 至此，我们的简单注册登录就完成了，启动一下server.js，然后即可操作。 2.Express方法 整体思路跟原生的差不多，只是多了一些中间件和方法。html和js触发事件跟前面基本一样，这里我们直接来写Express服务器。 ①使用Express需要先下载express框架，后面需要什么我们就下载什么（express-static是我们后面需要用到的中间件） node install express express-static ②直接来写登陆服务器login.js 启动一下login.js，然后即可操作。 这两种方法都是最基础的原理，如果在实际工作中还需要考虑很多东西，共勉！ Node.js原生及Express方法实现注册登录原理 标签：思路 url 静态文件 stat 制造 框架 ajax btn 客户 原文地址：http://www.cnblogs.com/toma113/p/7337939.htmlDOCTYPE html>
html>
head>
meta charset="utf-8">
title>usertitle>
head>
body>
用户：input type="text" id="user">br>
密码：input type="password" id="pass">br>
input type="button" value="注册" id="reg_btn">
input type="button" value="登录" id="login_btn">
body>
html>
const http = require(‘http‘); //node原生模块，用来创建服务器
const fs = require(‘fs‘); //node原生模块，用于文件操作
const urlLib = require(‘url‘); //node原生模块，用于解析URL地址
const querystring = require(‘querystring‘);//node原生模块，用于解析POST数据
var users = {};//{"user":"pass"} 模拟数据库船建一个JSON对象，用于存储用户信息
var server = http.createServer(function (req, res) { //创建服务器
var str = ‘‘; //创建空字符串用来保存接收到的POST数据
req.on(‘data‘,function (data) {
str += data; //此处需注意，如果客户端传过来的数据非常大，它会分多次接收
});
req.on(‘end‘,function () { //当数据传输结束，会执行‘end‘(只执行一次)
var obj = urlLib.parse(req.url,true); //解析URL地址
const url = obj.pathname; //获得接口地址
const GET = obj.query; //获得GET数据
const POST = querystring.parse(str); //解析POST数据
if (url == ‘/user‘){ //读取接口
switch (GET.act){
case ‘reg‘:
//1.用户名是否存在
if (users[GET.user]){
res.write(‘{"ok":false,"msg":"此用户已存在！"}‘)
}else {
//2.插入新注册用户
users[GET.user] = GET.pass;
res.write(‘{"ok":true,"msg":"注册成功！"}‘)
};
break;
case ‘login‘:
//1.用户名是否存在
if (users[GET.user] == null){
res.write(‘{"ok":false,"msg":"此用户不存在！"}‘)
}else if(users[GET.user] != GET.pass){
res.write(‘{"ok":false,"msg":"用户名或密码错误！"}‘)
}else {
res.write(‘{"ok":true,"msg":"登陆成功！"}‘)
};
break;
default:
res.write(‘{"ok":false,"msg":"未知操作！"}‘)
};
res.end();
}else { //读取文件
var fileName = ‘./www‘ + url; //静态文件存放地址（www是目录）
fs.readFile(fileName,function (err,data) {
if (err){
res.write(‘404‘);
}else {
res.write(data)
};
res.end()
});
};
});
});
server.listen(8081); //监听端口
var oTxtUser=document.getElementById(‘user‘);
var oTxtPass=document.getElementById(‘pass‘);
var oBtnReg=document.getElementById(‘reg_btn‘);
var oBtnLogin=document.getElementById(‘login_btn‘);
oBtnLogin.onclick=function (){
ajax({
url: ‘/user‘,
data: {act: ‘login‘, user: oTxtUser.value, pass: oTxtPass.value},
type: ‘get‘,
success: function (str){
var json=eval(‘(‘+str+‘)‘);
console.log(json);
if(json.ok){
alert(‘登录成功‘);
}else{
alert(‘登录失败：‘+json.msg);
}
},
error: function (){
alert(‘通信错误‘);
}
});
};
oBtnReg.onclick=function (){
ajax({
url: ‘/user‘,
data: {act: ‘reg‘, user: oTxtUser.value, pass: oTxtPass.value},
type: ‘get‘,
success: function (str){
var json=eval(‘(‘+str+‘)‘);
if(json.ok){
alert(‘注册成功‘);
}else{
alert(‘注册失败：‘+json.msg);
}
},
error: function (){
alert(‘通信错误‘);
}
});
};
const express=require(‘express‘); //引入Express框架
const expressStatic=require(‘express-static‘); //用来给静态文件设置目录
var server=express(); //创建Express服务器
server.listen(8081); //监听服务器
var users={ //模拟数据库，制造假的用户注册信息
"zhangsan":"123",
"lisi":"456",
"wangwu":"789"
};
server.get(‘/login‘,function (req,res) {
console.log(req.query)
var user = req.query["user"];
var pass = req.query["pass"];
if (users[user]==null){
res.send({ok:false,msg:‘此用户不存在！‘});
}else {
if(users[user]!=pass){
res.send({ok:false,msg:‘密码错误！‘});
}else {
res.send({ok:true,msg:‘成功！‘});
}
};
});
server.use(expressStatic(‘./www‘)); //设置静态文件目录