nodejs+vue+koa+mongodb搭建一整套案例和原理

最新推荐文章于 2024-06-28 13:32:33 发布

夲奋亻Jay

最新推荐文章于 2024-06-28 13:32:33 发布

阅读量620

点赞数 4

分类专栏：前端工程化文章标签： node.js vue mongodb

本文链接：https://blog.csdn.net/qq_29101285/article/details/139226193

版权

前端工程化专栏收录该内容

22 篇文章

订阅专栏

搭建一个使用 Node.js、Vue、Koa 和 MongoDB 的全栈应用涉及到前端界面、后端服务以及数据库的整合。以下是一个基础的项目搭建案例，以及一些关键概念的原理解释。

项目结构示例

my-app/
│
├── backend/               # 后端 Koa 应用
│   ├── node_modules/       # Node.js 依赖
│   ├── models/             # MongoDB 模型
│   ├── controllers/        # 控制器层
│   ├── middlewares/        # 中间件层
│   ├── routes/             # 路由层
│   ├── app.js              # Koa 应用入口
│   └── package.json        # package.json 文件
│
└── frontend/               # 前端 Vue 应用
    ├── node_modules/        # Node.js 依赖
    ├── public/               # 公共资源
    ├── src/                  # 源代码
    ├── .env                  # 环境变量配置
    ├── vue.config.js         # Vue 配置文件
    └── package.json          # package.json 文件

后端 (Koa + MongoDB)

初始化项目

在 backend 目录中初始化 Node.js 项目并安装依赖。

cd backend
npm init -y
npm install koa koa-router koa-bodyparser mongoose dotenv --save

设置 Koa 服务器

backend/app.js

const Koa = require('koa');
const Router = require('koa-router');
const bodyParser = require('koa-bodyparser');
const mongoose = require('mongoose');
const dotenv = require('dotenv');

dotenv.config();

const app = new Koa();
const router = new Router();

app.use(bodyParser());
router.get('/', async (ctx) => {
  ctx.body = 'Hello World';
});

// 连接 MongoDB
mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true });

// 引入路由
require('./routes')(router);

app.use(router.routes());
app.use(router.allowedMethods());

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

创建 MongoDB 模型

backend/models/User.js

const mongoose = require('mongoose');

const UserSchema = new mongoose.Schema({
  name: String,
  email: { type: String, unique: true }
});

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

定义路由

backend/routes/index.js

const Router = require('koa-router');
const UserController = require('../controllers/UserController');

const router = new Router();

router.get('/users', UserController.getAllUsers);
router.post('/users', UserController.createUser);

module.exports = router;

控制器

backend/controllers/UserController.js

const User = require('../models/User');

exports.getAllUsers = async (ctx) => {
  const users = await User.find();
  ctx.body = users;
};

exports.createUser = async (ctx) => {
  const { name, email } = ctx.request.body;
  const user = new User({ name, email });
  await user.save();
  ctx.status = 201;
  ctx.body = user;
};

前端 (Vue)

初始化项目

在 frontend 目录中初始化 Vue 项目并安装依赖。

cd frontend
npm install -g @vue/cli
vue create my-app
# 选择默认设置或手动配置
cd my-app
npm install axios --save

修改 Vue 配置

frontend/vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
      },
    },
  },
};

创建 Vue 组件

frontend/src/components/UserList.vue

<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user._id">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: [],
    };
  },
  created() {
    this.fetchUsers();
  },
  methods: {
    async fetchUsers() {
      try {
        const response = await axios.get('/api/users');
        this.users = response.data;
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>

原理

Node.js：提供了一个在服务器端运行 JavaScript 的环境。
Koa：是一个由 Express 原班人马打造的轻量级 Web 框架，它使用 async/await 来处理异步请求，提供了更好的错误处理和中间件支持。
Vue：是一个用于构建用户界面的渐进式框架，易于上手且生态丰富。
MongoDB：是一个基于文档的 NoSQL 数据库，适用于存储灵活的数据结构。
Mongoose：是一个 MongoDB 模型工具，简化了数据的管理和验证。
Axios：是一个基于 Promise 的 HTTP 客户端，用于从前端向后端发送请求。
环境变量：通过 .env 文件管理不同环境的配置，如数据库 URI、端口号等。
代理服务器：在开发中，Vue CLI 提供了代理功能，使得前端开发服务器能够将 API 请求转发到后端服务器。