17-vue零基础到实战-注册和登录页面「渡一教育」

这次给大家带来vue2.0实现注册登录步骤详解， vue2.0实现注册登录的注意事项有哪些，下面就是实战案例，一起来看一下。
前言
【17-vue零基础到实战-注册和登录页面「渡一教育」】前段时间和公司一个由技术转产品的同事探讨他的职业道路，对我说了一句深以为然的话：
“不要把自己禁锢在某一个领域，技术到产品的转变，首先就是思维上的转变。你一直做前端，数据的交互你只知道怎么进，却不知道里面是怎么出的，这就是局限性。”
醍醐灌顶般，刚好学习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
项目流程图
为了让项目思路和所选技术更加清晰明了，画了一个图方便理解。

文章插图
项目启动
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> <p 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> </p></template><script>import register from '@/components/register'export default { data() { var validatePass = (rule, value, callback) => { if (value =https://www.dangaocn.com/q/reed/== '') { 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 }}