如何使用 MongoDB、Express、Vue 和 Node（MEVN 堆棧）構建全棧 RPG 角色生成器

我是一名桌面遊戲開發人員，喜歡製作有潛力執行某些與遊戲相關的服務的應用程序。在本文中，我們將介紹使用 MongoDB、Express、Vue 和 Node（也稱為“MEVN”堆棧）創建角色扮演遊戲角色生成器的步驟。

先決條件：本教程假定您已安裝和配置 Node/NPM 和 MongoDB，並準備好使用代碼編輯器和 CLI（或 IDE）。

如果您更喜歡觀看視覺教程，可以觀看下面這篇文章的配套視頻：

我還應該提到，如果沒有 Bennett Dungan 關於構建 REST API 的文章、Aneeta Sharma 關於全棧 MEVN Web 應用程序的教程以及 Matt Maribojoc 關於同一主題的文章，本教程是不可能完成的。

除了官方文檔（用於 Vue、Express 等）之外，我還使用了這些文章中的每一篇來學習創建自己的 MEVN 應用程序（您可以在此處閱讀更多關於我使用 Web API 的旅程）。

您可以在 GitHub 上訪問本教程的整個存儲庫。

前端

我們的應用將允許我們使用以下堆棧創建新的角色扮演遊戲角色並完全查看它們：

• Vue 客戶端
• 節點/Express 服務器
• MongoDB 數據庫

Vue 客戶端將向 Node/Express 服務器（或“API”）發出 HTTP 請求，後者將與我們的 MongoDB 數據庫通信以將數據發送回堆棧。

我們將首先打開一個命令行，為我們的項目創建一個新目錄，然後導航到該目錄：

mkdir mevn-character-generator
cd mevn-character-generator

然後我們將全局安裝 Vue CLI 來幫助我們搭建一個基本應用程序：

npm install -g @vue/cli

接下來，我們將使用 Vue CLI 在我們的 mevn-character-generator 目錄中創建一個名為“Client”的新應用程序：

vue create client

您可以在提示符處按“輸入”繼續。

我們可以通過首先導航到 /client 文件夾來運行我們的應用程序：

cd client
npm run serve

腳本完成運行後，我們現在可以打開瀏覽器頁面並導航到終端指示的 URL（通常為 http://localhost:8080 或 8081）。我們應該看到這樣的東西：

好的！ Vue CLI 為我們搭建了一個基本應用程序，並將其直接渲染到瀏覽器中。它還會在文件更改時自動重新加載頁面，如果代碼中的某些內容看起來不對，它會拋出錯誤。

讓我們在代碼編輯器中打開項目目錄，看看文件結構，應該是這樣的：

如果你和我一樣是強迫症，你可以繼續刪除“favicon.ico”文件和“/assets”文件夾，因為我們在這個項目中不需要它們。

進入/src/main.js，我們看到：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

該文件是我們客戶端的主要入口點。它告訴瀏覽器將我們的 App.vue 文件掛載到 /public/index.html 中 id 為“#app”的 div。

讓我們看一下/src/App.vue（為了便於閱讀，我省略了一些代碼）：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
...
}
</style>

App.vue 是一個典型的 Vue 組件，帶有