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)? 动态网站: 误区:初学者一般认为动态网页,就是会动的网页,但实际上不是这样的. 动态网页是指在服务器端运行的,使用程序语言设计的交互式网页,它们会根 ...
随机推荐
- 放弃安卓原生TimePicker，选择wheelView打造更漂亮的时间get，以及动态拉伸输入框布局，这些，这里都有！
最近公司要求的上线项目有这么一个需求,要写一个请假申请的页面,里面必须有请假开始时间,结束时间,还有一个请假原因. 于是想到时间选择嘛,官方不是有个DatePicker吗?额,是不是要DatePick ...
- [Oracle] Bulk Insert Data
命名空间:Oracle.DataAccess.Client 组件:Oracle.DataAccess.dll(2.112.1.0) ODP.NET 版本:ODP.NET for .NET Framew ...
- RedisRepository封装—Redis发布订阅以及StackExchange.Redis中的使用
本文版权归博客园和作者本人吴双共同所有,转载请注明本Redis系列分享地址.http://www.cnblogs.com/tdws/tag/NoSql/ Redis Pub/Sub模式 基本介绍 Re ...
- C#连接Access与SQL Server
1.连接Access数据库 string strConnection = "Provider=Microsoft.Ace.OleDb.12.0; Data Source=" + S ...
- 2016 ICPC青岛站---k题 Finding Hotels（K-D树）
题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=5992 Problem Description There are N hotels all over ...
- spider RPC性能测试报告
测试环境部署结构 测试用例 类 别 说明 请求报文 194字节({"systemId":"PL","appVersion":"qq ...
- jQuery技巧大放送
1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用do ...
- sharepoint 计算列 年龄
1.建立一个字段叫做Today ,(类型为文本都行) 2.建立你想要计算字段年龄,公式=IF(ISBLANK(出生年月),"NA",DATEDIF(出生年月,Today," ...
- IT技术风向标
2016 stackoverflow的统计 : http://stackoverflow.com/research/developer-survey-2016
- yii2权限控制rbac之rule详细讲解
作者:白狼 出处:http://www.manks.top/yii2_rbac_rule.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留 ...