Comment créer un projet full-stack avec Node.js et Vue.js-js tutoriel-php.cn

Node.js et Vue.js sont actuellement deux technologies très populaires. Node.js est une plate-forme de développement côté serveur fonctionnant sur JavaScript, tandis que Vue.js est un framework progressif pour la création d'interfaces utilisateur. La combinaison de ces deux technologies peut grandement améliorer l’efficacité du développement et l’expérience utilisateur des applications Web. Dans cet article, nous utiliserons un projet pratique pour montrer comment utiliser Node.js et Vue.js pour créer une application Web full-stack.

1. Introduction au projet

Nous développerons un système simple de publication et de gestion d'articles. Les utilisateurs pourront s'inscrire et se connecter pour publier des articles, commenter et consulter les articles publiés par d'autres utilisateurs. Afin de réaliser cette fonction, nous utiliserons Node.js comme langage de développement back-end et cadre technologique, Vue.js comme cadre de développement front-end et MongoDB comme base de données.

2. Configuration de l'environnement

Avant de commencer le développement, vous devez d'abord configurer l'environnement de développement de Node.js, Vue.js et MongoDB dans l'environnement local.

1. Installez Node.js : vous pouvez télécharger le package d'installation de Node.js depuis le site officiel pour l'installation.

2. Installez Vue.js : vous pouvez utiliser l'outil de ligne de commande npm pour installer Vue.js. Entrez la commande suivante sur la ligne de commande :

npm install -g vue-cli

Copier après la connexion

3. Installez MongoDB : Vous pouvez télécharger le package d'installation de MongoDB depuis le site officiel et l'installer.

3. Structure du projet

Nous divisons le projet en deux parties : front-end et back-end, nous devons donc créer deux dossiers pour stocker le code de ces deux parties. Nous pouvons créer un fichier nommé " node-vue. -app" pour stocker l'intégralité du projet.

1. Créez la partie backend

Créez un dossier nommé "server" sous le dossier "node-vue-app", et créez un fichier nommé "app.js" sous le dossier. Le fichier servira de service backend. fichier d'entrée. Dans le même temps, nous devons créer un dossier nommé « routes » sous le dossier « serveur » pour stocker le code de routage ; et créer un dossier nommé « modèles » sous le dossier « serveur » pour stocker le code du modèle de données. .

2. Créez la partie front-end

Créez un dossier nommé "client" sous le dossier "node-vue-app", où nous effectuerons le développement front-end. Un projet Vue.js peut être créé à l'aide des outils de ligne de commande fournis par Vue.js :

vue init webpack client

Copier après la connexion

Cette commande créera un dossier nommé "src" sous le dossier "client", qui contiendra tout notre code frontend.

4. Développement backend

Dans ce cas, nous utiliserons Express comme framework backend pour terminer le développement de l'API RESTful. Dans le fichier "app.js", nous devons introduire les modules et bibliothèques pertinents et initialiser l'application 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'));

Copier après la connexion

1 Définir le modèle de données

Nous devons définir notre modèle de données dans le dossier "models" et créer un. Fichier nommé "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);

Copier après la connexion

Dans ce fichier, nous définissons un modèle de données nommé "Article" et définissons la structure de données correspondante.

2. Définir les routes

Créez un fichier nommé "articles.js" sous le dossier "routes". Nous définirons la logique de traitement du routage liée à l'article dans ce fichier :

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;

Copier après la connexion

Dans ce fichier, nous définissons tous les traitements de routage. logique liée aux articles, y compris l'obtention d'une liste d'articles, l'obtention d'un article unique, l'ajout d'un article, la mise à jour d'un article et la suppression d'un article.

5. Développement front-end

Dans ce cas, nous utiliserons les composants Vue.js pour terminer le développement front-end. Créez un dossier nommé "components" sous le dossier "client/src" pour stocker les composants Vue.js. Nous allons créer un composant nommé "Articles" sous ce dossier, qui implémentera l'affichage, l'ajout, l'édition et la suppression de la liste :

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

Copier après la connexion

Dans ce composant, nous avons défini un composant Vue.js nommé "Articles" et implémenté les fonctions d'affichage, d'ajout, d'édition et de suppression de la liste d'articles. Ce composant appelle l'API backend pour obtenir, créer, mettre à jour et supprimer des articles via le. fonction récupérer().

6. Démarrez l'application

Après avoir terminé le développement back-end et front-end, nous devons démarrer l'application pour vérifier que notre code fonctionne correctement. Entrez le répertoire racine du projet dans la ligne de commande et exécutez les commandes suivantes respectivement dans les dossiers « serveur » et « client » :

npm install
npm start

Copier après la connexion

Cette commande démarrera respectivement les services back-end et front-end et ouvrira le front-end application dans le navigateur. Entrez « http://localhost:8080 » dans votre navigateur pour accéder à notre système de publication et de gestion d'articles.

7. Résumé

La combinaison de Node.js et Vue.js peut nous aider à créer rapidement une application Web full-stack et à réaliser un développement efficace et une bonne expérience utilisateur. Dans cet article, nous montrons comment utiliser Node.js et Vue.js pour créer une application Web full-stack via un projet pratique. Je pense que cet article peut aider les développeurs à mieux comprendre les applications de Node.js et Vue.js.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!