So erstellen Sie ein Full-Stack-Projekt mit Node.js und Vue.js-js-Tutorial-php.cn

Node.js und Vue.js sind derzeit zwei sehr beliebte Technologien. Node.js ist eine serverseitige Entwicklungsplattform, die auf JavaScript läuft, während Vue.js ein fortschrittliches Framework zum Erstellen von Benutzeroberflächen ist. Die Kombination dieser beiden Technologien kann die Entwicklungseffizienz und das Benutzererlebnis von Webanwendungen erheblich verbessern. In diesem Artikel zeigen wir anhand eines praktischen Projekts, wie Sie mit Node.js und Vue.js eine Full-Stack-Webanwendung erstellen.

1. Projekteinführung

Wir werden ein einfaches System zur Veröffentlichung und Verwaltung von Artikeln entwickeln. Benutzer können sich registrieren und anmelden, um von anderen Benutzern veröffentlichte Artikel zu veröffentlichen, zu kommentieren und anzusehen. Um diese Funktion zu erreichen, verwenden wir Node.js als Back-End-Entwicklungssprache und Technologie-Framework, Vue.js als Front-End-Entwicklungs-Framework und MongoDB als Datenbank.

2. Umgebungseinrichtung

Bevor Sie mit der Entwicklung beginnen, müssen Sie zunächst die Entwicklungsumgebung von Node.js, Vue.js und MongoDB in der lokalen Umgebung einrichten.

1. Node.js installieren: Sie können das Node.js-Installationspaket zur Installation von der offiziellen Website herunterladen.

2. Vue.js installieren: Sie können das npm-Befehlszeilentool verwenden, um Vue.js zu installieren. Geben Sie in der Befehlszeile den folgenden Befehl ein:

npm install -g vue-cli

Nach dem Login kopieren

3. MongoDB installieren: Sie können das MongoDB-Installationspaket von der offiziellen Website herunterladen und installieren.

3. Projektstruktur

Wir unterteilen das Projekt in zwei Teile: Front-End und Back-End, daher müssen wir zwei Ordner erstellen, um den Code dieser beiden Teile zu speichern -app“-Ordner, um das gesamte Projekt zu speichern.

1. Erstellen Sie den Backend-Teil

Erstellen Sie einen Ordner mit dem Namen „server“ unter dem Ordner „node-vue-app“ und erstellen Sie eine Datei mit dem Namen „app.js“ unter dem Ordner. Die Datei dient als unser Backend-Dienst Eintragsdatei. Gleichzeitig müssen wir einen Ordner mit dem Namen „routes“ unter dem Ordner „server“ erstellen, um den Routing-Code zu speichern, und einen Ordner mit dem Namen „models“ unter dem Ordner „server“, um den Routing-Code des Datenmodells zu speichern .

2. Erstellen Sie den Frontend-Teil

Erstellen Sie einen Ordner mit dem Namen „client“ unter dem Ordner „node-vue-app“, in dem wir die Frontend-Entwicklung durchführen. Ein Vue.js-Projekt kann mit den von Vue.js bereitgestellten Befehlszeilentools erstellt werden:

vue init webpack client

Nach dem Login kopieren

Dieser Befehl erstellt einen Ordner mit dem Namen „src“ unter dem Ordner „client“, der unseren gesamten Frontend-Code enthält.

4. Backend-Entwicklung

In diesem Fall verwenden wir Express als Backend-Framework, um die Entwicklung der RESTful API abzuschließen. In der Datei „app.js“ müssen wir relevante Module und Bibliotheken einführen und die Express-Anwendung initialisieren:

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'));

Nach dem Login kopieren

1. Definieren Sie das Datenmodell

Wir müssen unser Datenmodell im Ordner „models“ definieren und ein erstellen Datei mit dem Namen „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);

Nach dem Login kopieren

In dieser Datei definieren wir ein Datenmodell mit dem Namen „Article“ und definieren die entsprechende Datenstruktur.

2. Routen definieren

Erstellen Sie eine Datei mit dem Namen „articles.js“ im Ordner „routes“ Wir definieren die artikelbezogene Routing-Verarbeitungslogik in dieser Datei:

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;

Nach dem Login kopieren

In dieser Datei definieren wir die gesamte Routing-Verarbeitung Logik im Zusammenhang mit Artikeln, einschließlich Abrufen einer Artikelliste, Abrufen einzelner Artikel, Hinzufügen von Artikeln, Aktualisieren von Artikeln und Löschen von Artikeln.

5. Front-End-Entwicklung

In diesem Fall verwenden wir Vue.js-Komponenten, um die Front-End-Entwicklung abzuschließen. Erstellen Sie einen Ordner mit dem Namen „components“ unter dem Ordner „client/src“, um Vue.js-Komponenten zu speichern. Unter diesem Ordner erstellen wir eine Komponente mit dem Namen „Articles“, die das Anzeigen, Hinzufügen, Bearbeiten und Löschen von Artikeln implementiert:

<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>

Nach dem Login kopieren

In dieser Komponente haben wir eine Vue.js-Komponente namens „Articles“ definiert und die Anzeige-, Hinzufügungs-, Bearbeitungs- und Löschfunktionen der Artikelliste implementiert. Diese Komponente ruft die Backend-API auf, um Artikel über zu erhalten, zu erstellen, zu aktualisieren und zu löschen fetch()-Funktion.

6. Starten Sie die Anwendung

Nach Abschluss der Back-End- und Front-End-Entwicklung müssen wir die Anwendung starten, um zu überprüfen, ob unser Code ordnungsgemäß funktioniert. Geben Sie das Stammverzeichnis des Projekts in die Befehlszeile ein und führen Sie die folgenden Befehle unter den Ordnern „Server“ und „Client“ aus:

npm install
npm start

Nach dem Login kopieren

Dieser Befehl startet die Back-End- und Front-End-Dienste und öffnet das Front-End Anwendung im Browser. Geben Sie „http://localhost:8080“ in Ihren Browser ein, um auf unser Artikelveröffentlichungs- und Verwaltungssystem zuzugreifen.

7. Zusammenfassung

Die Kombination von Node.js und Vue.js kann uns helfen, schnell eine Full-Stack-Webanwendung zu erstellen und eine effiziente Entwicklung und eine gute Benutzererfahrung zu erreichen. In diesem Artikel zeigen wir anhand eines praktischen Projekts, wie man mit Node.js und Vue.js eine Full-Stack-Webanwendung erstellt. Ich glaube, dass dieser Artikel Entwicklern helfen kann, die Anwendungen von Node.js und Vue.js besser zu verstehen.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Full-Stack-Projekt mit Node.js und Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!