PokedexVueJs
Mục tiêu
Học một ngôn ngữ JS mới cùng với một framework frontend khác tương tự Bootstrap.
Tương lai của dự án này
Đã là ba tuần tuyệt vời làm việc trên dự án này. Mình học được rất nhiều và vượt qua một số khó khăn. Mình biết chắc rằng mình sẽ luôn muốn cập nhật Pokedex này khi có thể, vì vậy mình quyết định mã nguồn mở dự án này cho bất kỳ ai muốn sử dụng.
Cập nhật gần đây
- Thêm nhiều Pokémon từ Ultra Sun và Moon
- Bây giờ bạn có thể đặt câu hỏi như
Ai là người nhanh nhất?
Cập nhật lên phiên bản v2
Đối với phiên bản 2, mình dự định thực hiện những điều sau:
- Mở rộng API để bao gồm thêm dữ liệu
- Chia nhỏ dữ liệu API thành các phần nhỏ hơn
- Thiết kế lại giao diện người dùng hiện tại của trang Pokémon
- Thêm unit tests cho các phương thức tính toán
- Làm cho giao diện thân thiện với điện thoại (nếu có thể với Chart.js)
Để cải thiện hiệu suất, mình sẽ chỉ sử dụng một tệp json trong tệp tĩnh. Ngoài ra, mình sẽ viết lại giao diện người dùng một lần nữa để làm cho nó sạch hơn và có thể tái sử dụng.
Ngôn ngữ/Framework/Cơ sở dữ liệu đã sử dụng
- Vue.js
- Bulma
- Python
- MongoDB
Những thách thức mình gặp phải
. Tìm kiếm trong nhiều danh mục
Một trong những vấn đề mình gặp phải trong chức năng tìm kiếm là làm thế nào để tìm kiếm qua dữ liệu dựa trên một số như 2. Mình đã gặp khó khăn trong vấn đề này trong khoảng một ngày. Bởi vì mình vẫn còn khá xa lạ với Vue.js, mình nghĩ rằng có cách để lọc dữ liệu một cách nghiêm ngặt bằng cách sử dụng một số nguyên. Mình đã thử thực hiện điều đó bằng cách sử dụng:
return this.pokemonList.filter(pokemon => {
return (pokemon.nDex.indexOf(this.search >= 0);
return this.pokemonList.filter(pokemon => {
return (pokemon.nDex.toString().indexOf(this.search.toString() >= 0);
Hiện tại, chức năng tìm kiếm của mình hoạt động hoàn hảo và mình có thể tìm kiếm qua nhiều danh mục như nDex, tên và thậm chí cả loại! Những gì mình học được từ thách thức mình gặp phải là nếu bạn không thể tìm thấy câu trả lời qua Google, hãy nghĩ xem bạn sẽ viết điều này như thế nào bằng một ngôn ngữ khác.
. Sử dụng x-template
var pokeTable = {
template: '#poke-table',
props: {
data: Array,
columns: Array,
filterKey: String
},
data: function() {
var sortOrders = {}
this.columns.forEach(function(key) {
sortOrders[key] = 1
})
return {
sortKey: '',
sortOrders: sortOrders
}
},
computed: {...}
...
};
Vue.component('poke-table', pokeTable);
. Lỗi dễ bị quên
. Tìm kiếm các trang web để cào dữ liệu
Trong tương lai, mình dự định xây dựng một công cụ cào dữ liệu tốt hơn để mình không cần phải đi qua tất cả dữ liệu thủ công để đảm bảo mình không bỏ sót điều gì.
Lỗi cần sửa
- ~~Khi mở modal. Giá trị ban đầu được đặt là các chỉ số trước đó của một Pokémon khác khi di chuột gần~~
- Đã sửa bằng cách sử dụng variableOfChart.destroy();
- ~~Chỉ số sẽ thay đổi liên tục mỗi khi bạn nhấp vào “cập nhật” cho các Pokémon trùng lặp trong quá khứ~~
- Điều này xuất phát từ json không có một id duy nhất. Bạn chỉ cần tạo một id và nó sẽ khắc phục vấn đề này
Cách chạy
Để cài đặt các module NPM, nhập mã dưới đây vào terminal:
npm install
Ghi chú: Đối với nodemon, có thể bạn cần chạy nó như npm install -g nodemon
Để chạy cục bộ, trước tiên cài đặt phiên bản mongoDB bằng cách nhập: mongod sau đó mở một tab terminal khác. Di chuyển đến thư mục pokeScraper bằng cách nhập cd ./pokeScraper, sau đó nhập lệnh để nhập tệp pokedex.json vào cơ sở dữ liệu:
mongoimport --jsonArray --db DATABASENAME --collection COLLECTIONNAME --file pokedex.json
Ghi chú: Sử dụng _mongopokedex.json_ nếu bạn muốn nhập nó vào cơ sở dữ liệu như mLabs
Nếu bạn muốn xuất nó từ cơ sở dữ liệu mongoDB cục bộ của bạn, nhập lệnh này vào terminal:
mongoexport --db DATABASENAME --collection COLLECTIONNAME --out NAME.json
Cuối cùng, chạy:
npm start
Ghi chú: Thực hiện biến MONGODB_URI của bạn!
Tài liệu mình sử dụng để học
Đóng góp
Pokémon được tạo ra bởi Ishihara Tsunekazu và thuộc về Công ty Pokémon. Mình đã sử dụng hình ảnh Pokémon cho mục đích học tập giáo dục.
Chi tiết tải về:
Tác giả: rchung95
Nguồn: https://github.com/rchung95/PokedexVueJs
Giấy phép: MIT license
