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)? 动态网站: 误区:初学者一般认为动态网页,就是会动的网页,但实际上不是这样的. 动态网页是指在服务器端运行的,使用程序语言设计的交互式网页,它们会根 ...
随机推荐
- 【NLP】条件随机场知识扩展延伸（五）
条件随机场知识扩展延伸 作者:白宁超 2016年8月3日19:47:55 [摘要]:条件随机场用于序列标注,数据分割等自然语言处理中,表现出很好的效果.在中文分词.中文人名识别和歧义消解等任务中都有应 ...
- Oracle PL/SQL随堂笔记总结
1.pl/sql编程 2.存储过程 3.函数 4.触发器 5.包 6.pl/sql基础 -定义并使用变量 7.pl/sql的进阶 8.oracle的视图 1.pl/sql编程 1.理解oracle的p ...
- SQL Server 统计信息更新时采样百分比对数据预估准确性的影响
为什么要写统计信息 最近看到园子里有人写统计信息,楼主也来凑热闹. 话说经常做数据库的,尤其是做开发的或者优化的,统计信息造成的性能问题应该说是司空见惯. 当然解决办法也并非一成不变,“一招鲜吃遍天” ...
- git 版本回退
由于操作失误,需要将代码进行版本回退,首先在本地仓库执行了“git reset --hard HEAD^”命令,这样只会回退本地仓库的代码,但是我的代码之前已经push到了远程库中,查看远程仓库,发现 ...
- 基于STM32Cube的脉冲输出
方法一:定时器定时I/O反转生成脉冲波形 1.建立STM32Cube选择STM32F429,我使用的STM32F429-discovery开发板,晶振是8MHz,时钟配置为180M,这样定时器内部时钟 ...
- C#开发微信门户及应用(8)-微信门户应用管理系统功能介绍
最近对微信接口进行深入的研究,通过把底层接口一步步进行封装后,逐步升级到自动化配置.自动化应答,以及后台处理界面的优化和完善上,力求搭建一个较为完善.适用的微信门户应用管理系统. 微信门户应用管理系统 ...
- 有点激动，WPF换肤搞定了！
一如既往没废话! wpf桌面应用开发都是window内引入很多个UserControl. 如果你有通过不同颜色来换肤的需求,那么下面我就将整个过程! 分2个步骤: 1.主窗体背景色替换: 2.同时界面 ...
- csharp: Download SVN source
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- enumerate用法总结-Python 3
enumerate()说明 enumerate()是python的内置函数 enumerate在字典上是枚举.列举的意思 对于一个可迭代的(iterable)/可遍历的对象(如列表.字符串),enum ...
- JDBC_part1_Oracle数据库连接JDBC以及查询语句
本文为博主辛苦总结,希望自己以后返回来看的时候理解更深刻,也希望可以起到帮助初学者的作用. 转载请注明 出自 : luogg的博客园 谢谢配合! JDBC part1 JDBC概述 jdbc是一种用于 ...