Image-text content management method based on React framework

Abstract

The invention discloses an image-text content management method based on a React framework, and belongs to the field of React, and the method comprises the following steps: creating a project through create-react-app, installing a dragging function, an API request, a rich text editor and other dependencies, and building a Node. Js-based RESTful API and MongoDB database for storing image-text content and layout information. And creating text, picture and container components, supporting dynamic rendering and dragging functions, and updating page preview in real time through React state management. The rich text editor supports picture insertion, style modification and storage in a JSON format. And after the user drags or edits, the state is updated, the data is sent to the server through the API, and the back end analyzes and updates the database. When the page is loaded, the content is dynamically generated, the component is loaded as required, and the performance is improved by using a virtual rolling technology. And a test is compiled through Jest and React Testting Library, so that the correctness of the function is verified. The front end is deployed to Netlife, and the rear end service is deployed to AWS.

Description

Technical Field

[0001] The present invention relates to the field of React, and more specifically, to a graphic content management method based on a React framework. Background Art

[0002] The graphic content management method based on the React framework is a modern content management solution that solves the problems of frequent page refreshes, high coupling between the front and back ends, and insufficient interactivity in traditional CMS systems. Using React's componentization and dynamic rendering features, developers can build a flexible and efficient content management platform to implement modular graphic editing and real-time preview functions. This method greatly improves the user's editing experience by integrating with rich text editors (such as Draft.js or Slate.js), supporting mixed text and graphic layout, multimedia embedding, and complex content layout design. In addition, React's one-way data flow and state management tools (such as Redux or Context API) make content synchronization and storage more efficient. Combined with responsive design and React Native, cross-platform compatibility and mobile support can also be achieved.

[0003] However, its biggest drawback is the high complexity of early development, especially for complex scenarios that require customized development of rich text editors or performance optimization, such as lazy loading and fragmented rendering, which may increase development costs. Therefore, although the React-based approach can significantly improve the interactive experience and scalability, its development threshold may become a major limitation for teams with insufficient technical reserves. Summary of the invention

[0004] The purpose of the present invention is to provide a method for managing graphic content based on the React framework to solve the problems raised in the above background technology: its biggest drawback is the high complexity of early development, especially for complex scenarios, customized development of rich text editors or performance optimization, such as lazy loading and fragmented rendering, which may increase development costs. Therefore, although the method based on React can significantly improve the interactive experience and scalability, its development threshold may become a major limitation for teams with insufficient technical reserves.

[0005] Technical solution: 1. The method for managing graphic content based on the React framework comprises the following steps:

[0006] S1. Use create-react-app to create a project and install dependent libraries; including drag-and-drop functions, API requests, and rich text editors; build a RESTful API based on Node.js, design table structures in combination with the MongoDB database, and store graphic content and layout information;

[0007] S2. Create text components, image components, and container components to support content display and attribute configuration;

[0008] The text component, the image component and the container component receive content data and layout data, and dynamically render through props; use the drag function to realize draggable components and placement areas; update the component position and modify the local state when the drag is completed;

[0009] Dynamically update the preview area through React's state management to display the page effect after dragging in real time;

[0010] S3. Use the rich text editor to create a configurable text editing tool that supports inserting pictures, modifying fonts, and color styles, and the editing results are saved in JSON format;

[0011] S4. When the user completes the dragging and editing operations, the component content and layout data are updated to the state management tool, including Redux and Context API; the backend API is called using the API request, and the latest data is sent to the server in JSON format through the POST method; the backend parses the data and updates the database;

[0012] S5. When the page is loaded, the saved component content and layout information are obtained through the API request; based on the stored component tree and layout data, the page is dynamically generated to achieve complete display of the content;

[0013] S6. Use React.lazy and Suspense of React to load images and large file components on demand; use virtual scrolling technology react-window to render long lists and large amounts of data in sections;

[0014] Add anti-shake mechanisms for high-frequency user operations such as dragging and saving to reduce unnecessary status updates and API requests;

[0015] S7. Use Jest and React Testing Library to write unit tests and integration tests to verify the correctness of dragging, editing, saving, and page rendering; deploy the front-end to Netlify; deploy the back-end services and database to the cloud platform AWS.

[0016] Preferably, the S2 dynamically updates the preview area through React's state management, and real-time display of the page effect after dragging includes the following steps:

[0017] S2-1-1. The x and y coordinates of the dragged element are stored through React's useState; each element has an independent state to manage its position, and when the drag operation occurs, the element's position is reflected by updating the state;

[0018] Create an array of objects containing element positions and contents. Each element has a unique ID, position coordinates, and content. React automatically re-renders the corresponding elements based on the state.

[0019] S2-1-2. When the user starts dragging, the initial position of the dragged element is recorded, and the style of the dragged element is set to indicate that the dragged element is being dragged; during the dragging process, the position changes of the touch point are continuously monitored, and the new position of the element is dynamically calculated; whenever the position changes, the state update method setState is called to update the coordinates of the element, triggering React to re-render, and updating the position of the dragged element in real time; when the dragging operation ends, the final position of the element is updated, the final position is saved to the database, and other operations are triggered;

[0020] S2-1-3. React re-renders the components of the updated state after the state is updated; when the position of the dragged element changes, React re-renders the dragged element according to the new position and displays the latest effect on the page; React's virtual DOM comparison mechanism diffing ensures that only the parts that need to change are updated;

[0021] Because state updates trigger rendering, React immediately displays the new position of the element on each drag operation;

[0022] Preferably, the frequency of each drag update is limited through throttling technology; the state is updated only once within a certain time interval; if there are a large number of drag elements on the page, only the elements within the viewport are rendered by using react-window;

[0023] The coordinates of the touch point are converted and corrected, and the mouse coordinates are compared with the coordinates of the parent container to calculate the accurate drag position; if there are multiple drag elements on the page, when one element is dragged, the layout and position of other elements are also adjusted at the same time; React updates the position of each element according to its independent state, and synchronizes the layout of other elements on the page;

[0024] Calculate and check the drag range of the element during implementation to prevent the element from being dragged out of the predetermined area.

[0025] Preferably, through the React framework, the page rendering process is data-driven and includes the following steps:

[0026] S2-2-1. When the page is loaded, the front-end obtains JSON data containing component tree and layout data from the back-end and local storage; the obtained data is parsed and converted into a component configuration object;

[0027] S2-2-2. The front end dynamically creates component instances based on the parsed data; each component type, such as text, image, or button, is mapped to a specific React component, and the component's attribute content and style are passed to the component as data; through React's virtual DOM, the component is rendered into an actual page element;

[0028] S2-2-3. The layout data determines the display style of each component, including the position, size, and spacing of each component; the layout data is applied to the component through the style attribute style, so that the component is displayed in the expected manner;

[0029] S2-2-4. After the component tree and the layout data are passed to React, React creates and renders components according to the component tree and the layout data; each component renders the corresponding HTML element according to its own attributes, and React processes the hierarchical relationship between components so that the child components are nested inside the parent component and arranged in the correct order;

[0030] S2-2-5. After the page is rendered, each component and the layout data are dynamically updated; when the user interacts with the page, the state of each component changes; React detects the state change and automatically re-renders the part that needs to be updated.

[0031] Preferably, the S6 uses the virtual scrolling technology react-window to perform segmented rendering on long lists and large amounts of data, including the following steps:

[0032] S6-1. When the user scrolls the list, React-window only renders the list items in the current visible area and hides those invisible items;

[0033] When the user starts to scroll the list, React-window monitors the scroll position in real time and calculates the items that need to be rendered based on the current visible area. Only the list items in the visible area are rendered, and other items are "unloaded" or hidden;

[0034] React-window divides long lists into multiple segments and blocks, each segment represents a visible area; whenever the user scrolls to a new area, React-window recalculates the new visible area and only renders the items in the new visible area;

[0035] S6-2. As the user continues to scroll, React-window dynamically updates the rendered content; the dynamic update calculates the visible range based on the current viewport and only updates these items; React-window ensures efficient rendering process through virtual DOM technology;

[0036] S6-3. React-window only renders content within the viewport. React-window reduces memory usage. When scrolling, React-window uses virtual DOM comparison to determine which parts have changed and only updates what needs to be updated.

[0037] Preferably, a real-time collaboration function is introduced through WebSocket technology, combined with React and the back-end real-time communication framework Socket.Io, to achieve real-time synchronous editing by multiple people; the real-time collaboration function is that the user's editing operations on the graphic content will be instantly updated to all user interfaces participating in the editing, allowing multiple users to edit the same page and content block at the same time, and see the modifications of other users in real time.

[0038] Preferably, before introducing the real-time collaboration, it is necessary to install socket.io-client on the front end and socket.io on the back end;

[0039] Use socket.io to establish a WebSocket connection in Node.js. Whenever a user edits content, the edited content and location are pushed to all connected clients via WebSocket. Use socket.io-client to establish a WebSocket connection in React and listen to the edit data pushed by the server to achieve real-time synchronization.

[0040] Preferably, Redux is used to manage the state of the component. When the user edits the content, the local state is updated and the changes are sent to the server via WebSocket. Each time the user performs an editing operation such as dragging, modifying text, and adjusting the layout, the changes are immediately sent to the server via WebSocket. After the server receives the changed data, it broadcasts the changed data to all clients, and the updated content is immediately visible on other user interfaces.

[0041] A simple locking mechanism and version numbering ensure that conflicts do not arise when multiple users edit the same element; if two users try to edit the same content, the system prompts the user that a conflict has occurred and provides the option to merge and overwrite.

[0042] Preferably, the client's editing events such as dragging and text input are monitored through socket.io, and the content in the database is updated in real time; whenever the content is updated, the server pushes the updated content to all other connected clients through WebSocket, so that each user sees the same content;

[0043] When each user is editing, the cursor position and editing traces of other users are displayed in real time; the cursors of different users are marked with different colors so that users can understand which parts are being edited by others;

[0044] When a user is editing content, if someone else is also editing the same part, the system will display a prompt to inform that other editors are currently working on the current content.

[0045] Compared with the prior art, the advantages of the present invention are:

[0046] (1) Introducing virtual scrolling technology to render only the content in the current visible area, solving the performance issues of rendering long lists and large amounts of data; using on-demand loading and lazy loading technologies to reduce resource usage and optimize page loading speed.

[0047] (2) A state-driven synchronization mechanism is used to ensure that drag-and-drop editing operations are immediately reflected in the page preview, and the operation is smooth and without delay.

[0048] (3) Utilize component trees and layout data to dynamically parse and generate page content, supporting complex layouts and highly customized requirements.

[0049] (4) Enhanced support for dynamically sized components and nested layouts, improved scalability; improved cross-platform adaptability to ensure consistent performance on different devices and resolutions.

[0050] (5) Optimize the smoothness of dragging and editing, achieve seamless integration of editing and previewing, and significantly improve the user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0051] Figure 1 It is a schematic diagram of the overall system of a method for managing graphic and text content based on a React framework of the present invention; DETAILED DESCRIPTION

[0052] For examples, see Figure 1 , a method for managing graphic content based on a React framework, a method for managing graphic content based on a React framework comprises the following steps:

[0053] S1. Use create-react-app to create a project and install dependent libraries; including drag-and-drop functions, API requests, and rich text editors; build a RESTful API based on Node.js, design table structures in combination with the MongoDB database, and store graphic content and layout information;

[0054] S2. Create text components, image components, and container components to support content display and attribute configuration;

[0055] Text components, image components, and container components receive content data and layout data, and dynamically render through props; use the drag function to implement draggable components and placement areas; update component positions and modify local states when dragging is completed;

[0056] Dynamically update the preview area through React's state management to display the page effect after dragging in real time;

[0057] S3. Use a rich text editor to create a configurable text editing tool that supports inserting pictures, modifying fonts, and color styles. The editing results are saved in JSON format.

[0058] S4. When the user completes the drag and edit operation, the component content and layout data are updated to the state management tool, including Redux and Context API; the backend API is called using the API request, and the latest data is sent to the server in JSON format through the POST method; the backend parses the data and updates the database;

[0059] Specifically, the technical steps to send JSON data through the POST method and update the database are as follows:

[0060] The data generated by user operations (such as the layout after dragging or the modified graphic content) is organized into a structured format and converted into JSON.

[0061] Use the POST method to send JSON data to the backend API, and set the request header to indicate the data format (such as application / json).

[0062] The server receives the request from the front end through the specified API path and extracts the JSON data in the request body.

[0063] Parse the received JSON data to confirm whether its format and content meet expectations. Check the necessary fields and data integrity during the verification process. If there are any exceptions, return an error prompt.

[0064] Use the parsed data to locate the record that needs to be updated in the database. For example, find the corresponding entry through a unique identifier (such as an ID).

[0065] According to the parsed data content, the new information is written into the relevant fields of the database, overwriting the old values. Ensure that the update process complies with transaction consistency and avoid data incompleteness or conflicts.

[0066] After confirming that the update operation is successful, the data is stored persistently. If an error occurs, the transaction mechanism is used to roll back the data to ensure that the database state is stable.

[0067] Feedback the update results to the front end, usually returning status codes and operation information in JSON format, such as the reason for update success or failure.

[0068] Based on the result returned by the backend, the frontend page status is updated or the user is prompted. If the operation is successful, the latest data is synchronized to the frontend; if it fails, the user is prompted and provided with a retry option.

[0069] S5. When the page is loaded, the saved component content and layout information are obtained through API requests; based on the stored component tree and layout data, the page is dynamically generated to achieve complete display of the content;

[0070] S6. Use React.lazy and Suspense of React to load images and large file components on demand; use virtual scrolling technology react-window to render long lists and large amounts of data in sections;

[0071] Add anti-shake mechanisms for high-frequency user operations such as dragging and saving to reduce unnecessary status updates and API requests;

[0072] S7. Use Jest and React Testing Library to write unit tests and integration tests to verify the correctness of dragging, editing, saving, and page rendering; deploy the front-end to Netlify; deploy the back-end services and database to the cloud platform AWS.

[0073] Specifically, unit testing: verify the core logic of functional components

[0074] Goal: Verify that a component's layout data is updated correctly after a drag operation.

[0075] Steps: Simulate the user dragging the component and trigger the onDrag or onDrop callback.

[0076] Check whether the changes in the layout data in the component tree or state are as expected (such as coordinates, size).

[0077] Verify that the event handling function is called correctly during the drag process.

[0078] Ensure boundary conditions (such as exceeding container boundaries or invalid operations) are handled correctly.

[0079] Objective: Verify that the data update logic is correct after the user edits the graphic content.

[0080] Steps: Simulate text input in the input box or changes to component properties.

[0081] Checks that the component state is correctly updated with the user input value.

[0082] Verify that the update function (such as onChange callback) is triggered correctly during the editing process.

[0083] Objective: Verify that the save operation correctly triggers the background API call and feedbacks the success or failure status.

[0084] Steps: Simulate the click event of the save button to trigger the save function.

[0085] Use Jest's mock function to simulate API requests and check whether the correct request data (such as JSON format) is sent.

[0086] Verify that the component's status or prompt information is updated to the correct value when the save succeeds or fails.

[0087] Goal: Verify that initial rendering and dynamic updates of components are correct.

[0088] step:

[0089] Use mock data to load components and check whether the initial state (such as layout and content) is rendered correctly.

[0090] Simulate state changes to verify that components only re-render the affected parts (improve performance).

[0091] Integration testing: Verify the integrity of interactions between functions

[0092] Objective: Verify that drag and drop operations are reflected in the page preview in real time.

[0093] step:

[0094] Simulates a user dragging a component to a target location.

[0095] Check whether the page preview area correctly displays the layout changes after dragging.

[0096] Make sure that dragging and dropping operations do not affect unmodified parts of the component.

[0097] Objective: Verify that the save functionality after editing the content works properly and is reflected on the page.

[0098] step:

[0099] Simulate the user's editing operations on graphic and text content.

[0100] Click the Save button to trigger the save logic and simulate the backend returning a successful status.

[0101] Check that the page preview area is correctly updated with the latest content after saving.

[0102] When the test fails to save, whether the error message is displayed correctly or the user is prompted to try again.

[0103] Objective: Verify that the initial loading and dynamic data updates of the page work properly.

[0104] step:

[0105] Use mock data to simulate the initial state, load the component and check if it renders correctly.

[0106] Simulate user-triggered dynamic loading (such as scrolling to load more content) to check whether the new content is inserted into the page correctly.

[0107] Verify whether the status of existing content remains unchanged when data changes.

[0108] Rendering verification: Use the query methods of the React Testing Library (such as getByText, getByRole) to verify that DOM elements are rendered correctly.

[0109] Event triggering: simulate user operations (such as click, input, drag) through fireEvent.

[0110] State checking: Directly access the internal state or DOM attributes of the component to verify the correctness of the updated data.

[0111] API calls: Use Jest’s mocking functionality to verify that API requests are sent as expected and that return values ​​are handled correctly.

[0112] Performance monitoring: Make sure unnecessary rendering is minimized (via React Profiler or snapshot testing).

[0113] S2 dynamically updates the preview area through React's state management. The following steps are included to display the page effect after dragging in real time:

[0114] S2-1-1. The x and y coordinates of the dragged element are stored through React's useState; each element has an independent state to manage its position, and when the drag operation occurs, the element's position is reflected by updating the state;

[0115] Create an array of objects containing element positions and contents. Each element has a unique ID, position coordinates, and content. React automatically re-renders the corresponding elements based on the state.

[0116] S2-1-2. When the user starts dragging, the initial position of the dragged element is recorded, and the style of the dragged element is set to indicate that the dragged element is being dragged; during the dragging process, the position changes of the touch point are continuously monitored, and the new position of the element is dynamically calculated; whenever the position changes, the state update method setState is called to update the coordinates of the element, triggering React to re-render, and updating the position of the dragged element in real time; when the dragging operation ends, the final position of the element is updated, the final position is saved to the database, and other operations are triggered;

[0117] S2-1-3. React re-renders the components of the updated state after the state is updated; when the position of the dragged element changes, React re-renders the dragged element according to the new position and displays the latest effect on the page; React's virtual DOM comparison mechanism diffing ensures that only the parts that need to change are updated;

[0118] Because state updates trigger rendering, React immediately displays the new position of the element on each drag operation;

[0119] Use throttling technology to limit the frequency of each drag update; update the status only once within a certain time interval; if there are a large number of drag elements on the page, use react-window to render only the elements within the viewport;

[0120] Specifically, the throttling technology implementation steps are:

[0121] Record time: During the dragging process, record the time when the last update was triggered.

[0122] Judgment interval: Each time a drag event is triggered, check the difference between the current time and the last trigger time:

[0123] If the time difference is less than the preset interval (eg 50ms), the trigger is ignored.

[0124] If the time difference is greater than or equal to the interval time, the update logic is executed and the recorded time is updated.

[0125] Drag smoothness: The time interval setting needs to balance performance and user experience:

[0126] A shorter time interval (such as 16ms) can provide a smoother dragging experience, but at the expense of higher computation and rendering overhead.

[0127] A longer time interval (such as 50ms) will significantly improve performance, but may cause dragging to be less smooth.

[0128] Match the hardware refresh rate: Modern browsers typically refresh the page at 60fps (about 16ms per frame), so the interval can be matched to this to avoid unnecessary updates.

[0129] The coordinates of the touch point are converted and corrected, and the mouse coordinates are compared with the coordinates of the parent container to calculate the accurate drag position. If there are multiple drag elements on the page, when one element is dragged, the layout and position of other elements are also adjusted at the same time. React updates the position of each element according to its independent state, and synchronizes the layout of other elements on the page.

[0130] Calculate and check the drag range of the element during implementation to prevent the element from being dragged out of the predetermined area.

[0131] Specifically, determine the towing range

[0132] Container range: Get the position and size of the limited area (such as a container) of the drag operation, and determine the upper, lower, left and right boundary values ​​of the container.

[0133] Size of the dragged element: Calculate the width and height of the dragged element to determine the relationship between its activity range and the boundary of the container.

[0134] Determine the maximum and minimum positions of the drag element by using the container boundaries and the size of the drag element:

[0135] Horizontal range: Limit the left and right movable range of the element to prevent it from being dragged out of the left or right border of the container.

[0136] Vertical range: Limits the vertical range of an element to prevent it from being dragged out of the top or bottom boundaries of the container.

[0137] Start dragging: Records the starting position of the drag operation, including the mouse position and the initial position of the dragged element in the container.

[0138] Real-time update during dragging: Calculate the current position of the dragged element based on the distance the mouse moves. Determine the new coordinates through dynamic calculation of the current position.

[0139] When calculating the new coordinates of the dragged element, limit its value to a predetermined range:

[0140] If the horizontal position exceeds the left boundary, it is adjusted to the left boundary value; if it exceeds the right boundary, it is adjusted to the right boundary value.

[0141] If the vertical position exceeds the upper boundary, it is adjusted to the upper boundary value; if it exceeds the lower boundary, it is adjusted to the lower boundary value.

[0142] This constraint ensures that the draggable element always stays within the container's bounds, even if the user attempts to drag it beyond the bounds.

[0143] Based on the calculated and constrained coordinate values, update the position of the dragged element to visually reflect the user's dragging operation while keeping the element within the legal range.

[0144] At the end of the drag, ensure that the element's position is still within the legal range.

[0145] If the drag operation causes the position to be out of range, it should be corrected to the boundary value.

[0146] With the React framework, the page rendering process is data-driven and includes the following steps:

[0147] S2-2-1. When the page is loaded, the front-end obtains JSON data containing component tree and layout data from the back-end and local storage; the obtained data is parsed and converted into a component configuration object;

[0148] S2-2-2. The front end dynamically creates component instances based on the parsed data; each component type, such as text, image, or button, is mapped to a specific React component, and the component's attribute content and style are passed to the component as data; through React's virtual DOM, the component is rendered into an actual page element;

[0149] S2-2-3. The layout data determines the display style of each component, including the position, size, and spacing of each component. The layout data is applied to the component through the style attribute style, so that the component is displayed in the expected way.

[0150] S2-2-4. When the component tree and layout data are passed to React, React creates and renders components based on the component tree and layout data; each component renders the corresponding HTML element according to its own attributes, and React handles the hierarchical relationship between components, so that child components are nested inside parent components and arranged in the correct order;

[0151] S2-2-5. After the page is rendered, each component and layout data is dynamically updated; when the user interacts with the page, the state of each component changes; React detects the state change and automatically re-renders the parts that need to be updated.

[0152] S6 uses the virtual scrolling technology react-window to render long lists and large amounts of data in segments, including the following steps:

[0153] S6-1. When the user scrolls the list, React-window only renders the list items in the current visible area and hides those invisible items;

[0154] When the user starts to scroll the list, React-window monitors the scroll position in real time and calculates the items that need to be rendered based on the current visible area. Only the list items in the visible area are rendered, and other items are "unloaded" or hidden;

[0155] React-window divides long lists into multiple segments and blocks, each segment represents a visible area; whenever the user scrolls to a new area, React-window recalculates the new visible area and renders only the items in the new visible area;

[0156] S6-2. As the user continues to scroll, React-window dynamically updates the rendered content; the dynamic update calculates the visible range based on the current viewport and only updates these items; React-window ensures efficient rendering through virtual DOM technology;

[0157] S6-3. React-window only renders content within the viewport. React-window reduces memory usage. When scrolling, React-window uses virtual DOM comparison to determine which parts have changed and only updates what needs to be updated.

[0158] The real-time collaboration function is introduced through WebSocket technology, combined with React and the back-end real-time communication framework Socket.Io, to achieve real-time synchronous editing by multiple people; the real-time collaboration function means that the user's editing operations on graphic content will be instantly updated to all user interfaces participating in the editing, allowing multiple users to edit the same page and content block at the same time, and see other users' modifications in real time.

[0159] Before introducing real-time collaboration, you need to install socket.io-client on the front end and socket.io on the back end;

[0160] Use socket.io to establish a WebSocket connection in Node.js. Whenever a user edits content, the edited content and location are pushed to all connected clients via WebSocket. Use socket.io-client to establish a WebSocket connection in React and listen to the edit data pushed by the server to achieve real-time synchronization.

[0161] Use Redux to manage the status of components. When users edit content, the local status is updated and the changes are sent to the server via WebSocket. Every time a user performs an editing operation such as dragging, modifying text, and adjusting the layout, the changes are immediately sent to the server via WebSocket. After receiving the changed data, the server broadcasts the changed data to all clients, and the updated content can be seen instantly on other user interfaces.

[0162] A simple locking mechanism and version numbering ensure that conflicts do not arise when multiple users edit the same element; if two users try to edit the same content, the system prompts the user that a conflict has occurred and provides the option to merge and overwrite.

[0163] Socket.io listens to the client's editing events such as dragging and text input, and updates the content in the database in real time. Whenever the content is updated, the server pushes the updated content to all other connected clients via WebSocket, so that every user sees the same content.

[0164] When each user is editing, the cursor position and editing traces of other users are displayed in real time; the cursors of different users are marked with different colors so that users can understand which parts are being edited by others;

[0165] When a user is editing content, if someone else is also editing the same part, the system will display a prompt to inform that other editors are currently working on the current content.

[0166] The above shows and describes the basic principles, main features and advantages of the present invention; those skilled in the art should understand that the present invention is not limited to the above embodiments, and the above embodiments and descriptions are only preferred examples of the present invention and are not used to limit the present invention. Without departing from the spirit and scope of the present invention, the present invention may have various changes and improvements, and these changes and improvements all fall within the scope of the present invention to be protected; the scope of protection claimed by the present invention is defined by the attached claims and their equivalents.

Claims

1. A method for managing graphic content based on a React framework, characterized in that: The graphic content management method based on the React framework comprises the following steps: S1. Use create-react-app to create a project and install dependent libraries; including drag-and-drop functions, API requests, and rich text editors; build a RESTful API based on Node.js, design table structures in combination with the MongoDB database, and store graphic content and layout information; S2. Create text components, image components, and container components to support content display and attribute configuration; The text component, the image component and the container component receive content data and layout data, and dynamically render through props; use the drag function to realize draggable components and placement areas; update the component position and modify the local state when the drag is completed; Dynamically update the preview area through React's state management to display the page effect after dragging in real time; S3. Use the rich text editor to create a configurable text editing tool that supports inserting pictures, modifying fonts, and color styles, and the editing results are saved in JSON format; S4. When the user completes the dragging and editing operations, the component content and layout data are updated to the state management tool, including Redux and Context API; the backend API is called using the API request, and the latest data is sent to the server in JSON format through the POST method; the backend parses the data and updates the database; S5. When the page is loaded, the saved component content and layout information are obtained through the API request; based on the stored component tree and layout data, the page is dynamically generated to achieve complete display of the content; S6. Use React.lazy and Suspense of React to load images and large file components on demand; use virtual scrolling technology react-window to render long lists and large amounts of data in sections; Add anti-shake mechanisms for high-frequency user operations such as dragging and saving to reduce unnecessary status updates and API requests; S7. Use Jest and React Testing Library to write unit tests and integration tests to verify the correctness of dragging, editing, saving, and page rendering; deploy the front-end to Netlify; deploy the back-end services and database to the cloud platform AWS.

2. According to claim 1, a method for managing graphic content based on a React framework is characterized in that: The S2 dynamically updates the preview area through React's state management, and the real-time display of the page effect after dragging includes the following steps: S2-1-1. The x and y coordinates of the dragged element are stored through React's useState; each element has an independent state to manage its position, and when the drag operation occurs, the element's position is reflected by updating the state; Create an array of objects containing element positions and contents. Each element has a unique ID, position coordinates, and content. React automatically re-renders the corresponding elements based on the state. S2-1-2. When the user starts dragging, the initial position of the dragged element is recorded, and the style of the dragged element is set to indicate that the dragged element is being dragged; during the dragging process, the position change of the touch point is continuously monitored, and the new position of the element is dynamically calculated; whenever the position changes, the state update method setState is called to update the coordinates of the element, triggering React to re-render, and updating the position of the dragged element in real time; when the dragging operation ends, the final position of the element is updated, the final position is saved to the database, and other operations are triggered; S2-1-3. React re-renders the components of the updated state after the state is updated; when the position of the dragged element changes, React re-renders the dragged element according to the new position and displays the latest effect on the page; React's virtual DOM comparison mechanism diffing ensures that only the parts that need to change are updated; Because state updates trigger rendering, React immediately displays the element’s new position on each drag operation.

3. According to claim 2, a method for managing graphic content based on a React framework is characterized in that: Use throttling technology to limit the frequency of each drag update; update the status only once within a certain time interval; if there are a large number of drag elements on the page, use react-window to render only the elements within the viewport; The coordinates of the touch point are converted and corrected, and the mouse coordinates are compared with the coordinates of the parent container to calculate the accurate drag position; if there are multiple drag elements on the page, when one element is dragged, the layout and position of other elements are also adjusted at the same time; React updates the position of each element according to its independent state, and synchronizes the layout of other elements on the page; Calculate and check the drag range of the element during implementation to prevent the element from being dragged out of the predetermined area.

4. According to claim 2, a method for managing graphic content based on a React framework is characterized in that: With the React framework, the page rendering process is data-driven and includes the following steps: S2-2-1. When the page is loaded, the front-end obtains JSON data containing component tree and layout data from the back-end and local storage; the obtained data is parsed and converted into a component configuration object; S2-2-2. The front end dynamically creates component instances based on the parsed data; each component type, such as text, image, or button, is mapped to a specific React component, and the component's attribute content and style are passed to the component as data; through React's virtual DOM, the component is rendered into an actual page element; S2-2-3. The layout data determines the display style of each component, including the position, size, and spacing of each component; the layout data is applied to the component through the style attribute style, so that the component is displayed in the expected manner; S2-2-4. After the component tree and the layout data are passed to React, React creates and renders components according to the component tree and the layout data; each component renders the corresponding HTML element according to its own attributes, and React processes the hierarchical relationship between components so that the child components are nested inside the parent component and arranged in the correct order; S2-2-5. After the page is rendered, each component and the layout data are dynamically updated; when the user interacts with the page, the state of each component changes; React detects the state change and automatically re-renders the part that needs to be updated.

5. According to the method for managing graphic content based on the React framework of claim 1, it is characterized in that: The S6 uses the virtual scrolling technology react-window to render long lists and large amounts of data in sections, including the following steps: S6-1. When the user scrolls the list, React-window only renders the list items in the current visible area and hides those invisible items; When the user starts to scroll the list, React-window monitors the scroll position in real time and calculates the items that need to be rendered based on the current visible area. Only the list items in the visible area are rendered, and other items are "unloaded" or hidden; React-window divides long lists into multiple segments and blocks, each segment represents a visible area; whenever the user scrolls to a new area, React-window recalculates the new visible area and only renders the items in the new visible area; S6-2. As the user continues to scroll, React-window dynamically updates the rendered content; the dynamic update calculates the visible range based on the current viewport and only updates these items; React-window ensures efficient rendering process through virtual DOM technology; S6-3. React-window only renders content within the viewport. React-window reduces memory usage. When scrolling, React-window uses virtual DOM comparison to determine which parts have changed and only updates what needs to be updated.

6. According to the method for managing graphic content based on the React framework of claim 1, it is characterized in that: The real-time collaboration function is introduced through WebSocket technology, combined with React and the back-end real-time communication framework Socket.Io, to achieve real-time synchronous editing by multiple people; the real-time collaboration function is that the user's editing operations on the graphic content will be instantly updated to all user interfaces participating in the editing, allowing multiple users to edit the same page and content block at the same time, and see the changes made by other users in real time.

7. A method for managing graphic content based on a React framework according to claim 6, characterized in that: Before introducing real-time collaboration, you need to install socket.io-client on the front end and socket.io on the back end; Use socket.io to establish a WebSocket connection in Node.js. Whenever a user edits content, the edited content and location are pushed to all connected clients via WebSocket. Use socket.io-client to establish a WebSocket connection in React and listen to the edit data pushed by the server to achieve real-time synchronization.

8. A method for managing graphic content based on a React framework according to claim 7, characterized in that: Use Redux to manage the status of components. When users edit content, the local status is updated and the changes are sent to the server via WebSocket. Every time a user performs an editing operation such as dragging, modifying text, and adjusting the layout, the changes are immediately sent to the server via WebSocket. After receiving the changed data, the server broadcasts the changed data to all clients, and the updated content can be seen instantly on other user interfaces. A simple locking mechanism and version numbering ensure that conflicts do not arise when multiple users edit the same element; if two users try to edit the same content, the system prompts the user that a conflict has occurred and provides the option to merge and overwrite.

9. A method for managing graphic content based on a React framework according to claim 6, characterized in that: Listen to the client's editing events such as drag and drop and text input through socket.io, and update the content in the database in real time; Whenever the content is updated, the server pushes the updated content to all other connected clients via WebSocket, so that every user sees the same content; When each user is editing, the cursor position and editing traces of other users are displayed in real time; the cursors of different users are marked with different colors so that users can understand which parts are being edited by others; When a user is editing content, if someone else is also editing the same part, the system will display a prompt to inform that other editors are currently working on the current content.

Images