所属分类：web前端开发
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。在命令行中输入以下命令：
微博登录
QQ登录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 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()函数来获取、创建、更新和删除文章。
六、启动应用程序
在完成了后端和前端开发之后，我们需要启动应用程序来验证我们的代码是否工作正常。在命令行中进入项目根目录，并分别在“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怎么搭建一个全栈项目的详细内容，更多请关注zzsucai.com其它相关文章！
