2017-02-23 11 views
0

プログラミングに慣れていない、node.jsで基本的なアプリケーションを作成しようとしています。node.jsを使ってmysqlデータベースにデータを追加する

私は、HTMLの代わりに、ヒスイでのVisual StudioでのNode.jsを使用しています。私は名前、姓、性別の簡単なフォームを持っています。私はmysqlのworkbenchでデータベースを設定することもできました。

は、私は、コードを実行するとmysqlデータベースに正常に名前、姓と性別を追加し、次のクエリを持っています。

送信ボタンをクリックしたときにフォームからデータを収集する必要がある場合、私は立ち往生しています。

私はアヤックスで行うには、その何かを推測、私はPHPでいくつかの解決策を見つけましたが、私はNode.jsの持つソリューションとどのようにコードを実装するを見つけることに苦労しています。ここで

はapp.jsファイル

/** 
* Module dependencies. 
*/ 

var express = require('express'); 
var routes = require('./routes'); 
var http = require('http'); 
var path = require('path'); 
var mysql = require('mysql'); 

var app = express(); 

var connection = mysql.createConnection({ 
    host: 'localhost', 
    user: 'root', 
    password: 'my_password', 
    database: 'userlist', 
}); 

connection.connect(); 

var user = { "name": "RandomName", "surname": "RandomSurnameName", "gender" : "M" }; 
connection.query('INSERT INTO studentinfo SET ?', user, function (err, res) { 
    if (err) throw err; 


}); 



//connection.query('SELECT * FROM studentinfo', function (err, rows) { 
// if (err) throw err; 

// console.log('Data received from Db:\n'); 
// console.log(rows); 
//}); 





// all environments 
app.set('port', process.env.PORT || 3000); 
app.set('views', path.join(__dirname, 'views')); 
app.engine('html', require('ejs').renderFile); 
app.set('view engine', 'html'); 
app.use(express.favicon()); 
app.use(express.logger('dev')); 
app.use(express.json()); 
app.use(express.urlencoded()); 
app.use(express.methodOverride()); 
app.use(app.router); 
app.use(require('stylus').middleware(path.join(__dirname, 'public'))); 
app.use(express.static(path.join(__dirname, 'public'))); 
// development only 
if ('development' == app.get('env')) { 
    app.use(express.errorHandler()); 
} 

app.get('/', routes.index); 
app.get('/about', routes.about); 
app.get('/contact', routes.contact); 
app.get('/newStudent', routes.newStudent); 

http.createServer(app).listen(app.get('port'), function() { 
    console.log('Express server listening on port ' + app.get('port')); 
}); 


var createStudent = { 

    name: String, 
    surname: String, 
    dob: Date, 
    gender: String, 

} 


connection.query('insert into userlist set ?', createStudent, function (err, result) { 

}); 
+0

コード/設定について詳しく教えてください。あなたのページはどのように見えますか?あなたのサーバーはどのように見えますか? – paqash

+0

私は今システムにはいませんが、私はちょうどデフォルトのエクスプレステンプレートを使い始めるだけで、この簡単なフォームを追加してデータベースに値を取得する方法を学びました。また、私はサーバーについてあなたの質問を得ることができませんでした。あなたは詳細を教えてくれますか? –

+0

私はあなたが助けを必要としている場所を正確にはわかりません。フォームからエクスプレスサーバーに値を送信するか、サーバー上でルートを作成して送信を処理するか、ルートハンドラーからコントローラーメソッドを呼び出すか、または上記のすべてを実行しますか? – paqash

答えて

0

で[OK]を、のはそれに打撃を与えてみましょう。 HTMLページ

、あなたは学生の詳細を提出する必要があります。

<form action="/student" method="post"> 
    First name:<br> 
    <input type="text" name="name"<br> 
    Last name:<br> 
    <input type="text" name="surname"><br> 
    Date of birth:<br> 
    <input type="text" name="dob"<br> 
    Gender:<br> 
    <input type="text" name="gender"><br><br> 
    <input type="submit" value="Submit"> 
</form> 

これは明らかに単純化されるが、それはトリックを行います:非常に非常に基本的な形は次のようになります。だからいくつかのボックスとボタンPOSTこのサーバーに/studentルートになります。

今、私たちは急行サーバー上でそのルートを処理する必要があります。既にgetのルートがあるので、これを追加してください:

app.post('/', function (req, res) { 
    // this is where you handle the POST request. 
    var createStudent = { 
    name: req.body.name, 
    surname: req.body,surname, 
    dob: req.body.dob, 
    gender: req.body.gender 
    } 
    // now the createStudent is an object you can use in your database insert logic. 
    connection.query('INSERT INTO studentinfo SET ?', createStudent, function (err, resp) { 
    if (err) throw err; 
    // if there are no errors send an OK message. 
    res.send('Save succesfull'); 
    }); 
}); 
+0

ニース!それは動作します!ありがとうございました....私はmysqlテーブルのいくつかのステートメントと設定で遊んでみました。私が後で把握できるデータベースについていくつかのことがありますが、このケースについて私が疑問に思っている唯一のことは、最後の行です - >> re.send();新しいページの中にコメントを入れて、そのステートメントを削除すると、フォームのページはそのままですが、ブラウザには何らかのプロセスが進行中であることが示されます。何が起こっている? –

+0

あなたは 'res.status(200).send()'のようなものを試すことができます – paqash

+0

それは動作しませんでしたが、私はその答えを見つけました...ロケーションリロードonsubmit。助けてくれてありがとう! –

関連する問題