Node.js与Vue.js怎么搭建一个全栈项目-js教程-PHP中文网

首页

web前端

js教程

Node.js与Vue.js怎么搭建一个全栈项目

PHPz

Apr 05, 2023 pm 01:50 PM

Node.js和Vue.js是当前非常流行的两个技术，其中Node.js是基于JavaScript运行的服务器端开发平台，而Vue.js则是用于构建用户界面的渐进式框架。这两个技术的结合可以极大地提高Web应用的开发效率和用户体验。在本文中，我们将通过一个实际的项目来展示如何使用Node.js和Vue.js搭建一个全栈Web应用。

一、项目介绍

我们将开发一个简单的文章发布和管理系统，用户可以通过注册登录发布文章、评论以及查看其他用户发布的文章。为了实现这一功能，我们将使用Node.js作为后端开发语言和技术框架，使用Vue.js作为前端开发框架，并使用MongoDB作为数据库。

二、环境搭建

在开始开发之前，首先需要在本地环境中搭建好Node.js、Vue.js和MongoDB的开发环境。

1、安装Node.js：可以从官网下载Node.js的安装包进行安装。

2、安装Vue.js：可以使用npm命令行工具安装Vue.js。在命令行中输入以下命令：

npm install -g vue-cli

3、安装MongoDB：可以从官网下载MongoDB的安装包并安装。

三、项目结构

我们将项目分为前端和后端两个部分，因此需要分别创建两个文件夹来存放这两部分的代码，我们可以在项目的根目录下创建一个名为“node-vue-app”的文件夹来存放整个项目。

1、创建后端部分

在“node-vue-app”文件夹下创建一个名为“server”的文件夹，在该文件夹下创建一个名为“app.js”的文件，该文件将作为我们的后端服务入口文件。同时，我们需要在“server”文件夹下创建一个名为“routes”的文件夹，用于存放路由代码；并在“server”文件夹下创建一个名为“models”的文件夹，用于存放数据模型代码。

2、创建前端部分

在“node-vue-app”文件夹下创建一个名为“client”的文件夹，我们将在该文件夹下进行前端开发。可以使用Vue.js提供的命令行工具创建一个Vue.js项目：

vue init webpack client

该命令将在“client”文件夹下创建一个名为“src”的文件夹，该文件夹将包含我们的所有前端代码。

四、后端开发

在本案例中，我们将使用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;

在该文件中，我们定义了文章相关的所有路由处理逻辑，包括获取文章列表、获取单篇文章、新增文章、更新文章和删除文章。

五、前端开发

在本案例中，我们将使用Vue.js组件来完成前端开发。在“client/src”文件夹下创建一个名为“components”的文件夹，用于存放Vue.js组件，我们将在该文件夹下创建一个名为“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()函数来获取、创建、更新和删除文章。

六、启动应用程序

在完成了后端和前端开发之后，我们需要启动应用程序来验证我们的代码是否工作正常。在命令行中进入项目根目录，并分别在“server”和“client”文件夹下执行以下命令：

npm install
npm start

该命令将分别启动后端和前端服务，并在浏览器中打开前端应用程序。在浏览器中输入“http://localhost:8080”即可访问我们的文章发布和管理系统。

七、总结

Node.js和Vue.js的结合可以帮助我们快速搭建一个全栈Web应用，并且可以实现高效的开发和良好的用户体验。在本文中，我们通过一个实际的项目展示了如何使用Node.js和Vue.js搭建一个全栈Web应用，相信本文可以帮助各位开发者更好地理解Node.js和Vue.js的应用。

以上是Node.js与Vue.js怎么搭建一个全栈项目的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

Python vs. JavaScript：您应该学到哪种语言？May 03, 2025 am 12:10 AM

选择Python还是JavaScript应基于职业发展、学习曲线和生态系统：1)职业发展：Python适合数据科学和后端开发，JavaScript适合前端和全栈开发。2)学习曲线：Python语法简洁，适合初学者；JavaScript语法灵活。3)生态系统：Python有丰富的科学计算库，JavaScript有强大的前端框架。

JavaScript框架：为现代网络开发提供动力May 02, 2025 am 12:04 AM

JavaScript框架的强大之处在于简化开发、提升用户体验和应用性能。选择框架时应考虑：1.项目规模和复杂度，2.团队经验，3.生态系统和社区支持。

JavaScript，C和浏览器之间的关系May 01, 2025 am 12:06 AM

引言我知道你可能会觉得奇怪，JavaScript、C 和浏览器之间到底有什么关系？它们之间看似毫无关联，但实际上，它们在现代网络开发中扮演着非常重要的角色。今天我们就来深入探讨一下这三者之间的紧密联系。通过这篇文章，你将了解到JavaScript如何在浏览器中运行，C 在浏览器引擎中的作用，以及它们如何共同推动网页的渲染和交互。JavaScript与浏览器的关系我们都知道，JavaScript是前端开发的核心语言，它直接在浏览器中运行，让网页变得生动有趣。你是否曾经想过，为什么JavaScr