Node.js + MongoDB + Vue 3 全栈应用项目开发

前端青山2024-11-10 17:21

​🌈个人主页：前端青山

🔥系列专栏：node.js篇

🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来node.js篇专栏内容:Node.js + MongoDB + Vue 3 全栈应用项目开发

在前几篇文章中，我们已经为 Node.js 应用添加了身份验证、CORS 配置、缓存机制、性能监控、限流功能和日志优化。本文将继续在这个基础上，逐步构建一个完整的 Node.js + MongoDB + Vue 3 全栈应用。我们将从项目结构设计、前后端交互、数据模型设计等方面入手，逐步实现一个功能完善的全栈应用。

目录

[1. 项目概述](#1. 项目概述)

[2. 项目结构设计](#2. 项目结构设计)

[3. 数据模型设计](#3. 数据模型设计)

[3.1 用户模型](#3.1 用户模型)

[3.2 任务模型](#3.2 任务模型)

[4. 后端 API 开发](#4. 后端 API 开发)

[4.1 用户模块](#4.1 用户模块)

[4.1.1 用户注册](#4.1.1 用户注册)

[4.1.2 用户登录](#4.1.2 用户登录)

[4.1.3 获取用户信息](#4.1.3 获取用户信息)

[4.2 项目模块](#4.2 项目模块)

[4.2.1 创建任务](#4.2.1 创建任务)

[4.2.2 获取任务列表](#4.2.2 获取任务列表)

[4.2.3 更新任务](#4.2.3 更新任务)

[4.2.4 删除任务](#4.2.4 删除任务)

[5. 前端 Vue 3 应用开发](#5. 前端 Vue 3 应用开发)

[5.1 项目初始化](#5.1 项目初始化)

[5.2 组件开发](#5.2 组件开发)

[5.2.1 登录组件](#5.2.1 登录组件)

[5.2.2 注册组件](#5.2.2 注册组件)

[5.2.3 任务列表组件](#5.2.3 任务列表组件)

[5.3 状态管理](#5.3 状态管理)

[6. 前后端联调](#6. 前后端联调)

[6.1 路由配置](#6.1 路由配置)

[6.2 主页组件](#6.2 主页组件)

[6.3 登录和注册页面](#6.3 登录和注册页面)

[7. 部署与测试](#7. 部署与测试)

[7.1 部署后端](#7.1 部署后端)

[7.2 部署前端](#7.2 部署前端)

[7.3 测试](#7.3 测试)

[8. 总结与展望](#8. 总结与展望)

1. 项目概述

我们的目标是构建一个简单的任务管理应用，用户可以注册、登录、创建和管理任务。应用的主要功能包括：

  • 用户注册和登录
  • 用户信息管理
  • 任务创建、编辑和删除
  • 任务列表展示

2. 项目结构设计

为了保持项目的清晰和可维护性，我们将项目分为前后端两部分。项目结构如下：

javascript 复制代码 
task-manager/
├── backend/
│   ├── node_modules/
│   ├── src/
│   │   ├── controllers/
│   │   ├── models/
│   │   ├── routes/
│   │   ├── middlewares/
│   │   ├── config/
│   │   ├── app.js
│   │   ├── server.js
│   ├── .env
│   ├── package.json
│   └── README.md
├── frontend/
│   ├── node_modules/
│   ├── public/
│   │   └── index.html
│   ├── src/
│   │   ├── assets/
│   │   ├── components/
│   │   ├── views/
│   │   ├── store/
│   │   ├── router/
│   │   ├── App.vue
│   │   └── main.js
│   ├── .env
│   ├── package.json
│   └── README.md
├── .gitignore
└── README.md

3. 数据模型设计

我们将使用 MongoDB 作为数据库，定义两个主要的数据模型：用户和任务。

3.1 用户模型

用户模型包含以下字段：

  • username：用户名
  • email：邮箱
  • password：密码（加密存储）
  • createdAt：创建时间
  • updatedAt：更新时间

在 backend/src/models/user.js 中定义用户模型：

javascript 复制代码 
const mongoose = require('mongoose');
const bcrypt = require('bcryptjs');

const UserSchema = new mongoose.Schema({
  username: { type: String, required: true, unique: true },
  email: { type: String, required: true, unique: true },
  password: { type: String, required: true },
  createdAt: { type: Date, default: Date.now },
  updatedAt: { type: Date, default: Date.now }
});

UserSchema.pre('save', async function(next) {
  if (!this.isModified('password')) return next();
  this.password = await bcrypt.hash(this.password, 10);
  next();
});

UserSchema.methods.comparePassword = async function(candidatePassword) {
  return await bcrypt.compare(candidatePassword, this.password);
};

const User = mongoose.model('User', UserSchema);

module.exports = User;
3.2 任务模型

任务模型包含以下字段：

  • title：任务标题
  • description：任务描述
  • status：任务状态（未完成、已完成）
  • userId：关联用户 ID
  • createdAt：创建时间
  • updatedAt：更新时间

在 backend/src/models/task.js 中定义任务模型：

javascript 复制代码 
const mongoose = require('mongoose');

const TaskSchema = new mongoose.Schema({
  title: { type: String, required: true },
  description: { type: String, required: true },
  status: { type: String, enum: ['未完成', '已完成'], default: '未完成' },
  userId: { type: mongoose.Schema.Types.ObjectId, ref: 'User', required: true },
  createdAt: { type: Date, default: Date.now },
  updatedAt: { type: Date, default: Date.now }
});

const Task = mongoose.model('Task', TaskSchema);

module.exports = Task;

4. 后端 API 开发

4.1 用户模块
4.1.1 用户注册

在 backend/src/controllers/userController.js 中实现用户注册功能：

javascript 复制代码 
const User = require('../models/user');
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');

exports.register = async (req, res) => {
  const { username, email, password } = req.body;

  try {
    let user = await User.findOne({ email });
    if (user) {
      return res.status(400).json({ msg: 'User already exists' });
    }

    user = new User({ username, email, password });
    await user.save();

    const payload = { user: { id: user.id } };
    const token = jwt.sign(payload, process.env.JWT_SECRET, { expiresIn: '1h' });

    res.status(201).json({ token });
  } catch (err) {
    console.error(err.message);
    res.status(500).send('Server error');
  }
};
4.1.2 用户登录

在 backend/src/controllers/userController.js 中实现用户登录功能：

javascript 复制代码 
exports.login = async (req, res) => {
  const { email, password } = req.body;

  try {
    let user = await User.findOne({ email });
    if (!user) {
      return res.status(400).json({ msg: 'Invalid credentials' });
    }

    const isMatch = await user.comparePassword(password);
    if (!isMatch) {
      return res.status(400).json({ msg: 'Invalid credentials' });
    }

    const payload = { user: { id: user.id } };
    const token = jwt.sign(payload, process.env.JWT_SECRET, { expiresIn: '1h' });

    res.json({ token });
  } catch (err) {
    console.error(err.message);
    res.status(500).send('Server error');
  }
};
4.1.3 获取用户信息

在 backend/src/controllers/userController.js 中实现获取用户信息功能：

javascript 复制代码 
exports.getUser = async (req, res) => {
  try {
    const user = await User.findById(req.user.id).select('-password');
    if (!user) {
      return res.status(404).json({ msg: 'User not found' });
    }

    res.json(user);
  } catch (err) {
    console.error(err.message);
    res.status(500).send('Server error');
  }
};
4.2 项目模块
4.2.1 创建任务

在 backend/src/controllers/taskController.js 中实现创建任务功能：

javascript 复制代码 
const Task = require('../models/task');

exports.createTask = async (req, res) => {
  const { title, description } = req.body;

  try {
    const task = new Task({ title, description, userId: req.user.id });
    await task.save();

    res.status(201).json(task);
  } catch (err) {
    console.error(err.message);
    res.status(500).send('Server error');
  }
};
4.2.2 获取任务列表

在 backend/src/controllers/taskController.js 中实现获取任务列表功能：

javascript 复制代码 
exports.getTasks = async (req, res) => {
  try {
    const tasks = await Task.find({ userId: req.user.id }).sort({ createdAt: -1 });
    res.json(tasks);
  } catch (err) {
    console.error(err.message);
    res.status(500).send('Server error');
  }
};
4.2.3 更新任务

在 backend/src/controllers/taskController.js 中实现更新任务功能：

javascript 复制代码 
exports.updateTask = async (req, res) => {
  const { title, description, status } = req.body;

  try {
    let task = await Task.findById(req.params.id);
    if (!task) {
      return res.status(404).json({ msg: 'Task not found' });
    }

    if (task.userId.toString() !== req.user.id) {
      return res.status(401).json({ msg: 'Not authorized' });
    }

    task.title = title;
    task.description = description;
    task.status = status;

    await task.save();

    res.json(task);
  } catch (err) {
    console.error(err.message);
    res.status(500).send('Server error');
  }
};
4.2.4 删除任务

在 backend/src/controllers/taskController.js 中实现删除任务功能：

javascript 复制代码 
exports.deleteTask = async (req, res) => {
  try {
    let task = await Task.findById(req.params.id);
    if (!task) {
      return res.status(404).json({ msg: 'Task not found' });
    }

    if (task.userId.toString() !== req.user.id) {
      return res.status(401).json({ msg: 'Not authorized' });
    }

    await task.remove();

    res.json({ msg: 'Task deleted' });
  } catch (err) {
    console.error(err.message);
    res.status(500).send('Server error');
  }
};

5. 前端 Vue 3 应用开发

5.1 项目初始化

首先，我们需要初始化 Vue 3 项目。打开终端，导航到 frontend 目录，然后运行以下命令：

bash 复制代码 
npm init vue@latest

按照提示完成项目初始化。安装完成后，进入项目目录并安装依赖：

javascript 复制代码 
cd frontend npm install
5.2 组件开发
5.2.1 登录组件

在 frontend/src/components/Login.vue 中创建登录组件：

javascript 复制代码 
<template>
  <div class="login">
    <h2>Login</h2>
    <form @submit.prevent="handleLogin">
      <div class="form-group">
        <label for="email">Email</label>
        <input type="email" v-model="email" required />
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" v-model="password" required />
      </div>
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      email: '',
      password: ''
    };
  },
  methods: {
    async handleLogin() {
      try {
        const response = await axios.post('http://localhost:3000/auth/login', {
          email: this.email,
          password: this.password
        });
        localStorage.setItem('token', response.data.token);
        this.$router.push('/tasks');
      } catch (error) {
        alert('Login failed');
      }
    }
  }
};
</script>

<style scoped>
/* 添加一些样式 */
</style>
5.2.2 注册组件

在 frontend/src/components/Register.vue 中创建注册组件：

javascript 复制代码 
<template>
  <div class="register">
    <h2>Register</h2>
    <form @submit.prevent="handleRegister">
      <div class="form-group">
        <label for="username">Username</label>
        <input type="text" v-model="username" required />
      </div>
      <div class="form-group">
        <label for="email">Email</label>
        <input type="email" v-model="email" required />
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" v-model="password" required />
      </div>
      <button type="submit">Register</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      email: '',
      password: ''
    };
  },
  methods: {
    async handleRegister() {
      try {
        await axios.post('http://localhost:3000/auth/register', {
          username: this.username,
          email: this.email,
          password: this.password
        });
        this.$router.push('/login');
      } catch (error) {
        alert('Registration failed');
      }
    }
  }
};
</script>

<style scoped>
/* 添加一些样式 */
</style>
5.2.3 任务列表组件

在 frontend/src/components/TaskList.vue 中创建任务列表组件：

javascript 复制代码 
<template>
  <div class="task-list">
    <h2>Tasks</h2>
    <ul>
      <li v-for="task in tasks" :key="task._id">
        <span>{{ task.title }}</span>
        <button @click="deleteTask(task._id)">Delete</button>
      </li>
    </ul>
    <form @submit.prevent="createTask">
      <div class="form-group">
        <label for="title">Title</label>
        <input type="text" v-model="newTask.title" required />
      </div>
      <div class="form-group">
        <label for="description">Description</label>
        <input type="text" v-model="newTask.description" required />
      </div>
      <button type="submit">Create Task</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      tasks: [],
      newTask: {
        title: '',
        description: ''
      }
    };
  },
  methods: {
    async fetchTasks() {
      const response = await axios.get('http://localhost:3000/tasks', {
        headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
      });
      this.tasks = response.data;
    },
    async createTask() {
      await axios.post('http://localhost:3000/tasks', this.newTask, {
        headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
      });
      this.newTask = { title: '', description: '' };
      this.fetchTasks();
    },
    async deleteTask(id) {
      await axios.delete(`http://localhost:3000/tasks/${id}`, {
        headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
      });
      this.fetchTasks();
    }
  },
  created() {
    this.fetchTasks();
  }
};
</script>

<style scoped>
/* 添加一些样式 */
</style>
5.3 状态管理

为了更好地管理应用的状态，我们将使用 Vuex。首先，安装 Vuex：

bash 复制代码 
npm install vuex@next

在 frontend/src/store/index.js 中创建 Vuex 存储：

javascript 复制代码 
import { createStore } from 'vuex';

export default createStore({
  state: {
    token: localStorage.getItem('token') || null
  },
  mutations: {
    setToken(state, token) {
      state.token = token;
      localStorage.setItem('token', token);
    },
    clearToken(state) {
      state.token = null;
      localStorage.removeItem('token');
    }
  },
  actions: {
    login({ commit }, token) {
      commit('setToken', token);
    },
    logout({ commit }) {
      commit('clearToken');
    }
  },
  getters: {
    isAuthenticated: state => !!state.token
  }
});

6. 前后端联调

确保 MongoDB 和后端服务已启动。在 backend 目录下运行以下命令启动后端服务：

bash 复制代码 
npm start

在 frontend 目录下运行以下命令启动前端开发服务器：

bash 复制代码 
npm run serve
6.1 路由配置

为了更好地组织应用的路由，我们需要在 frontend/src/router/index.js 中配置路由：

javascript 复制代码 
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import Login from '../components/Login.vue';
import Register from '../components/Register.vue';
import TaskList from '../components/TaskList.vue';
import store from '../store';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/login',
    name: 'Login',
    component: Login,
    meta: { requiresAuth: false }
  },
  {
    path: '/register',
    name: 'Register',
    component: Register,
    meta: { requiresAuth: false }
  },
  {
    path: '/tasks',
    name: 'Tasks',
    component: TaskList,
    meta: { requiresAuth: true }
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !store.getters.isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

export default router;
6.2 主页组件

在 frontend/src/views/Home.vue 中创建主页组件：

javascript 复制代码 
<template>
  <div class="home">
    <h1>Welcome to the Task Manager</h1>
    <p>Please <router-link to="/login">login</router-link> or <router-link to="/register">register</router-link> to get started.</p>
  </div>
</template>

<script>
export default {
  name: 'Home'
};
</script>

<style scoped>
/* 添加一些样式 */
</style>
6.3 登录和注册页面

在 frontend/src/App.vue 中设置默认路由：

javascript 复制代码 
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

<style>
/* 添加一些全局样式 */
</style>

7. 部署与测试

7.1 部署后端

将后端应用部署到云服务器或使用 Docker 容器化部署。这里以 Docker 为例，创建 Dockerfile 文件：

javascript 复制代码 
# 使用官方 Node.js 运行时镜像
FROM node:14

# 设置工作目录
WORKDIR /app

# 复制 package.json 和 package-lock.json
COPY package*.json ./

# 安装依赖
RUN npm install

# 复制应用代码
COPY . .

# 暴露端口
EXPOSE 3000

# 启动应用
CMD ["node", "src/server.js"]

构建并运行 Docker 容器：

bash 复制代码 
docker build -t task-manager-backend .
docker run -d -p 3000:3000 task-manager-backend
7.2 部署前端

将前端应用构建为生产版本，并部署到静态文件服务器。例如，使用 Nginx：

bash 复制代码 
npm run build

创建 nginx.conf 文件：

bash 复制代码 
server {
  listen 80;
  server_name your-domain.com;

  location / {
    root /path/to/dist;
    try_files $uri $uri/ /index.html;
  }
}

启动 Nginx 服务：

bash 复制代码 
sudo nginx -c /path/to/nginx.conf
7.3 测试

确保所有功能正常工作，包括用户注册、登录、任务创建、编辑和删除。可以使用 Postman 或浏览器进行测试。

8. 总结与展望

通过本文，我们成功构建了一个完整的 Node.js + MongoDB + Vue 3 全栈应用。这个应用实现了用户注册、登录、任务管理等功能。未来可以进一步扩展和优化，例如：

  • 添加更多的用户权限管理
  • 实现任务的分类和标签管理
  • 增加实时通知功能
  • 优化前端用户体验

希望本文对你有所帮助，祝你在全栈开发的道路上越走越远！

相关推荐
摸鲨鱼的脚1 分钟前
vue动态列（表头）
前端·javascript·vue.js
liulilittle9 分钟前
Execution failed for task ‘:app:compileDebugKotlin‘. 问题解决。
开发语言
ch_kexin14 分钟前
Android kotlin integer-array 存放图片资源ID
android·开发语言·kotlin
云芙17 分钟前
第8章利用CSS制作导航菜单
前端·css
kali-Myon28 分钟前
ctfshow-web入门-反序列化（web260-web264）
前端·学习·web安全·php·web
羊小猪~~30 分钟前
前端入门一之ES6--面向对象、够着函数和原型、继承、ES5新增方法、函数进阶、严格模式、高阶函数、闭包
开发语言·前端·javascript·css·vscode·html·es6
Licky1331 分钟前
web 远程调试工具PageSpy 实战经验
前端·javascript·架构·chrome devtools
咔咔库奇44 分钟前
react之了解jsx
前端·javascript·react.js
友大冰1 小时前
前端开发中的CSS框架：昔日辉煌与新兴潮流
前端·css·算法·开源·tensorflow
热门推荐
01聊聊 Python 中的同步原语，为什么有了 GIL 还需要同步原语02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03Windows10安装PCL1.14.0及点云配准04VSCode插件 —— Cody AI （免费AI助手！）05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06组基轨迹建模 GBTM的介绍与实现（Stata 或 R）07Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO08基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测09Coze扣子平台完整体验和实践（附国内和国际版对比）10C++——超强级病毒代码