第3回鹿児島node.jsの会資料＿内村
•
1 gefällt mir•1,616 views
鹿児島Node.jsの会第3回資料です。Mysql（sequelize）を使った簡単なフォーム作成ができるないようになっています。
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie 第3回鹿児島node.jsの会資料＿内村
Ähnlich wie 第3回鹿児島node.jsの会資料＿内村 (20)
Mehr von Koichi Uchimura
Kürzlich hochgeladen
Kürzlich hochgeladen (9)
第3回鹿児島node.jsの会資料＿内村
- 9. app.jsに追記 app.jsに以下の内容を追記していきます。 １．上のほうのrequireが並んでいるところに , Sequelize = require(‘sequelize’) ２．app.configure(‘development’), function(){ … }); の後に var sequelize = new Sequelize(‘kagonode’, ‘root’, ‘password’, { host: “localhost”, port: 3306 さっきXAMPPで指定したパスワード }); を追記します。これで下準備はOK。
- 11. まずはapp.jsに書いていきます <<app.js>> var User = sequelize.define(‘test’, { id: Sequelize.INTEGER, name: Sequelize.STRING, age: Sequelize.INTEGER, sex: Sequelize.BOOLEAN }); これでデータベースの設定が完了！
- 12. 次はMySQLデータベースを作成します コマンドプロンプトを開いて以下を入力。 mysql –u root –p○○（○○はパスワード） 次に create database kagonode これでデータベースが出来ました。次にテーブルを作ります。 create table users ( 複数形になることに注意！ id int primary key auto_increment, name varchar(16), age int, sex boolean, この2行は必須です！ createdat date, updatedat date );
- 13. MySQLにデータを追加します。 insert into users (name, age, sex) values (“kagonma”, “16”, true); もいっちょ insert into users (name,age,sex) values(“kagojo”, “18”, false); これでOK。
- 14. 再びapp.jsをいじります。 localhost:3000/usersにアクセスしたときに、 idが1のデータの内容を表示するようにします。 <<app.js>> app.get(‘/users’, function(req, res){ User.find({where: {id:1})).success( function(data){ res.render(‘user.ejs’, { id: data.id, name: data.name, age: data.age, sex: data.sex}); }); }); これでOK
- 15. user.ejsを作成 ささっとuser.ejsを作っちゃいます。 <<user.ejs>> <body> <p>ID:<%= id %></p> <p>name:<%= name %></p> <p>age:<%= age %></p> <p>sex:<%= sex %></p> </body>
- 16. さあ、アクセスしましょう MySQLは起動してますか？では、 「http://localhost:3000/users」にアクセス！ 以下の内容が表示されましたか？ ID: 1 name: Kagonma age: 16 sex: true
- 19. これまでの応用で簡単に出来ます。 それでは会員フォームを作ってみましょう。 <<app.js>> var Member = sequelize.define(‘member’, { id: Sequelize.INTEGER, name: Sequelize.STRING, age: Sequelize.INTEGER, address: Sequelize.STRING, phone: Sequelize.STRING }); DBの宣言部分です。
- 20. app.jsを加工 <<app.js>> app.post(‘/regist’, function(req, res){ var SourceCode = Member.build({ name : req.body.name, age : req.body.age, address : req.body.address, phone : req.body.phone }); SourceCode.save().success(function(){ console.log(‘DB save success’); res.render(‘success.ejs’, {}); }); }); フォームから送られた データをDBに書き込んでいます。
- 21. 更にapp.jsを加工 <<app.js>> app.get(‘/member’, function(req, res){ Members.findAll().success(function (data){ var ids = []; localhost:3000/members var names = []; var ages = []; にアクセスしたときに、 var addresses = []; メンバーの一覧を返します。 var phones = []; data.forEach(function(dat){ ids.push(dat.id); names.push(dat.name); ages.push(dat.age); addresses.push(dat.address); phones.push(dat.phone); }); res.render(‘member.ejs’, {id: ids, name: names, age: ages, address: addresses, phone: phones}); }); });
- 22. これも忘れずに！ <<app.js>> app.get(‘/regist’, function(req, res){ res.render(‘regist.ejs, {}); }); これでapp.js側の記述は大丈夫です。 後はejsを書いていきます。
- 23. regist.ejsを作成します。 <<regist.ejs>> <body> <form method=“post” action=“/regist” > name:<input type=“text” name=“name”><br /> age:<input type =“text” name=“age”><br /> address:<input type=“text” name=“address”><br /> phone:<input type=“text” name=“phone”><br /> <input type=“submit” value=“submit” /> </form> </body>
- 24. member.ejsを作成します。 <<member.ejs>> <body> <table> <% for(var I = 0; i<id.length; i++){ %> <tr> <td><%= id[i] %></td> <td><%= name[i] %></td> <td><%= age[i] %></td> <td><%= address[i] %></td> <td><%= phone[i] %></td> </tr> <% } %> </table> </body>
- 26. 最後にMySQLのテーブルを作成します。 コマンドプロンプト（ターミナル）で、 mysql –u root –p○○を入力。（○○はパスワード） use kagonodeでデータベースを選択した後、以下を記述。 create table members ( id int primary key auto_increment, name varchar(16), age int, address varchar(32), phone varchar(16), createdat date, updatedat date );