web程序设计（12）——Nodejs路由

最新推荐文章于 2024-07-19 06:19:14 发布

My_summers

最新推荐文章于 2024-07-19 06:19:14 发布

阅读量405

点赞数

分类专栏： Web 文章标签： java js nodejs css

本文链接：https://blog.csdn.net/weixin_44164249/article/details/103935756

版权

Web 专栏收录该内容

12 篇文章 4 订阅

订阅专栏

实验要求

利用Nodejs实现至少三个页面的跳转,前后端的数据交互

实验目的

熟悉掌握Node.js路由功能
用Nodejs实现前后端的分离

实验内容

调入应用中需要用到的模块，其中"use strict" 指令在 JavaScript 1.8.5 中新增。它不是一条语句，但是是一个字面量表达式，在 JavaScript 旧版本中会被忽略。“use strict” 的目的是指定代码在严格条件下执行。严格模式下用户不能使用未声明的变量。

'use strict'

var http = require("http");
var url = require("url");
var fs = require("fs");

创建一个简单的服务器，设置端口号为5000

var serv = http.createServer();
serv.listen(5000, "localhost");

做一个简单的测试，通过Node.js本身的事件驱动性(通过事件监听on()），可以处理请求后返回的数据。监听“listening”事件，若服务器响应成功则在命令行打印服务器的地址

 serv.on("listening", () => {
    console.log(serv.address());
});

下面开始正式的界面编程。
首先监听‘request’事件， req包括客户端的所有信息，res存入服务器的响应信息。定义需要用到的变量和模块，使用switch语句来设置路由。用来判断的值是客户端传入的url信息，根据文件路径信息跳转页面。

serv.on("request", (req, res) => {
        console.log("a new request arrive");

        var urlstr = req.url;
        var parseStr = url.parse(urlstr);
        var filePath = __dirname + "/";
        var querstring = require("querystring");

        switch (parseStr.pathname) {
             case "/":
                break;
            case "/login":
                break;
            case "/check":
                break;
            case "/user":
                break;
            case "/help":
                break;
            case "/vedio":
                break;
            default:
                break;
        }
    })

方式一：
直接在js文件中写入html文本，HTTP 状态码为 200 时也就是服务器响应正常时，将Content Type设为text/html，用response.write（）写入响应的文本内容，也就是相应的html文本，最后发送响应数据res.end()。

  res.writeHead(200, { "content-type": "text/html;charset=utf8" });
                res.write("<h1>用户中心</h1>");
                res.end("<p>欢迎光临用户中心</p>");
                break;

第一种方式前后端的代码没有实现分离的目的，难以用于制作大型网页设计项目。
方式二：
首先定义一个用来读数据的函数rdata,在函数内获取文件数据data,若读取出错则显示404出错页面。

function rdata(fileName, res) {
    fs.readFile(fileName, (err, data) => {
        console.log(fileName);
        if (err) {
            res.writeHead(200, { "Content-type": "text/html charset=utf8" });
            res.write("<h1>404</h1>");
            res.end("<p>找不到网页！</p>");
        } else {
            res.writeHead(200, { "content-type": "text/html charset=utf8" })
            res.end(data)
        }
    })
}

然后在case不同的情况下，输入不同的文件路由，使其跳转到不同的页面。这里的index是客户端可以自定义的，filename是一个html文件的绝对路径【预防出错】，这里给出一个简单的效果图

 var fileName = filePath + "index.html";
                console.log(filePath);
                rdata(fileName, res);
                break;

index.html：

<body>
    <p>欢迎来到我的首页</p>
</body>

效果图：
在这里插入图片描述

用同样的方法只要输入的路由信息不同，就可以进入不同的网页，例如：
‘/vedio’页面：
在这里插入图片描述
‘/user‘页面：

‘/login’页面：

‘/help’页面：

可以在nodejs中进行表单信息验证，需要用到expression模块，将表单中的数据传到后端，后面可以进一步改进

case "/check":
                var parstr1 = url.parse(req.url);
                var parstr2 = querstring.parse(parstr1.query);
                if ((parstr2.username != "me") || (parstr2.pass != "123")) {
                    var fileName = filePath + "load.html";
                    rdata(fileName, res);
                } else {
                    var fileName = filePath + "index.html";
                    rdata(fileName, res);
                }
                break;

实验效果

如上

实验完整代码

'use strict'
var http = require("http");
var serv = http.createServer();
var url = require("url");
var fs = require("fs");


serv.listen(5000, "localhost");

function rdata(fileName, res) {
    fs.readFile(fileName, (err, data) => {
        console.log(fileName);
        if (err) {
            res.writeHead(200, { "Content-type": "text/html charset=utf8" });
            res.write("<h1>404</h1>");
            res.end("<p>Hello World</p>");
        } else {
            res.writeHead(200, { "content-type": "text/html charset=utf8" })
            res.end(data)
        }
    })
}

serv.on("listening", () => {
    console.log(serv.address());
});

serv.on("request", (req, res) => {
        console.log("a new request arrive");

        var urlstr = req.url;
        var parseStr = url.parse(urlstr);
        var filePath = __dirname + "/";
        var querstring = require("querystring");

        switch (parseStr.pathname) {
            case "/login":
                var fileName = filePath + "load.html";
                rdata(fileName, res);
                break;
            case "/check":
                var parstr1 = url.parse(req.url);
                var parstr2 = querstring.parse(parstr1.query);
                if ((parstr2.username != "me") || (parstr2.pass != "123")) {
                    var fileName = filePath + "load.html";
                    rdata(fileName, res);
                } else {
                    var fileName = filePath + "index.html";
                    rdata(fileName, res);
                }
                break;
            case "/":
                var fileName = filePath + "index.html";
                console.log(filePath);
                rdata(fileName, res);
                break;
            case "/user":
                res.writeHead(200, { "content-type": "text/html;charset=utf8" });
                res.write("<h1>用户中心</h1>");
                res.end("<p>欢迎光临用户中心</p>");
                break;
                var fileName = filePath + "novel.html";
                console.log(filePath);
                rdata(fileName, res);
                break;
            case "/help":
                var fileName = filePath + "comment.html";
                console.log(filePath);
                rdata(fileName, res);
                break;
            case "/vedio":
                var fileName = filePath + "vedio.html";
                console.log(filePath);
                rdata(fileName, res);
                break;
            default:
                res.writeHead(200, { "content-type": "text/html;charset=utf8" });
                res.write("<h1>404 Error</h1>");
                res.end("<p>您的网站被狗狗啃掉了！</p>");
                break;
        }
    })

My_summers

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web程序设计（12）——Nodejs路由

实验要求利用Nodejs实现至少三个页面的跳转,前后端的数据交互实验目的熟悉掌握Node.js路由功能用Nodejs实现前后端的分离实验内容调入应用中需要用到的模块，其中"use strict" 指令在 JavaScript 1.8.5 中新增。它不是一条语句，但是是一个字面量表达式，在 JavaScript 旧版本中会被忽略。“use strict” 的目的是指定代码在严格条件...
复制链接

扫一扫

专栏目录