Node.js、MongoDB 和 Vue.js 携手构建 TodoList

使用 Node.js、Vue.js 和 MongoDB 构建全栈 JavaScript TodoList 应用

概述

全栈 JavaScript 开发正成为一个越来越受欢迎的趋势，它使开发人员能够使用一种语言和技术来处理前端和后端。本教程将带你逐步完成使用 Node.js、Vue.js 和 MongoDB 构建全栈 JavaScript TodoList 应用的过程，提供一个实际示例来说明全栈开发的强大功能。

Node.js 后端

1. 项目初始化

首先，创建一个新的 Node.js 项目：

mkdir todolist-app
cd todolist-app
npm init -y

2. 安装依赖项

安装必要的依赖项：

npm install express
npm install mongoose

3. 搭建 Express 应用

创建一个新的 Express 应用，并设置路由：

const express = require('express');
const app = express();

app.get('/', (req, res) => { res.send('Hello, world!'); });
app.listen(3000, () => { console.log('Server is listening on port 3000'); });

4. 连接 MongoDB

连接 MongoDB 数据库：

const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/todolist');

Vue.js 前端

1. 项目初始化

创建一个新的 Vue.js 项目：

vue create todolist-frontend

2. 编写 App 组件

<template>
  <div id="app">
    <h1>Todo List</h1>
    <ul>
      <li v-for="todo in todos" :key="todo._id">{{ todo.title }}</li>
    </ul>
    <form @submit.prevent="addTodo">
      <input type="text" v-model="newTodoTitle">
      <button type="submit">Add</button>
    </form>
  </div>
</template>

<script>
export default {
  data() { return { todos: [], newTodoTitle: '' } },
  methods: {
    addTodo() {
      const todo = { title: this.newTodoTitle };
      axios.post('/api/todos', todo).then(response => {
        this.todos.push(response.data);
        this.newTodoTitle = '';
      });
    }
  },
  mounted() {
    axios.get('/api/todos').then(response => { this.todos = response.data; });
  }
}
</script>

连接前端和后端

1. 定义后端 Todo 模型

const TodoSchema = new mongoose.Schema({ title: String });
const Todo = mongoose.model('Todo', TodoSchema);

2. 添加 API 路由

app.get('/api/todos', async (req, res) => { res.json(await Todo.find()); });
app.post('/api/todos', async (req, res) => { res.json(await Todo.create(req.body)); });

3. 使用 Axios 发送 HTTP 请求

import axios from 'axios';

addTodo() {
  const todo = { title: this.newTodoTitle };
  axios.post('/api/todos', todo).then(response => {
    this.todos.push(response.data);
    this.newTodoTitle = '';
  });
}

运行应用

npm start // Node.js 后端
npm run serve // Vue.js 前端

常见问题解答

1. 什么是全栈 JavaScript 开发？
全栈 JavaScript 开发使用 JavaScript 作为前端和后端开发的唯一语言和技术。

2. 为什么使用 Node.js 进行后端开发？
Node.js 是一个轻量级且高效的 JavaScript 运行时，非常适合构建高性能的 Web 应用。

3. 为什么使用 Vue.js 进行前端开发？
Vue.js 是一个渐进式的 JavaScript 框架，具有轻量级、灵活性和数据响应性等优点。

4. 为什么使用 MongoDB 进行数据存储？
MongoDB 是一个非关系型数据库，可以轻松存储和管理 JSON 格式的数据，非常适合 TodoList 等应用。

5. 如何部署全栈 JavaScript 应用？
你可以使用 Heroku、AWS 或其他云平台来部署你的全栈 JavaScript 应用，以便让其他人访问。