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.onclick = () => {
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.onclick = () => {
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);
欲做精金美玉的人品，定从烈火中煅来；思立掀天揭地的事功，须向薄冰上履过。----《菜根谭》
努力中前进，加油 ~~~~
以上操作有坑没填，不会填，♪(∇*)
网友评论