Node.js と Vue.js を使用してフルスタック プロジェクトを構築する方法

Node.js と Vue.js は、現在非常に人気のある 2 つのテクノロジです。Node.js は JavaScript で実行されるサーバーサイド開発プラットフォームであり、Vue.js はユーザー インターフェイスを構築するための進歩的なフレームワークです。これら 2 つのテクノロジーを組み合わせることで、Web アプリケーションの開発効率とユーザー エクスペリエンスを大幅に向上させることができます。この記事では、実践的なプロジェクトを使用して、Node.js と Vue.js を使用してフルスタック Web アプリケーションを構築する方法を示します。

1. プロジェクトの紹介

ユーザー登録・ログインして記事を公開したり、他のユーザーが公開した記事にコメントしたり閲覧したりできる、簡単な記事公開・管理システムを開発します。この機能を実現するために、バックエンド開発言語およびテクノロジ フレームワークとして Node.js、フロントエンド開発フレームワークとして Vue.js、データベースとして MongoDB を使用します。

2. 環境セットアップ

開発を開始する前に、まずローカル環境に Node.js、Vue.js、MongoDB の開発環境をセットアップする必要があります。

1. Node.js のインストール: 公式 Web サイトから Node.js インストール パッケージをダウンロードしてインストールできます。

2. Vue.js のインストール: npm コマンド ライン ツールを使用して Vue.js をインストールできます。コマンド ラインで次のコマンドを入力します:

npm install -g vue-cli

3. MongoDB のインストール: 公式 Web サイトから MongoDB インストール パッケージをダウンロードしてインストールできます。

3. プロジェクト構造

プロジェクトをフロントエンドとバックエンドの 2 つの部分に分割するため、これら 2 つの部分のコードを保存する 2 つのフォルダーを作成する必要があります。ルート ディレクトリに「node-vue-app」という名前のフォルダーを作成し、プロジェクト全体を保存します。

1. バックエンド部分の作成

「node-vue-app」フォルダーの下に「server」という名前のフォルダーを作成し、そのフォルダーの下に「server」という名前のフォルダーを作成します。 js" ファイル。これはバックエンド サービス エントリ ファイルとして機能します。同時に、ルーティング コードを保存するために「server」フォルダーの下に「routes」という名前のフォルダーを作成し、ルーティング コードを保存するために「server」フォルダーの下に「models」という名前のフォルダーを作成する必要があります。 。

2. フロントエンド部分の作成

「node-vue-app」フォルダーの下に「client」という名前のフォルダーを作成し、このフォルダー内でフロントエンド開発を行います。 Vue.js が提供するコマンド ライン ツールを使用して Vue.js プロジェクトを作成できます。

vue init webpack client

このコマンドは、「client」フォルダーの下に「src」という名前のフォルダーを作成します。終了コード。

4. バックエンド開発

この場合、Express をバックエンド フレームワークとして使用して、RESTful API の開発を完了します。 「app.js」ファイルでは、関連するモジュールとライブラリを導入し、Express アプリケーションを初期化する必要があります:

const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');

const app = express();
app.use(bodyParser.json());

mongoose.connect('mongodb://localhost:27017/node-vue-app', { useNewUrlParser: true });
mongoose.connection.once('open', () => {
    console.log('connected to database');
});

app.listen(3000, () => console.log('server is running on port 3000'));

1. データ モデルを定義します

「models」の下で行う必要があります。フォルダー データ モデルを定義し、「article.js」という名前のファイルを作成します。

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

const articleSchema = new Schema({
    title: String,
    author: String,
    content: String,
    created_at: Date,
    updated_at: Date
});

module.exports = mongoose.model('Article', articleSchema);

このファイルでは、「Article」という名前のデータ モデルを定義し、対応するデータ構造を定義します。

2. ルートの定義

「routes」フォルダーの下に「articles.js」という名前のファイルを作成します。このファイルに記事関連のルーティング処理ロジックを定義します。

const express = require('express');
const router = express.Router();
const Article = require('../models/article');

// 获取文章列表
router.get('/', (req, res) => {
    Article.find((err, articles) => {
        if (err) {
            console.log(err);
        } else {
            res.json({ articles });
        }
    });
});

// 获取单篇文章
router.get('/:id', (req, res) => {
    Article.findById(req.params.id, (err, article) => {
        if (err) {
            console.log(err);
        } else {
            res.json({ article });
        }
    });
});

// 新增文章
router.post('/', (req, res) => {
    const article = new Article(req.body);
    article.save()
        .then(() => res.json({ success: true }))
        .catch(err => console.log(err));
});

// 更新文章
router.put('/:id', (req, res) => {
    Article.findByIdAndUpdate(req.params.id, req.body, { new: true }, (err, article) => {
        if (err) {
            console.log(err);
        } else {
            res.json({ article });
        }
    });
});

// 删除文章
router.delete('/:id', (req, res) => {
    Article.findByIdAndRemove(req.params.id, (err, article) => {
        if (err) {
            console.log(err);
        } else {
            res.json({ article });
        }
    });
});

module.exports = router;

このファイルでは、記事リストの取得、単一の記事の取得、新しい記事の追加、記事の更新、記事の削除など、記事に関連するすべてのルーティング処理ロジックを定義します。

5. フロントエンド開発

この場合、Vue.js コンポーネントを使用してフロントエンド開発を完了します。 Vue.jsのコンポーネントを格納するために「client/src」フォルダの下に「components」というフォルダを作成します。このフォルダの下に記事を実装する「Articles」という名前のコンポーネントを作成します。リスト表示、追加、編集、削除:

<template>
    <div>
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Title</th>
                    <th>Author</th>
                    <th>Created At</th>
                    <th>Updated At</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{{ article._id }}</td>
                    <td>{{ article.title }}</td>
                    <td>{{ article.author }}</td>
                    <td>{{ article.created_at }}</td>
                    <td>{{ article.updated_at }}</td>
                    <td>
                        <button>Edit</button>
                        <button>Delete</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            <form>
                <input>
                <input>
                <textarea></textarea>
                <button>{{ isNew ? 'Create' : 'Update' }}</button>
            </form>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                articles: [],
                article: {
                    title: &#39;&#39;,
                    author: &#39;&#39;,
                    content: &#39;&#39;
                },
                isNew: true
            }
        },
        created() {
            this.getArticles();
        },
        methods: {
            getArticles() {
                fetch(&#39;/api/articles&#39;)
                    .then(res => res.json())
                    .then(data => this.articles = data.articles)
                    .catch(err => console.log(err));
            },
            createArticle() {
                fetch(&#39;/api/articles&#39;, {
                    method: &#39;POST&#39;,
                    headers: {
                        &#39;Content-Type&#39;: &#39;application/json&#39;
                    },
                    body: JSON.stringify(this.article)
                })
                    .then(res => res.json())
                    .then(data => {
                        if (data.success) {
                            this.article = { title: &#39;&#39;, author: &#39;&#39;, content: &#39;&#39; };
                            this.getArticles();
                        }
                    })
                    .catch(err => console.log(err));
            },
            updateArticle(id) {
                fetch(`/api/articles/${id}`, {
                    method: &#39;PUT&#39;,
                    headers: {
                        &#39;Content-Type&#39;: &#39;application/json&#39;
                    },
                    body: JSON.stringify(this.article)
                })
                    .then(res => res.json())
                    .then(data => {
                        if (data.article) {
                            this.article = { title: &#39;&#39;, author: &#39;&#39;, content: &#39;&#39; };
                            this.isNew = true;
                            this.getArticles();
                        }
                    })
                    .catch(err => console.log(err));
            },
            deleteArticle(id) {
                fetch(`/api/articles/${id}`, {
                    method: &#39;DELETE&#39;
                })
                    .then(res => res.json())
                    .then(data => {
                        if (data.article) {
                            this.getArticles();
                        }
                    })
                    .catch(err => console.log(err));
            },
            submit() {
                if (this.isNew) {
                    this.createArticle();
                } else {
                    this.updateArticle(this.article._id);
                }
            },
            edit(id) {
                const article = this.articles.find(a => a._id === id);
                this.article = { ...article };
                this.isNew = false;
            },
            del(id) {
                const article = this.articles.find(a => a._id === id);
                if (window.confirm(`Are you sure to delete article: ${article.title}?`)) {
                    this.deleteArticle(id);
                }
            }
        }
    }
</script>

<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    td, th {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }
    tr:nth-child(even) {
        background-color: #f2f2f2;
    }
    form {
        display: flex;
        flex-direction: column;
    }
    textarea {
        height: 100px;
    }
    button {
        margin-top: 10px;
        padding: 8px 16px;
        background-color: #1E6FAF;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    button:hover {
        background-color: #15446F;
    }
</style>

このコンポーネントでは、「Articles」という名前の Vue.js コンポーネントを定義し、記事一覧の表示、追加、編集、削除機能を実装します。このコンポーネントは、バックエンド API を呼び出して、取得、作成、 fetch() 関数を通じて記事を更新および削除します。

6. アプリケーションの開始

バックエンドとフロントエンドの開発が完了したら、アプリケーションを開始してコードが適切に動作するかどうかを確認する必要があります。コマンド ラインにプロジェクトのルート ディレクトリを入力し、「サーバー」フォルダーと「クライアント」フォルダーで次のコマンドをそれぞれ実行します。

npm install
npm start

このコマンドは、バックエンド サービスとフロントエンド サービスをそれぞれ開始して開きます。ブラウザのフロントエンド アプリケーション。ブラウザに「http://localhost:8080」と入力して、記事公開および管理システムにアクセスします。

7. 概要

Node.js と Vue.js を組み合わせると、フルスタック Web アプリケーションを迅速に構築し、効率的な開発と優れたユーザー エクスペリエンスを実現できます。この記事では、実践的なプロジェクトを通じて Node.js と Vue.js を使用してフルスタック Web アプリケーションを構築する方法を示します。この記事は、開発者が Node.js と Vue.js のアプリケーションをより深く理解するのに役立つと信じています。

以上がNode.js と Vue.js を使用してフルスタック プロジェクトを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。