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

日期：2020-05-11 栏目：程序人生浏览：次

前言

前段时间和公司一个由技术转产品的同事探讨他的职业道路，对我说了一句深以为然的话：

“不要把自己禁锢在某一个领域，技术到产品的转变，首先就是思维上的转变。你一直做前端，数据的交互你只知道怎么进，却不知道里面是怎么出的，这就是局限性。”

醍醐灌顶般，刚好学习vue的时候看到有个注册登录的项目，索性我也跟着动手做一个vue项目，引入koa和mongodb，实现客户端（client）提交-服务端（server）接收返回-入数据库全过程。

本项目基于vue-cli搭建，利用token方式进行用户登录验证，并实现注册入库、读取用户、删除用户等功能。文章默认读者有一定的node和vue基础，基础部分不赘述。

系统环境：MacOS 10.13.3

关于npm安装速度慢或不成功

使用淘宝镜像安装

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

然后所有的 npm install 改为 cnpm install

项目流程图

为了让项目思路和所选技术更加清晰明了，画了一个图方便理解。

项目启动

0.项目地址

github： https://github.com/stzhongjie/vue-login

1.初始化项目

$ npm install

2.启动项目

$ npm run dev

3.启动MongoDB

$ mongod --dbpath XXX

xxx是项目里 data 文件夹（也可以另行新建，数据库用于存放数据）的路径，也可直接拖入终端。

4.启动服务端

$ node server.js

前端UI

vue的首选UI库我是选择了饿了么的Element-UI了，其他诸如 iview 、 vue-strap 好像没有ele全面。

安装Element-UI

$ npm i element-ui -S

引入Element-UI

//在项目里的mian.js里增加下列代码
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

利用UI里面的选项卡切换做注册和登录界面的切换，以login组件作为整个登录系统的主界面，register组件作为独立组件切入。Element-UI的组成方式，表单验证等API请查阅官网。

//login组件
<template>
 <div class="login">
  <el-tabs v-model="activeName" @tab-click="handleClick">
   <el-tab-pane label="登录" name="first">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
     <el-form-item label="名称" prop="name">
      <el-input v-model="ruleForm.name"></el-input>
     </el-form-item>
     <el-form-item label="密码" prop="pass">
      <el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input>
     </el-form-item>
     <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
     </el-form-item>
    </el-form>
   </el-tab-pane>
   <el-tab-pane label="注册" name="second">
    <register></register>
   </el-tab-pane>
  </el-tabs>
 </div>
</template>
<script>
import register from '@/components/register'
export default {
 data() {
  var validatePass = (rule, value, callback) => {
   if (value === '') {
    callback(new Error('请输入密码'));
   } else {
    if (this.ruleForm.checkPass !== '') {
     this.$refs.ruleForm.validateField('checkPass');
    }
    callback();
   }
  };
  return {
   activeName: 'first',
   ruleForm: {
    name: '',
    pass: '',
    checkPass: '',
   },
   rules: {
    name: [
     { required: true, message: '请输入您的名称', trigger: 'blur' },
     { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
    ],
    pass: [
     { required: true, validator: validatePass, trigger: 'blur' }
    ]
   },

  };
 },
 methods: {
  //选项卡切换
  handleClick(tab, event) {
  },
  //重置表单
  resetForm(formName) {
   this.$refs[formName].resetFields();
  },
  //提交表单
  submitForm(formName) {
   this.$refs[formName].validate((valid) => {
    if (valid) {
     this.$message({
      type: 'success',
      message: '登录成功'
     });
     this.$router.push('HelloWorld');
    } else {
     console.log('error submit!!');
     return false;
    }
   });
  },
 },
 components: {
  register
 }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.login {
 width: 400px;
 margin: 0 auto;
}
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
.el-tabs__item {
 text-align: center;
 width: 60px;
}
</style>

转载注明出处：http://www.heiqu.com/396.html

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

相关推荐