MySQL指令(5) node.js + express + mysql 實現簡單的登入註冊

阿新 • • 發佈：2021-06-29

導言：具體相關資訊在前幾章有寫，這次我直接黏貼程式碼，程式碼有相關注釋

服務 app.js

// 1. 匯入http模組
var http = require('http');
// 2. 匯入檔案模組
var fs = require('fs');
// 3. 匯入路徑模組
var path = require('path');
// 4. 匯入url模組（用來解析get請求引數）
var url = require('url');
// 5. 匯入querystring模組（用來解析post請求引數）
var querystring = require('querystring');

var createError = require('http-errors');
 
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');


var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

/**
 * 連線 MySQL 資料庫
 * */ 
var mysql = require('mysql');
var connection = mysql.createConnection({
  host: 
'127.0.0.1',
  user: 'root',
  password: '123',
  database: 'userslist',
  port: '3306'
});
connection.connect((err) => {
  if(err) throw err;
  console.log(`連線成功`)
});

var app = express();

// 跨域
const cors = require( 'cors');
app.use(cors());

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set( 
'view engine', 'jade');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

// 登入介面
app.post('/api/login',(req, res) => {
  let sql = `SELECT * FROM person WHERE name = ?`, name = req.body.name, passworld = req.body.passworld;
  // 檢測 資料庫 是否存在
  connection.query(sql, [name], function (error, results, fields) { 
    if(error) throw error;
    if(results.length >= 1){
      if(passworld == results[0].passworld){
        res.json({code: 10000, message: `登入成功`});
      }else{
        res.json({code: 10001, message: `密碼錯誤`});
      }
    }else{
      res.json({code: 40004, message: `此使用者未註冊`})
    }
   })
});
// 註冊介面
app.post(`/api/register`, (req, res) => {
  let sql = `INSERT INTO person(number,name,passworld,birthday,age,member_id,cardID,phone,address, email) VALUES (?,?,?,?,?,?,?,?,?,?)`, resql = `SELECT * FROM person WHERE name = ?`;
  let { number,name,passworld,birthday,age,member_id,cardID,phone,address, email} = req.body;
  console.log(`dataBig:`,req.body);
  connection.query(resql, [name], (error, results, fields) => {
    console.log(`results:`,results)
    if(error) throw error;
    if(results.length >= 1){
      res.json({code: 10002, message: `使用者名稱已存在`})
    }else{
      connection.query(sql, [number,name,passworld,birthday,age,member_id,cardID,phone,address, email], (error, results, fields) => {
        if (error) throw error;
        console.log(`results:`,results)
        if(results.affectedRows == 1){
          res.json({code: 20000, message: `註冊成功`})
        }else{
          res.json({code: 20001, message: `註冊失敗`})
        }
      })
    }
  })
})
app.get('/checkMysql', (req, res) => {
  let sql = `SELECT * FROM person`;
  connection.query(sql, (err, result) => {
    if(err){
      console.log(err);
      res.send(`<p>err:${err}</p>`)
    }else{
      console.log(result);
      res.json(result)
    }
  })
});
// 設定埠
app.listen(3434, console.log("application is start at port 3434"));

module.exports = app;

html 頁面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登入/註冊</title>
    <script src="../javascripts/common/jq-3.60-min.js"></script>
    <link rel="stylesheet" href="./../stylesheets/common/css/common.css">
    <style>
        .login_and_register{
            width: 500px;
            margin: 200px auto;
            position: relative;
            perspective: 1000px;
        }
        .login_wrap {
            width: 500px;
            height: auto;
            background-color: transparent;
            border-radius: 10px;
            border: 1px solid #f5f5f5;
            padding: 20px;
            box-shadow: 0px 0px 10px 1px white;
        }

        .longin_item {
            text-align: center;
            line-height: 100px;
            border-bottom: 1px solid #f5f5f5;
            color: white;
        }

        .longin_item span {
            padding-right: 20px;
        }

        .longin_item input {
            border: 1px dashed;
            background-color: transparent;
            color: white;
            height: 50px;
            width: 350px;
            padding-left: 20px;
            
        }

        .login_button {
            height: 100px;
        }

        #login {
            color: blue;
            text-align: center;
            font-size: 24px;
            text-shadow: 0 1px 10px #f5f5f5;
        }

        #register {
            color: red;
            text-align: center;
            font-size: 24px;
            text-shadow: 0 1px 10px #f5f5f5;
        }

        #back_login {
            color: green;
            text-align: center;
            font-size: 24px;
            text-shadow: 0 1px 10px #f5f5f5;
        }
        .active{
            transition: 1s;
            transform-style: preserve-3d;
        }
        #login_view{
            position: absolute;
        }
        #register_view{
            position: absolute;
        }
    </style>
</head>

<body style="height: 100%; overflow: hidden;" class="flex_col">
    <div class="login_and_register">
        <!-- 登入介面 -->
        <div id="login_view" class="login_wrap active" style="display: block;">
            <div class="login_main flex_col">
                <div class="longin_item flex_row flex_between">
                    <span>登入賬號:</span><input type="text" id="account" placeholder="請輸入你即將登入的賬號" />
                </div>
                <div class="longin_item flex_row flex_between">
                    <span>登入密碼:</span><input type="password" id="psw" placeholder="請輸入您的密碼" />
                </div>
            </div>
            <div class="login_button flex_row flex_between">
                <div id="login" onclick="login()" class="login">登入</div>
                <div id="register" class="register" onclick="flip('register_view')">註冊</div>
            </div>
        </div>
        <!-- 註冊介面 -->
        <div id="register_view" class="login_wrap active" style="display: none;">
            <div class="login_main flex_col">
                <div class="longin_item flex_row flex_between">
                    <span>註冊賬號:</span><input type="text" id="register_account" placeholder="請輸入你即將註冊的賬號" />
                </div>
                <div class="longin_item flex_row flex_between">
                    <span>電話號碼:</span><input type="text" id="phone" placeholder="請輸入你即將註冊的電話號碼" />
                </div>
                <div class="longin_item flex_row flex_between">
                    <span>常用郵箱:</span><input type="text" id="email" placeholder="請輸入你即將註冊的常用郵箱" />
                </div>
                <div class="longin_item flex_row flex_between">
                    <span>設定密碼:</span><input type="password" id="passworld" placeholder="請設定您的密碼" />
                </div>
            </div>
            <div class="login_button flex_row flex_around">
                <div id="login" class="login register_button" onclick="register()">註冊</div>
                <div id="register" class="register register_login_button">註冊並登入</div>
                <div id="back_login" onclick="flip('login_view')">返回</div>
            </div>
        </div>
    </div>
    <script>
        // 切換
        function flip(event) {
            let loginView = document.querySelector(`#login_view`);
            let registerView = document.querySelector(`#register_view`);
            if(event == `login_view`){
                if(loginView.style.transform == `rotateY(360deg)`){
                    loginView.style.transform = `rotateY(0deg)`;
                }else{
                    loginView.style.transform = `rotateY(360deg)`;
                }
                loginView.style.display = `block`;
                registerView.style.display = `none`;
            } else{
                if(registerView.style.transform == `rotateY(360deg)`){
                    registerView.style.transform = `rotateY(0deg)`;
                }else{
                    registerView.style.transform = `rotateY(360deg)`;
                }
                registerView.style.display = `block`;
                loginView.style.display = `none`;
            }
        };
        // 登入
        function login() { 
            console.log(11111)
            let login = document.querySelector(`#login`);
            let account = document.querySelector(`#account`).value;
            let psw = document.querySelector(`#psw`).value;
            if(!account){
                alert(`空賬號`)
            }else if(!psw){
                alert(`密碼為空`)
            }else{
                let data = {name: account, passworld: psw};
                $.post(`http://127.0.0.1:3434/api/login`,data, (r) => {
                    alert(r.message)
                })
            }
         };
         function register() { 
             let account = document.querySelector(`#register_account`).value, phone = document.querySelector(`#phone`).value, email = document.querySelector(`#email`).value, passworld = document.querySelector(`#passworld`).value;
             let number = '5', birthday = `2021-06-29`, age = '20', member_id = '5',  cardID = `456313`, address = `748300`;
             if(!account){
                 alert(`註冊賬號不能為空`);
             }else if(!phone){
                 alert(`註冊電話號碼不能為空`);
             }else if(!email){
                 alert(`註冊E-mail不能為空`);
             }else if(!passworld){
                 alert(`註冊密碼不能為空`);
             }else{
                 let data = {number,name:account,passworld,birthday,age,member_id,cardID,phone,address, email};
                 $.post(`http://127.0.0.1:3434/api/register`, data, (r) => {
                     alert(r.message);
                 })
             }
          }
    </script>
</body>
   
</html>