Hướng dẫn lọc sản phẩm nodejs
How to Remove Array Duplicates in ES6. Có những câu hỏi tôi thường thấy trên những diễn đàn như reddit hay stackoverflow vấn đề làm sao để loại bỏ những phần tử trùng nhau trong array một cách nhanh gọn mà không làm code của bạn rối tung lên. Sau đây bài viết sẽ giúp bạn làm được điều đó với 6 cách loại bỏ phần tử trùng lặp.
1. Sử dụng thuộc tính indexOf của mảng để truy vấn
Bởi vì khi ES6 được giới thiệu thì lúc đó cũng có sự nhầm lẫn giữa FindIndex vs indexOf trong javascript. Chính vì lẽ đó nên nhớ sử dụng indexOf[] khi tìm index của một array kiểu primitive types [like string, number, or boolean].
function unique[arr] {
var newArr = []
for [var i = 0; i < arr.length; i++] {
if [newArr.indexOf[arr[i]] === -1] {
newArr.push[arr[i]]
}
}
return newArr
}
console.log[unique[[1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]]]
2. Sắp xếp mảng ban đầu trước, so sánh nó với các mảng liền kề và lưu trữ chúng trong mảng mới nếu chúng khác nhau.
Đây có thể gọi là một phương pháp lập trình theo tư duy, mỗi người có một cách để giải quyết.
function unique[arr] {
var formArr = arr.sort[]
var newArr = [formArr[0]]
for [let i = 1; i < formArr.length; i++] {
if [formArr[i] !== formArr[i - 1]] {
newArr.push[formArr[i]]
}
}
return newArr
}
console.log[unique[[1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]]]3. Sử dụng các đặc điểm hiện có của thuộc tính đối tượng và lưu trữ nó trong một mảng mới nếu không có thuộc tính đó.
function unique[arr] {
var obj = {}
var newArr = []
for [let i = 0; i < arr.length; i++] {
if [!obj[arr[i]]] {
obj[arr[i]] = 1
newArr.push[arr[i]]
}
}
return newArr
}
console.log[unique[[1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]]]
4. Sử dụng includes[]
function unique[arr] {
var newArr = []
for [var i = 0; i < arr.length; i++] {
if [!newArr.includes[arr[i]]] {
newArr.push[arr[i]]
}
}
return newArr
}
console.log[unique[[1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]]]
5. Sử dụng filter và includes
Tips: Cẩn thẩn khi sử dụng filter trong es6
function unique[arr] {
var newArr = []
newArr = arr.filter[function [item] {
return newArr.includes[item] ? '' : newArr.push[item]
}]
return newArr
}
console.log[unique[[1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]]]
6. Sử dụng Set[] của ES6.
Sự tiện dụng của map và set trong ES6 là một điều tuyệt vời khi ES mang lại cho mỗi lập trình javascript.
Ý tưởng cái này cũng đơn giản thôi thì như các bạn đã biết thì bây giờ mình sẽ tạo một trang page chứa chứa tất cả sản phẩm đúng không nào. Nhưng bây giờ nếu như chúng ta có 200 sản phẩm mà chỉ đặt chúng lên một trang thì đó không phải là cách tối ưu và trải nghiệm người dùng không được tốt. Nên chúng ta sẽ sử dụng kỹ thuật phân trang[pagination].
Hướng để làm cái thì mình bắt buộc phải có sản phẩm[data] gì đó rồi mới làm phân trang cho nó đúng không nào. Bây giờ mình muốn phân làm 4 trang mỗi trang 16 sản phẩm[data] thế là chúng ta cần phải tạo 64 sản phẩm à tạo khi nào cho xong nên ta cần phải fake data cho chúng =]]
Bài này mình chỉ hướng dẫn các bạn làm về pagination nên mới fake data chớ vào thực tế thì các bạn phải tạo sản phẩm đầy đủ nha.
Sau khi mà fake data thì đây là bước quan trọng nhất đó là phân trang các bạn xem tiếp để biết thêm chi tiết nha. Đó cũng chính là ý tưởng của mình và bây giờ chúng ta sẽ biến ý tưởng thành hiện thực.
Và đây là giao diện cho trang chủ của chúng ta
2 để khi chúng ta click vào router đó nó sẽ tự động tạo cho ta hàng loạt các data fake và lưu vào database như ta mong muốn.
Mình sẽ giải thích qua một chút đó là chúng ta tạo một vòng lặp để làm gì để nó có thể tự động tạo số lượng data mà mình muốn fake. Trong vòng lặp đó tạo một object empty để chứa các thuộc tính của một sản phẩm như name, price, coverImg và lưu vào database rồi redirect trang chủ. Còn các API để tạo dữ liệu fake các bạn xem nó cũng khá là đơn giản.const express = require["express"]
const router = express.Router[]
const faker = require['faker'];
const Product = require["../models/product.model"]
.............
.............
.............
// Fake data products
router.get['/generate-fake-data', async[req, res, next] =>{
for[let i = 0; i < 96; i++] {
const newprd = new Product[];
newprd.name = faker.commerce.productName[]
newprd.price = faker.commerce.price[]
newprd.cover = faker.image.image[]
newprd.save[[err]=>{
if [err] { return next[err]; }
}];
}
res.redirect['/'];
}]
............
............
............
module.exports = router
Chúng ta cùng xem thử kết quả để biết nó có tự động fake data và lưu vào DB không nha
3 và sử dụng nó như thế nào thì các bạn xem tiếp nha.
Mục đích khi mình sử dụng
Pagination
3 đó là lấy thông số các page.
VD: router.get['/news/:page', [req, res, next] => {} ] thì page được gọi là params ngoài các này các bạn cũng có thể sử dụng
Pagination
5 để truy vấn vào các trang được pagination.
Code Thôi Nào
Trong quá trình code mình sẽ nói thêm cho các bạn dễ hiểu hơn.
Bên trong thư mục routes có file router.get['/', [req, res, next] => {
res.send['Hello Everyone']
}]
6 chúng ta sẽ tạo một
Pagination
7// pagination
router.get['/news/:page', [req, res, next] => {
let perPage = 16; // số lượng sản phẩm xuất hiện trên 1 page
let page = req.params.page || 1;
Product
.find[] // find tất cả các data
.skip[[perPage * page] - perPage] // Trong page đầu tiên sẽ bỏ qua giá trị là 0
.limit[perPage]
.exec[[err, products] => {
Product.countDocuments[[err, count] => { // đếm để tính có bao nhiêu trang
if [err] return next[err];
res.send[products] // Trả về dữ liệu các sản phẩm theo định dạng như JSON, XML,...
}];
}];
}];
Và đây là kết quả khi chúng ta truy cập url
Pagination
8 thì nó sẽ trả về dữ liệu các sản phẩm xuất hiện trên một trang đây là mình chỉ test thử thôi nha.
9 để trả về dữ liệu theo dạng json thì bây giờ chúng ta sẽ thay đổi thành const mongoose = require["mongoose"]
const Schema = mongoose.Schema;
const productSchema = new Schema[{
name: {type: String, required: true},
price: {type: Number, required: true},
cover: {type: String, required: true}
}]
// Biên dịch mô hình từ schema
module.exports = mongoose.model['product', productSchema]
0 để trả về dữ liệu dưới dạng html nha.// pagination
router.get['/news/:page', [req, res, next] => {
.............
.............
.............
res.render['product/index_product', {
products, // sản phẩm trên một page
current: page, // page hiện tại
pages: Math.ceil[count / perPage] // tổng số các page
}];
..............
..............
..............
Trong file
const mongoose = require["mongoose"]
const Schema = mongoose.Schema;
const productSchema = new Schema[{
name: {type: String, required: true},
price: {type: Number, required: true},
cover: {type: String, required: true}
}]
// Biên dịch mô hình từ schema
module.exports = mongoose.model['product', productSchema]
1 ta sẽ code giao diện pagination cho nó. Trước tiên mình sẽ phải include thằng header và footer vào cái đã, để mà có thể hiển thị được sản phẩm ta chỉ cần lặp qua rồi chia cột cho nó là được. Nếu muốn hiển thị 3 sản phẩm thì col-4 còn muốn hiển thị 4 sản phẩm thì col-3 có thể thôi ấy mà :]]Tiếp đến phần khá là quan trọng đó là phân trang
0] { %>
// Nếu thông số //localhost:3333/news/1/ là 1 thì First sẽ bị disabled
-
First
// Nếu thông số //localhost:3333/news/2/ từ 2 trở lên thì First sẽ bỏ disabled
-
First
3 ? Number[current] - 2 : 1] %>
// Toán tử điều kiện 3 ngôi syntax: < điều_kiện ? giá_trị_1 : giá_trị_2 >
// Nếu điều_kiện trả về true, toán tử có giá trị giá_trị_1. Ngược lại toán tử có giá trị giá_trị_2.
-
...
-
...
// Nếu số current[ chỉ số phân trang ] là 6 và tổng số page là 6 thì Last bị disabled
-
Last
// Ngược lại, thì Last là trang cuối cùng pages ở đây là 6 đồng nghĩa với Last là trang số 6
-
Last
Và đây là kết quả khi chúng ta đã hoàn thành pagination cho nó:]]
Từ từ mọi người đừng mừng vội còn một việc nữa đó là chả lẻ giờ muốn xem pagination thì phải ghi params
const mongoose = require["mongoose"]
const Schema = mongoose.Schema;
const productSchema = new Schema[{
name: {type: String, required: true},
price: {type: Number, required: true},
cover: {type: String, required: true}
}]
// Biên dịch mô hình từ schema
module.exports = mongoose.model['product', productSchema]
2 vào url như này const mongoose = require["mongoose"]
const Schema = mongoose.Schema;
const productSchema = new Schema[{
name: {type: String, required: true},
price: {type: Number, required: true},
cover: {type: String, required: true}
}]
// Biên dịch mô hình từ schema
module.exports = mongoose.model['product', productSchema]
3 nhìn là biết trải nghiệm người dùng không tốt rồi =]]
Bây giờ mình sẽ chuyển pagination ra trang home khi người dùng vào là sẽ thấy xuất hiện phân trang luôn. Đơn giản thôi bây giờ cũng trong file index.rotes.js bạn chỉ cần copy nguyên code từ const mongoose = require["mongoose"]
const Schema = mongoose.Schema;
const productSchema = new Schema[{
name: {type: String, required: true},
price: {type: Number, required: true},
cover: {type: String, required: true}
}]
// Biên dịch mô hình từ schema
module.exports = mongoose.model['product', productSchema]
4 sang const mongoose = require["mongoose"]
const Schema = mongoose.Schema;
const productSchema = new Schema[{
name: {type: String, required: true},
price: {type: Number, required: true},
cover: {type: String, required: true}
}]
// Biên dịch mô hình từ schema
module.exports = mongoose.model['product', productSchema]
5 là được thôi mà.// home page
router.get['/', [req, res, next]=>{
let perPage = 16; // số lượng sản phẩm xuất hiện trên 1 page
let page = req.params.page || 1;
Product
.find[] // find tất cả các data
.skip[[perPage * page] - perPage] // Trong page đầu tiên sẽ bỏ qua giá trị là 0
.limit[perPage]
.exec[[err, products] => {
Product.countDocuments[[err, count] => { // đếm để tính xem có bao nhiêu trang
if [err] return next[err];
res.render['product/index_product', {
products, // sản phẩm trên một page
current: page, // page hiện tại
pages: Math.ceil[count / perPage] // tổng số các page
}];
}];
}];
}]
Và đây là kết quả khi chúng ta chuyển pagination ra ngoài home page nha:
Vậy là xong rồi nha, các bạn có thể tham khảo code mà mình đã push lên github tại đây nha.
Lời KếtVậy Là Xong bài Hướng Dẫn Xây Dựng Pagination Với NodeJS, Express và MongoDB rồi nhé. Mình mong muốn sau bài topic này các bạn có thể biết và hiểu thêm về nodejs, express và biết pagination là gì?, từ topic này các bạn có thể mở rộng thêm ý tưởng và cách làm mới. Có thể tự tay mình làm những project không cần phải quá đặc biệt nhưng nó do chính bạn làm thì cũng coi như là thành quả trong quá trình bạn học được.