Node+Mysql+Vue實現登陸註冊功能 - 入門（內含HTTPS環境）

時間 2019-11-06

標籤 node+mysql+vue node mysql vue 實現登陸註冊功能入門內含 https 環境欄目 MySQL 简体版

原文原文鏈接

寫在前面

不少前端小夥伴都嘗試着使用vue構建前端項目時，使用的數據都是假數據，可是註冊登陸功能很難使用假數據進行測試，這篇文章就手把手教你如何使用node作後端，mysql作數據庫實現登陸註冊功能。本文基於vue-cli入門(四)——vue-resource登陸註冊實現和Vue+MySQL+Express小試牛刀進行拓展。javascript

Mysql配置

對於沒有接觸過數據庫的小夥伴，我推薦下載XAMPP
這個比較輕量級，簡單易用。具體步驟以下html

列表項目
建立數據庫
進入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文件，
文件結構如圖vue

|-- 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服務器入口文件都不須要更改
原代碼java

sqlMap.js----SQL語句映射文件，以供api邏輯調用node

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示例mysql

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註冊功能修改git

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