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）的更多相关文章

  1. node+ajax实战案例（6)

    8.删除客户 8.1.发送id到后台 删除用户信息比较简单,只需要把对应行的id发送到后台就可以了 oTable.onclick = function (ev) { var ev = ev || ev ...

  2. node+ajax实战案例（5)

    6.添加客户 6.1.点击添加按钮,弹出表单框 // 添加用户 显示对话框 var addBtn = document.getElementById('add-btn'); var addUser = ...

  3. node+ajax实战案例（4)

    4.用户登录实现 4.1.用户登录实现思路 1 用户输入登录信息,点击登录的时候把用户登录的这些信息收集起来,然后组装数据通过ajax方式发送到后台 2 后台接到用户输入的登录信息,把这些信息拿去和数 ...

  4. node+ajax实战案例（3)

    3.用户注册实现 3.1.注册用户功能的实现逻辑 1 用户在表单上输入注册信息 2 点击注册后,收集用户在表单上输入的注册信息并且发送给后台 3 后台接收用户发送过来的注册信息 4 后台需要处理数据并 ...

  5. node+ajax实战案例（1）

    1.mysql入门 1.1.数据库相关概念 1.1.1.什么是数据? 描述事物的符号记录称为数据,描述事物的符号可以是数字.文字.声音.图片.视频等,有多种表现形式,都可以经过数字化后存入计算机 1. ...

  6. 《Node.js实战（双色）》作者之一——吴中骅访谈录

  7. 如何从40亿整数中找到不存在的一个 webservice Asp.Net Core 轻松学-10分钟使用EFCore连接MSSQL数据库 WPF实战案例-打印 RabbitMQ与.net core(五) topic类型 与 headers类型 的Exchange

    如何从40亿整数中找到不存在的一个 前言 给定一个最多包含40亿个随机排列的32位的顺序整数的顺序文件,找出一个不在文件中的32位整数.(在文件中至少确实一个这样的数-为什么?).在具有足够内存的情况 ...

  8. Flume实战案例运维篇

    Flume实战案例运维篇 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Flume概述 1>.什么是Flume Flume是一个分布式.可靠.高可用的海量日志聚合系统,支 ...

  9. 使用Zabbix监控Nginx服务实战案例

    使用Zabbix监控Nginx服务实战案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.  一.编译安装nginx步骤详解并开启状态页 博主推荐阅读: https://www.cn ...

随机推荐

  1. Chisel3 - 模块

    https://mp.weixin.qq.com/s/2vjM-gcauvHnn6KJzlOm4g   Chisel的模块和Verilog的模块很相似,都用来定义模块结构(hierarchical s ...

  2. （Java实现） 洛谷 P1553 数字反转（升级版）

    题目描述 给定一个数,请将该数各个位上数字反转得到一个新数. 这次与NOIp2011普及组第一题不同的是:这个数可以是小数,分数,百分数,整数.整数反转是将所有数位对调:小数反转是把整数部分的数反转, ...

  3. Java实现 蓝桥杯 算法提高 上帝造题五分钟

    算法提高 上帝造题五分钟 时间限制:1.0s 内存限制:256.0MB 问题描述 第一分钟,上帝说:要有题.于是就有了L,Y,M,C 第二分钟,LYC说:要有向量.于是就有了长度为n写满随机整数的向量 ...

  4. Java实现 LeetCode 455 分发饼干

    455. 分发饼干 假设你是一位很棒的家长,想要给你的孩子们一些小饼干.但是,每个孩子最多只能给一块饼干.对每个孩子 i ,都有一个胃口值 gi ,这是能让孩子们满足胃口的饼干的最小尺寸:并且每块饼干 ...

  5. 第八届蓝桥杯JavaC组国(决)赛真题

    解题代码部分来自网友,如果有不对的地方,欢迎各位大佬评论 题目1.数位和 题目描述 数学家高斯很小的时候就天分过人.一次老师指定的算数题目是:1+2+-+100. 高斯立即做出答案:5050! 这次你 ...

  6. java实现第七届蓝桥杯抽签

    抽签 抽签 X星球要派出一个5人组成的观察团前往W星. 其中: A国最多可以派出4人. B国最多可以派出2人. C国最多可以派出2人. .... 那么最终派往W星的观察团会有多少种国别的不同组合呢? ...

  7. java实现第六届蓝桥杯生命之树

    生命之树 生命之树 在X森林里,上帝创建了生命之树. 他给每棵树的每个节点(叶子也称为一个节点)上,都标了一个整数,代表这个点的和谐值. 上帝要在这棵树内选出一个非空节点集S,使得对于S中的任意两个点 ...

  8. 用js实现简单的抛物线运动

    前言 老早就看过一些购物车的抛物线效果,也想自己凑热闹动手来实现一遍. 然后(lll￢ω￢) 书到用时方恨少,发现高中学到物理啊.数学啊,都忘光了,抛物线公式都忘了0 0. 顺手百度一波,从百度可知: ...

  9. 启动appium server时打印日志时间

    在调试脚本的时候想看查找元素和执行命令花了多少时间,我们可以在启动appium server的时候加上启动参数,实现我们的需求. 1)输入:appium h,可以查看appium提供的启动参数有哪些. ...

  10. ffmpeg m3u8生成 剪辑及格式转换

    使用 ffmpeg 工具, 生成 m3u8 文件 ffmpeg -re -i 03.ts -c copy -f hls -hls_base_url /Users/admin/Downloads/dow ...