html服务器接收数据格式,结合GET(),POST()实现一个简单、完整的服务器

结合GET(),POST()实现一个简单、完整的服务器

复习一下：

基础模块

作用

fs

fs模块用于对系统文件及目录进行读写操作

http

创建服务器。e.g.http.createServer();

queryString

把url带的参数串转化为数组对象

url

直接解析URL中字符串，提炼出我们需要的结果。

提示：

querystring主要用来解析POST数据(如‘querystring.parse()’)

Url主要用来解析GET数据(比如‘url.parse()’)。

1.url.parse()方法回顾：

var url = require('url');

var queryUrl = "http://localhost:8888/bb?name=bigbear&memo=helloworld"

console.log(url.parse(queryUrl)) ;

运行结果：

{

protocol: 'http:',

slashes: true,

auth: null,

host: 'localhost:8888',

port: '8888',

hostname: 'localhost',

hash: null,

search: '?name=bigbear&memo=helloworld',

query: 'name=bigbear&memo=helloworld',

pathname: '/bb',

path: '/bb?name=bigbear&memo=helloworld',

href: 'http://localhost:8888/bb?name=bigbear&memo=helloworld'

}

说明:

query: 查询字符串中的参数部分(问号后面部分字符串)，或者使用 querystring.parse() 解析后返回的对象。

2.querystring.parse()方法回顾

QueryString” 模块用于实现URL参数字符串与参数对象的互相转换

在url.parse()基础上，把参数字符串编程jsonp对象格式:

例子：

思路：

一、首先，我们确定一下接口。

/user?act=reg&user=aaa&pass=123456

{"ok": false, "msg": "原因"}

/user?act=login&user=aaa&pass=123456

{"ok": true, "msg": "原因"}

二、 文件位置：

三、服务器接受数据后，处理并返回data的思路

1. 接口名为user。如果url中地址不指向user，就显示404，否则进入2；

2. 用户是登录还是注册？

3. 如果既不是注册也不是登录。就提示“未知action”；

Created with Raphaël 2.1.0 e 注册 e 账号不存在？ http://www.google.com Yes or No? http://www.google.com 提示：注册成功 提示：账号已存在 yes no

Created with Raphaël 2.1.0 e 登录 e 账号已注册？ http://www.google.com Yes or No? http://www.google.com 继续判断密码是否正确 提示：账号未注册 yes no

这个流程图我不太会用。“登录部分”接下去是如果密码正确，就提示“登录成功”，否则提示“密码不正确”；

sever.js代码：

const http = require('http');

const fs = require('fs');

const querystring = require('querystring');

const urlLib = require('url');

var users = {}; //将注册信息保存在缓存中

var server = http.createServer(function (req, res) {

// 解析数据

var str = '';

req.on("data", function (data) {

str += data;

});

req.on("end", function () {

var obj = urlLib.parse(req.url, true);

var url = obj.pathname;

const GET = obj.query;

const POST = querystring.parse(url);

// 区分接口和文件读取

if (url == '/user') { //读取‘url’接口下的文件时

switch (GET.act) {

case 'reg':

//用户名已经存在

if (users[GET.user]) {

res.write('{"ok":false, "msg":"已经注册过了！"}');

} else {

// 插入到users

users[GET.user] = GET.pass;

res.write('{"ok":true,"msg":"注册成功！"}');

}

break;

case 'login':

//用户名是否存在

if (users[GET.user]) {

if (user[GET.pass] === GET.pass) { //密码是否正确

res.write('{"ok":true,"msg":"登录成功！"}');

} else {

res.write('{"ok":flase,"msg":"密码不正确！"}');

}

} else { //用户名不存在

res.write('{"ok":false,"msg":"用户名不存在"}');

}

break;

default:

res.write('{"ok":false,"msg":"未知操作"}');

}

res.end();

} else { //读取别的文件

var file_name = './www' + url;

fs.readFile(file_name, function (err, data) {

if (data) {

res.write(data);

} else {

res.write("404");

}

res.end();

});

}

});

});

server.listen(8080);

user.html文件代码：

title>

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 + ')');

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('通信错误');

}

});

};

};script>

head>

用户：

密码：

body>

html>

执行server.js，然后在浏览器中打开user.html页面。值得注意的是跨域问题，

注意：我们应该在服务器上跑，而不是只打开本地静态页面！

接下来就正常玩耍吧……