web 交互应用服务器,使用nodejs实现web服务器与客户端的交互
使用nodejs实现web服务器与客户端的交互
使用nodejs实现web服务器与客户端的交互
1.实验目的：
使用SOAP等web service 协议，完成一个WEB服务的服务器与客户端的交互。
2.实验内容：
使用nodejs实现web服务器与客户端的交互
3.实验方法：
Node.js 就是运行在服务端的JavaScript。用于方便地搭建响应速度快、易于扩展的网络应用。
4.实验平台：
操作系统为win10 64位；
编程工具为WebStorm。
5.实验步骤
5.1 环境安装
Window下安装nodejs运行环境：
本次实验采用的版本为6.2.0
如下所示。根据指引完成运行环境的安装。
双击安装包
在命令提示窗口输入node -v输出当前版本，至此环境安装完成
node -v输出当前版本
5.2 安装express
新版本的nodejs已经集成npm工具，可以使用npm安装下载安装express
在命令提示窗口输入npm install express-generator -g进行express安装
5.3 新建express应用
在命令提示窗口输入express –-view=ejs myapp
–-view=ejs 指定了使用的模板引擎，myapp 为应用名称
–-view=ejs
Package.json中指定了项目需要的其他驱动包
Package.json中制定了项目需要的其他驱动包
根据提示进入应用，输入npm install完成驱动包的下载安装
完成驱动包的下载安装
进入bin 目录执行node www命令启动服务之后再浏览器中输入，localhost：3000
如下图所示：
localhost：3000
5.4 交互逻辑规划
本次实验在交互方面实现两个功能
(1) 简单的计算器
(2) Rgb 颜色转换
需要两个客户端页面来展示进行信息的展示，客户端发起get请求获取静态页面
所有的计算结果使用异步方式进行加载。
5.5 代码实现
前段代码：
计算器布局文件：
输入第一个数
+
-
×
÷
输入第二个数
计算
运算结果:
Rgb颜色转换布局文件：
输入rgb 颜色
转换
运算结果:
输入16进制 颜色
转换
运算结果:
简单封装xhr 来进行数据的异步记载
function ajax(opt) {
opt = opt || {};
opt.type = opt.type.toUpperCase() || 'POST';
opt.url = opt.url || '';
opt.async = opt.async || true;
opt.data = opt.data || null;
opt.success = opt.success || function () {
};
opt.fail = opt.fail || function () {
}
var xmlHttp = null;
if (XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
else {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
var params = [];
for (var key in opt.data) {
params.push(key + '=' + opt.data[key]);
}
var postData = params.join('&');
if (opt.type === 'POST') {
xmlHttp.open(opt.type, opt.url, opt.async);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
xmlHttp.send(postData);
}
else if (opt.type === 'GET') {
xmlHttp.open(opt.type, opt.url + '?' + postData, opt.async);
xmlHttp.send(null);
}
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4) {
var status = xmlHttp.status;
if (status >= 200 && status < 300) {
opt.success && opt.success(xmlHttp.responseText, xmlHttp.responseXML);
} else {
opt.fail && opt.fail(status);
}
}
};
}
前段调用一部加载的方法：
计算器：
var inputarray = document.querySelectorAll('input');
var buttonarray = document.querySelectorAll('button')
var parray = document.querySelectorAll('p.re')
buttonarray[0].onclick = function () {
var obj = document.querySelector('select');
var index = obj.selectedIndex
ajax({
url: "calu",
type: 'post',
data: {
vf: inputarray[0].value,
vs: inputarray[1].value,
vt: obj.options[index].value
},
success: function (text, xml) {
parray[0].innerText = '运算结果:' + text
}
rgb转换器
var inputarray = document.querySelectorAll('input');
var buttonarray = document.querySelectorAll('button')
var parray = document.querySelectorAll('p.re')
buttonarray[1].onclick = function () {
ajax({
url: "torgb",
type: 'post',
data: {
'vs': inputarray[3].value,
},
success: function (text, xml) {
parray[1].innerText = '运算结果:' + text
}
})
}
buttonarray[0].onclick = function () {
ajax({
url: "tohex",
type: 'post',
data: {
'r': inputarray[0].value,
'g': inputarray[1].value,
'b': inputarray[2].value,
},
success: function (text, xml) {
parray[0].innerText = '运算结果:' + text
}
})
}
注：rgb转换时异步加载为两个接口
服务端代码：
服务端路由规划：
var express = require('express');
var router = express.Router();
var Caluc = require('../models/caluc.js');
var Coto = require('../models/color.js');
//获取计算器的布局文件
router.get('/', function (req, res, next) {
res.render('index', {title: '计算器'});
});
//获取rgb布局文件
router.get('/color', function (req, res, next) {
res.render('color', {title: 'rgb 转换器'});
});
//异步获取计算结果
router.post('/calu', function (req, res, next) {
var f = req.body.vf, s = req.body.vs, t = req.body.vt;
var c = new Caluc();
c.plus(s, f, t, function (err, data) {
res.send(200, data);
})
});
//异步获取转换成rgb的结果
router.post('/torgb', function (req, res, next) {
var s = req.body.vs;
var c = new Coto();
c.torgb(s, function (err, data) {
res.send(data);
})
});
//异步获取转成hex的结果
router.post('/tohex', function (req, res, next) {
var r = req.body.r, g = req.body.g, b = req.body.b;
var c = new Coto();
c.tohex(r, g, b, function (err, data) {
res.send(data);
})
});
module.exports = router;
服务端实现计算器核心代码：
其中t 的1，2，3，4 分别代表加减乘除
Caluc.prototype.plus = function (a, b, t, callback) {
t = Number(t)
a = Number(a);
b = Number(b);
switch (t) {
case 1:
callback(null, a + b);
break;
case 2:
callback(null, b - a);
break;
case 3:
callback(null, a b);
break;
case 4:
callback(null, b / a);
break;
}
}
服务端实现RGB与hex互转核心代码：
Cotr.prototype.torgb = function (a, callback) {
this.val = a;
this.val = this.val.substring(1, 7)
console.log(this.val)
var rgba = 'rgba('
for (var i = 0; i < this.val.length; i += 2) {
var cc = parseInt(this.val.substring(i, i + 2), 16)
rgba = rgba + cc + ','
}
var tran = 1
color = rgba = rgba + tran + ')'
callback(null, color);
}
Cotr.prototype.tohex = function (r, g, b, callback) {
r = ("0" + Number(r).toString(16)).slice(-2);
g = ("0" + Number(g).toString(16)).slice(-2);
b = ("0" + Number(b).toString(16)).slice(-2);
color = "#" + r + g + b;
callback(null, color);
}
5.6.交互展示
计算器计算交互
计算器计算交互
计算器计算交互
计算器计算交互
计算器计算交互
RGB颜色转换交互：
将rga(234，234，235) 转换成 16进制
Paste_Image.png
将#eaeaeb转换成10进制。
将#eaeaeb转换成10进制