1. 前置知识
在开始介绍如何使用Node.js和Vue.js搭建全栈项目前，我们需要掌握一些基本的前置知识。
1.1 Node.js
Node.js是一个基于Chrome V8引擎的JavaScript运行环境，能够使JavaScript在服务器端运行，且具有事件驱动、异步IO等特性。
Node.js适用于一些高并发、实时性要求较高的应用，比如网络爬虫、聊天室、在线游戏等。
// 在Node.js中创建一个http服务器
const http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.write('Hello World!');
res.end();
}).listen(8080);
1.2 Vue.js
Vue.js是一套用于构建用户界面的渐进式JavaScript框架，它通过组件化的方式构建用户界面，并提供了很多实用的开发工具和插件。
Vue.js适用于构建一些交互性较强的单页面应用，比如在线编辑器、论坛、电商等。
// 在Vue.js中定义一个组件
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}
})
2. 搭建全栈项目的基本步骤
下面我们来看看如何使用Node.js和Vue.js搭建一个全栈项目。
2.1 创建项目文件夹
首先，我们需要在本地创建一个文件夹，用来存放我们的项目代码。
// 在命令行中使用mkdir命令创建文件夹
mkdir my-project
2.2 初始化npm
接着，我们需要初始化npm，这样我们就可以使用npm来管理我们的项目依赖。
// 在命令行中使用npm init命令初始化npm
cd my-project
npm init
2.3 安装Node.js依赖
我们需要安装一些Node.js的依赖，来帮助我们开发全栈项目。
// 使用npm安装Node.js依赖
npm install express body-parser mongoose nodemon --save
其中，Express是一个流行的Node.js Web框架，用于开发后端API接口；Body-parser是一个Express中间件，用于解析HTTP请求体；Mongoose是一个MongoDB对象建模工具，用于在Node.js应用中定义数据模型；Nodemon是一个工具，用于在Node.js应用代码发生变化时自动重启应用。
2.4 创建Node.js后端API
接下来，我们需要在项目中创建一个Node.js后端API文件，用于处理HTTP请求，并与MongoDB数据库进行交互。
2.5 创建Vue.js前端页面
最后，我们需要创建Vue.js前端页面，用于向后端API发送HTTP请求，并显示返回数据。
3. 全栈项目示例
下面是一个基于Node.js和Vue.js的全栈项目示例。该项目使用Express作为后端框架，Mongoose作为对象建模工具，前端页面使用Vue.js构建，实现了一个简单的TODO List应用。
3.1 创建Node.js后端API
首先，我们需要在项目中创建一个Node.js后端API文件，用于处理HTTP请求，并与MongoDB数据库进行交互。我们可以在项目根目录创建一个server.js文件，用于编写后端API代码。
// 导入第三方依赖
const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
// 创建Express服务器
const app = express();
// 解析application/json请求体
app.use(bodyParser.json());
// 连接MongoDB数据库
mongoose.connect('mongodb://localhost/todo-list', { useNewUrlParser: true });
// 定义数据模型
const TodoItem = mongoose.model('TodoItem', { text: String });
// 定义API接口
app.post('/api/todo', (req, res) => {
const todoItem = new TodoItem({ text: req.body.text });
todoItem.save((err) => {
if (err) {
res.status(500).send('Server Error');
} else {
res.send('Todo Item saved successfully');
}
});
});
// 启动Express服务器
app.listen(3000, () => {
console.log('Server listening on port 3000');
})
在此示例中，我们创建了一个POST类型的API接口，用于创建TODO List项。接口接收一个JSON格式的请求体，解析出text属性，然后将该属性存储到MongoDB数据库中。
3.2 创建Vue.js前端页面
接下来，我们需要创建Vue.js前端页面，用于向后端API发送HTTP请求，并显示返回数据。我们可以在项目根目录创建一个index.html文件，用于编写前端页面代码。
<!DOCTYPE html>
<html>
<head>
<title>TODO List</title>
</head>
<body>
<div id="app">
<h1>TODO List</h1>
<form v-on:submit.prevent="addItem">
<input type="text" v-model="newItemText">
<button type="submit">Add</button>
</form>
<ul>
<li v-for="item in items">{{ item.text }}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 创建Vue实例
new Vue({
// 绑定HTML元素
el: '#app',
// 定义数据
data: {
newItemText: '',
items: []
},
// 定义方法
methods: {
addItem: function () {
// 向后端API发送HTTP请求
axios.post('/api/todo', {
text: this.newItemText
}).then((response) => {
// 接收后端API返回数据，并更新页面中的items列表
this.items.push({ text: this.newItemText });
this.newItemText = '';
}).catch((error) => {
console.error(error);
});
}
}
});
</script>
</body>
</html>
在此示例中，我们使用了Vue.js的模板语法，绑定HTML元素和数据模型。我们定义了一个名为addItem的方法，用于向后端API发送HTTP请求，并更新页面中的items列表。该方法使用了Axios库，用于发送HTTP请求。
4. 总结
本文介绍了如何使用Node.js和Vue.js搭建一个全栈项目。我们首先学习了Node.js和Vue.js的一些基本概念，然后介绍了搭建全栈项目的基本步骤，最后通过一个简单的TODO List应用示例，展示了如何使用Node.js和Vue.js开发全栈项目。