Node+Mysql+Vue实现登录注册功能

crazyleopard 发布于2年前
0 条问题

很多前端小伙伴都尝试着使用vue构建前端项目时,使用的数据都是假数据,但是注册登录功能很难使用假数据进行测试,这篇文章就手把手教你如何使用node做后端,mysql做数据库实现登录注册功能。

前端代码来自vue-cli入门(四)——vue-resource登录注册实现
后端代码来自Vue+MySQL+Express小试牛刀
第一个链接使用的后端语言是php,也没有提供后端代码
第二个链接只提供了注册功能,设置代理和跨域中proxyTable也遇到了小坑
我在填完坑之后分享给大家,也以此表示对这两位作者的感谢
建议先读完前两篇文章在看我的内容

Mysql配置

对于没有接触过数据库的小伙伴,我推荐下载XAMPP
如果单独下载数据库,容易出现端口问题,而且卸载不了

创建数据库
进入xampp - mysql - bin - mysql.exe
输入以下命令

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;  

之后点击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;

设置代理与跨域

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

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

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)
                    }
                })
            }
        }

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

查看原文: Node+Mysql+Vue实现登录注册功能

  • orangepanda
  • lazyleopard
  • ticklishostrich
  • organicduck
  • crazygorilla
  • blackkoala
  • goldentiger
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。