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)? 动态网站: 误区:初学者一般认为动态网页,就是会动的网页,但实际上不是这样的. 动态网页是指在服务器端运行的,使用程序语言设计的交互式网页,它们会根 ...
随机推荐
- linux网络设备驱动程序
4.linux网络设备驱动程序体系结构 -------------------------------------- | 数据包发送 | 数据包接收 | ----->网络协议接口层 | dev_ ...
- HTTPS那些事（一）HTTPS原理
转载来自:http://www.guokr.com/post/114121/ 谣言粉碎机前些日子发布的<用公共WiFi上网会危害银行账户安全吗?>,文中介绍了在使用HTTPS进行网络加密传 ...
- Entity Framework 教程——创建实体数据模型
创建实体数据模型: 本文将带你创建实体数据模型(EDM)SchoolDB数据库和理解基础建设模块. 实体数据模型(EDM)是用于描述实体之间关系的一种模型,以下将使用Visual Studio 201 ...
- DropDownList实现可输入可选择
1.js版本 <div style="z-index: 0; visibility: visible; clip: rect(0px 105px 80px 85px); positio ...
- C#开发微信门户及应用(36)--微信卡劵管理的封装操作
前面几篇介绍了微信支付方面的内容,本篇继续微信接口的一些其他方面的内容:卡劵管理.卡劵管理是微信接口里面非常复杂的一个部分,里面的接口非常多,我花了不少时间对它进行了封装处理,重构优化等等工作,卡劵在 ...
- 如何实现一个php框架系列文章【开篇】
1.本系列文章的目的 实现一个小而美的产品级别php框架 自己动手实现一个新框架仅用于学习交流,不打算替代市面上现有的其他主流框架. 2. 我要一个怎样的PHP框架 简单实用,安全优雅,博采众长 安装 ...
- C#工业物联网和集成系统解决方案的技术路线（数据源、数据采集、数据上传与接收、ActiveMQ、Mongodb、WebApi、手机App）
目 录 工业物联网和集成系统解决方案的技术路线... 1 前言... 1 第一章 系统架构... 3 1.1 硬件构架图... 3 1.2 ...
- linux(七)__shell脚本编程
一.什么是shell脚本 shell除了是命令解释器之外还是一种编程语言,用shell编写的程序类似于DOS下的批处理程序. 它是用户与操作系统之间的一个接口. shell脚本语言非常擅长处理文本类型 ...
- SpringMVC的执行流程（二）
文字解析: 1.客户端发出一个http请求给web服务器,web服务器对http请求进行解析,如果匹配 DispatcherServlet的请求映射路径(在web.xml中指定),web容器将请求转交 ...
- HTTP 错误 404.3 - Not Found 由于扩展配置问题而无法提供您请求的页面。如果该页面是脚本 ，请添加处理程序。如果下载文件，请添加 MIME 映射。 IIS站点中添加WCF项目后浏览网站报错解决方法。
vs2013 wcf服务 windows10 家庭中文版 上图中的红色没有出现就按照下面的方法做: 按照上图所示勾选. 刷新上图中你的网站,查看上图右边的内容是否出现,如果出现,再次重新浏览网站,看一 ...