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 class="articles">
<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 v-for="article in articles" :key="article._id">
<td>{{ article._id }}</td>
<td>{{ article.title }}</td>
<td>{{ article.author }}</td>
<td>{{ article.created_at }}</td>
<td>{{ article.updated_at }}</td>
<td>
<button @click="edit(article._id)">Edit</button>
<button @click="del(article._id)">Delete</button>
</td>
</tr>
</tbody>
</table>
<div class="form">
<form @submit.prevent="submit">
<input type="text" v-model="article.title" placeholder="Title">
<input type="text" v-model="article.author" placeholder="Author">
<textarea v-model="article.content" placeholder="Content"></textarea>
<button type="submit">{{ isNew ? 'Create' : 'Update' }}</button>
</form>
</div>
</div>
</template>
<script>
export default {
data() {
return {
articles: [],
article: {
title: '',
author: '',
content: ''
},
isNew: true
}
},
created() {
this.getArticles();
},
methods: {
getArticles() {
fetch('/api/articles')
.then(res => res.json())
.then(data => this.articles = data.articles)
.catch(err => console.log(err));
},
createArticle() {
fetch('/api/articles', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(this.article)
})
.then(res => res.json())
.then(data => {
if (data.success) {
this.article = { title: '', author: '', content: '' };
this.getArticles();
}
})
.catch(err => console.log(err));
},
updateArticle(id) {
fetch(`/api/articles/${id}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(this.article)
})
.then(res => res.json())
.then(data => {
if (data.article) {
this.article = { title: '', author: '', content: '' };
this.isNew = true;
this.getArticles();
}
})
.catch(err => console.log(err));
},
deleteArticle(id) {
fetch(`/api/articles/${id}`, {
method: 'DELETE'
})
.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 scoped>
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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
