エクスプレス/ejs/mongodb -展開するチュートリアル

38160 ワード

node express テキストリンク

Repo With Code From this tutorial for reference
この記事はExpressJSの基本的な知識を前提としています.もしあなたが新しい表現をするなら、次のビデオプレイリストから始めましょう.

ExpressJS Cheatsheet

MongooseJS Cheatsheet

モンゴセットアップ

MongoDBに移動します.comアカウントを作成

新しい無料クラスタを作成します(デフォルトはすべて細かいです).

データベースにアクセスするためのユーザ名とパスワードを作成します

WhitelistすべてのIPアドレスをネットワークアクセス

メインダッシュボードでは、クリックして、接続を選択し、あなたのアプリケーションを接続し、データベースに接続するためのテンプレートのURLを取得します.

mongo+srv://username:[email protected]/databaseNameユーザー名とパスワードのセクションがデータベースアクセスの下で作成されたユーザー名とパスワードを持っていることを確認してください.
これがあなたのモンゴリです.

エクスプレスセットアップ

セットアップ

IDEと端末を空のフォルダに開き、次のコマンドを入力します

サーバーを作成します.jstouch server.js

新規NPMプロジェクトの作成npm init -y

依存関係のインストールnpm install express mongoose method-override ejs dotenv morgan

グローバルにインストールnpm install -g nodemon

パッケージ内の次のスクリプトを設定します.JSON

  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },

依存関係の概要

- express => web framework for create server and writing routes

- mongoose => ODM for connecting to and sending queries to a mongo database

- method-override => allows us to swap the method of a request based on a URL query

- ejs => our templating engine

- dotenv => will allow us to use a `.env` file to define environmental variables we can access via the `process.env` object

- morgan => logs details about requests to our server, mainly to help us debug

クリエイトア.env 以下の依存関係を持つファイル

DATABASE_URL=<use your mongodb.com url>
PORT=4000

クリエイトア.gitignore ファイルは以下の(常にグローバルなgitignoreを持っている場合でも、1つを作るために良い習慣は、グローバルはケースでキャッチするためにそこにある)

/node_modules
.env

サーバの設定js

依存関係のインポート

/////////////////////////////////////////////
// Import Our Dependencies
/////////////////////////////////////////////
require("dotenv").config() // Load ENV Variables
const express = require("express") // import express
const morgan = require("morgan") //import morgan
const methodOverride = require("method-override")
const mongoose = require("mongoose")

データベース接続の確立

/////////////////////////////////////////////
// Database Connection
/////////////////////////////////////////////
// Setup inputs for our connect function
const DATABASE_URL = process.env.DATABASE_URL
const CONFIG = {
    useNewUrlParser: true,
    useUnifiedTopology: true
  }

// Establish Connection
mongoose.connect(DATABASE_URL, CONFIG)

// Events for when connection opens/disconnects/errors
mongoose.connection
.on("open", () => console.log("Connected to Mongoose"))
.on("close", () => console.log("Disconnected from Mongoose"))
.on("error", (error) => console.log(error))

モデルを作成する

////////////////////////////////////////////////
// Our Models
////////////////////////////////////////////////
// pull schema and model from mongoose
const {Schema, model} = mongoose

// make fruits schema
const todoSchema = new Schema({
    text: String
})

// make fruit model
const Todo = model("Todo", todoSchema)

アプリケーションオブジェクト

/////////////////////////////////////////////////
// Create our Express Application Object
/////////////////////////////////////////////////
const app = express()

ミドルウェア登録

/////////////////////////////////////////////////////
// Middleware
/////////////////////////////////////////////////////
app.use(morgan("tiny")) //logging
app.use(methodOverride("_method")) // override for put and delete requests from forms
app.use(express.urlencoded({extended: true})) // parse urlencoded request bodies
app.use("/static", express.static("static")) // serve files from public statically

初期ルート

////////////////////////////////////////////
// Routes
////////////////////////////////////////////
app.get("/", (req, res) => {
    res.render("index.ejs", {greeting: "Hello"})
})

サーバリスナー

//////////////////////////////////////////////
// Server Listener
//////////////////////////////////////////////
const PORT = process.env.PORT
app.listen(PORT, () => console.log(`Now Listening on port ${PORT}`))

完全なサーバー。jsファイル

/////////////////////////////////////////////
// Import Our Dependencies
/////////////////////////////////////////////
require("dotenv").config() // Load ENV Variables
const express = require("express") // import express
const morgan = require("morgan") //import morgan
const methodOverride = require("method-override")
const mongoose = require("mongoose")

/////////////////////////////////////////////
// Database Connection
/////////////////////////////////////////////
// Setup inputs for our connect function
const DATABASE_URL = process.env.DATABASE_URL
const CONFIG = {
    useNewUrlParser: true,
    useUnifiedTopology: true
  }

// Establish Connection
mongoose.connect(DATABASE_URL, CONFIG)

// Events for when connection opens/disconnects/errors
mongoose.connection
.on("open", () => console.log("Connected to Mongoose"))
.on("close", () => console.log("Disconnected from Mongoose"))
.on("error", (error) => console.log(error))

////////////////////////////////////////////////
// Our Models
////////////////////////////////////////////////
// pull schema and model from mongoose
const {Schema, model} = mongoose

// make fruits schema
const todoSchema = new Schema({
    text: String
})

// make fruit model
const Todo = model("Todo", todoSchema)

/////////////////////////////////////////////////
// Create our Express Application Object
/////////////////////////////////////////////////
const app = express()

/////////////////////////////////////////////////////
// Middleware
/////////////////////////////////////////////////////
app.use(morgan("tiny")) //logging
app.use(methodOverride("_method")) // override for put and delete requests from forms
app.use(express.urlencoded({extended: true})) // parse urlencoded request bodies
app.use("/static", express.static("static")) // serve files from public statically

////////////////////////////////////////////
// Routes
////////////////////////////////////////////
app.get("/", (req, res) => {
    res.render("index.ejs", {greeting: "Hello"})
})

//////////////////////////////////////////////
// Server Listener
//////////////////////////////////////////////
const PORT = process.env.PORT
app.listen(PORT, () => console.log(`Now Listening on port ${PORT}`))

ビューと静的フォルダーの作成mkdir views static

インデックス作成.以下のビューフォルダのEJS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Our Basic Todo App</title>
</head>
<body>
    <%= greeting %>

</body>
</html>

サーバーを実行するnpm run dev

訪問localhost:4000 テストルートが

いくつかのtodosを播種する

シードルートを使用して、いくつかの最初のtodosでデータベースをシードしましょう.ユーザーが事故でデータベースを消去したくないので、この経路は生産でコメントアウトされるべきです.また、メインページにパスが渡されているので、メインルートを更新します.

////////////////////////////////////////////
// Routes
////////////////////////////////////////////
app.get("/", async (req, res) => {

    // get todos
    const todos = await Todo.find({})

    // render index.ejs
    res.render("index.ejs", {todos})
})

app.get("/seed", async (req, res) => {
    // delete all existing todos
    await Todo.remove({})

    // add sample todos
    await Todo.create([{text: "Eat Breakfast"}, {text: "Eat Lunch"}, {text: "Eat Dinner"}])

    // redirect back to main page
    res.redirect("/")
})

更新views/index.ejs すべてを表示する

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Our Basic Todo App</title>
</head>
<body>
    <h1>Todos</h1>
    <ul>
        <% for (todo of todos) { %>

            <li><%= todo.text %></li>

        <% } %>
    </ul>

</body>
</html>

メインページに戻るには、あなたがToDOSを参照してくださいlocalhost:4000/seed そして、シードルートがデータベースにそれらを加えた時から、あなたは現在、トスが現れるのを見るでしょう.
ルートを作成し、ルートを作成し、そのルートに投稿するフォームを追加します.
サーバ.js

app.post("/todo", async (req, res) => {
    //create the new todo
    await Todo.create(req.body)
    // redirect to main page
    res.redirect("/")
})

インデックス.EJS

<body>
    <h1>Todos</h1>

    <h2> Add Todo</h2>
    <form action="/todo" method="post">
        <input type="text" name="text" placeholder="new todo">
        <input type="submit" value="create new todo">
    </form>
    <ul>
        <% for (todo of todos) { %>

            <li><%= todo.text %></li>

        <% } %>
    </ul>

</body>

メインページをリフレッシュするには、フォームを参照してくださいするときに、それを記入し、それを提出するときに、新しいTODOを作成する新しいルートにポスト要求を行います提出し、メインページに戻ってリダイレクト!
今、todosを削除する機能を追加しましょう.指定されたtodoを削除する削除ルートを追加します(todoのデータベースIDは、paramとしてURLで渡されます).ルートを削除した後、メインページに戻ってリダイレクトされます.次に、インデックスのforループに追加します.JSフォームの削除要求を行うための送信ボタンです(HTMLフォームのメソッド制限を克服するためにメソッドオーバーライドを使用します).
サーバ.js

app.delete("/todo/:id", async (req, res) => {
    // get the id from params
    const id = req.params.id
    // delete the todo
    await Todo.findByIdAndDelete(id)
    // redirect to main page
    res.redirect("/")
})

インデックス.EJS

<body>
    <h1>Todos</h1>

    <h2> Add Todo</h2>
    <form action="/todo" method="post">
        <input type="text" name="text" placeholder="new todo">
        <input type="submit" value="create new todo">
    </form>
    <ul>
        <% for (todo of todos) { %>

            <li><%= todo.text %> 

                <form action="/todo/<%= todo._id %>?_method=delete" method="post">
                    <input type="submit" value="delete todo">
                </form>

            </li>

        <% } %>
    </ul>

</body>

それはそんなにハードではなかったか.では、次のように展開しましょう.

展開

コミットし、コードをGithubにプッシュ

Herokuの新しいプロジェクトを作成します.コム

「展開」タブの下で、配備のGithubメソッドを選択します

あなたのGitHubアカウントからリポジトリを選択します

自動展開を有効にする

手動展開をクリックして展開します

アプリケーションはまだそれがあなたのデータベースの文字列は、私たちの中に隠されて以来何のアイデアを持っていない原因はまだ動作しません.envファイル.Herokuで環境変数を定義するには

タブに移動

スクロールダウンして設定を明らかにする

「DatabaseHorse URL」のキーとあなたのMongo URIのキーで新しい変数を加えてください

それは、あなたのアプリは今動作する必要があります!

学習を続ける

CSSファイルを静的フォルダーに追加し、インデックスの先頭にリンクタグを追加することでCSSを追加します.EJS

<link rel="stylesheet" href="/static/nameOfCssFile.css">

同様にフロントエンドJSファイルを静的ファイルに追加して接続します

<script src="/static/nameOfJsFile.js" defer></script>

また、jQuery、アルパイン、HTMXのような他のフロントエンドのライブラリをロードすることができます、スクリプトのタグを使用してVue、反応とVueをしてから、より多くのフロントエンドの対話性を追加するためにそれらを使用することができます

使用して急行ルートサーバーからのルートを移動します.MVCアーキテクチャに従うためのコントローラフォルダへのJS(ノードでのインポートとエクスポートの方法を知る必要があるでしょう)

マングースモデルコードをMVCアーキテクチャのモデルフォルダに移動する

小さなソロプロジェクトのために、1つのファイルですべてを持つことはOKです、しかし、コードの多いグループプロジェクトのために、コードがより良い協同とより少ないgitマージ衝突のための一般の組織で多くのファイルに分割されたことを望みます

Reference

この問題について(エクスプレス/ejs/mongodb -展開するチュートリアル), 我々は、より多くの情報をここで見つけました https://dev.to/alexmercedcoder/expressejsmongodb-zero-to-deploy-tutorial-4ap9

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

Sping boot加入Druid连接池异常之Error creating bean with name'dataSource'

Railsコンソールからのルートヘルパーへのアクセス