node基础12：动态网页
1.显示动态网页
又到了激动人心的时刻，马上就可以使用node创建动态网站了，其原理为：
- 在HTML模板中使用占位符
- 根据请求路径，确定需要返回的页面
- 根据请求参数来确定静态模板中占位符的值
- 使用正则匹配将占位符匹配为真实值
- 再res.write()到浏览器的
代码如下：
// server.js
var http = require("http");
var url = require('url');
var router = require('./router'); http.createServer(function(req, res){
if ( req.url !== '/favicon.ico'){
pathname = url.parse(req.url).pathname.replace(/\//,'');
console.log(pathname);
try {
router[pathname](req, res);
} catch(e) {
console.log('error:'+e);
res.writeHead(200, {'Content-Type': 'text/html;charset=utf-8'});
res.write(e.toString());
res.end();
};
}
}).listen(3000);
console.log("server running at http:127.0.0.1:3000");
/**
* router.js
*/
var fs = require('fs');
var url = require('url');
var querystring = require('querystring'); module.exports = {
login: function(req, res){
var post ='';
req.on('data', function(chunk){
post += chunk;
});
req.on('end', function(){
post = querystring.parse(post);
array = ['username', 'password'];
fs.readFile('./login.html', function(err, data){
if( err){
console.log(err);
res.writeHead(200, {'Content-Type': 'text/html;charset=utf-8'})
res.write(err.toString());
res.end();
} else {
res.writeHead(200, {'Content-Type': 'text/html;charset=utf-8'})
data = data.toString();
for(var i = 0; i < array.length; i++){
var reg = new RegExp("{{"+array[i]+"}}", 'g');
console.log(reg);
post[array[i]] = post[array[i]] == undefined ? '':post[array[i]];
data = data.replace(reg, post[array[i]]);
console.log(post[array[i]]);
}
res.write(data);
res.end();
}
})
})
},
register:function(req, res){
fs.readFile('.register.html', function(err, data){
if(err) {
console.log(err);
res.writeHead(200, {'Content-Type': 'text/html;charset=utf-8'})
res.write(err.toString());
res.end();
return;
} else{
res.writeHead(200, {'Content-Type': 'text/html;charset=utf-8'});
res.write(data);
res.end();
}
})
},
showImage:function(req, res){
fs.readFile('./test.png',function(err, data){
if (err) {
console.log(err);
return;
} else{
console.log("开始读取图片");
res.writeHead(200, {'Content-Type':'image/jpeg'});
res.write(data);
res.end();//写在互调函数外面会报错的哟
}
})
} }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="./showImage" alt="">
<h1>收到参数：username：{{username}}</h1>
<h1>收到参数：password：{{password}}</h1>
<form action="./login" method="POST">
<p>
<span>name</span>
<input type="text" name="username">
</p>
<p>
<span>password</span>
<input type="text" name="password">
</p>
<p>
<input type="submit" value="登录">
</p>
</form>
</body>
</html>
node基础12：动态网页的更多相关文章
- JSP技术基础（动态网页基础）
前言:如果说html为静态网页基础,那么jsp就是动态网页基础,两者的区别就是jsp在html的前面多加了几行而已.当然,jsp里面对java的支持度更高.要明白,js只是嵌入在客户端的小程序小脚本而 ...
- JSP／Servlet开发——第一章 动态网页基础
1.动态网页:在服务端运行的使用程序语言设计的交互网页 : ●动态网站并不是指具有动画功能的网站,而是指网站内容可根据不同情况动态变更的网站(股票网站),一般情况下动态网站通过数据库进行架构. ●动态 ...
- JavaEE-01 JSP动态网页基础
学习要点 B/S架构的基本概念 Web项目的创建和运行 JSP页面元素 MyEclipse创建和运行Web项目 Web程序调试 Web简史 web前端技术演进三阶段 WEB 1.0:信息广播. WEB ...
- Node.js 动态网页爬取 PhantomJS 使用入门(转)
Node.js 动态网页爬取 PhantomJS 使用入门 原创NeverSettle101 发布于2017-03-24 09:34:45 阅读数 8309 收藏 展开 版权声明:本文为 winte ...
- 使用JSP/Servalet技术开发新闻发布系统------动态网页开发基础
什么是动态网页? 动态网页是指在服务器端运行的程序或者网页,它们会随不同客户.不同时间,返回不同的网页. 动态网页的特点? (1).交互性:即网页会根据用户的要求和选择而动态改变和响应.采用动态网页技 ...
- 第一章使用JSP/Server技术开发新闻发布系统第一章动态网页开发基础
一:为什么需要动态网页 由于静态网页的内容是固定的,不能提供个性化和定制化得服务,使用动态网页可真正地与用户实现互动. 二:什么是动态网页 ①:动态网页是指在服务器端运行的,使用程序语言设 ...
- 《The Django Book》实战--第二章--动态网页基础
这章演示了一些最基本的Django开发动态网页的实例,由于版本不一样,我用的是Django 1.,6.3,有些地方按书上的做是不行的,所以又改了一些,写出来让大家参考. 这是一个用python写的一个 ...
- jsp第一章 动态网页开发基础
动态网站可以实现交互功能,如用户注册.信息发布.产品展示.订单管理等等: 动态网页并不是独立存在于服务器的网页文件,而是浏览器发出请求时才反馈网页: 动态网页中包含有服务器端脚本,所以页面文件名常以a ...
- JSP第一章动态网页的基础
什么是动态网站(dynamic website)? 动态网站: 误区:初学者一般认为动态网页,就是会动的网页,但实际上不是这样的. 动态网页是指在服务器端运行的,使用程序语言设计的交互式网页,它们会根 ...
随机推荐
- Effective前端3：用CSS画一个三角形
p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...
- HTTPS是数据交互细节
by http://www.zcfy.cc/article/how-does-https-work-1280.html 密码(Cipher) Java 1.2内置了一个叫做"JCE" ...
- yii框架安装心得
最近在学习yii框架, 现在将遇到的一些问题和解决方法写出来与大家分享. yii框架的安装: 下载yii框架之后, 打开文件运行init.bat文件, 如果闪退就打开php的扩展(php_openss ...
- 解决phalcon model在插入或更新时会自动验证非空字段
在使用phalcon的insert和update功能时,因为数据库所有的字段设置的都是NOT NULL,而phalcon的model在插入或更新之前会自动判断字段是否需要必填,因此导致有空字段时无法存 ...
- PALIN - The Next Palindrome 对称的数
A positive integer is called a palindrome if its representation in the decimal system is the same wh ...
- 记录一次bug解决过程：规范变量名称和mybatis的使用以及代码优化
一.总结 Mybatis中当parameterType为基本数据类型的时候,统一采用_parameter来代替基本数据类型变量. Mybatis中resultMap返回一个对象,resultType返 ...
- 2015年软件测试STATE报告
STATE OF TESTING 2015 Report 测试职业的地理位置分配 大部分有5年以上工作经验 大部分是Test Leader 测试工程师角色 测试工程师怎么工作的? 测试中的软件 ...
- PHP 观察者模式
观察者模式:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新. [观察者模式中主要角色] 1.抽象主题(Subject)角色: 抽象主题提供了增加 ...
- python 学习笔记 -logging模块（日志）
模块级函数 logging.getLogger([name]):返回一个logger对象,如果没有指定名字将返回root loggerlogging.debug().logging.info().lo ...
- Java设计模式——线程安全的单件模式
单件模式,也称单例模式,用以创建独一无二的.只能有一个实例的对象. 单件模式的类图是所有模式的类图中最简单的--只有一个类.尽管从类设计的视角来看单件模式很简单,但是实现上还是会遇到一些问题,本文着重 ...