搭建背景

客户定制了静态页，我需要将写好的本地文件放置到客户的 Windows Server 2016 的服务器操作系统上，进而实现局域网的访问。

NodeJs Express 框架

Express 是一个简洁而灵活的 node.js Web 应用框架，提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。使用 Express 可以快速地搭建一个完整功能的网站。

搭建步骤

安装 NodeJs

官网下载 NodeJs, 安装即可。

安装 Express

安装 Express 并将其保存到依赖列表中：(这里如果是在桌面新建了一个文件夹，然后在文件夹里面 cmd，输入如下命令后，文件夹内不会出现 node_modules 目录，而是在 “C 盘–> 用户–> 现在登录的用户” 的目录下)

npm install express --save

以上命令会将 Express 框架安装在当前目录的 node_modules 目录中， node_modules 目录下会自动创建 express 目录。安装完后，我们可以查看下 express 使用的版本号：

npm list express

创建 express 服务器

在根目录下 (与 node_modules 同级目录) 新建一个 js 文件，例如：server.js。

注：本地起服务走的都是 HTTP 协议，默认端口是 80，在指定监听端口时，如果是设置的是 80，则可以直接输入本地地址 \IPV4 地址进行访问，如果不是 80 端口，还需加上端口号才能进行访问。

js
1
2
3
4
5
6
7
8
9
10
11
12
13
//server.js文件
const express = require('express');
const app = express();
//指定根目录显示的内容
app.get('/', function(req, res){
 res.send('Hello World');
});
//指定监听端口(这里设置的80)
const server = app.listen(80, function() {
  let host = server.address().address
  let port = server.address().port
  console.log("应用实例，访问地址为 http://%s:%s", host, port)
});

创建 bat

  • 其实可以直接在目录下，执行指令 node server.js 。创建 bat 的好处就是不用每次都输入同样的指令了，用的时候直接双击 bat 即可。
  • 在 bat 里面输入 node server.js
  • 双击 bat

注：如果是用记事本创建，然后直接将 txt 改为 js，可能会出现乱码的情况，这时候进入 bat 文件，将另存为的格式设置为 utf-8。

静态文件

Express 提供了内置的中间件 express.static 来设置静态文件如：图片， CSS, JavaScript 等。

可以使用 express.static 中间件来设置静态文件路径。例如，如果将图片， CSS, JavaScript 文件放在 public 目录下，可以这么写：(在根目录下创建 public 文件夹，里面放要展示的静态文件)

js
1
2
3
4
5
6
7
8
9
10
11
12
// 获取public绝对路径  (设在在public下查找资源 ; 以public为根目录来查找资源 )
这里所采用的的目录结构为：
- demo
     -public 
           -html
               -staticImg.html
           -img
               -01.jpg
     -server.js

let pubilcPath = path.resolve(__dirname,"public");
app.use(express.static(pubilcPath));

将上面代码添加处理静态文件的功能：

js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const express = require("express");
const path = require("path");

const PORT =3000;

const app =express();

// 在一个项目中,会有一个静态文件夹,假如为public

// 获取public绝对路径  (设在在public下查找资源 ; 以public为根目录来查找资源 )
let pubilcPath = path.resolve(__dirname,"public");
app.use(express.static(pubilcPath));

// public文件夹下有img文件夹,下有01.jpg图片
// public文件夹下有html文件夹,下有staticImg.html文件  

// 则在浏览器输入 http://127.0.0.1:3000/img/01.jpg 即可查看图片
// 则在浏览器输入 http://127.0.0.1:3000/html/staticImg.html 即可查看html文件

app.listen(PORT,()=>{
    console.log(`server is running port:${PORT}`)
})
html
1
2
3
4
5
6
//staticImg.html展示01.jpg图片
<body>
   <h3>小青蛙 express.static()</h3>
    <!-- 这个路径地址,看请求头里面 view source 的 get地址 -->
    <img src="/img/01.jpg" alt="static">
</body>

双击 bat 文件

在浏览器中访问 http://127.0.0.1:3000/html/staticImg.html

添加访问前缀

想通过 http://127.0.0.1:3000/static/img/01.jpg 来查看图片，又不想加目录

js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const express = require("express");
const path = require("path");

const PORT =3000;

const app =express();

// 在一个项目中,会有一个静态文件夹,假如为public

// 获取public绝对路径  (设在在public下查找资源 ; 以public为根目录来查找资源 )
let pubilcPath = path.resolve(__dirname,"public");

// 想通过 http://127.0.0.1:3000/static/img/01.jpg来查看图片,又不想加目录;

app.use("/static",express.static(pubilcPath));

// public文件夹下有img文件夹,下有01.jpg图片
// public文件夹下有html文件夹,下有staticImg.html文件  


// 则在浏览器输入 http://127.0.0.1:3000/static/img/01.jpg 即可查看图片
// 则在浏览器输入 http://127.0.0.1:3000/static/html/staticImg.html 即可查看html文件

app.listen(PORT,()=>{
    console.log(`server is running port:${PORT}`)
})
html
1
2
3
4
5
6
//staticImg.html展示01.jpg图片
<body>
   <h3>小青蛙 express.static()</h3>
    <!-- 这个路径地址,看请求头里面 view source 的 get地址 -->
    <img src="/static/img/01.jpg" alt="static">
</body>

重定向

如上需要访问静态文件不仅需要输入 IP 还需要输入 xxx.html，那有没有办法仅仅输入 IP 就可以了呢。

知识点：

  • Express 是一个基于 Node.js 实现的 Web 框架，其响应 HTTP 请求的 response 对象中有两个用于 URL 跳转方法 res.location () 和 res.redirect ()，使用它们可以实现 URL 的 301 或 302 重定向。
  • 当状态码为 301 或 302 时（301－永久重定向、302－临时重定向），表示资源位置发生了改变，需要进行重定向。
  • Location 头信息表示了资源的改变的位置，即：要跳重定向的 URL。

  1. res.redirect():

    res.redirect([status,] path)

    参数:

    • status：{Number}，表示要设置的 HTTP 状态码
    • path：{String}，要设置到 Location 头中的 URL

    重定义到 path 所指定的 URL，重定向时可以同时指定 HTTP 状态码，不指定状态码默认为 302

    使用 redirect() 重定向时，可以是几下几种设置方式：

    js
    1
    2
    3
    4
    5
    6
    res.redirect('/foo/bar');  //浏览器打开http://127.0.0.1，页面跳转到http://127.0.0.1/foo/bar。
    res.redirect('http://itbilu.com');//浏览器打开http://127.0.0.1，页面跳转到http://itbilu.com。
    res.redirect(301, 'http://itbilu.com');//浏览器打开http://127.0.0.1，页面跳转到http://itbilu.com。
    res.redirect('http://itbilu.com', 301);//浏览器打开http://127.0.0.1，页面跳转到http://itbilu.com。
    res.redirect('../login'); // /blog/post/1 -> /blog/login
    res.redirect('back');

    示例代码：

    js
    1
    2
    3
    4
    5
    6
    7
    const http = require('http');
    const server = http.createServer(function (req, res) {
    res.redirect('http://itbilu.com/');　
    //res.redirect(301,'http://itbilu.com/');
    res.end();
    });
    server.listen(3000);

    浏览器打开 http://127.0.0.1:3000， 页面跳转到 http://itbilu.com。

  2. res.location():

res.location(path)

设置响应的 HTTP Location头。path 可以是以下几种设置形式：

js
1
2
3
4
res.location('/foo/bar');//浏览器打开http://127.0.0.1，页面跳转到http://127.0.0.1/foo/bar。
res.location('../login');
res.location('http://itbilu.com');//浏览器打开http://127.0.0.1，页面跳转到http://itbilu.com。
res.location('back');

示例代码：

js
1
2
3
4
5
6
7
const http = require('http');
const server = http.createServer(function (req, res) {
    res.writeHead(301, {'Location': 'http://itbilu.com/'});
    console.log(res._header);
    res.end();
});
server.listen(3000);

浏览器打开 http://127.0.0.1:3000，页面跳转到 http://itbilu.com。

最终代码

js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
const express = require("express");
const path = require("path");
const PORT =3000;
const app =express();

// 在一个项目中,会有一个静态文件夹,假如为public

// 获取public绝对路径  (设在在public下查找资源 ; 以public为根目录来查找资源 )
let pubilcPath = path.resolve(__dirname,"public");
app.use(express.static(pubilcPath));

// public文件夹下有img文件夹,下有01.jpg图片
// public文件夹下有html文件夹,下有staticImg.html文件  

// 则在浏览器输入 http://127.0.0.1:3000/img/01.jpg 即可查看图片
// 则在浏览器输入 http://127.0.0.1:3000/html/staticImg.html 即可查看html文件

// 但是我只想输入 127.0.0.1:3000 就像看图片, 需要用到 重定向;
app.get("/",(req,res)=>{
    // 我在浏览器输入了127.0.0.1:3000,其实端口后面有个/,路由匹配到了/,就进行了重定向的操作,即用/img/01.jpg路由替换了/路由==>http://127.0.0.1:3000/img/01.jpg
    res.redirect("/img/01.jpg");
})

// 但是我只想输入 127.0.0.1:3000/fsl 就像看图片, 需要用到 重定向;  即访问/fsl接口的时候
app.get("/fsl",(req,res)=>{
    // 我在浏览器输入了127.0.0.1:3000/fsl,路由匹配到了/fsl,就进行了重定向的操作,即用/img/01.jpg路由替换了/fsl路由==>http://127.0.0.1:3000/img/01.jpg
    res.redirect("/img/01.jpg");
})

app.listen(PORT,()=>{
    console.log(`server is running port:${PORT}`)
})

ps：如果将端口设置为 80，则只需输入 IP 即可，因为 HTTP 默认端口为 80；

NodeJs Koa 框架

koa 是 express 同一个团队开发的一个新的 Web 框架；相对于 express 具有更强的异步处理能力；Koa 的核心代码只有 1600 + 行，是一个更加轻量级的框架，我们可以根据需要安装和使用中间件；

  1. 初始化 npm init -y；
  2. 安装 Koanpm i koa；
  3. 安装静态服务器 npm install koa-static；
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//koa并没有内置部署相关的功能，所以我们需要使用第三方库：npm install koa-static
// 导出的是个类,所以K大写
const Koa = require("koa");
// 引入内置模块path
const path =require("path");
// koa并没有内置部署相关的功能，所以我们需要使用第三方库
const static = require("koa-static");

//  因为是个类,所以需要实例化
const app = new Koa();
const PORT = 3000;

const filePath = path.resolve(__dirname,"public");
app.use(static(filePath));

// public文件夹下有img文件夹,下有01.jpg图片
// public文件夹下有html文件夹,下有staticImg.html文件  

// 则在浏览器输入 http://127.0.0.1:3000/img/01.jpg 即可查看图片
// 则在浏览器输入 http://127.0.0.1:3000/html/staticImg.html 即可查看html文件

app.listen(PORT,()=>{
    console.log(`server is running port is ${PORT}`)
})
html
1
2
3
4
5
<body>
   <h3>小青蛙 express.static()</h3>
    <!-- 这个路径地址,看请求头里面 view source 的 get地址 -->
    <img src="/img/01.jpg" alt="static">
</body>

添加访问前缀和重定向同 express；

参考文献