vue2.0+koa2+mongodb实现注册登录

下面是“vue2.0+koa2+mongodb实现注册登录”的完整攻略。

一、前言

本文将详细介绍如何使用 Vue2.0 + Koa2 + Mongodb 实现注册登录功能，并提供两个示例（前端和后端）来帮助您更好地理解实现过程。

二、技术选型

我们选择使用以下技术进行实现：

1. 前端

Vue2.0 + Vue-router + Vuex + axios + ElementUI

2. 后端

Koa2 + Mongodb + Mongoose

三、实现步骤

1. 创建项目

我们在终端输入以下命令来创建一个 Vue 项目：

vue init webpack my-project

然后进入项目目录，安装 Vue-router、Vuex、axios、ElementUI：

npm install vue-router vuex axios element-ui --save

2. 配置路由和状态管理

我们在 src 目录下创建一个 router 和 store 目录，然后在 router 目录中创建一个 index.js 文件来配置路由，示例代码如下：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Login from '@/components/Login'
import Register from '@/components/Register'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/register',
      name: 'Register',
      component: Register
    }
  ]
})

我们在 store 目录下创建一个 index.js 文件并配置 Vuex，示例代码如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: {}
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    }
  }
})

3. 实现登录和注册功能

我们在 src 目录下创建一个 api 目录，然后在 api 目录中创建一个 user.js 文件来实现登录和注册功能，示例代码如下：

import axios from 'axios'

const baseUrl = 'http://localhost:3000/user';

export function login(params) {
  return axios.post(`${baseUrl}/login`, params);
}

export function register(params) {
  return axios.post(`${baseUrl}/register`, params);
}

这里使用了 axios 来发起请求。

在后端，我们使用 Koa2 和 Mongodb 来实现注册登录功能。我们在项目目录下创建一个 server 目录，然后在 server 目录下创建一个 app.js 文件，示例代码如下：

const Koa = require('koa');
const bodyParser = require('koa-bodyparser');
const mongoose = require('mongoose');
const router = require('./router/user');

const app = new Koa();

mongoose.connect('mongodb://localhost:27017/vue-koa-demo', { useNewUrlParser: true });

const db = mongoose.connection;

db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function() {
  console.log('MongoDB connection success!');
});

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

app.listen(3000, () => {
  console.log('Koa server listening on 3000');
})

在 router 目录下，我们创建一个 user.js 文件，实现注册和登录功能，示例代码如下：

const Router = require('koa-router');
const User = require('../models/user');

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

router.post('/register', async (ctx) => {
  const user = new User({
    username: ctx.request.body.username,
    password: ctx.request.body.password
  });
  await user.save();
  ctx.body = {
    success: true
  };
});

router.post('/login', async (ctx) => {
  const user = await User.findOne({
    username: ctx.request.body.username,
    password: ctx.request.body.password
  });
  if (user) {
    ctx.body = {
      success: true,
      data: user
    }
  } else {
    ctx.body = {
      success: false,
      message: '用户名或密码错误'
    };
  }
});

module.exports = router;

这里使用了 Mongoose 来操作 Mongodb。

至此，注册登录功能就实现了，我们可以在前端的 Login 和 Register 组件中调用 api 中的登录和注册方法，将数据存储到 Mongodb 中。

四、示例代码

您可以在 GitHub 上查看完整示例代码，它包括前端和后端示例，地址为 https://github.com/xiaomingTang1995/vue-koa2-mongodb-demo。