node連線mysql資料庫例項
阿新 • • 發佈:2021-08-01
Express生成應用
首先假定你已經安裝了Node.js,接下來通過應用生成器工具 express 可以快速建立一個應用的骨架。
通過如下命令安裝express和express-generator:
$ npm install express -g
$ npm install express-generator -g
當前工作目錄下建立一個命名為 myapp 的應用:
$ express myapp create : myapp create : myapp/package.json create : myapp/app.js create : myapp/public create : myapp/public/javascripts create : myapp/public/images create : myapp/routes create : myapp/routes/index.js create : myapp/routes/users.js create : myapp/public/stylesheets create : myapp/public/stylesheets/style.css create : myapp/views create : myapp/views/index.jade create : myapp/views/layout.jade create : myapp/views/error.jade create : myapp/bin create : myapp/bin/www
然後安裝所有依賴包:
$ cd myapp
$ npm install
啟動這個應用(MacOS 或 Linux 平臺):
$ DEBUG=myapp npm start
Windows 平臺使用如下命令:
> set DEBUG=myapp & npm start
然後在瀏覽器中開啟 http://localhost:3000/ 網址就可以看到這個應用了。
通過 Express 應用生成器建立的應用一般都有如下目錄結構:
. ├── app.js ├── bin │ └── www ├── package.json ├── public │ ├── images │ ├── javascripts │ └── stylesheets │ └── style.css ├── routes │ ├── index.js │ └── users.js └── views ├── error.jade ├── index.jade └── layout.jade 7 directories, 9 files
MySQL資料庫
連線本地資料庫
安裝navicat和MySQL。
進入【系統偏好設定】啟動本地mysql服務:
在navicat中連線本地資料庫:
建立資料庫
建立一個測試資料庫nodesample,在資料庫中建一個userinfo表
CREATE DATABASE IF NOT EXISTS nodesample CHARACTER SET UTF8; USE nodesample; SET FOREIGN_KEY_CHECKS=0; DROP TABLE IF EXISTS `userinfo`; CREATE TABLE `userinfo` ( `Id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主鍵', `UserName` varchar(64) NOT NULL COMMENT '使用者名稱', `UserPass` varchar(64) NOT NULL COMMENT '使用者密碼', PRIMARY KEY (`Id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='使用者資訊表';
node連線資料庫
Node.js與MySQL互動操作有很多庫,這裡選擇felixge/node-mysql。
安裝mysql模組
$ npm install mysql --save
開啟routes/users.js
,引入mysql模組
var mysql = require('mysql');
建立連線
var connection = mysql.createConnection({
host: '127.0.0.1',
user: 'root',
password: '123',
port: '3306',
database: 'nodesample'
});
connection.connect(function(err){
if(!err) {
console.log("Database is connected ... nn");
} else {
console.log("Error connecting database ... nn");
}
});
實現RESTFUL介面
- 增
/*
* PUT to updateuser.
*/
router.put('/updateuser/:id', function(req, res) {
var userUpSql = 'UPDATE userinfo SET ? WHERE Id='+req.params.id;
connection.query(userUpSql, req.body, function(err, result) {
res.send(
(err === null) ? { msg: '' } : { msg: err }
);
});
});
- 刪
/*
* DELETE to deleteuser.
*/
router.delete('/deleteuser/:id', function(req, res) {
var userDelSql = 'DELETE FROM userinfo where Id='+req.params.id;
connection.query(userDelSql, function (err, result) {
res.send((err === null) ? { msg: '' } : { msg:'error: ' + err });
});
});
- 改
/*
* POST to adduser.
*/
router.post('/adduser', function(req, res) {
connection.query('INSERT INTO userinfo SET ?', req.body, function(err, result) {
res.send(
(err === null) ? { msg: '' } : { msg: err }
);
});
});
- 查
/* GET users listing. */
router.get("/userlist",function(req,res){
connection.query('SELECT * from userinfo', function(err, rows, fields) {
if (!err)
res.json(rows);
else
console.log('Error while performing Query.');
});
});
畫頁面
在public/javascripts中新建global.js,並開啟views/layout.jade,
在末尾引入jquery和global.js。
script(src='http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js')
script(src='/javascripts/global.js')
開啟views/index.jade,寫好頁面結構:
extends layout
block content
// Wrapper
#wrapper
// USER INFO
#userInfo
h2 User Info
p
strong Name:
| <span id='UserName'></span>
br
strong Pass:
| <span id='UserPass'></span>
// /USER INFO
// USER LIST
h2 User List
#userList
table
thead
th UserName
th UserPass
th Delete?
th Edit?
tbody
// /USER LIST
// ADD USER
h2 Add User
#addUser
fieldset
input#inputUserName(type='text', placeholder='Username')
input#inputUserPass(type='text', placeholder='UserPass')
br
button#btnAddUser Add User
// /ADD USER
.mask
#upUser.alert
fieldset
input#modId(type='hidden')
input#modUserName(type='text', placeholder='Username')
input#modUserPass(type='text', placeholder='UserPass')
br
button#btnModUser Modify User
樣式寫在public/stylesheets/style.css裡,可以看我放到github上的原始碼。
呼叫介面
在上面新建的global.js裡編寫呼叫介面的程式碼
- 查資料並畫表格
function populateTable() {
var tableContent = '';
$.getJSON( '/users/userlist', function( data ) {
userListData = data;
$.each(data, function(){
tableContent += '<tr>';
tableContent += '<td><a href="#" class="linkshowuser" rel="' + this.UserName + '" title="Show Details">' + this.UserName + '</a></td>';
tableContent += '<td>' + this.UserPass + '</td>';
tableContent += '<td><a href="#" class="linkdeleteuser" rel="' + this.Id + '">delete</a></td>';
tableContent += '<td><a href="#" class="linkupdateuser" rel="' + this.Id + '">edit</a></td>';
tableContent += '</tr>';
});
$('#userList table tbody').html(tableContent);
});
};
- 增
function addUser(event) {
event.preventDefault();
// 每個輸入框必填
var errorCount = 0;
$('#addUser input').each(function(index, val) {
if($(this).val() === '') { errorCount++; }
});
if(errorCount === 0) {
var newUser = {
'UserName': $('#addUser fieldset input#inputUserName').val(),
'UserPass': $('#addUser fieldset input#inputUserPass').val()
};
$.ajax({
type: 'POST',
url: '/users/adduser',
data: newUser,
dataType: 'JSON'
}).done(function( response ) {
if (response.msg === '') {
// Clear the form inputs
$('#addUser fieldset input').val('');
// Update the table
populateTable();
}
else {
alert('Error: ' + response.msg);
}
});
}
else {
alert('Please fill in all fields');
return false;
}
};
- 刪
function deleteUser(event) {
event.preventDefault();
// 確定刪除嗎
var confirmation = confirm('Are you sure you want to delete this user?');
if (confirmation === true) {
$.ajax({
type: 'DELETE',
url: '/users/deleteuser/' + $(this).attr('rel')
}).done(function( response ) {
if (response.msg === '') {
}
else {
alert('Error: ' + response.msg);
}
populateTable();
});
}
else {
return false;
}
};
- 改
function updateUser(event) {
event.preventDefault();
// 每個輸入框必填
var errorCount = 0;
$('#upUser input').each(function(index, val) {
if($(this).val() === '') { errorCount++; }
});
if(errorCount === 0) {
var upUser = {
'UserName': $('#upUser fieldset input#modUserName').val(),
'UserPass': $('#upUser fieldset input#modUserPass').val()
};
$.ajax({
type: 'PUT',
url: '/users/updateuser/' + $('#upUser fieldset input#modId').val(),
data: upUser,
dataType: 'JSON'
}).done(function( response ) {
if (response.msg === '') {
$('.mask').hide();
$('.alert').hide();
populateTable();
}
else {
alert('Error: ' + response.msg);
}
});
}
else {
return false;
}
};
完整的程式碼可以去github上檢視,以下是最終效果:
參考文章
express
用NODE.JS,EXPRESS,MONGODB建立一個簡單的RESTFUL WEB APP