全棧項目搭建指南：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
十、后續開發建議
- API文檔：使用Swagger或Postman創建API文檔
- 錯誤處理：添加統一的錯誤處理中間件
- 數據驗證：使用Joi或Validator.js進行輸入驗證
- 日志系統：添加Winston或Morgan日志記錄
- 測試：添加Jest單元測試和Supertest API測試
- 部署：
- 后端：部署到Heroku或AWS
- 前端：部署到Vercel或Netlify
- 數據庫：使用MongoDB Atlas云服務
這個模板項目提供了完整的全棧開發基礎架構，您可以根據實際需求進行擴展和修改。
)
