Yêu cầu thg 3 23, 3:34 CH 343 2 2
  • 343 2 2
+1

Thiết kế Database để lưu dữ liệu từ EditText (FE) xuống DB(BE)

Chia sẻ
  • 343 2 2

Em chào các anh chị, Em đang làm một dự án với yêu cầu lưu dữ liệu từ trình soạn thảo văn bản (EditText) trên Frontend (ReactJS) xuống Database (MySQL) và sau đó gọi API để hiển thị lại nội dung đó lên trang. Hiện tại em gặp một số vấn đề về thiết kế database và cách xử lý dữ liệu, mong được các anh chị tư vấn giúp.

Yêu cầu chức năng: Người dùng nhập nội dung vào trình soạn thảo (EditText) trên Frontend (ReactJS). Nội dung có thể bao gồm:

  • Văn bản (text) với các style như in đậm, in nghiêng, gạch chân, màu sắc, v.v.
  • Image: user upload ảnh và hệ thống lưu ảnh vào cloudinary.
  • Video: url user cung cấp. Dữ liệu được lưu xuống Database (MySQL) thông qua Backend (Spring Boot). Khi người dùng truy cập lại trang, FE gọi API để lấy dữ liệu từ DB và hiển thị lại đúng nội dung với các style và thứ tự ban đầu.

Hiện tại em đang làm như sau: Database design: Bảng ProjectStory: Lưu thông tin chung về story. Bảng StoryBlock: Lưu từng block nội dung (text, image, video) với các trường:

  • id: Khóa chính.
  • type: Loại block (TEXT, IMAGE, VIDEO).
  • content: Nội dung của block (văn bản HTML hoặc URL hình ảnh/video).
  • order: Thứ tự của block.
  • metadata: Lưu các thông tin bổ sung (ví dụ: public_id của file trên Cloudinary).

Xử lý dữ liệu: Với block TEXT: Lưu toàn bộ HTML vào trường content. Với block IMAGE/VIDEO: Upload file lên Cloudinary và lưu URL vào trường content.

Vấn đề em gặp phải: Dung lượng database lớn: Khi lưu toàn bộ HTML vào trường content, dung lượng database tăng nhanh, đặc biệt khi có nhiều block TEXT với nội dung dài.

Hiệu suất truy vấn: Khi có nhiều block (20-60 block), việc truy vấn và xử lý dữ liệu trở nên chậm.

Câu hỏi của em là anh/chị thiết kế DB cho chức năng này như thế nào và làm sao đảm bảo thứ tự cũng như thiết kế từ EditText được giữ nguyên khi get ra ạ?

2 CÂU TRẢ LỜI


Đã trả lời thg 4 16, 8:51 SA
0

có thể tham khảo cách làm của notion dùng editor bên thứ 3

đừng hỏi link tham khảo

Chia sẻ
Đã trả lời thg 5 10, 11:55 CH
0

Mình không biết phương án sinh block html của bạn là như thế nào, nhưng bn có thể lưu thông tin của html lên thành các file s3. Trong database bn chỉ nên lưu các thông tin metadata liên quan tới các block của bn. Tuy nhiên nếu lưu lên s3 thì nó sẽ khiến cho ứng dụng của bn bị chậm, lúc này bn có thể sử dụng cache ở server + lazy load. Ví dụ ở đây mình thấy bn có hệ thống order, thì bn có thể get khoảng 3-4 block mà nó có khả năng hiển thị cho user, và cache lại. Tuy nhiên mình thấy việc bn design mà chỉ có 1 order thì sẽ không miêu tả được hết quan hệ của các block với nhau. Bn có thể tạo ra 2 bảng, bảng Block: (bao gồm thông tin của block và cách bn lấy block đó). Bảng BlockCorrelation: (miêu tả các quan hệ của các block với nhau, như vậy khi bn get và thay đổi thứ tự của các block nó sẽ dễ hơn rất nhiều). Nếu bn vẫn muống lưu trong database, thì với mỗi block Text lớn hãy tạo thành một block riêng correlate với một block lớn và lazy load. Feel free to pm mình at: long.work.main@gmail.com nhé

Chia sẻ
Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí