【Node.js】静态页面和简单的路由
来源:     阅读:391
云上智慧
发布于 2020-04-24 14:37
查看主页
微信公众号:Rabbit_svip

目录

  1. 返回一个静态页面

  2. 根据路由返回对应的页面


1、返回一个静态页面

文件目录如下所示

微信公众号:Rabbit_svip

app.js代码

const fs = require('fs');const http = require('http');// 创立一个f服务器let server = http.createServer((req, res) => {    // fs.readFile(文件路径,字符编码,回调函数)    fs.readFile(__dirname + "/index.html", "utf-8", (err, data) => {        if(err) throw err;        // 响应头 response.writeHead(状态吗, 内容的格式[这里返回的文件是html])        res.writeHead(200, {"content-type": "text/html"});        // 响应内容        res.write(data);        // 响应结束        res.end();    })})// 设置端口号server.listen(8080);console.log('服务器已启动~~');

index.html代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>index</title></head><body>    <h1>Rabbit!</h1></body></html>

最后,在浏览器访问 localhost:8080

微信公众号:Rabbit_svip

2、根据路由返回对应的页面

上面的例子中,不论访问 localhost:8080 还是 localhost:8080/xxxx ,服务器都是返回 index.html 的内容。

假如需要根据url指定返回不同的页面,这就需要引入路由这个概念了。

文件目录如下

微信公众号:Rabbit_svip

这里有2个html文件和一个js文件。

在app.js中,需要根据 url 来判断返回哪个页面

const fs = require('fs');const http = require('http');let server = http.createServer((req, res) => {    // 过滤 /favicon.ico 的请求    if(req.url !== '/favicon.ico') {                // '/' 和 'index' 都返回 index.html 页面,其余都请求就返回对应的页面路径        let getUrl = req.url === '/' ? '/index.html' : req.url;        // fs.readFile(文件路径,字符编码,回调函数)        fs.readFile(__dirname + getUrl + '.html', "utf-8", (err, data) => {            if(err) throw err;            // 响应头 response.writeHead(状态吗, 内容的格式)            res.writeHead(200, {"content-type": "text/html"});            // 响应内容            res.write(data);            // 响应结束            res.end();        })    }})server.listen(8080);console.log('服务器已启动~~');

index.html代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>index</title></head><body>    <h1>Rabbit!</h1></body></html>

about.html代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>about</title></head><body>    <p>about~~~~</p></body></html>

当浏览器访问 localhost:8080 或者者 localhost:8080/index ,就返回 index.html页面。

微信公众号:Rabbit_svip

当访问 localhost:8080/about 时,就返回about.html页面

微信公众号:Rabbit_svip

以上是简单的用法。

免责声明:本文为用户发表,不代表网站立场,仅供参考,不构成引导等用途。 系统环境 服务器应用
相关推荐
前台面试每日 3+1 —— 第584天
Java 11 正式发布,这 8 个逆天新特性教你写出更牛逼的代码
前台浏览器对象模型BOM常用对象用法详情
剑指offer-数组中的逆序对-JavaScript
女友电脑私存撕葱帅照,我用python偷梁换柱...
首页
搜索
订单
购物车
我的