node+ajax实战案例（2）
2.静态资源渲染
2.1.创建http服务器
var http = require('http');
var url = require('url');
var app = http.createServer(function (req, res) {
var url_obj = url.parse(req.url);
if(url_obj.pathname === '/'){
res.write('hello world');
res.end();
}
})
app.listen(3000)
2.2.根据请求的文件类型返回不同的文件内容
首先，我们可以先返回一个html文件，在项目目录下去新建一个template的文件夹,在template文件夹下新建index.html和login.html的文件，分别写入一些测试代码 index.html文件内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>欢迎来到首页</h1>
<a href='/login.html'>去登录</a>
</body>
</html>
login.html文件内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>欢迎来到登录页</h1>
</body>
</html>
现在我们需要根据访问的文件返回不同的内容，例如：访问http://localhost:3000/index.html 返回template下面index.html文件的内容，同理 访问http://localhost:3000/login.html， 就要返回template目录下login.html文件的内容，按照我们以前讲过的方法，在node后台程序中，我们可以为每个请求写一个路由，例如这样：
var http = require('http');
var url = require('url');
var fs = require('fs');
var app = http.createServer(function (req, res) {
var url_obj = url.parse(req.url);
if(url_obj.pathname === '/'){
//这里返回默认的index.html文件内容
fs.readFile('./template/index.html', 'utf-8', function (err, data) {
if(!err){
res.write(data, 'utf-8');
}
res.end();
})
}
if(url_obj.pathname === '/login.html'){
//这里返回默认的index.html文件内容
fs.readFile(path, 'utf-8', function (err, data) {
if(!err){
res.write(data, 'utf-8');
}
res.end();
})
}
//思考： 如果有100个网页怎么办呢？
})
app.listen(3000)
从上面的代码中我们可以发现，当如果随着网页增多，文件类型增多(例如：css文件、图片文件)，当请求变多而且请求的文件类型比较复杂的时候，我们每个文件名写一个if判断就显得不智能了，这个时候，我们需要让程序更加灵活，要让程序更加灵活，先要明白我们返回数据到浏览器的几个步骤：
1 服务器要解析前端发过来的请求地址
2 根据这个请求地址去确定服务器端文件的路径
3 根据文件路径去读取文件内容，返回给浏览器
在这几个步骤中，我们只需要把第2步改灵活就可以了，也就是要达到这样的要求：不管你请求的是什么地址，我都能去确定文件的路径(查找到文件)，如果找不到文件，就可以给你返回一个找不到的页面
核心点分析完成后，我们来实现这块代码
var http = require('http');
var url = require('url');
var app = http.createServer(function (req, res) {
// 解析url
var url_obj = url.parse(req.url);
// 拼接请求中的文件地址
var path = './template/'+url_obj.pathname
// 读取文件内容 返回
fs.readFile(path, 'binary', function (err, data) {
if(!err){
res.write(data, 'binary');
}
res.end();
})
})
app.listen(3000)
代码改进后我们发现一个问题，那就是如果请求的时候不写文件类型,例如："/", "/login",这个时候就没有办法找到对应的文件了，这个时候我们就需要手动去改一些我们自己定义的请求配置，例如：访问"/"的时候，我们默认返回index.html页面
var http = require('http');
var url = require('url');
var app = http.createServer(function (req, res) {
// 解析url
var url_obj = url.parse(req.url);
// 拼接请求中的文件地址
var path = './template/'+url_obj.pathname
// “／” 返回index.html页面
if(url_obj.pathname === "/"){
// 读取文件内容 返回
fs.readFile('./template/index.html', 'binary', function (err, data) {
if(!err){
res.write(data, 'binary');
}
res.end();
})
}
// 读取文件内容 返回
fs.readFile(path, 'binary', function (err, data) {
if(!err){
res.write(data, 'binary');
}
res.end();
})
})
app.listen(3000)
这个时候我们发现 读取文件内容返回 这段代码重复写了，于是我们就可以把它封装成函数，只需要每次调用这个函数就可以了，因此，我们的代码还可以优化
var http = require('http');
var url = require('url');
var app = http.createServer(function (req, res) {
// 解析url
var url_obj = url.parse(req.url);
// 拼接请求中的文件地址
var path = './template'+url_obj.pathname
// “／” 返回index.html页面
if(url_obj.pathname === "/"){
// 读取文件内容 返回
render("./template/index.html", res);
}
//请求哪个文件就返回哪个文件内容
render(path, res)
})
app.listen(3000)
//输入文件路径，返回给前端
function render(path,res){
fs.readFile(path, 'binary', function (err, data) {
if(!err){
res.write(data, "binary");
}
res.end();
})
}
2.3.加载已经写好的静态模版文件
模版文件下载地址：点击下载ajax+node案例静态文件
螺钉课堂视频课程地址：http://edu.nodeing.com
node+ajax实战案例（2）的更多相关文章
- node+ajax实战案例（6)
8.删除客户 8.1.发送id到后台 删除用户信息比较简单,只需要把对应行的id发送到后台就可以了 oTable.onclick = function (ev) { var ev = ev || ev ...
- node+ajax实战案例（5)
6.添加客户 6.1.点击添加按钮,弹出表单框 // 添加用户 显示对话框 var addBtn = document.getElementById('add-btn'); var addUser = ...
- node+ajax实战案例（4)
4.用户登录实现 4.1.用户登录实现思路 1 用户输入登录信息,点击登录的时候把用户登录的这些信息收集起来,然后组装数据通过ajax方式发送到后台 2 后台接到用户输入的登录信息,把这些信息拿去和数 ...
- node+ajax实战案例（3)
3.用户注册实现 3.1.注册用户功能的实现逻辑 1 用户在表单上输入注册信息 2 点击注册后,收集用户在表单上输入的注册信息并且发送给后台 3 后台接收用户发送过来的注册信息 4 后台需要处理数据并 ...
- node+ajax实战案例（1）
1.mysql入门 1.1.数据库相关概念 1.1.1.什么是数据? 描述事物的符号记录称为数据,描述事物的符号可以是数字.文字.声音.图片.视频等,有多种表现形式,都可以经过数字化后存入计算机 1. ...
- 《Node.js实战（双色）》作者之一——吴中骅访谈录
- 如何从40亿整数中找到不存在的一个 webservice Asp.Net Core 轻松学-10分钟使用EFCore连接MSSQL数据库 WPF实战案例-打印 RabbitMQ与.net core(五) topic类型 与 headers类型 的Exchange
如何从40亿整数中找到不存在的一个 前言 给定一个最多包含40亿个随机排列的32位的顺序整数的顺序文件,找出一个不在文件中的32位整数.(在文件中至少确实一个这样的数-为什么?).在具有足够内存的情况 ...
- Flume实战案例运维篇
Flume实战案例运维篇 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Flume概述 1>.什么是Flume Flume是一个分布式.可靠.高可用的海量日志聚合系统,支 ...
- 使用Zabbix监控Nginx服务实战案例
使用Zabbix监控Nginx服务实战案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.编译安装nginx步骤详解并开启状态页 博主推荐阅读: https://www.cn ...
随机推荐
- jchdl - RTL实例 - And2（结构体的使用）
https://mp.weixin.qq.com/s/qTgeBF9N0mx5UK3xWDb3jg jchdl对Verilog做了增强,增加了用户自定义结构体类型.使用自定义结构体,可以对输入和输 ...
- （Java实现） 洛谷 P1042 乒乓球
题目背景 国际乒联现在主席沙拉拉自从上任以来就立志于推行一系列改革,以推动乒乓球运动在全球的普及.其中1111分制改革引起了很大的争议,有一部分球员因为无法适应新规则只能选择退役.华华就是其中一位,他 ...
- （Java实现） 蓝桥杯 国赛 重复模式
标题:重复模式 作为 drd 的好朋友,技术男 atm 在 drd 生日时送给他一个超长字符串 S .atm 要 drd 在其中找出一个最长的字符串 T ,使得 T 在 S 中至少出现了两次,而他想说 ...
- Java实现 LeetCode 676 实现一个魔法字典（暴力）
676. 实现一个魔法字典 实现一个带有buildDict, 以及 search方法的魔法字典. 对于buildDict方法,你将被给定一串不重复的单词来构建一个字典. 对于search方法,你将被给 ...
- Java实现 LeetCode 493 翻转对
493. 翻转对 给定一个数组 nums ,如果 i < j 且 nums[i] > 2*nums[j] 我们就将 (i, j) 称作一个重要翻转对. 你需要返回给定数组中的重要翻转对的数 ...
- java 实现 蓝桥杯 算法提高 排列数
问题描述 0.1.2三个数字的全排列有六种,按照字母序排列如下: 012.021.102.120.201.210 输入一个数n 求0~9十个数的全排列中的第n个(第1个为0123456789). 输入 ...
- java实现第五届蓝桥杯斐波那契
斐波那契 标题:斐波那契 斐波那契数列大家都非常熟悉.它的定义是: f(x) = 1 .... (x=1,2) f(x) = f(x-1) + f(x-2) .... (x>2) 对于给定的整数 ...
- 倍增法求LCA代码加详细注释
#include <iostream> #include <vector> #include <algorithm> #define MAXN 100 //2^MA ...
- EIGRP-12-弥散更新算法-DUAL的FSM（*没写完）
FD (可行距离).后继和可行后继.本地计算和弥散计算(随着查询包的发出而扩散,随着响应包的接收而收敛)一到目前为止介绍的这些机制能够使路由器有效地计算出去往某目地的新路径,只要在整个弥散计算中不再出 ...
- python抓取网页引用的模块和类
在Python3.x中,我们可以使用urlib这个组件抓取网页,urllib是一个URL处理包,这个包中集合了一些处理URL的模块,如下:1.urllib.request模块用来打开和读取URLs:2 ...