搭建背景

客户定制了静态页，我需要将写好的本地文件放置到客户的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端口，还需加上端口号才能进行访问。

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文件夹，里面放要展示的静态文件)

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));

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

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}`)
})
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 来查看图片,又不想加目录

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}`)
})
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()重定向时，可以是几下几种设置方式：

    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');

    示例代码：

    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可以是以下几种设置形式：

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');

示例代码：

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。

最终代码

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；
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}`)
})
1
2
3
4
5
<body>
   <h3>小青蛙 express.static()</h3>
    <!-- 这个路径地址,看请求头里面 view source 的 get地址 -->
    <img src="/img/01.jpg" alt="static">
</body>

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

参考文献