Node+Mysql+Vue实现登录注册功能 - 入门（内含HTTPS环境）

写在前面

很多前端小伙伴都尝试着使用vue构建前端项目时，使用的数据都是假数据，但是注册登录功能很难使用假数据进行测试，这篇文章就手把手教你如何使用node做后端，mysql做数据库实现登录注册功能。本文基于vue-cli入门(四)——vue-resource登录注册实现和Vue+MySQL+Express小试牛刀进行拓展。

Mysql配置

对于没有接触过数据库的小伙伴，我推荐下载XAMPP
这个比较轻量级，简单易用。具体步骤如下

1. 列表项目
2. 创建数据库
3. 进入xampp - mysql - bin - mysql.exe

4. 输入以下命令:

   use test;

   create table user(  
   id int not null primary key auto_increment,  
   username varchar(100) not null,  
   password varchar(100) not null   
   )ENGINE=InnoDB DEFAULT CHARSET=utf8;  

5. 之后点击xampp的Admin，你会发现在test下有个user表，这样你就已经建好数据库了

Node 文件

在根文件夹下新建一个server文件，
文件结构如图

|-- build
|-- config
|-- node_modules
|-- server
  |-- api
    |-- userApi.js
  |-- db.js
  |-- index.js
  |-- sqlMap.js
|-- src
|-- static
|-- .babelrc
|-- .editorconfig
|-- .gitignore
|-- index.html
|-- package.json
|-- README.md

db.js----用来添加mysql配置和index.js----Express服务器入口文件都不需要更改
原代码

sqlMap.js----SQL语句映射文件，以供api逻辑调用

var sqlMap = {
    user: {
        add: 'insert into user( username, password) values ( ?, ?)',
        select_name: 'SELECT * from user where username = ?',    //查询 username
        select_password: 'SELECT * from user where password = ?'      //查询 password
    }
}
module.exports = sqlMap;

api/userApi.js ---- 测试用api示例

var models = require('../db');
var express = require('express');
var router = express.Router();
var mysql = require('mysql');
var $sql = require('../sqlMap');
// 连接数据库
var conn = mysql.createConnection(models.mysql);
conn.connect();
var jsonWrite = function(res, ret) {
    if(typeof ret === 'undefined') {
        res.send('err')
    } else {
        //res.json(ret);
        res.send('ok')
    }
};
// 增加用户接口
router.post('/addUser', (req, res) => {
    var sql_name = $sql.user.select_name
    var sql = $sql.user.add;
    var params = req.body;
    console.log(params);
    conn.query(sql_name,params.username,function(err,result) {
        if(err) {
            console.log(err)
        }
        if(result[0]===undefined) {
            conn.query(sql,[params.username,params.password], function(err, result) {
                if(err) {
                    console.log(err)
                }
                if(result) {
                    jsonWrite(res, result)
                }
            })
        }else {
            res.send('-1')    //当前注册username与数据库重复时，data返回-1
        }
    })
    
});

//查找用户接口
router.post('/selectUser', (req,res) => {
    var sql_name = $sql.user.select_name;
    var sql_password = $sql.user.select_password;
    var params = req.body;
    conn.query(sql_name,params.username,function(err, result) {
        if(err) {
            console.log(err)
        }
        if(result[0]===undefined) {
            res.send('-1')    //查询不出username，data返回-1
        }else {
            conn.query(sql_password,params.password, function(err, result) {
                if(err) {
                    console.log(err)
                }
                if(result[0]===undefined) {
                    res.send('0')    //username正确后，password错误，data返回 0
                }else {
                    jsonWrite(res, result);
                }
            })
        }
    })
});
module.exports = router;

注册功能

Vue-cli login-vue注册功能修改

register(){
            if(this.newUsername == "" || this.newage == ""){
                alert("请输入用户名或密码")
            }else{
                let data = {'username':this.newUsername,'age':this.newage}
                this.$http.post('/api/user/addUser',data).then((res)=>{
                    console.log(res)
                    /*接口的传值是(-1,该用户已存在)*/
                    if(res.data == -1) {
                        this.tishi = "该账号已存在"
                        this.showTishi = true
                        this.username = ''
                        this.age = ''
                    }
                    else if(res.status == 200){
                        this.tishi = "注册成功"
                        this.showTishi = true
                        this.username = ''
                        this.age = ''
                         /*注册成功之后再跳回登录页*/
                        setTimeout(function(){
                            this.showRegister = false
                            this.showLogin = true
                            this.showTishi = false
                        }.bind(this),2000)
                    }
                })
            }
        }

其他

设置代理与跨域

原代码是正确的。
但是我自己就是代理不成功，google了一下也没有解决办法，
返回看评论可以发现他们也一样，但是如果你仔细读评论，就可以找到解决办法：需要启动express服务器

2017/10/31补充：
使用第三方接口时，别人设置跨域限制时，需要利用 反向代理
推荐 npm http-proxy-middleware
在工作场景中，一般是 前后端分离，后端给接口完成注册登录功能

1. 在server文件夹下shift+右键 ，选择在此打开命令窗口
2. 输入 npm install -g nodemon 回车
3. 下载完成后输出 nodemon index
4. 启动服务器后，才能访问

我的一个完整项目,欢迎Watch和start!

仿拉勾网移动端页面
所以得坑都填完了，本文仅适用于前端没有接触后端的小伙伴。
当你读到这里的时候并且自己尝试着做了之后，恭喜你已经入门全栈了。
最后，再次感谢海岛心hey和yuanyuanispeak

HTTPS

代码库更新：添加HTTPS环境支持
如何在5分钟内让HTTPS在本地开发环境中运行
具体代码参见commit
⚠️如果不想搭建https环境请删除指定commit代码

---

参考

• [1] vue-cli入门(四)——vue-resource登录注册实现 链接1
• [2] Vue+MySQL+Express小试牛刀 链接2
• [3] 接口完整代码
• [4] 如何在5分钟内让HTTPS在本地开发环境中运行 1.中文译文地址 2.原地址medium.com