溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
NodeJS對前端來說無疑具有里程碑意義，在其越來越流行的今天，掌握NodeJS已經不再是加分項，而是前端攻城師們必須要掌握的技能。本文將與同志們一起完成一個基于Express+MySQL的入門級服務端應用，即可以對數據庫中的一張表進行簡單的CRUD操作。但本人還是斗膽認為，通過這個應用，可以讓沒怎么接觸后端開發的同志對使用Node進行后端開發有一個大致了解。
Express工程環境準備
1. 安裝express，和express項目種子生成器（什么？你問第1步為什么不是安裝NodeJS，我也只能呵呵..）
安裝express
npm install express -g
安裝express
npm install express-generator -g
2. 創建工程。進入工程目錄，運行命令
express projectName
expresst項目種子生成器會幫我們生成express相應的工程結構，如下
/bin: 用于應用啟動
/public: 靜態資源目錄
/routes：可以認為是controller（控制器）目錄
/views: jade模板目錄，可以認為是view(視圖)目錄
app.js 程序main文件
3. 進入工程，安裝依賴，然后啟動應用在工程根目錄，使用npm install安裝依賴，使用npm start啟動應用。完成后，你在命令行工具里會看出如下界面，在瀏覽器中訪問會得到我們應用的默認頁面
MySQL環境準備
1. 當然，首先你要準備好MySQL環境。可以參看https://www.jb51.net/article/39188.htm進行安裝，同時也建議安裝一個數據庫管理工具，如navicat for mysql,方便操作
2. 創建表MySQL安裝好了后，進入到數據庫，創建要用到的表(如user), 結構如下
3. 安裝Node的MySQL驅動（請允許裝X一下…）在package.json的dependencies中新增, “mysql” : “latest”， 并執行npm install安裝依賴
編寫相關代碼，整合Express+MySQL
1. 首先，我們先建幾個目錄，簡單分下層（看出我還是很用心木有？）
在工程根目錄新增三個目錄：
util – 工具方法
conf – 配置
dao – 與數據庫交互
完成后的工程結構
2.在conf目錄中，編寫mySQL數據庫連接配置
// conf/db.js
// MySQL數據庫聯接配置
module.exports = {
mysql: {
host: '127.0.0.1',
user: 'root',
password: '',
database:'test', // 前面建的user表位于這個數據庫中
port: 3306
}
};
2. 編寫CRUD SQL語句
// dao/userSqlMapping.js
// CRUD SQL語句
var user = {
insert:'INSERT INTO user(id, name, age) VALUES(0,?,?)',
update:'update user set name=?, age=? where id=?',
delete: 'delete from user where id=?',
queryById: 'select * from user where id=?',
queryAll: 'select * from user'
};
module.exports = user;
3. 增加路由及實現數據庫的CRUD
以C（新增）的具體實現舉例，在/routes/users.js 中增加一個路由
// 增加用戶
router.get('/addUser', function(req, res, next) {
userDao.add(req, res, next);
});
在userDao中實現add方法
// dao/userDao.js
// 實現與MySQL交互
var mysql = require('mysql');
var $conf = require('../conf/conf');
var $util = require('../util/util');
var $sql = require('./userSqlMapping');
// 使用連接池，提升性能
var pool = mysql.createPool($util.extend({}, $conf.mysql));
// 向前臺返回JSON方法的簡單封裝
var jsonWrite = function (res, ret) {
if(typeof ret === 'undefined') {
res.json({
code:'1',
msg: '操作失敗'
});
} else {
res.json(ret);
}
};
module.exports = {
add: function (req, res, next) {
pool.getConnection(function(err, connection) {
// 獲取前臺頁面傳過來的參數
var param = req.query || req.params;
// 建立連接，向表中插入值
// 'INSERT INTO user(id, name, age) VALUES(0,?,?)',
connection.query($sql.insert, [param.name, param.age], function(err, result) {
if(result) {
result = {
code: 200,
msg:'增加成功'
};
}
// 以json形式，把操作結果返回給前臺頁面
jsonWrite(res, result);
// 釋放連接
connection.release();
});
});
}
};
4. 測試整合是否成功
因為前面實現的是一個get請求的add方法， 所以可以在瀏覽器中直接使用地址訪問，進入路由, http://localhost:3000/users/addUser?name=xyz&age=18.如果你得到如下JSON返回或看到數據表中有上面的數據插入，表示整合成功了
5. 同理，實現CRUD其它的方法，最終完整的的routes/user.js為：
var express = require('express');
var router = express.Router();
var userDao = require('../dao/userDao');
/* GET users listing. */
router.get('/', function(req, res, next) {
res.send('respond with a resource');
});
// 增加用戶
//TODO 同時支持get,post
router.get('/addUser', function(req, res, next) {
userDao.add(req, res, next);
});
router.get('/queryAll', function(req, res, next) {
userDao.queryAll(req, res, next);
});
router.get('/query', function(req, res, next) {
userDao.queryById(req, res, next);
});
router.get('/deleteUser', function(req, res, next) {
userDao.delete(req, res, next);
});
router.post('/updateUser', function(req, res, next) {
userDao.update(req, res, next);
});
module.exports = router;
完整的userDao.js為
// dao/userDao.js
// 實現與MySQL交互
var mysql = require('mysql');
var $conf = require('../conf/db');
var $util = require('../util/util');
var $sql = require('./userSqlMapping');
// 使用連接池，提升性能
var pool = mysql.createPool($util.extend({}, $conf.mysql));
// 向前臺返回JSON方法的簡單封裝
var jsonWrite = function (res, ret) {
if(typeof ret === 'undefined') {
res.json({
code:'1',
msg: '操作失敗'
});
} else {
res.json(ret);
}
};
module.exports = {
add: function (req, res, next) {
pool.getConnection(function(err, connection) {
// 獲取前臺頁面傳過來的參數
var param = req.query || req.params;
// 建立連接，向表中插入值
// 'INSERT INTO user(id, name, age) VALUES(0,?,?)',
connection.query($sql.insert, [param.name, param.age], function(err, result) {
if(result) {
result = {
code: 200,
msg:'增加成功'
};
}
// 以json形式，把操作結果返回給前臺頁面
jsonWrite(res, result);
// 釋放連接
connection.release();
});
});
},
delete: function (req, res, next) {
// delete by Id
pool.getConnection(function(err, connection) {
var id = +req.query.id;
connection.query($sql.delete, id, function(err, result) {
if(result.affectedRows > 0) {
result = {
code: 200,
msg:'刪除成功'
};
} else {
result = void 0;
}
jsonWrite(res, result);
connection.release();
});
});
},
update: function (req, res, next) {
// update by id
// 為了簡單，要求同時傳name和age兩個參數
var param = req.body;
if(param.name == null || param.age == null || param.id == null) {
jsonWrite(res, undefined);
return;
}
pool.getConnection(function(err, connection) {
connection.query($sql.update, [param.name, param.age, +param.id], function(err, result) {
// 使用頁面進行跳轉提示
if(result.affectedRows > 0) {
res.render('suc', {
result: result
}); // 第二個參數可以直接在jade中使用
} else {
res.render('fail', {
result: result
});
}
connection.release();
});
});
},
queryById: function (req, res, next) {
var id = +req.query.id; // 為了拼湊正確的sql語句，這里要轉下整數
pool.getConnection(function(err, connection) {
connection.query($sql.queryById, id, function(err, result) {
jsonWrite(res, result);
connection.release();
});
});
},
queryAll: function (req, res, next) {
pool.getConnection(function(err, connection) {
connection.query($sql.queryAll, function(err, result) {
jsonWrite(res, result);
connection.release();
});
});
}
};
除了update測試外，其它get請求都可以直接在瀏覽器中使用地址+參數完成測試。為了模擬post請求，同時簡單使用下jade模板（Express支持的一種模板引擎），我們在/views目錄新建三個jade文件
updateUser.jade
extends layout block content h2 更新用戶資料 form(method='post', action='/p/users/updateUser') div.form-row label span ID: input(type='text',name='id') div.form-row label span name: input(type='text',name='name') div.form-row label span age: input(type='text',name='age') div.form-row input(type='submit')
suc.jade
block content
h2 操作成功！
pre #{JSON.stringify(result)}
fail.jade
block content
h2 操作失敗！
pre #{JSON.stringify(result)}
以下是更新測試結果
最后，如果你使用的是idea或webStrom這樣的IDE，你就不需要安裝express和express項目種子生成器了。這兩個IDE是可以直接創建NodeJS項目
小結：
一個Express的helloWorld就差不多完成了, 可以通過這個鏈接下載此例子源代碼http://pan.baidu.com/s/1jGvd4Bc。更多Express的功能（如日志，自動化測試等），等待大家去解鎖，愿玩得愉快！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
