Vue+Koa+MongoDB从零打造一个任务管理系统的详细过程

我将详细讲解“Vue+Koa+MongoDB从零打造一个任务管理系统的详细过程”。

1. 确定项目需求和技术选型

在开始开发之前，首先需要明确项目的需求和技术选型。我们可以根据用户的需求和使用场景来确定系统的功能模块，然后选择适合的技术进行开发。

在本项目中，我们需要实现一个任务管理系统，主要功能包括：用户注册和登录、任务创建和管理、任务分类和搜索等。我们选择使用Vue.js作为前端框架，Koa.js作为后端框架，MongoDB作为数据库。

2. 搭建前后端项目框架

在确定了技术选型后，我们需要搭建项目的前后端框架。可以通过Vue-cli脚手架和Koa-generator脚手架生成项目模板。

以下是命令行示例：

# 安装Vue-cli脚手架
npm install -g vue-cli

# 创建Vue项目
vue init webpack task-manager

# 安装Koa-generator脚手架
npm install -g koa-generator

# 创建Koa项目
koa2 task-manager-api

前端代码存放在Vue项目中，后端代码存放在Koa项目中。前后端项目需要使用CORS（跨域资源共享）来解决跨域问题，可以使用koa2-cors模块来实现。

3. 数据库配置和连接

在使用MongoDB作为数据库时，我们需要先安装MongoDB，并创建一个数据库。然后需要在后端代码中配置连接信息，使得后端代码能够连接到MongoDB数据库。

以下是配置代码示例：

// app.js

const mongoose = require('mongoose')
const dbUrl = 'mongodb://localhost:27017/task-manager'

mongoose.connect(dbUrl)
const db = mongoose.connection

db.on('error', console.error.bind(console, 'connection error:'))
db.once('open', () => {
  console.log('Connected to the database')
})

4. 实现用户注册和登录

用户注册和登录是系统的基础功能，我们需要在前后端代码中实现。前端代码通过Vue组件实现交互界面，后端代码通过Koa路由处理请求，将用户信息存储在MongoDB数据库中。

以下是前端代码示例：

<!-- components/Login.vue -->

<template>
  <form @submit.prevent="login">
    <input type="text" v-model="username">
    <input type="password" v-model="password">
    <button type="submit">登录</button>
  </form>
</template>

<script>
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async login () {
      await this.$http.post('/api/user/login', {
        username: this.username,
        password: this.password
      })
      // 登录成功后的操作
    }
  }
}
</script>

以下是后端代码示例：

// routes/user.js

const Router = require('koa-router')
const bcrypt = require('bcrypt')
const jwt = require('jsonwebtoken')
const User = require('../models/User')

const router = new Router({ prefix: '/user' })

router.post('/register', async ctx => {
  const { username, password } = ctx.request.body
  const salt = await bcrypt.genSalt(10)
  const hash = await bcrypt.hash(password, salt)
  const user = new User({ username, password: hash })
  await user.save()
  ctx.body = { message: 'User registered' }
})

router.post('/login', async ctx => {
  const { username, password } = ctx.request.body
  const user = await User.findOne({ username })
  if (!user) {
    ctx.throw(400, 'Invalid username')
  }
  const isMatch = await bcrypt.compare(password, user.password)
  if (!isMatch) {
    ctx.throw(400, 'Invalid password')
  }
  const token = jwt.sign({ id: user._id, username: user.username }, 'secret', { expiresIn: '1h' })
  ctx.body = { token }
})

module.exports = router

5. 实现任务管理

任务管理是系统的核心功能，我们需要实现任务的创建、编辑、删除和查询等功能。前端代码通过Vue组件实现交互界面，后端代码通过Koa路由处理请求，将任务信息存储在MongoDB数据库中。

以下是前端代码示例：

<!-- components/Task.vue -->

<template>
  <form>
    <input type="text" v-model="task.title">
    <textarea v-model="task.description"></textarea>
    <select v-model="task.category">
      <option v-for="category in categories" :value="category">{{ category }}</option>
    </select>
    <button @click.prevent="create">创建任务</button>
  </form>
</template>

<script>
export default {
  data () {
    return {
      task: {
        title: '',
        description: '',
        category: ''
      },
      categories: ['未完成', '已完成']
    }
  },
  methods: {
    async create () {
      await this.$http.post('/api/task', this.task, { headers: { Authorization: `Bearer ${this.token}` } })
      // 创建成功后的操作
    }
  }
}
</script>

以下是后端代码示例：

// routes/task.js

const Router = require('koa-router')
const jwt = require('jsonwebtoken')
const Task = require('../models/Task')

const router = new Router({ prefix: '/task' })

// 验证token
const auth = async (ctx, next) => {
  const rawToken = ctx.request.headers.authorization || ''
  const token = rawToken.replace('Bearer ', '')
  try {
    const user = jwt.verify(token, 'secret')
    ctx.state.user = user
  } catch (error) {
    ctx.throw(401, 'Authentication error')
  }
  await next()
}

router.get('/', auth, async ctx => {
  const tasks = await Task.find({ creator: ctx.state.user.id })
  ctx.body = tasks
})

router.post('/', auth, async ctx => {
  const { title, description, category } = ctx.request.body
  const task = new Task({ title, description, category, creator: ctx.state.user.id })
  await task.save()
  ctx.body = { message: 'Task created' }
})

router.put('/:id', auth, async ctx => {
  const { title, description, category } = ctx.request.body
  await Task.findByIdAndUpdate(ctx.params.id, { title, description, category })
  ctx.body = { message: 'Task updated' }
})

router.delete('/:id', auth, async ctx => {
  await Task.findByIdAndDelete(ctx.params.id)
  ctx.body = { message: 'Task deleted' }
})

module.exports = router

6. 部署上线

在完成开发后，我们需要将系统部署到服务器上线。可以使用PM2来管理进程，并使用Nginx来反向代理和负载均衡，使得用户可以正常访问系统。

以下是命令行示例：

# 安装PM2和Nginx
npm install -g pm2
sudo apt-get install nginx

# 配置PM2启动项目
pm2 start app.js

# 配置Nginx反向代理
sudo nano /etc/nginx/sites-available/default
# 修改配置文件
proxy_pass http://localhost:3000;

# 重启Nginx服务
sudo service nginx restart

到此为止，我们已经完成了Vue+Koa+MongoDB从零打造一个任务管理系统的详细过程，并且提供了两个示例：用户注册和登录、任务管理。