2018.7.22 来一次交互，还是因为记不住
讲的是注册和登陆的故事
文件目录：
-www
-- ajax.js
-- user.html
-server.js
- 前端
<body> <div style="margin-bottom: 10px;"> <input type="text" id="user"> <br> <input type="password" id="pass"> <br> </div> <input type="button" id="reg_btn" value="注册"> <input type="button" id="login_btn" value="登陆"></body>
// script 脚本const select = (selector) => document.querySelector(selector);let oTextUser = select('#user');let oTextPass = select('#pass');let oBtnReg = select('#reg_btn');let oBtnLogin = select('#login_btn');
oBtnReg. = () => {
ajax({ url:'/user', type:'get', data:{ act:'reg',
user: oTextUser.value,
pass: oTextPass.value
}, success: res => { let o = JSON.parse(res); if(o.ok) {
alert('注册成功');
} else { console.error('注册失败：',o.msg)
}
}, error: () => {
alert('通信失败');
}
});
};
oBtnLogin. = () => {
ajax({ url:'/user', type:'get', data:{ act:'login',
user: oTextUser.value,
pass: oTextPass.value
}, success: res => { let o = JSON.parse(res); if(o.ok) {
alert('登陆成功');
} else { console.error('登陆失败：',o.msg)
}
}, error: () => {
alert('通信失败');
}
});
};- nodejs的后端服务
思路
0.照例提前准备模块
1.启动一个服务
2.监听端口
3.解析前端传回来的数据
4.数据读完，保存各种请求的变量
5.互动开始
----- 5.1如果是 url === '/user' ，就表示请求的接口
----- 5.2如果不是，就是请求文件
// 0. 照例提前准备模块const http = require('http');const fs = require('fs');const querystring = require('querystring');const urlLib = require('url');let users = {}; // { name1:value1, name2:value2}// 1. 启动一个服务const server = http.createServer((req, res) => { // 3. 解析前端传回来的数据
let str = ''; // 存数据的变量
req.on('data' , data => {
str += data;
});
req.on('end', () => { // 4. 数据读完，保存各种请求的变量
let o = urlLib.parse(str); let url = o.pathname; const GET = o.query; const POST = querystring.parse(str);
// 5. 互动开始
if (url === '/user') { // 5.1 如果是酱紫的，就表示请求的接口
let pass = users[GET.user]; switch(GET.act){ case 'reg' : // 注册
if(pass){
res.write(JSON.stringify({"ok":false,msg:"此用户已经存在"}));
} else {
users[GET.user] = GET.pass;
res.write(JSON.stringify({"ok":true,msg:"注册成功"}));
} break; case 'login' :
// 登陆
if(pass === undefined){
res.write(JSON.stringify({"ok":false,msg:"未找到用户名"}));
} else if( pass !== GET.pass ) {
res.write(JSON.stringify({"ok":false,msg:"用户名或密码错误"}));
} else {
res.write(JSON.stringify({"ok":true,msg:"登陆成功"}));
} break; default :
res.write(JSON.stringify({"ok":false,msg:"未知的act"})); break;
}
} else { // 5.2 此处写请求是文件的 code
let file_name = './www' + url;
fs.readFile(file_name, (err, data) => { // res.write() 、 res.end(); 成双成对
if(err) {
res.write('404');
} else {
res.write(data);
}
res.end();
});
}
})
});// 2. 监听端口server.listen(8080);欲做精金美玉的人品，定从烈火中煅来；思立掀天揭地的事功，须向薄冰上履过。----《菜根谭》
努力中前进，加油 ~~~~
以上操作有坑没填，不会填，(∇*)
作者：Aaron_Alphabet
链接：https://www.jianshu.com/p/eb40eeb99a64
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦