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)? 动态网站: 误区:初学者一般认为动态网页,就是会动的网页,但实际上不是这样的. 动态网页是指在服务器端运行的,使用程序语言设计的交互式网页,它们会根 ...
随机推荐
- Android 中关于Fragment嵌套Fragment的问题
转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/5802146.html 问题描述: 在项目中Activity A中嵌套Fragment B,Fragment ...
- 【NLP】揭秘马尔可夫模型神秘面纱系列文章（五）
向前向后算法解决隐马尔可夫模型机器学习问题 作者:白宁超 2016年7月12日14:28:10 摘要:最早接触马尔可夫模型的定义源于吴军先生<数学之美>一书,起初觉得深奥难懂且无什么用场. ...
- C# 视频编辑
VidCoder VidCoder是一个开源免费的DVD/蓝光视频抓取和转码软件.使用HandBrake做为编码引擎.比Handbrake拥有更友好的用户界面. 可裁剪.剪切.字幕编辑.转码等. 官网 ...
- 【无私分享：ASP.NET CORE 项目实战（第七章）】文件操作 FileHelper
目录索引 [无私分享:ASP.NET CORE 项目实战]目录索引 简介 在程序设计中,我们很多情况下,会用到对文件的操作,在 上一个系列 中,我们有很多文件基本操作的示例,在Core中有一些改变,主 ...
- 充电时间 Go中的数组、切片、map简单示例
数组是固定长度的,依稀让我想起了VB:切片是动态的:map一般是键值对 package main import ( "fmt" ) func main() { var userna ...
- Linux安装MySQL
步骤: 1 [qq@localhost Desktop]$ su root //以root身份进入 Password:(默认为空) 2 [root@localhost Desktop]# yum ...
- Maven部署构件至远程仓库
私服的一大作用就是部署第三方构件,包括组织内的生成的构件以及一些无法从外部仓库获取的构件.无论是日常开发中生成的构件,还是正式版本发布的构件,都需要部署到仓库中,供其它团队成员使用.Maven除了能对 ...
- MySQL动态字符串处理DYNAMIC_STRING
MySQL中,常常会看到一些关于动态字符串的处理,列如:DYNAMIC_STRING. 为了记录动态字符串的实际长度,缓冲区的最大长度,以及每次字符串需要调整时,及时分配新的内存,以及调整长度.MyS ...
- BFC布局
这几天都没有写博客,自己的懒惰又要跑出来了,发觉不能再这样下去了,不然就什么都不想干了,然后将之前已经写得差不多的博客重新检视了一遍.这篇博客已经写得挺久的了,但是一直没有发布,现在补充了一些,也让自 ...
- 如何在SharePoint 当中使用纯JSOM上传任意二进制文件（小于2MＢ）
在微软的官方网站上有关于如何在SharePoint当中使用JS创建一个简单的文本文件的例子,经过我的思考我觉得结合Html5特性的浏览器,是完全可以通过JS来读取到文件的内容的(这一部分的内容请大家自 ...