2017-04-10 12 views
0

我想製作一個註冊表格。按下「提交」按鈕後,腳本將打開我的MySql數據庫,並在「用戶」表中插入新行。 一切正常,但瀏覽器無法解釋NodeJs require函數。 一些其他職位據說使用browserify,但我想知道如果這可以做到沒有其他程序。用NodeJs在MySql中保存用戶信息

我的代碼:

register.html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"/> 
<title></title> 
<script src = "index.js" type="text/javascript"></script> 
<script src = "register.js" type = "text/javascript"></script> 

<link rel="stylesheet" type="text/css" href = "register.css"> 
</head> 

<body> 
<form name = "registerForm" method = "post"> 
<p id = "fillRule">Username must contain lower or uppercase or _! Fill in all boxes except the job! Pass must contain small and uppercase letters and its lenght must be at least 6 char, max 10!</p> 
<label for="username">Username:</label> 
<input type = "text" id = "username" name = "username" onchange = "checkUser()"> <br/> 
<label for="firstname">Firstname:</label> 
<input type = "text" id = "firstname" name = "firstame" onchange = "checkFirst()"> <br/> 
<label for="lastname">Lastname:</label> 
<input type = "text" id = "lastname" name = "lastname" onchange = "checkLast()"> <br/> 
<label for="job">Your job:</label> 
<input type = "text" id = "job" name = "job" onchange="checkJob()"> <br/> 
<label for="pass">Password:</label> 
<input type = "text" id = "pass" name = "pass" onchange = "checkPass()">  <br/> 
<label for="mail">E-mail:</label> 
<input type = "email" id = "mail" name = "mail" onchange = "checkMail()"> <br/> 
<input type = "button" value = "send" id = "gomb" disabled = "disabled" onclick = "registerButtonClick()"> 
</form> 
</body> 

</html> 

index.js

//export {addUser}; 

    // String formatting 
    if (!String.format) { 
    String.format = function(format) { 
     var args = Array.prototype.slice.call(arguments, 1); 
     return format.replace(/{(\d+)}/g, function(match, number) { 
      return typeof args[number] != 'undefined' 
       ? args[number] 
       : match 
       ; 
     }); 
    }; 
} 
// 

var mysql = require("mysql"); 

function createConnection(hostName, userName, passwd, db) 
{ 
    const con = mysql.createConnection({ 
     host: hostName, 
     user: userName, 
     password: passwd, 
     database: db 
    }); 
    return con; 
} 

function openConnection(con) 
{ 
    con.connect(function (err) { 
     if (err) { 
      console.log('Error connecting to Db'); 
      return; 
     } 
     console.log('Connection established'); 
    }); 
} 

function executeFullSelect(con, tableName) 
{ 
    const statement = "SELECT * FROM " + tableName + ";"; 
    con.query(statement, function(err, rows) 
    { 
     if (err) 
     { 
      throw err; 
     } 
     console.log("Data received from " + tableName + ".\n"); 
     console.log(rows); 
     /*for (var i = 0; i < rows.length; i++) 
     { 
      console.log(rows[i].UserName); 
     }*/ 
    }); 
} 

function insert(con, userName,firstName, lastName, job, mail, passwd) 
{ 
    const statement = String.format("call newUser(\"{0}\", \"{1}\", \"{2}\", \"{3}\", \"{4}\", \"{5}\");", userName, firstName, lastName, job, mail, passwd); 
    con.query(statement, function(err, rows) 
    { 
     if (err) 
     { 
      console.log("Error at insert"); 
      return 0; 
     } 

     console.log(userName + " was successfully added:)"); 
     return 1; 
    }) 
} 

function closeConnection(con) 
{ 
    con.end(function (err) {}); 
} 

function addUser(userName, firstName, lastName, job, mail ,passwd) 
{ 
    const con = createConnection("localhost", "root", "micimacko", "users"); 
    openConnection(con); 
    if (!insert(con, userName, firstName, lastName, job, mail ,passwd)) 
    { 
     closeConnection(con); 
     return 0; 
    } 
    closeConnection(con); 
    return 1; 
} 

register.js

function registerButtonClick() 
{ 
    const userName = document.forms["registerForm"]["username"].value; 
    const firstName = document.forms["registerForm"]["firstname"].value; 
    const lastName = document.forms["registerForm"]["lastname"].value; 
    const job = document.forms["registerForm"]["job"].value; 
    const mail = document.forms["registerForm"]["mail"].value; 
    const pass = document.forms["registerForm"]["pass"].value; 

    if (addUser(userName, firstName, lastName, job, mail, pass)) 
    { 
     alert("added"); 
    } 
    else 
    { 
     alert("failed"); 
    } 
} 
+0

爲什麼在網頁上包含服務器端代碼? –

+0

那是我的問題。我應該怎麼做纔對? –

+0

通過在node.js中運行node.js代碼,而不是試圖將其包含在網頁上。他們是完全獨立的東西。您確實已將node.js設置爲服務器? –

回答

0

您無法直接從瀏覽器連接到您的MySQL數據庫。節點是瀏覽器中Javascript解釋器的獨立環境,它在服務器中運行,並且在那裏您應該連接到數據庫。這是相當容易地創建與節點的HTTP服務器:

var http = require('http'); 
var port = 3000; 

const requestHandler = function (request, response) { 
console.log(request.url) 
response.end('Hello Node.js Server!'); 
}; 

const server = http.createServer(requestHandler); 

server.listen(port, function (err) { 
    if (err) { 
    return console.log('something bad happened', err) 
    } 
    console.log('server is listening on ' + port); 
}); 

你會的,但是,處理路由直接用手(根據在URL請求的路徑執行不同的操作), 所以我建議你閱讀關於Node的一些Web框架,例如Expressjs⁽¹⁾。

在快遞,你可以這樣做:「世界」

var express = require('express'); 
var app = express(); 

app.get('/hello', function (req, res) { 
    res.send('Hello'); 
}); 

app.get('/world', function (req, res) { 
    res.send('World'); 
}); 

app.listen(3000, function() { 
    console.log('Example app listening on port 3000!') 
}); 

這將使你https://localhost:3000/hellohttps://localhost:3000/world,一個返回「你好」,另一個返回

至於之間的通信瀏覽器和服務器,你可以使用AJAX。我會建議你使用獲取,⁽²⁾但你可以使用jQuery.ajax⁽³⁾還,還是真的沒有其他解決辦法,甚至可以直接調用瀏覽器的XMLHttpRequest.⁽⁴⁾

⁽¹⁾https://expressjs.com

⁽²⁾取是在瀏覽器中,您可以通過此填充工具已經使用的Web請求了新的標準:https://github.com/github/fetch

⁽³⁾http://api.jquery.com/jquery.ajax/

⁽⁴⁾http://youmightnotneedjquery.com/#ajax

相關問題