KrakenJS – Kết nối Database và truy vấn CRUD đơn giản
Trong bài trước mình đã hướng dẫn các bạn về controller và view trong KrakenJs. Ở bài này mình sẽ hướng dẫn các bạn kết nối với CSDL MongoDb và thực hiện các truy vấn CRUD đơn giản.
Thông thường chúng ta sẽ sử dụng lệnh
[code]node server.js[/code]
hoặc
[code]npm start[/code]
Tuy nhiên nếu sử dụng thế này thì mỗi khi có sự thay đổi trong code chúng ta phải khởi động lại server để cập nhật lại, việc này đôi lúc khá mất thời gian. Vì vậy, chúng ta sẽ cài đặt Nodemon để server khởi động lại mỗi khi code Javascript của ứng dụng có thay đổi.
[js]
npm install -g nodemon
[/js]
Sau khi cài đặt xong, chúng ta sẽ sử dụng lệnh
[code]nodemon server.js[/code]
để chạy ứng dụng, và khi cần restart server thủ công thì dùng lệnh
[code]rs[/code]
Cài đặt thư viện Mongoose
[js]
npm install –save mongoose
[/js]
Sau khi chạy lệnh này bộ thư viện mongoose sẽ được tải về thư mục node_modules. Tiếp theo hãy mở mongoDb lên và tạo mới database có tên là
[code]simpleblog[/code]
và mở file config/config.json để cấu hình tham số kết nối tới datatabase.
Thêm nội dung này sau cấu hình middleware, nhớ là thêm dấu “,” để ngăn cách đoạn cấu hình:
[code]
"databaseConfig": {
"host": "localhost",
"database": "simpleblog"
}
[/code]
Tiếp theo hãy tạo thư mục /library và thêm file database.js chứa các lệnh kết nối db.
[js]
‘use strict’;
var mongoose = require(‘mongoose’);
var db = function () {
return {
/**
* Open a connection to the database
* @param conf
*/
config: function (conf) {
mongoose.connect(‘mongodb://’ + conf.host + ‘/’ + conf.database);
var db = mongoose.connection;
db.on(‘error’, console.error.bind(console, ‘connection error:’));
db.once(‘open’, function callback() {
console.log(‘db connection open’);
});
}
};
};
module.exports = db();
[/js]
Tiếp theo hãy mở file index.js lên và thêm vào sau lệnh require krakenJS:
[js]
var db = require(‘./library/database’);
[/js]
Sửa nội dung trong onconfig của biến options:
[js]
var dbConfig = config.get(‘databaseConfig’);
db.config(dbConfig);
next(null, config);
[/js]
Server sẽ tự khởi động lại và ta được kết quả:
Vậy là đã kết nối xong.
Thực hiện truy vấn đơn giản
Trong bài viết này chúng ta sẽ thực hiện thao tác thêm, xóa, sửa 1 bài viết.
Đầu tiên, hãy tạo model cho bài viết bằng cách thêm file post.js vào thư mục models với nội dung:
[js]
‘use strict’;
var mongoose = require(‘mongoose’);
var ObjectId = mongoose.Schema.Types.ObjectId;
var schema = mongoose.Schema({
title: {type: ‘String’, required: true, index:true},
description: {type: ‘String’, required: true},
content: {type: ‘String’, required: true},
creationDate: {type: ‘Date’, required: true}
});
module.exports = mongoose.model(‘Post’, schema);
[/js]
Trong file này chỉ đơn giản là tạo cấu trúc schema và export model Post vào ứng dụng.
Ở bài trước chúng ta đã tạo router và view cho thao tác này rồi, nhưng sau khi submit form thêm bài viết thì ta mới chỉ hiện nội dung ra thôi chứ chưa xử lý thêm dữ liệu vào database. Bây giờ chúng ta hãy bổ sung vào controller index model Post.
[js]
var PostModel = require(‘../models/post’);
[/js]
Trong function chính ta khởi tạo mới đối tượng Post:
[js]
var Post = new PostModel();
[/js]
Sửa lại
[js]
router.post(‘/post/create’, function(req, res){
res.json({
title: req.body.title,
description: req.body.description,
content: req.body.content
});
});
[/js]
thành
[js]
router.post(‘/post/create’, function(req, res){
var newPost = new PostModel();
// Tạo đối tượng thể hiện lại của lớp PostModel.
newPost.title = req.body.title;
newPost.description = req.body.description;
newPost.content = req.body.content;
newPost.creationDate = new Date();
newPost.save(function(err, post) {
if (err) {
res.send(err);
//Nếu có lỗi thì trả về lỗi.
} else {
res.json(post);
// Ngược lại trả về đối tượng post chứa dữ liệu
// vừa mới được chèn vào DB.
}
});
});
[/js]
Sau khi nhấn nút thêm, nội dung bài viết mới sẽ được hiển thị dưới dạng json.
Kết quả
Như bạn thấy, bảng mới có tên là “posts” được tạo và lưu trữ giá trị mà chúng ta vừa submit từ form.
Tiếp theo chúng ta sẽ hiển thị danh sách bài viết mới được thêm.
controllers/index.js
[js]
router.get(‘/post/list’, function(req, res) {
PostModel.find({}, function(err, posts) {
if(err)
res.send(err);
res.render(‘list’, {posts: posts});
});
});
[/js]
Tạo view để hiển thị danh sách bài viết:
– public/templates/list.dust
[html]
{>"layouts/master" /}
{<body}
<div class="col-xs-6 col-xs-offset-3">
<h2 class="text-center">Bài viết</h2>
{#posts}
<div>
<h4><a href="#">{title}</a></h4>
<p>{description}</p>
<a href="/post/edit/{_id}" class="btn btn-info">Sửa</a>
</div>
<hr>
{/posts}
</div>
{/body}
[/html]
Kết quả:
– Tiếp theo ta sẽ thực hiện thao tác update bài viết.
Tạo route mới hiển thị trang sửa bài viết:
[js]
router.get(‘/post/edit/:id’, function(req, res) {
PostModel.findById(req.params.id, function(err, post) {
if (err) {
res.send(err);
} else {
res.render(‘edit’, post);
}
});
});
[/js]
– Tạo view cho thao tác edit:
public/templates/edit.dust
[html]
{>"layouts/master" /}
{<body}
<div class="col-xs-6 col-xs-offset-3">
<h2 class="text-center">Sửa bài viết</h2>
<form action="/post/edit/{_id}" method="POST">
<input type="hidden" name="_csrf" value="{_csrf}" />
<div class="form-group">
<label for="title" class="control-label">Tiêu đề</label>
<input class="form-control" name="title" value="{title}" />
</div>
<div class="form-group">
<label for="description" class="control-label">Mô tả ngắn</label>
<textarea class="form-control" name="description">{description}</textarea>
</div>
<div class="form-group">
<label for="content" class="control-label">Nội dung</label>
<textarea class="form-control" name="content">{content}</textarea>
</div>
<div class="form-group">
<button type="submit" name="submit" class="btn btn-primary">Sửa</button>
</div>
</form>
</div>
{/body}
[/html]
Kết quả khi nhấn Edit bài viết:
Tiếp theo ta sẽ viết xử lý cho nút sửa trong index controller:
[js]
router.post(‘/post/edit/:id’, function(req, res){
PostModel.findById(req.params.id, function(err, post){
if(err)
res.send(err);
post.title=req.body.title;
post.description = req.body.description;
post.content = req.body.content;
post.save(function(err, post){
if(err)
res.send(err);
res.redirect(‘/post/list’);
});
});
});
[/js]
Test thử bằng cách nhấn nút sửa bài viết và nhấn nút cập nhật, bài viết sẽ được sửa và redirect lại trang danh sách.
– Tiếp theo là thao tác xóa, bây giờ hãy quay lại view list.dust và thêm nút xóa
[html]
<a href="/post/delete/{_id}" class="btn btn-danger">Xóa</a>
[/html]
Tạo route thực hiện thao tác xóa bài viết:
[js]
router.get(‘/post/delete/:id’, function(req, res){
PostModel.remove({_id: req.params.id}, function(err, post){
if(err)
res.send(err);
res.redirect(‘/post/list’);
});
});
[/js]
Sau nhấn nút xóa, hệ thống sẽ xóa bài viết trong db và redirect về trang danh sách bài viết. Bạn có thể thấy bài viết đã được xóa.
Lời kết
Trong bài hướng dẫn này mình chỉ demo các thao tác với database trong KrakenJs nên các thao tác xử lý còn khá thô sơ, và chưa có thông báo sau các hành động, với project của bạn thì hãy làm cho nó đầy đủ hơn nhé.
Hi vọng qua bài viết này bạn có thể hiểu hơn về cách tạo model và tương tác với cơ sở dữ liệu MongoDb trong KrakenJS.
Mã nguồn của bài viết bạn có thể tham khảo tại: https://github.com/sangnguyenplus/KrakenJS—Tutorial
Mọi thắc mắc hay lỗi gặp phải vui lòng để lại bình luận để mình hỗ trợ. Chúc các bạn thành công 🙂
- Địa chỉ: Hồ Chí Minh
- Facebook: Sang Nguyen