Lolik

not404

nothing
x
bilibili
github
telegram
HomeArchivesabout友链

A message board

120
AI Translation
This post is translated from Chinese into English through AI.View Original
AI-generated summary
This is a summary of the given text in "en" language: The text discusses the creation of a message board using Flask as the backend and Material Design User Interface (MBUI) for the frontend. The author plans to implement a frontend rendering with backend API providing data. They design a database with card and comment tables, where the comment table is linked to the card table through the cid field. The author uses Flask to implement the backend functionality and creates routes for adding, deleting, and retrieving data from the database. The frontend implementation involves using AJAX to retrieve data and manipulate HTML strings to display the content. The author mentions the limitations of the current implementation, such as difficulty in maintenance and lack of page differentiation for different cards. They also discuss potential security issues like XSS attacks and SQL injections. The author plans to add features like verification, comment deletion, and CAPTCHA verification in the future. They summarize their progress and mention that they spent two days on the implementation. The author acknowledges the primitive nature of their frontend implementation and their limited familiarity with Flask. They provide a link to a demo of the message board.

Origin#

Discovered the Unknown Love Wall on the Baota Software Store, which is designed with MBUI (Material Design User Interface) and is suitable for mobile devices. Found the official documentation for MDUI - Material Design Front-end Framework and decided to try creating a message board.

I want to create a front-end rendering with a back-end API providing the data. Due to limited time (scattered time is as good as none, I forget what I wrote the day before), I will use Flask (I'm only familiar with Python) for the back-end, which I have tried before and found it convenient.

Implementation#

  1. Start by designing the database (changed the data table several times at the beginning because I didn't plan to include comments), including the card table and the comment table.
    |Card Table Fields|Description|Comment Table Fields|Description|
    |-|-|-|-|
    |id|Unique identifier for the card, auto-incrementing|id|Unique identifier for the comment, auto-incrementing|
    |name|Card name|cid|ID of the card it belongs to|
    |avatar|Creator's avatar for the card (optional)|depth|Comment nesting depth|
    |title|Card title|parent_id|ID of the parent comment|
    |data|Card content|name|Commenter's name|
    |imgurl|Card cover image (optional)|content|Comment content|
    |time|Card creation time|time|Comment publication time|
    |type|Card type (noimg/withimg)|||
    |comment_count|Number of comments for the card|||

The cid in the comment table corresponds to the id in the card table, indicating which card the comment belongs to.

Later, I found that the depth (comment depth) was not used, and multiple-level comments can be achieved by using only the parent_id (ID of the parent comment).

Added a comment count field to the card table to avoid selecting the comment count every time.

  1. For the Python-Flask part, I wrote functions for database CRUD operations and returned JSON data directly.

Implemented routes for CRUD operations in the Flask API, with simple filtering (for security reasons).

  1. After confirming that all the API endpoints are working correctly, I started working on the front-end. Since it is client-side rendering, there is almost no need for template syntax (except for the part where JavaScript files are referenced). After moving the front-end files out of the template folder, only a few paths need to be changed to make it work.

The front-end implementation is very primitive. It uses AJAX to fetch data and concatenate it into HTML strings, and then inserts the processed DOM nodes.

Except for the admin page, there is only one file for the front-end. The several tabs on the left and the article detail page are all on one page, and switching between them is achieved by using jQuery's show/hide. The disadvantage is that it is difficult to modify and maintain, and even I can't remember it after finishing it. If I want to add a new page, I have to make changes in many scattered places.

Results#

Created cards, comments for each card, and card deletion (with password verification).

Two types of cards: cards with images and cards without images.

Nested comments.

  1. Card includes title, time, content, image (optional), and avatar.

  2. Comments on the card detail page.

  3. Editing and adding cards.

Replacing 404 images with an onerror function.

Remembering the page position and automatically scrolling when switching or refreshing the homepage and detail page.

Temporary display of added content without refreshing.

Issues:#

  1. All on one page, how to differentiate between different cards? After refreshing, won't it go back to the main page? The shared links are also links to the main page.

  2. Due to the lack of API request restrictions, there is a possibility of being attacked. It is best to limit the frequency.

  3. XSS attacks, SQL injection (maybe, planning to filter greater than and less than signs, etc.).

  4. No login system, difficult to implement likes. No authentication when submitting information. Will add captcha verification in the future.

  5. Comments are not deleted along with the card (comments were added later).

Solutions#

Added page markers. JavaScript will add parameters to the URL, such as http://127.0.0.1:5500/?card=28. When accessing with parameters, JavaScript will read the card ID and automatically redirect to the detail page.

TODO#

  • Add validation, etc. (requires time)
  • [ x ] Comment deletion
  • [ x ] Captcha

Summary#

Took 2 days to implement some of the features. Will fill in the gaps in the future.
The front-end implementation is very primitive and time-consuming. Not familiar with the Flask framework, only used its routing functionality. I'm still exploring the front-end, not planning to learn frameworks and such.

Gitee

Preview#

Below is a part of the readme (taking a shortcut)
JHljK

Management#

JHfRs

Nested Comments#

JHjWa

Demo#

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.