全栈项目搭建指南：Nuxt.js + Node.js + MongoDB

news2025/7/18 8:35:24

全栈项目搭建指南：Nuxt.js + Node.js + MongoDB

在这里插入图片描述

一、项目概述

我们将构建一个完整的全栈应用，包含：

前端：Nuxt.js (SSR渲染)
后端：Node.js (Express/Koa框架)
数据库：MongoDB
后台管理系统：集成在同一个项目中

二、环境准备

1. 安装必备工具

# 安装Node.js (建议16.x以上)
# 安装MongoDB (社区版即可)
# 安装代码编辑器(VSCode推荐)

2. 创建项目目录结构

mkdir fullstack-project
cd fullstack-project

三、后端服务搭建

在这里插入图片描述

1. 初始化Node.js项目

mkdir server
cd server
npm init -y

2. 安装依赖

npm install express mongoose cors dotenv bcryptjs jsonwebtoken
npm install --save-dev nodemon

3. 基础Express服务器 (server/index.js)

require('dotenv').config()
const express = require('express')
const mongoose = require('mongoose')
const cors = require('cors')

const app = express()

// 中间件
app.use(cors())
app.use(express.json())

// 数据库连接
mongoose.connect(process.env.MONGO_URI)
  .then(() => console.log('MongoDB connected'))
  .catch(err => console.error(err))

// 路由
app.use('/api/auth', require('./routes/auth'))
app.use('/api/admin', require('./routes/admin'))

const PORT = process.env.PORT || 5000
app.listen(PORT, () => console.log(`Server running on port ${PORT}`))

4. 创建.env文件

MONGO_URI=mongodb://localhost:27017/fullstack_db
JWT_SECRET=your_jwt_secret_key
PORT=5000

四、前端Nuxt.js搭建

在这里插入图片描述

1. 创建Nuxt项目 (回到项目根目录)

npx nuxi init client
cd client
npm install

2. 安装常用依赖

npm install axios @nuxtjs/auth-next pinia @element-plus/nuxt

3. 配置nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/auth-next',
    '@element-plus/nuxt',
    '@pinia/nuxt'
  ],
  auth: {
    strategies: {
      local: {
        token: {
          property: 'token',
          global: true,
        },
        user: {
          property: 'user',
        },
        endpoints: {
          login: { url: '/api/auth/login', method: 'post' },
          logout: { url: '/api/auth/logout', method: 'post' },
          user: { url: '/api/auth/user', method: 'get' }
        }
      }
    }
  },
  runtimeConfig: {
    public: {
      apiBase: 'http://localhost:5000'
    }
  }
})

五、后台管理系统集成

1. 创建管理后台布局 (client/layouts/admin.vue)

<template>
  <div class="admin-layout">
    <AdminSidebar />
    <div class="admin-content">
      <AdminHeader />
      <slot />
    </div>
  </div>
</template>

<script setup>
// 管理后台的公共布局
</script>

2. 创建管理路由 (client/pages/admin/index.vue)

<template>
  <div>
    <h1>管理控制台</h1>
    <!-- 这里添加管理界面内容 -->
  </div>
</template>

<script setup>
definePageMeta({
  middleware: 'auth',
  layout: 'admin'
})
</script>

六、数据库模型设计

在这里插入图片描述

1. 用户模型 (server/models/User.js)

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 },
  role: { type: String, enum: ['user', 'admin'], default: 'user' },
  createdAt: { 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()
})

module.exports = mongoose.model('User', UserSchema)

七、API路由示例

1. 认证路由 (server/routes/auth.js)

const router = require('express').Router()
const jwt = require('jsonwebtoken')
const User = require('../models/User')

// 用户注册
router.post('/register', async (req, res) => {
  try {
    const user = new User(req.body)
    await user.save()
    res.status(201).json({ success: true })
  } catch (err) {
    res.status(400).json({ error: err.message })
  }
})

// 用户登录
router.post('/login', async (req, res) => {
  const { username, password } = req.body
  const user = await User.findOne({ username })
  
  if (!user || !(await bcrypt.compare(password, user.password))) {
    return res.status(401).json({ error: 'Invalid credentials' })
  }
  
  const token = jwt.sign({ id: user._id }, process.env.JWT_SECRET, { expiresIn: '1d' })
  res.json({ token, user })
})

module.exports = router

八、项目启动与测试

1. 启动MongoDB服务

mongod

2. 启动后端服务 (server目录下)

nodemon index.js

3. 启动前端开发服务器 (client目录下)

npm run dev

九、项目结构完整树

fullstack-project/
├── server/
│   ├── models/          # 数据库模型
│   │   └── User.js
│   ├── routes/          # API路由
│   │   ├── auth.js
│   │   └── admin.js
│   ├── index.js         # 主服务器文件
│   └── .env             # 环境变量
└── client/
    ├── pages/           # 页面组件
    │   ├── index.vue
    │   └── admin/
    │       └── index.vue
    ├── layouts/         # 布局组件
    │   ├── default.vue
    │   └── admin.vue
    ├── components/      # 公共组件
    ├── nuxt.config.ts   # Nuxt配置
    └── package.json