当前位置：首页 > news >正文

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

news 来源：原创 2025/5/18 6:32:44

全栈项目搭建指南：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.bodyconst 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