堆棧內存溢出
  簡體   English   中英

嘿，當使用 node.js 從 html 表單將數據插入 MySql 時，我不知道從哪里開始

[英]Hey I don't know where to start when inserting data into MySql from html form using node.js

 原文  2020-01-02 05:25:28  7   3    javascript/ mysql/ node.js/ express

問題描述

我只想知道從哪里開始讓我的 html 頁面與我的后端代碼和數據庫一起工作。 我想用一個基本的 html 登錄頁面將信息插入到我的表格中，但我發現的所有信息都是令人困惑的來源，也許我不擅長谷歌搜索，但想知道是否有人可以幫助我告訴我應該從哪里開始以及我還需要學習什么才能實現這一點，下面的代碼是我設法學習和實現的。

var http = require('http');
var express = require('express');
var app = express();
var fs = require('fs');
var path = require('path');
var url = require('url');
var pages = require('html-pages');

const css = fs.readFileSync(`${__dirname}/public/art.css`, 'utf-8');
const htmlLogin = fs.readFileSync(`${__dirname}/login.html`, 'utf-8');
const htmlSignUp = fs.readFileSync(`${__dirname}/signup.html`, 'utf-8');


//static files for login
app.use('/login', express.static('./public'));

//
app.get('/login', function(req,res,next) {
    res.writeHead(200, {'Content-Type' :'text/html'});
    res.write(htmlLogin);

    next();
}).listen(3000);

app.get("/signup", function(req,res, next) {
    res.writeHead(200, {'Content-Type':'text/html'});
    res.write(htmlSignUp);

});

這是我的 html 頁面

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <link href="./signup.js">

</head>
  <body>
    <div class="signupBox">
        <h1 id="signUp">Sign Up!</h1>
        <div>
            <input text="text" placeholder="First Name" name="" value="">
        </div>
        <div>
            <input text=text" placeholder="Last Name" name="Last Name" value="">
        </div>
        <div>
            <input text="text" placeholder="Email" name="Email" value="">
        </div>
        <div>
            <input text="text" placeholder="Password" name="Password" value="">
        </div>
        <input id="submit" type="button" name="" value="Sign In">

    </div>
  </body>

  </html>

學習如何使用 node.js 和 mysql 進行后端只是在知道如何執行此任務時陷入困境，

var express = require('express');
var app = express();
var session = require('express-session');
var bodyParser = require('body-parser');
var path = require('path');
var http = require('http');
var sql = require('mysql');
var fs = require('fs');
var url = require('url');

var myDB = sql.createConnection({
    //properties...
        host: 'localhost',
        user: 'root',
        password: '',
        database: 'sampleDB'
    });

myDB.connect(function(err) {
    if (err) {
        console.log('There is an error');
    } else {
        console.log("Connected to Database");
    }
});

3 個解決方案

解決方案1
 0  2020-01-02 05:41:26

正如我從您的代碼中看到的那樣，您已經設置了登錄和注冊頁面，它比現在更有效地保存注冊數據，您可以創建新的路由，例如

app.post("/register", function(req,res, next) {
    console.log('request data', req.body) // you will get signup for data here.
});

並在注冊時需要添加操作，例如 -

<form method="post" action="localhost:3000/register">
   <h1 id="signUp">Sign Up!</h1>
        <div>
            <input text="text" placeholder="First Name" name="" value="">
        </div>
        <div>
            <input text=text" placeholder="Last Name" name="Last Name" value="">
        </div>
        <div>
            <input text="text" placeholder="Email" name="Email" value="">
        </div>
        <div>
            <input text="text" placeholder="Password" name="Password" value="">
        </div>
        <input id="submit" type="button" name="" value="Sign In">
</form>

您可以對登錄驗證進行相同的操作，發送登錄詳細信息，如下所示 -

app.post("/checkLogin", function(req,res, next) {
    console.log('request data', req.body) // you will get login detail here.
});

跳這個幫助。

解決方案2
 0  2020-01-02 06:25:24

更新html：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <link href="./signup.js">

</head>
  <body>
    <div class="signupBox">
        <h1 id="signUp">Sign Up!</h1>
        <form action="signup" method="POST">
        <!-- it's important to define name="xx" here otherwise you'll get 'undefined' value in server side -->
        <div> <input type="text" placeholder="First Name" name="firstname"> </div>
        <div> <input type="text" placeholder="Last Name" name="lastname"> </div>
        <div> <input type="text" placeholder="Email" name="email"> </div>
        <div> <input type="password" placeholder="Password" name="password"> </div>
        <input id="submit" type="button" name="" value="Sign Up">
        </form>
    </div>
  </body>
  </html>

在服務器端添加此代碼：

app.post ("/signup", function(req, res) {
        // get info from form
        var firstname = request.body.firstname;
        var lastname = request.body.lastname;
        var email = request.body.email;
        var password = request.body.password;
        var adduserquery = "INSERT INTO `myTable` (`firstname`,`lastname`,`email`,`password`) VALUES ('" + firstname + "', '" + lastname + "', '" + email + "', '" + password + "')";

        if (email) {
           // check if e-mail already exists
            myDB.query('SELECT * FROM `myTable` WHERE email = ?', [email], function(error, results, fields) {
                if (results.length > 0) {
                    response.send('This e-mail is already registered!' );
                } else {
                    // execute query to insert data
                    myDB.query(adduserquery, (err, result) => {
                    if (err) {
                        return response.status(500).send(err);
                    }
                    // if insert is successful, return you to homepage
                    response.redirect('/home');
                });
            }
        });
    }
}
}

解決方案3
 0  2020-01-02 06:29:11

太好了，您已經添加了 express 模塊，我建議您嘗試添加表單標簽並將操作賦予表單標簽，在該標簽上您要點擊eg /signup並更改您的輸入類型按鈕以submit此鍛煉。

<div class="signupBox">
     <form action='/signup'>
        <h1 id="signUp">Sign Up!</h1>
        <div>
            <input text="text" placeholder="First Name" name="" value="">
        </div>
        <div>
            <input text=text" placeholder="Last Name" name="Last Name" value="">
        </div>
        <div>
            <input text="text" placeholder="Email" name="Email" value="">
        </div>
        <div>
            <input text="text" placeholder="Password" name="Password" value="">
        </div>
        <input id="submit" type="button" name="" value="Sign In">
     </form>
    </div>

現在，如果您單擊提交，則可以在您使用req.body.NAME_VALE創建的/signup route中req.body.NAME_VALE ，一旦您獲得該值，您就可以將其插入到數據庫中。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用Node.js從MySQL獲取數據並將其輸出為HTML 我想在 Node Js 中使用 Readline 從用戶那里獲取一些輸入。 而且我不知道在哪里打電話給 function 如何使用javascript和node.js-mysql而不使用php將HTML表單數據提交到MySql數據庫表中？ 我正在嘗試使用node.js將文件上傳到AWS，但我不知道我的代碼出了什么問題 如果我不知道參數數量（JS，Node.js），如何編寫函數 數據未使用node.js插入mongodb 使用 node.js 和 JavaScript 從 HTML 簡單表單插入 INTO MySQL 表 使用Node.js將表單數據發布到MySQL VS Code Node.js macOS 調試不起作用 - 我什至不知道如何說明問題 嘗試從html表單和Node.js發送數據
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM