JavaScript >> Javascript 文檔 >  >> Node.js

使用 Node.js 製作圖片投票遊戲(第 1 部分)

Node.js 變得越來越流行。這個 JavaScript 服務器是聊天、多人遊戲和協作工具等實時應用程序的完美工具。但是您也可以使用它來構建常規的 Web 應用程序。您需要做的就是選擇正確的框架。這就是我們今天要做的。我們將編寫一個“Hot or Not”類型的圖片投票遊戲,將其數據存儲在 NoSQL 類型的數據庫中。

本教程將分為兩部分。第一個,您可以在下面閱讀,包括設置、目錄結構和數據庫。在下一部分中,我們將介紹路由和視圖。閱讀第 2 部分。

理念

我們的 node.js 應用程序將構建在 Express 框架之上,將使用車把引擎作為模板,使用 nedb 存儲數據。該應用程序將允許訪問者對照片進行投票,一次一張照片。還將有一個排名列表,其中的照片按票數排序。每個 IP 地址只允許對一張圖片投一票。

此應用程序中不會有任何客戶端 JavaScript - 一切都將在服務器上運行。例如,點擊“可愛”按鈕會提交一個表單,就像過去一樣。我決定走這條路,這樣您就可以將注意力完全集中在服務器端代碼上,我不想讓 Angular 或 Ember 等客戶端庫使事情複雜化。

安裝 Node.js

要學習本教程,您需要在計算機上安裝 node.js。這很簡單 - 只需從節點的下載頁面獲取適合您操作系統的正確包。如果您運行的是 Linux 或 OSX,則必須在某處提取存檔,例如在 $HOME/node 中 (其中 $HOME 是你的主目錄),並添加 $HOME/node/bin 通過編輯您的 .bashrc 文件到您的路徑。如果您運行的是 Windows,請使用下載頁面上提供的安裝程序。

如果一切正常,執行 node 控制台窗口中的命令將為您提供 node.js 的命令提示符。

運行演示

如果您希望此時運行該應用程序,您必須從文章頂部附近的按鈕下載源代碼作為 zip,然後將其解壓縮到您計算機的某個位置。然後,您必須導航到 index.js 文件所在的文件夾,然後運行 npm install 命令。這將從 npm 註冊表下載所有必需的庫。然後你需要做的就是運行 node index.js 並且您將在您的計算機上擁有自己的圖片投票遊戲!

因為該應用程序只允許 IP 中的每張照片投一票,所以在您對所有照片進行投票後,您可以刪除 /data/users 文件以再次投票。

目錄結構

首先,讓我們解釋一下我們的項目將如何組織。它將包含許多文件夾和文件,您必須手動創建。

  • 數據/ 文件夾包含 nedb 數據庫文件。它們是包含 JSON 文檔的純文本文件 - 您甚至可以在文本編輯器中打開它們並進行編輯。
  • node_modules/ 運行 npm install 命令時,npm 會自動創建文件夾。這是保存下載的庫的位置。
  • 公眾/ 文件夾包含瀏覽器應該可以訪問的 JavaScript、CSS、圖像和其他資產。只放你想讓人們看到的東西。
  • 瀏覽量/ 文件夾包含應用程序使用的模板。它們通過 handlebars 運行 預先製作模板引擎,我們下次討論路由文件時會看到。
  • package.json 文件描述了您的應用程序的依賴項(必須從 npm 註冊表中下載哪些庫)、代碼的名稱、許可證和其他信息。我們將在下一部分創建此文件。
  • .js 文件包含應用程序的邏輯。它們被組織為 node.js 模塊,並包含在 index.js 中,這也是應用程序的入口點。您通過執行命令 node index.js 運行應用程序 .

創建每個文件夾和文件。您現在可以將文件留空。

創建 package.json

準備好文件後,構建我們的 node.js 應用程序的下一步是創建 package.json 文件。它描述了您的應用程序應該如何工作、它擁有什麼許可證、它的存儲庫、作者等等(請參閱此處的交互式示例)。 Node 帶有一個方便的實用程序,您可以使用它來快速創建有效的 package.json 文件。打開控制台,導航到包含 index.js 和其他文件的項目目錄,然後執行以下命令:

npm init

該實用程序會問你一些問題,然後它會創建你的 package.json 文件。從那一刻起,當您使用 npm 安裝新庫時,您將不得不使用 --save 標誌,以便 npm 為您更新您的 package.json。運行以下命令試試看:

npm install express --save
npm install nedb --save
npm install express3-handlebars --save

(當然,您可以使用一個命令安裝所有三個。)這些命令將指示節點包管理器從註冊表下載 express、nedb 和 express3-handlebars 庫,並將它們保存到 node_modules 目錄,並更新 package.json 的 dependencies 屬性 文件。

這是我們的 package.json 的內容:

{
  "name": "picture-voting-game",
  "version": "0.0.1",
  "description": "This is a simple picture voting game with node.js",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "game",
    "picture",
    "voting"
  ],
  "author": "Martin Angelov",
  "license": "MIT",
  "dependencies": {
    "express": "~3.4.7",
    "nedb": "~0.9.4",
    "express3-handlebars": "~0.5.0"
  }
}

數據庫模塊

現在讓我們把注意力轉向數據庫。正如我在文章開頭提到的,我們將使用 nedb 來存儲數據。這是一個輕量級的純 JavaScript 數據庫。它是非關係型 (NoSQL),允許您存儲任意 JSON 對象(或文檔)。它與你的 node.js 應用程序在同一個進程中,支持索引並且速度非常快。它不適合大量記錄(因為你需要像 MongoDB 這樣的東西),但非常適合像我們今天正在編寫的小型應用程序。使用此數據庫所需的一切就是安裝 nedb 包,我們在上一節中已經做過。

我們的應用程序需要兩種類型的數據集——一種用於照片,另一種用於用戶。每個用戶將有一個記錄,每個記錄將包含一個 IP 地址和一個包含用戶投票的所有圖片的數組。在像 MySQL 這樣的常規數據庫中,我們會用投票創建一個單獨的數據庫表,這會很複雜,但這裡沒有必要這樣做。

為了使代碼更易於維護,我們將創建數據集的功能提取到它們自己的 node.js 模塊中。請看下面的代碼:

database.js

// Require the nedb module
var Datastore = require('nedb'),
    fs = require('fs');

// Initialize two nedb databases. Notice the autoload parameter.
var photos = new Datastore({ filename: __dirname + '/data/photos', autoload: true }),
    users = new Datastore({ filename: __dirname + '/data/users', autoload: true });

// Create a "unique" index for the photo name and user ip
photos.ensureIndex({fieldName: 'name', unique: true});
users.ensureIndex({fieldName: 'ip', unique: true});

// Load all images from the public/photos folder in the database
var photos_on_disk = fs.readdirSync(__dirname + '/public/photos');

// Insert the photos in the database. This is executed on every 
// start up of your application, but because there is a unique
// constraint on the name field, subsequent writes will fail 
// and you will still have only one record per image:

photos_on_disk.forEach(function(photo){
    photos.insert({
        name: photo,
        likes: 0,
        dislikes: 0
    });
});

// Make the photos and users data sets available to the code
// that uses require() on this module:

module.exports = {
    photos: photos,
    users: users
};

這個模塊做的另一件事是掃描 /public/photos 使用內置 fs 模塊的文件的文件夾(我們的貓圖片存儲的地方)。然後將照片插入照片數據集中。

賦值給module.exports屬性的值,是其他文件中database.js為require()-d時返回的結果。

繼續第 2 部分

本教程的第一部分到此結束!在第二部分中,您將看到其餘的模塊和視圖。在這裡閱讀。


Tutorial JavaScript 教程
  1. 使用 vantajs 輕鬆製作動畫網站背景

  2. 用JS計算閏年

  3. 什麼是 Vue 3 中的組合 API

  4. 作為軟件開發人員如何建立您的個人品牌

  5. JavaScript:如何將元素插入到數組的特定索引中

  6. 一種製作響應式、無 JavaScript 圖表的新技術

  7. 如何在 React 中更改鼠標事件的文本

  1. 如何將 Google 字體應用到 Next.js 和 Tailwind CSS 應用。

  2. 使用 Gulp 4 加快構建速度

  3. 將街景放置在主要街道而不是後街

  4. 理解語義版本控制

  5. 使用 Next.js Auth 實現對 Next.js 網站的簡單身份驗證

  6. 企業節點狀態

  7. 現代 Javascript 技術

  1. 使用 Tailwindcss 和 Vue.js 製作自定義切換/切換按鈕

  2. 如何在不使用 create-react-app 的情況下設置 React 項目

  3. 使用 Netlify、lambda... 和 PassportJS 進行身份驗證👮‍♀️

  4. 讓 Nintendo Switch 的 Joy-Con 成為演示遙控器的 One-Liner