一个从0开始的vue项目（第二天：登陆注册的实现）

项目前端：

一：首页的开发

在上一篇文章中，开发环境和首页的login已经开发完毕，不出意外的话，我们已经有了一个基本的登陆界面，和昨天不同的是这里加了一个注册按钮，展示效果如下图

这里我们新建一个register.vue文件，将注册的按钮绑定事件click，然后改变路由跳转到register组件见面中：

    zhuce(){
        this.$router.replace('/register');
      }
//-------------------------
    // 在router/index.js中添加路由配置如下
    {
    path: '/register',
    component: RegisterCompont
    }

接下来贴出register.vue文件

<template>
  <div>
    <div class="title">
      后台注册
    </div>
    <div class="input_group">
      <label>用户名：</label>
      <input class="myinput" type="text" placeholder="请输入用户名" v-model="username" />
    </div>
    <div class="input_group">
      <label>密码：</label>
      <input class="myinput" type="password" placeholder="请输入密码" v-model="userpass" />
    </div>
    <button class="ok_btn" @click="register">注册</button>
    <button class="cancel_btn" @click="backLogin">{{backText}}</button>
  </div>
</template>
<script>
  import {
    Toast
  } from 'mint-ui'
  export default {
    data() {
      return {
        backText: '返回',
        username: '',
        userpass: ''
      }
    },
    methods: {
      backLogin() {
        this.$router.replace('/login')
      },
      register() {
        var vm=this;
        this.$reqs.post('users/register', {
          username: this.username,
          password: this.password
        }).then(function (res) {
          if (res.data.status !== true) {
            Toast(res.data.errMsg);
          } else {
            let instance = Toast('注册成功，请登录!');
            setTimeout(() => {
              instance.close();
              vm.$router.replace('/login');
            }, 2000);
          }
        })
      }
    }
  }
</script>
<style scoped>
/*同样的style文件 大家自由发挥，也可以去我的github上看源码*/
</style>

这里没什么好说的，只有一个将this绑定到vm上，为了能在ajax中取到vue实例中的data

前端这里使用了mint-ui，可以查看文档
mint-ui官方文档

项目后端：

项目中使用mysql数据库，所以首先安装sql包并来一个数据库的配置.js

const mysql = require('mysql');
const HOST = '127.0.0.1';
const USER = 'root';
const PASS = '123456';
const DATABASE = '20160626';
const PORT = 3306
const db = mysql.createPool({
    host: HOST,
    user: USER,
    password: PASS,
    database: DATABASE,
    port: PORT,
    multipleStatements:true
});
module.exports={
    db:db,
}

这里还可以继续封装数据库操作~~，但是一步一步来 先知暴露出去一个db供数据库使用，最后一行multipleStatements:true 是为了mysql能多个查询

然后在后端我们也要使用路由分发请求，这里新建一个文件夹router和index.js

module.exports = function (app) {
    //模块
    var login = require('./../www/users/login');
    app.use('/users', login);

    var news = require('./../www/news/newslist');
    app.use('/news', news);

    var comment = require('./../www/comment/comment');
    app.use('/comments', comment);
    ....
}

在我们的后端入口文件app.js中

//引入路由模块并使用
const routes = require('./router/index');
routes(app);

这样我们就可以分发请求比如处理用户的注册和登陆，就可以都在login这个文件中进行

下面新建users文件夹，下面再建一个login.js文件

var express = require('express');
var router = express.Router();
const sqlhelper = require('./../../mysqlhandler');
const mdb = sqlhelper.db;

//处理登录的逻辑
router.post('/login', function (req, res) {
    let userinfo = req.body;
    var sql = `select * from userinfo where username="${userinfo.username}"`;
    //需要验证用户名和密码
    mdb.query(sql, function (err, data) {
        if (err) {
            console.log(err);
        } else {
            let result = validata(userinfo, data[0]);
            res.send(result);
        }
    })
})

//处理注册的逻辑
router.post('/register', function (req, res) {
    let userinfo = req.body;
    //第一步 首先查看存在该用户
    var sql = `select * from userinfo where username="${userinfo.username}"`;
    mdb.query(sql, function (err, data) {
        if (err) {
            console.log(err);
        } else {
            if (data.length > 0) {
                let result = {
                    status: false,
                    errMsg: '该用户已被注册'
                }
                res.send(result);
            } else {
                registerInfo(userinfo, res);
            }
        }
    })
})

function registerInfo(userinfo, res) {
    var sql = `insert into userinfo(username,userpass,usestate) values("${userinfo.username}","${userinfo.userpass}",0)`;
    mdb.query(sql, function (err, data) {
        if (err) {
            console.log(err);
        } else {
            let result = {
                status: true
            }
            res.send(result);
        }
    })
}


function validata(postuser, dbuser) {
    //格式这里不做验证
    let result = {};
    if (postuser.password !== dbuser.userpass) {
        result.status = false;
        result.errMsg = '用户名密码不符';
    } else {
        result.status = true
    }
    return result;
}

module.exports = router;

这里的处理都做的非常简单，没有过多的验证，只当练手node和vue项目~，这样我们的项目就已经可以使用注册和登陆功能了~

数据库

到这里只设计了一张表，比较简单 只有 username userpass status 和id（主键）,大家自由发挥~