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

怎么入门数据库编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《Node+Mysql+Vue实现登录注册功能 - 入门（内含HTTPS环境）》，涉及到MySQL、Node.js、vue.js，有需要的可以收藏一下

写在前面

很多前端小伙伴都尝试着使用

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 {
                    //服务器 Set-Cookie 设置过期时间7天
                    res.cookie('isAuth',1, {maxAge: 7 * 24 * 60 * 1000})
                    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

今天关于《Node+Mysql+Vue实现登录注册功能 - 入门（内含HTTPS环境）》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于mysql的内容请关注golang学习网公众号！