首页 > 其他分享 >05_搭建静态资源服务器

05_搭建静态资源服务器

时间：2023-10-31 14:44:55浏览次数：39  
标签：name 05 price 3004 json fruits 服务器 id 搭建

一、Node环境搭建

Node.js 简介

​ Node.js 是一个开源与跨平台的 JavaScript 运行时环境。 它是一个可用于几乎任何项目的流行工具！

​ Node.js 在浏览器外运行 V8 JavaScript 引擎（Google Chrome 的内核）。 这使 Node.js 表现得非常出色。

​ Node.js 应用程序运行于单个进程中，无需为每个请求创建新的线程。 Node.js 在其标准库中提供了一组异步的 I/O 原生功能（用以防止 JavaScript 代码被阻塞），并且 Node.js 中的库通常是使用非阻塞的范式编写的。

​ 当 Node.js 执行 I/O 操作时（例如从网络读取、访问数据库或文件系统），Node.js 会在响应返回时恢复操作，而不是阻塞线程并浪费 CPU 循环等待。

​ 这使 Node.js 可以在一台服务器上处理数千个并发连接，而无需引入管理线程并发的负担（这可能是重大 bug 的来源）。

​ Node.js 具有独特的优势，因为为浏览器编写 JavaScript 的数百万前端开发者现在除了客户端代码之外还可以编写服务器端代码，而无需学习完全不同的语言。

​ 在 Node.js 中，可以毫无问题地使用新的 ECMAScript 标准，因为不必等待所有用户更新其浏览器，你可以通过更改 Node.js 版本来决定要使用的 ECMAScript 版本，并且还可以通过运行带有标志的 Node.js 来启用特定的实验中的特性。言。发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。

Chrome V8引擎介绍

​ 随着Web相关技术的发展，JavaScript所要承担的工作也越来越多，早就超越了“表单验证”的范畴，这就更需要快速的解析和执行JavaScript脚本。

​ V8引擎就是为解决这一问题而生，在node中也是采用该引擎来解析JavaScript。V8是如何使得JavaScript性能有大幅提升的呢？

详细介绍:
	https://blog.csdn.net/heyeqingquan/article/details/78839699

Node.js环境搭建

Nodejs最新下载地址: http://nodejs.cn/download/

下载

根据自己电脑系统及位数选择，我这里选择windows64位.msi格式安装包

.msi和.zip格式区别：

1、.msi是Windows installer开发出来的程序安装文件，它可以让你安装，修改，卸载你所安装的程序。说白了.msi就是Windows installer的数据包，把所有和安装文件相关的内容封装在一个包里。

2、.zip是一个压缩包，解压之后即可，不需要安装

安装

​ 下载完成后，双击安装包，开始安装，一直点next即可，安装路径默认在C:\Program Files下，也可以自定义修改。

Node.js runtime 表示运行环境
npm package manager表示npm包管理器
online documentation shortcuts 在线文档快捷方式
Add to PATH添加到环境变量

验证

安装完成后，.msi格式的安装包已经将node启动程序添加到系统环境变量path中,查看系统变量验证。

win7验证：

win10验证：

​ 既然已经将node程序添加到全局系统变量，我们可以直接在CMD窗口中任意位置执行node，打开CMD窗口，执行命令node -v查看node版本

最新版的node在安装时同时也安装了npm,执行npm -v查看npm版本

npm简单介绍

​ npm全称为Node Package Manager，是一个基于Node.js的包管理器，也是整个Node.js社区最流行、支持的第三方模块最多的包管理器。

​ npm的初衷：JavaScript开发人员更容易分享和重用代码。

npm的使用场景：

  • 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
  • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
  • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

如果你安装的是旧版本的 npm，可以很容易得通过 npm 命令来升级，命令如下：

npm install npm -g

使用淘宝镜像的命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

npm run是npm run-script的简写，顾名思义就是执行脚本。执行的脚本配置在package.json中的scripts对象。

二、json-server

​ 一个在前端本地运行，可以存储json数据的server。

​ 通俗来说，就是模拟服务端接口数据，一般用在前后端分离后，前端人员可以不依赖API开发，而在本地搭建一个JSON服务，自己产生测试数据。

​ 顾名思义，json-server就是个存储json数据的server~

下载安装

使用npm全局安装json-server：

npm install -g json-server

可以通过查看版本号，来测试是否安装成功：

json-server -v

创建json数据——db.json

既然是造数据，就需要创建一个json数据。

在任意一个文件夹下（此处假设我创建了一个myserver文件夹），进入到该文件夹里面，执行代码：

json-server --watch db.json

原本空空如也的文件夹里，就会多出一个db.json文件。

同时，根据执行代码结果的提示，我们可以访问 http://localhost:3000 （启动json-server后，点击才有效）,看到如下页面：

可以分别点击/posts /comment /profile /db链接，看看页面跳转后，观察地址栏变化和页面内容，你看到了什么？

没错，就是各自的json数据。

db.json里面自带的数据：

{
  "posts": [
    {
      "id": 1,
      "title": "json-server",
      "author": "typicode"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "some comment",
      "postId": 1
    }
  ],
  "profile": {
    "name": "typicode"
  }
}

再比对myserver/db.json文件的数据，就可以发现： /db就是整个的db.json数据包，而/posts /comment /profile 分别是db.json里面的子对象。

所以说，json-server把db.json 根节点的每一个key，当作了一个router。我们可以根据这个规则来编写测试数据。

修改端口号

json-server 默认是 3000 端口，我们也可以自己指定端口，指令如下：

json-server --watch db.json --port 3004

嗯，如果你很懒，觉得启动服务的这段代码有点长，还可以考虑db.json同级文件夹（也就是myserver文件夹）新建一个package.json，把配置信息写在里头：

{
    "scripts": {
        "mock": "json-server db.json --port 3004"
    }
}

之后启动服务，只需要执行如下指令就可以了：

npm run mock

json-server 的相关启动参数

  • 语法：json-server [options] <source>
  • 选项列表：

三、操作数据

我们先自己倒腾下 db.json 数据，比如现在是个水果商城，放点 用户信息 和 水果价格 信息：

{
  "fruits": [
    {
      "id": 1,
      "name": "apple",
      "price": "33"
    },
    {
      "id": 2,
      "name": "orange",
      "price": "8.88"
    }
  ],
   "users": [
    {
      "name": {
        "username":"admin",
        "nickname":"dachui"
      },
      "pwd": "123456"
    }
  ]
}

要注意，数据格式符合JSON格式（尤其注意最后一个键值对后面不要有逗号）。如果数据格式有误，命令窗口会报错，可以根据错误提示进行修整。

接下来我们就可以GET, POST, PUT, PATCH or DELETE 方法来对数据进行操作。

获取数据

首先，我们先来看GET操作。

浏览器地址访问就可以看做GET操作，所以不用写任何代码，我们就可以先来测试下 url -GET 操作。

常规获取：

http://localhost:3004/fruits

可以得到所有水果数据（对象数组）：

[
  {
    "id": 1,
    "name": "apple",
    "price": "33"
  },
  {
    "id": 2,
    "name": "orange",
    "price": "8.88"
  }
]

过滤获取 Filter：

根据id获取数据

http://localhost:3004/fruits/1

可以得到指定id为1的水果（对象）：

{
  "id": 1,
  "name": "apple",
  "price": "33"
}

当然，指定id为1的获取指令还可以用如下指令，但要注意，此时返回的数据是一个数组。

http://localhost:3004/fruits?id=1

[
  {
    "id": 1,
    "name": "apple",
    "price": "33"
  }
]

以此类推，我们也可以通过水果名称，或者是价格来获取数据：

http://localhost:3004/fruits?name=orange

[
  {
    "id": 2,
    "name": "orange",
    "price": "8.88"
  }
]

也可以指定多个条件，用&符号连接：

http://localhost:3004/fruits?name=orange&price=8.88

[
  {
    "id": 2,
    "name": "orange",
    "price": "8.88"
  }
]

你甚至还可以使用对象取属性值 obj.key 的方式：

http://localhost:3004/users?name.nickname=dachui

[
  {
    "name": {
      "username": "admin",
      "nickname": "dachui"
    },
    "pwd": "123456"
  }
]

以上看着是不是特别眼熟，不就是HTTP中GET请求方式嘛~

嗯，更好玩的还在后面

分页 Paginate

为了能演示分页效果，我们在db.json文件里的fruits里面多添加了几种水果。

{
  "fruits": [
    {
      "id": 1,
      "name": "apple1",
      "price": "33"
    },
    {
      "id": 2,
      "name": "apple2",
      "price": "2"
    },
    {
      "id": 3,
      "name": "apple3",
      "price": "3"
    },
    {
      "id": 4,
      "name": "apple4",
      "price": "4"
    },
    {
      "id": 5,
      "name": "apple5",
      "price": "5"
    },
    {
      "id": 6,
      "name": "orange",
      "price": "8.88"
    }
  ],
   "users": [
    {
      "name": {
        "username":"admin",
        "nickname":"dachui"
      },
      "pwd": "123456"
    }
  ]
}

编辑过db.json（db.json数据有变动），都要关闭服务重新启动。（注意：不要用 CTRL + C 来停止服务，因为这种方式会导致 node.js 依旧霸占着3004端口，导致下一次启动失败。简单粗暴关闭窗口即可！ —— 个人window系统，其他系统可能没有这样的烦恼。）

分页采用 _page 来设置页码， _limit 来控制每页显示条数。如果没有指定 _limit ，默认每页显示10条。

http://localhost:3004/fruits?_page=2&_limit=2

[
  {
    "id": 3,
    "name": "apple3",
    "price": "3"
  },
  {
    "id": 4,
    "name": "apple4",
    "price": "4"
  }
]

排序 Sort

排序采用 _sort 来指定要排序的字段， _order 来指定排序是正排序还是逆排序（asc | desc ，默认是asc）。

http://localhost:3004/fruits?_sort=id&_order=desc

[
  {
    "id": 6,
    "name": "orange",
    "price": "8.88"
  },
  {
    "id": 5,
    "name": "apple5",
    "price": "5"
  },
  {
    "id": 4,
    "name": "apple4",
    "price": "4"
  },
  {
    "id": 3,
    "name": "apple3",
    "price": "3"
  },
  {
    "id": 2,
    "name": "apple2",
    "price": "2"
  },
  {
    "id": 1,
    "name": "apple1",
    "price": "33"
  }
]

也可以指定多个字段排序，一般是按照id进行排序后，相同id的再跟进name排序：

http://localhost:3004/fruits?_sort=id,name&_order=desc,asc

取局部数据 Slice

slice的方式，和 Array.slice() 方法类似。采用 _start 来指定开始位置， _end 来指定结束位置、或者是用_limit来指定从开始位置起往后取几个数据。

http://localhost:3004/fruits?_start=2&_end=4

[
  {
    "id": 3,
    "name": "apple3",
    "price": "3"
  },
  {
    "id": 4,
    "name": "apple4",
    "price": "4"
  }
]

http://localhost:3004/fruits?_start=2&_limit=4

[
  {
    "id": 3,
    "name": "apple3",
    "price": "3"
  },
  {
    "id": 4,
    "name": "apple4",
    "price": "4"
  },
  {
    "id": 5,
    "name": "apple5",
    "price": "5"
  },
  {
    "id": 6,
    "name": "orange",
    "price": "8.88"
  }
]

取符合某个范围 Operators

（1）采用 _gte _lte 来设置一个取值范围（range）:

http://localhost:3004/fruits?id_gte=4&id_lte=6

[
  {
    "id": 4,
    "name": "apple4",
    "price": "4"
  },
  {
    "id": 5,
    "name": "apple5",
    "price": "5"
  },
  {
    "id": 6,
    "name": "orange",
    "price": "8.88"
  }
]

（2）采用_ne来设置不包含某个值：

http://localhost:3004/fruits?id_ne=1

[
  {
    "id": 2,
    "name": "apple2",
    "price": "2"
  },
  {
    "id": 3,
    "name": "apple3",
    "price": "3"
  },
  {
    "id": 4,
    "name": "apple4",
    "price": "4"
  },
  {
    "id": 5,
    "name": "apple5",
    "price": "5"
  },
  {
    "id": 6,
    "name": "orange",
    "price": "8.88"
  }
]

（3）采用_like来设置匹配某个字符串（或正则表达式）：

http://localhost:3004/fruits?name_like=apple

[
  {
    "id": 2,
    "name": "apple2",
    "price": "2"
  },
  {
    "id": 3,
    "name": "apple3",
    "price": "3"
  },
  {
    "id": 4,
    "name": "apple4",
    "price": "4"
  },
  {
    "id": 5,
    "name": "apple5",
    "price": "5"
  }
]

全文搜索 Full-text search

采用 q 来设置搜索内容:

http://localhost:3004/fruits?q=oran

[
  {
    "id": 6,
    "name": "orange",
    "price": "8.88"
  }
]

除了获取数据，我们当然还希望能向操作sql一样能更改数据、删除数据了。

所以这里，我们采用大部分人熟悉的 ajax 方法，来操作下响应的数据。

案例

获取db.json中的所有水果信息，以表格的方式展现出来。

<!DOCTYPE html>
<html>

<head>
  <title>使用jq ajax方法操作数据</title>
  <script type="text/javascript" src="js/jquery.js"></script>
  <style>
    table,
    td,
    th {
      border: 1px solid black;
      border-collapse: collapse;
    }

    table {
      width: 500px;
      text-align: center;
    }

    tr {
      height: 35px;
    }
  </style>
</head>

<body>
  <button id="getBtn">get</button>
  <div id="showData"></div>

  <script type="text/javascript">
    $("#getBtn").click(function () {
      $.ajax({
        type: 'get',
        url: 'http://localhost:3004/fruits',
        success: function (data) {
          // data 对象数组
          var h = ""
          h += "<table border='1'>"
          h += "<thead><th>ID</th><th>name</th><th>price</th></thead>"
          h += "<tbody>"
          for (var i = 0; i < data.length; i++) {
            var o = data[i]
            h += "<tr>"
            h += "<td>" + o.id + "</td><td>" + o.name + "</td><td>" + o.price + "</td>"
            h += "</tr>"
          }
          h += "<tbody>"
          h += "</table>"
          $("#showData").empty().append(h)
        },
        error: function () {
          alert("get : error")
        }
      })
    })
  </script>
</body>

</html>

添加数据

POST 方法，常用来创建一个新资源。

案例：在页面的输入框中输入新的水果名称和价格，通过post添加到db.json中。

水果：<input id="fruitName" type="text" name="fruitName"><br>
价格：<input id="fruitPrice" type="text" name="fruitPrice"><br>
<button id="postBtn">add</button>

$("#postBtn").click(function () {
    $.ajax({
        type: 'post',
        url: 'http://localhost:3004/fruits',
        data: {
            name: $("#fruitName").val(),
            price: $("#fruitPrice").val()
        },
        success: function (data) {
            console.log("post success")
        },
        error: function () {
            alert("post error")
        }
    })
})

​ 输入 watermelon 6.88 水果后 add 添加新水果。再次点击get按钮重新获取db.json数据，就可以看到新添加进去的数据。此时打开db.json文件，也可以看到这条新添加的记录。

​ 注意：此时如果再次点击 add 按钮，重复添加watermelon 6.88 数据，会发现在get中存在多条 id 不一样但 name & price 相同的重复数据。

更新数据

PUT 方法，常用来更新已有资源，若资源不存在，它也会进行创建。

案例：输入水果对应id，修改其价格。

<p>更新水果价格</p>
水果id：<input id="putId" type="text" name="fruitId"><br>
价格：<input id="putPrice" type="text" name="fruitPrice"><br>
<button id="putBtn">put</button>

$("#putBtn").click(function () {
    $.ajax({
        type: 'put',
        url: 'http://localhost:3004/fruits/' + $("#putId").val(),
        data: {
            price: $("#putPrice").val()
        },
        success: function (data) {
            console.log("put success")
        },
        error: function () {
            alert("put error")
        }
    })
})

​ 在案例中，我们输入id 为 1 ，更改价格为100，本意是要更新 apple 的价格为100，但PUT方法执行后，get到的数据name 字段 的 apple 变成 undefined 了。

​ 这是因为，PUT方法会更新整个资源对象，前端没有给出的字段，会自动清空。所以，要么我们在ajax的data中给出完整的对象信息，要么采用PATCH方法。

PATCH是一个新方法，可以当作是PUT方法的补充，主要用来做局部更新。

案例：同PUT方法。

$("#putBtn").click(function () {
    $.ajax({
        type: 'patch',
        url: 'http://localhost:3004/fruits/' + $("#putId").val(),
        data: {
            price: $("#putPrice").val()
        },
        success: function (data) {
            console.log("put success")
        },
        error: function () {
            alert("put error")
        }
    })
})

​ 此处，我们输入id 为 2 ，更改价格为200，即要更新 orange 的价格为200，执行PATCH方法后，get到的数据name 字段 的 orange 的价格确实变化了，而且不会像PUT方法，导致 name 变成 undefined 。

但有时候，我们更希望能通过输入水果名称，来动态更新水果价格。但 'http://localhost:3004/fruits/orange' 这种 url 是错误的，而像 'http://localhost:3004/fruits?name = orange' 这种url，只能供 GET 方法来获取数据。既然如此，我们就多绕个弯，通过GET方法来获知id，然后再通过id去PATCH数据。

实现方法如下：

<p>通过水果名更新水果价格</p>
水果：<input id="editName" type="text" name="fruitName"><br>
价格：<input id="editPrice" type="text" name="fruitPrice"><br>
<button id="editBtn">edit</button>

$("#editBtn").click(function () {
    getFun($("#editName").val(), patchFun)
})

function getFun(name, f) {
    $.ajax({
        type: 'get',
        url: 'http://localhost:3004/fruits' + '?name=' + name,
        success: function (data) {
            // data 对象数组
            console.log(data[0]);
            if (typeof f == "function") f.call(this, data[0].id)
        },
        error: function () {
            alert("error")
        }
    })
}

function patchFun(id) {
    $.ajax({
        type: 'patch',
        url: 'http://localhost:3004/fruits/' + id,
        data: {
            price: $("#editPrice").val()
        },
        success: function (data) {
            console.log("success", data)
        },
        error: function () {
            alert("error")
        }
    })
}

删除数据

DELETE 方法，常用来删除已有资源

案例：根据id删除水果数据

<p>删除水果</p>
水果id：<input id="delId" type="text" name="delName"><br>
<button id="delOne">del</button>
<button id="delAll">delAll</button>

$("#delOne").click(function () {
    $.ajax({
        type: 'delete',
        url: 'http://localhost:3004/fruits/' + $("#delId").val(),
        success: function (data) {
            console.log("del success")
        },
        error: function () {
            alert("del error")
        }
    })
})

​ 若想用删除全部，没办法使用'http://localhost:3004/fruits' 这种请求url。

​ 因为必须指定删除的对象id。所以只能通过循环删除。这就需要实现通过GET方法来获取当前最大id（注意是最大id，而不是数据个数）来作为循环的边界。

$("#delAll").click(function () {
    // 此处就没有动态去获取db.json中fruits的最大id，直接带入10
    for (var i = 0; i <= 10; i++) {
        delFun(i)
    }
})

function delFun(id) {
    $.ajax({
        type: 'delete',
        url: 'http://localhost:3004/fruits/' + id,
        data: '',
        success: function (data) {
            console.log("del success", data)
        },
        error: function () {
            console.log("del error")
        }
    })
}

四、配置静态资源服务器

主要是用来配置图片、音频、视频资源

通过命令行配置路由、数据文件、监控等会让命令变的很长，而且容易敲错；

json-server允许我们把所有的配置放到一个配置文件中，这个配置文件一般命名为json_sever_config.json;

json_sever_config.json

{
  "port": 3004,            
  "watch": true,           
  "static": "./public",
  "read-only": false, 
  "no-cors": false, 
  "no-gzip": false
}

package.json

{
    "scripts": {
        "mock": "json-server --c json_sever_config.json db.json"
    }
}

既然我们已经在json_server_config.json里面指明了静态文件的目录，那么我们访问的时候，就可以忽略public；

图片：http://localhost:3004/@2x_about.png

标签：name,05,price,3004,json,fruits,服务器,id,搭建
From： https://www.cnblogs.com/51fly/p/17799802.html

相关文章

  • 企业通关必备，iPaaS应该这样搭建​
    iPaaS是指集成平台即服务（IntegrationPlatformasaService），是一种云计算服务，提供了一套工具和服务来帮助企业集成不同的应用程序、数据和系统。iPaaS也可以通过云端的方式，将企业内部的应用程序与云端应用程序进行连接，实现数据的交换和流转。iPaaS的主要功能包括：1、数据集成：将不同......
  • 使用sshfs-win将linux服务器目录挂载到windows下
    可以直接将服务器上的目录挂载到Windows的资源管理器，相当于多了一个磁盘，这样子就可以直接将数据下载到服务器上了，挺方便的。原理说明一般情况下，我们可以通过samba协议挂载远程服务器上的文件夹。然而，并非所有服务器都开放了samba端口，特别是在外网情况下，通常只会开放一个s......
  • 服务器管理
    服务器管理通过next-terminal开源堡垒机，对生产服务器权限集中进行管控，同时提供审计功能。机器的纳管或者其他额外批量处理，则使用ansible工具灵活处理。堡垒机部署环境简介  Docker部署脚本[root@host-173-16-215-166next-terminal]#pwd/home/ap/ansible/next-term......
  • 基于腾讯云lighthouse搭建Hexo管理器-Qexo
    原文地址：https://blog.iloli.love/archives/33773f16/本文图例使用腾讯云lighthouse搭建（其他服务器也没问题）在阅读本文之前，你需要做的事：已经在服务器/本地部署好hexo及其相关依赖，还有python3.x及对应版本的pip以及git/curl等命令本文应用场景为通过本地部署的Q......
  • 云计算基础搭建-centOS7和VMware17
    软件：centOS7和VMware171、安装centOS2、查看机器名：hostnamectl3、修改机器名：hostnamectl set-hostname Controller_1  将机器名修改为Controller_14、添加IP地址   首先，查看虚拟机菜单：“编辑”-“虚拟网络编辑器”，查看NAT模式的子网，如：192.168.190.0 子......
  • [Vue学习]使用Vue-cli脚手架快速搭建项目
    安装vue-cli3npminstall-g@vue/cli验证vue版本vue--version 使用vuecreate项目名创建（需要cd进具体的目录）npmrundev（运行）npmrunbuild（编译）(也可以使用vue ui界面图形化方式进行创建) ==================================================可以直接使用下面方式创建项......
  • [-005-]-Python3+Unittest+Selenium Web UI自动化测试之页面滑动
    1.上下滑动a.滑动#滑动至页面底部：js1="window.scrollTo(0,document.body.scrollHeight)"self.driver.execute_script(js1)#滑动至页面顶部：js2="window.scrollTo(0,0)"self.driver.execute_script(js2)c.纵向滚动条通过scrollBy坐标来滚动#纵向滚动条通过scr......
  • 安防视频监控平台EasyCVR服务器需要开启firewall防火墙，该如何开放端口？
    智能视频监控/视频云存储/集中存储/视频汇聚平台EasyCVR具备视频融合汇聚能力，作为安防视频监控综合管理平台，它支持多协议接入、多格式视频流分发，视频监控综合管理平台EasyCVR支持海量视频汇聚管理，可应用在多样化的场景上，包括城市“一网统管”建设、智慧工地风险预警、智慧工厂安全......
  • 记一次服务器Cuda驱动崩溃修复过程
    基本过程今天实验室师兄在服务器运行深度学习训练时候得到报错CUDAinitialization:UnexpectederrorfromcudaGetDeviceCount()疑似Cuda与NVIDIA显卡驱动沟通中出现了问题，使用nvidia-smi指令时提示FailedtoinitializeNVML:Driver/libraryversionmismatch，经过沟通了解到，重......
  • SQL Server数据库创建远程服务器备份计划（小白详细图文教程）
    一、前言最近项目系统做安全加固，以前是本地备份，现在需要做远程内网服务器数据库备份，后期也有可能做异地备份。下面以SQLServer2016内网服务器数据库备份为例，数据库服务器地址：192.168.10.200备份服务器地址：192.168.10.100二、创建存储文件夹192.168.10.100远程100服务器，创建......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99