Online document processing method and system based on structured storage

Abstract

The invention relates to the technical field of system application, and discloses an online document processing method and system based on structured storage, and the method comprises the steps: splitting content elements of an online document into blocks, and carrying out structured storage as independent objects; querying basic information of the document, loading data according to a document block pageBlockId list, creating a component according to the loaded data, constructing a component tree, and performing document rendering by using a lazy loading technology; the method comprises the following steps: abstracting documents and document blocks as objects, synchronizing the objects to a graphic database, modeling a relationship between the documents and the document blocks as an edge in the graphic database, and converting the relationship between the documents into a graphic data structure; when the document content changes, the storage interface is called to store the changed document block, and the online document is automatically stored, the document content is structurally stored in the block form, dynamic updating of the online document is achieved, the reference relation between the documents is stored and managed, and the relation between the documents is visually and clearly displayed.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of system application, and particularly relates to an online document processing method and system based on structured storage. BACKGROUND

[0002] At present, enterprise standards, systems, operation instructions and the like documents are usually carried by document files, with the development of enterprise business digitization and intelligentization, the document content is increased from single text to composite carrier containing process diagram, concept data model diagram, table and the like.

[0003] However, the process diagram, concept data model diagram, table and the like content contained in the document are usually made in other tools and then pasted into the document, when the pasted content changes, it needs to be re-imported, resulting in difficulty in updating the static content of the document. SUMMARY

[0004] Therefore, the present application provides an online document processing method and system based on structured storage, to solve the problem of difficulty in updating the static content of the document.

[0005] In a first aspect, the present application provides an online document processing method based on structured storage, which comprises the following steps:

[0006] The content elements of the online document are split into blocks, and each block is stored as an independent object;

[0007] In response to an online document opening request, the document basic information is queried, the data is loaded according to the document block pageBlockId list, the components are created according to the loaded data, the component tree is constructed, the document rendering is performed by using the lazy loading technology, and the rendering area includes the paragraphs in the visible area and the adjacent buffer area;

[0008] In response to an online document saving request, the document and the document block are abstracted as objects, are synchronized to a graph database, the relationship between the document and the document block is modeled as an edge in the graph database, and the relationship between the document and the document is converted into a graphical data structure;

[0009] When it is listened that the document content changes, the changed document block is queried, the save interface of the changed document block is called to save the changed document block, and the online document is automatically saved.

[0010] The present application stores the document content in the form of blocks, realizes dynamic updating of the online document, performs document rendering when the document is opened, converts the reference relationship between the document and the document block into the relationship between objects, performs storage management, intuitively and clearly displays the relationship between the documents, saves the changed document block when the document content changes, automatically saves, and avoids resource waste caused by saving the whole document.

[0011] In an optional implementation, the content elements of the online document are split into blocks, and each block is stored as an independent object, including:

[0012] JS language is developed, open source framework components are introduced, the document content is converted into native Html, and the content elements of the online document are split into blocks based on the Dom object of Html;

[0013] According to the label type of each block, the corresponding label is selected for block identification, the document is edited and rendered based on the Dom object of the native Html, and the label type includes text content, title, table and picture;

[0014] All the content on the front page is split into blocks according to the block identification, and each block content is output in JSON format.

[0015] The present application realizes online rendering and editing of the document by relying on the browser, realizes structured independent storage of the document content in the form of blocks, and realizes real-time updating.

[0016] In an optional implementation, the method further includes:

[0017] In response to the paragraph block addition request, the pageBlockId of the added paragraph block is generated by using the snowflake algorithm, stored in the database, recorded in the document basic information, and responded to the front end.

[0018] The present application generates the pageBlockId of the added paragraph block by using the snowflake algorithm, records the pageBlockId, and responds to the front end, so that the pageBlockId can be updated when modifying.

[0019] In an optional implementation, the document is rendered by using the lazy loading technology, including:

[0020] The entire online document is displayed as a seamless single page by using the streaming continuous rendering technology, and the native Html is rendered by the browser.

[0021] The present application displays the entire online document as a seamless single page by using the streaming continuous rendering technology, does not need to wait for page loading, has no fragmented browsing experience, and renders the native Html by relying on the browser, thereby optimizing the loading function of the document.

[0022] In an optional implementation, the online document is automatically saved, including:

[0023] After the document block is changed, the saving operation is delayed for a preset time period by using the anti-shake technology.

[0024] If the document block content is changed again within the preset time length, the timing is restarted.

[0025] The application delays the execution of the save operation by setting the anti-shake technology, prevents frequent calling of the save interface caused by frequent changes of the document content, restarts the timing if the document block content is changed again within the preset time length, ensures that the last save is called only when the trigger is multiple, avoids a large number of repeated interface requests, and improves the request efficiency.

[0026] In an optional embodiment, the method further comprises:

[0027] In response to an existing document import operation, the underlying XML data of the existing document is extracted by using an HTML conversion engine to convert the content and style of the existing document into an HTML format and display the content and style in the front end;

[0028] The front end is rendered based on the HTML, the document is automatically divided into independent modules according to the DOM structure of the HTML and the pre-defined block identifier, and the corresponding type is determined, the corresponding plug-in is selected according to the type, and the document content is mapped into the block structure of the online document for saving.

[0029] The application extracts the underlying XML data of the file by using the HTML conversion engine, losslessly converts the document content and style into an HTML format, displays the content and style in the front end, ensures that the presentation of the document in the online environment is highly consistent with the original file, selects the corresponding plug-in according to the division type of the document, maps the content into the block structure of the online document for saving, and realizes modular management and dynamic update of the document content.

[0030] In an optional embodiment, the method further comprises:

[0031] Each block type is designed as an independent Vue component;

[0032] In response to a business demand change request, the corresponding Vue block component is registered by writing the front end.

[0033] The application designs the block type as an independent Vue component, so as to facilitate development and maintenance, registers the corresponding Vue block component by writing the front end when the business demand changes, does not need to change the existing logic, and reduces the workload of repeated development.

[0034] In a second aspect, the application provides an online document processing system based on structured storage, which comprises:

[0035] A structured storage module is configured to split the content elements of the online document into blocks and store each block as an independent object.

[0036] The document rendering module is configured to, in response to an online document opening request, query document basic information, load data according to a document block pageBlockId list, create components according to the loaded data, build a component tree, perform document rendering by using a lazy loading technique, and render a region including a visible area and a paragraph in a nearby buffer area.

[0037] The reference relationship management module is configured to, in response to an online document saving request, abstract a document and document blocks into objects, synchronize the objects to a graph database, model a relationship between the document and the document blocks as an edge in the graph database, and convert the relationship between the document and the document blocks into a graph data structure.

[0038] The document automatic saving module is configured to, when a change in document content is detected, query a document block that has changed, call a saving interface to save the document block that has changed, and automatically save the online document.

[0039] In a third aspect, the present application provides a computer device, comprising a memory and a processor, the memory and the processor are communicatively connected with each other, the memory stores computer instructions, and the processor executes the computer instructions to perform the online document processing method based on structured storage according to the first aspect or any of the corresponding embodiments.

[0040] In a fourth aspect, the present application provides a computer readable storage medium, which stores computer instructions, and the computer instructions are used to make a computer execute the online document processing method based on structured storage according to the first aspect or any of the corresponding embodiments. BRIEF DESCRIPTION OF DRAWINGS

[0041] In order to more clearly illustrate the specific embodiments of the present application or the technical solutions in the prior art, the drawings needed in the specific embodiments or the prior art description will be briefly introduced as follows. Obviously, the drawings in the following description are some embodiments of the present application, and those skilled in the art can also obtain other drawings according to these drawings without creative labor.

[0042] Figure 1 is an online document effect diagram according to an embodiment of the present application;

[0043] Figure 2 is a flowchart of an online document processing method based on structured storage according to an embodiment of the present application;

[0044] Figure 3 is a knowledge base document list effect diagram according to an embodiment of the present application;

[0045] Figure 4 is an online document opening page loading flowchart according to an embodiment of the present application;

[0046] Figure 5 is a document binding relationship display diagram according to an embodiment of the present application;

[0047] Figure 6 is a document relationship identification diagram according to an embodiment of the present application;

[0048] Figure 7 is a partial paragraph diagram of introducing other documents in the form of hyperlinks according to an embodiment of the present application;

[0049] Figure 8 is a partial paragraph diagram of inserting other documents according to an embodiment of the present application;

[0050] Figure 9 is an architecture design diagram of referencing static resources according to an embodiment of the present application;

[0051] Figure 10 is a document title switching diagram according to an embodiment of the present application;

[0052] Figure 11 is an online document saving flowchart according to an embodiment of the present application;

[0053] Figure 12 is a document fragmentation browsing effect diagram according to an embodiment of the present application;

[0054] Figure 13 is a lazy loading diagram according to an embodiment of the present application;

[0055] Figure 14 is a lazy loading processing flowchart according to an embodiment of the present application;

[0056] Figure 15 is a file import converting into an online document flowchart according to an embodiment of the present application;

[0057] Figure 16 is a structural block diagram of an online document processing system based on structured storage according to an embodiment of the present application;

[0058] Figure 17 is a hardware structure diagram of a computer device according to an embodiment of the present application. DETAILED DESCRIPTION

[0059] In order to make the objects, technical solutions and advantages of the embodiments of the present application clearer, the technical solutions in the embodiments of the present application will be described clearly and completely below with reference to the drawings in the embodiments of the present application. Obviously, the described embodiments are some but not all of the embodiments of the present application. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative work fall within the scope of protection of the present application.

[0060] In the current enterprises, the standard, system, operation instruction and other documents are usually carried by files. The following problems exist:

[0061] (1) Static content update difficulty: the flowchart, conceptual data model diagram, table and other contents contained in the document are relied on to be pasted into the document after being made in other tools. The pasted content needs to be re-imported after being changed;

[0062] (2) Inflexible document reference: it is difficult to accurately reference specific chapters of other documents, and the entire document often needs to be mounted, resulting in time waste of users browsing irrelevant content;

[0063] (3) Unclear relationship between documents: it is difficult to define various business relationships between documents, and it is difficult to clearly and accurately define, express and display the relationship between documents;

[0064] (4) Document loading performance bottleneck: in terms of document loading, the traditional loop rendering mode will appear performance bottleneck when processing enterprise documents containing multiple types of document objects such as graphs, texts and tables, and the file may reach hundreds of megabytes. The full amount of data needs to be loaded at one time, all component nodes are created and the component tree is constructed. When the data volume is large, the time consumption is serious, resulting in too long page startup time. At the same time, the components outside the screen visible area occupy memory although they are not displayed. In the case of high system load, performance problems may occur, and in the extreme case, the application may abnormally exit.

[0065] In view of the above problems, the embodiment of the present application provides an online document processing method based on structured storage, which realizes the following purposes:

[0066] (1) Online document realizes dynamic update: relying on advanced JS front-end component technology, relying on the browser to realize online rendering, editing and storage of the document, the document content is structured and stored independently in block form to realize real-time update;

[0067] (2) Relationship diagram object storage analyzes the relationship between documents: the reference and dependency relationship between documents is converted into the relationship between objects for storage and management, and the relationship between documents is realized intuitively and clearly;

[0068] (3) Lazy loading improves performance: the object-oriented design concept is introduced, the tables, paragraphs and other types in the document are set as component objects, combined with the block storage of the document content, object-level lazy loading is implemented, the data is loaded according to the interface layout requirements of the application, and the loading speed and memory usage of complex documents are optimized.

[0069] The application adopts B / S architecture, can realize the function of rendering and editing the document in the browser, contains a set of Spring Cloud microservices developed by JAVA language as a back-end server to provide data support and process the main business logic (referred to as back-end), a set of front-end services developed based on JS as a display layer to render and edit the complete solution of the document (referred to as front-end), and the effect is as shown in Figure 1 , Figure 1 The left side of the online document opened by the application is shown, and the right side is a word file opened by WPS software.

[0070] According to the embodiment of the application, an online document processing method based on structured storage is provided, and it should be noted that the steps shown in the flowchart of the drawings can be executed in a computer system such as a set of computer executable instructions, and although the logical order is shown in the flowchart, in some cases, the steps shown or described can be executed in an order different from that here.

[0071] In this embodiment, an online document processing method based on structured storage is provided, Figure 2 The flowchart of the online document processing method based on structured storage according to the embodiment of the application is shown in Figure 2 , and the flowchart includes the following steps:

[0072] In step S201, the content elements of the online document are split into blocks, and each block is structured and stored as an independent object.

[0073] In the embodiment of the application, object-oriented technology is adopted, each content element (such as a paragraph, a title, an inserted other document, a design diagram, etc.) of the online document is decomposed into a block, each block is structured and stored as an independent object, so that when the content in the block changes, only the affected block needs to be updated and re-rendered, avoiding the performance bottleneck and resource waste caused by full-text refreshing. When editing the document, each block is distinguished according to the content element type (such as a text paragraph, a title, an inserted image, a drawn table, an inserted design diagram, etc.), the front-end JS automatically selects a plug-in according to the element type to support the online picture-text layout editing.

[0074] When saving the document, the front-end outputs each block as clean JSON data (including the content, style, type, etc. of each block), each block is stored as an independent object, the document body is also stored as an independent object, and the block object ID list contained by the document and some basic information of the document (such as the document name, creator, creation time, document type, etc.) are recorded.

[0075] Step S202, in response to the online document opening request, querying the document basic information, loading data according to the document block pageBlockId list, creating components according to the loaded data, building component tree, using lazy loading technology for document rendering, rendering area including visible area and adjacent buffer paragraph.

[0076] In the embodiment of the application, after the structured storage is completed, the online document is saved as two parts of document basic information pt_eamd_page and document block data pt_eamd_page_block. The document basic information records all the online document data currently saved, and can be displayed through an online document list (as shown in Figure 3 Figure 3 The figure is a knowledge base document list effect diagram, which is only for reference, and one of the icons can be clicked to open the online document.

[0077] In response to the online document opening request, the document basic information pt_eamd_page is queried first, which contains all the document block pageBlockId list data (page_layout_html field) of the current document, and the latest document block data is queried according to the document block pageBlockId list.

[0078] In order to avoid problems such as large document content and slow loading, a data lazy loading method is used, the block data that can be accommodated is calculated according to the screen visible area, only the data that needs to be loaded is queried and loaded, and the waste of resources is avoided.

[0079] As shown in Figure 4 , when the document is opened, the data loading process is as follows:

[0080] (1) querying the document basic information according to the opened document, mainly obtaining all the included document block pageBlockId list;

[0081] (2) calculating the number of components that can be displayed according to the screen visible area, and loading data according to the document block pageBlockId list;

[0082] (3) creating components according to the data loaded by the pageBlockId list, mounting on the component tree, and building a short component tree. That is, as many ListItem component nodes as needed are created and mounted on the List component tree root node, and these ListItems are the content that needs to be displayed on the page.

[0083] Through the lazy loading technology, only the paragraphs in the visible area and the adjacent buffer area are rendered, the memory occupation is reduced, and the performance is optimized.

[0084] ​Step S203: In response to the online document saving request, the document and document blocks are abstracted into objects and synchronized to the graph database. The relationship between the document and document blocks is modeled as edges in the graph database, and the document and the relationship between the documents are converted into a graphical data structure.

[0085] In this embodiment of the invention, object-oriented technology is employed in document relationship management, and the Neo4j graphical database is introduced. By transforming documents and the relationships between them into a graphical data structure, not only is efficient document storage and management achieved, but also an intuitive and dynamic display of document relationships is provided. Key core technologies include:

[0086] (1) Object-oriented abstraction of documents and document blocks: When saving a document, the document and document blocks (such as paragraphs, tables, images, etc.) are abstracted into objects and synchronized to the Neo4j graph database. The document and document blocks are nodes in the Neo4j graph database. The node attributes store the document's metadata and specific content, such as document ID, document block pageBlockId, document name, etc.

[0087] (2) Relationship modeling and dynamic synchronization: The relationships between documents and document blocks (such as inclusion, reference, insertion, etc.) are modeled as edges in the Neo4j graph database. When a document references other documents or enterprise architecture diagrams, these related information are synchronized in real time to form a dynamic relationship network;

[0088] (3) Graphical relationship display: Relying on the graphical analysis capabilities of the Neo4j graph database, the relationships between documents are clearly and quickly displayed. Users can intuitively see the reference chain and dependency relationship of documents through the graphical interface, and gain a deeper understanding of the document context through the path query function.

[0089] Relationship display as follows Figure 5 As shown, the document "Luban Detailed Design" is bound to the document "GJB9001C-2017" by a relationship identifier. Figure 6 This serves as the structural identifier for the document "Enterprise Operation and Organization Management Standards," which contains four first-level headings: Human Resource Management Standards, Financial Management Standards, R&D Management Standards, and Operations Management Standards.

[0090] To avoid the impact of synchronizing data to Neo4j on system performance when saving documents, and ensure that the database data is consistent with the graph database, an asynchronous synchronization mechanism of Neo4j and exception processing mechanism is implemented. After the document data and its associated relationship is saved to the database and the transaction is committed (depending on Spring's TransactionSynchronizationManager.registerSynchronization), the synchronization operation of Neo4j is performed according to the data after storage. If an exception occurs during data processing, the data information to be synchronized this time will be stored in the pt_eamd_exec_retry table of the database.

[0091] In addition, a timing task is set to periodically scan the pt_eamd_exec_retry table, and re-attempt to synchronize data according to the stored parameter information. If the synchronization fails after processing, the system will record the number of failures and trigger the alarm processing mechanism after multiple failures. By decoupling the synchronization operation from the main business process, the impact on the main business process is reduced, and the overall performance of the system is improved.

[0092] To solve the problem of inflexible traditional document reference, the embodiment of the application supports accurate reference to specific parts of the document. When reading the document, only the reference part needs to be read, avoiding the waste of time caused by full-text reading, improving the use efficiency, and supporting the following introduction methods:

[0093] (1) Reference all or part of the paragraphs of other online documents, etc. The introduced document will be displayed in the form of a hyperlink, and the content of the referenced document will be opened by clicking the link (such as the part of the paragraph of other documents introduced in the form of a hyperlink as shown in Figure 7 );

[0094] (2) Insert all or part of the paragraphs of other online documents, etc. The inserted document will be directly inserted into the current document in the form of a block, and the source of the document content will be indicated (such as the part of the paragraph of other documents inserted as shown in Figure 8 );

[0095] (3) Bind other online documents in the document to express the strong dependency relationship between the two documents. The bound document is not allowed to be deleted, and is displayed in the form of a hyperlink. The content of the bound document will be opened by clicking the link.

[0096] When the referenced, inserted, and bound documents and document block sources are modified, the online document will be automatically updated. At the same time, these reference, insertion, and binding relationships will be converted into the relationship between objects for storage, so as to more clearly analyze and display the relationship between documents.

[0097] To solve the problem of static resource content update difficulty in file documents, for example, when writing the requirement document of a certain software, sometimes architecture diagram, flowchart and the like are needed to be inserted for more detailed description, generally, software such as Visio and Drawio is used to draw and export as a picture, and then the picture is inserted into the document, if the architecture diagram needs to be modified, the operation needs to be repeated, which is time-consuming and laborious. The embodiment of the present application supports direct insertion of design diagram objects (such as Figure 9 The architecture design diagram of the service is inserted in the requirement specification (the drawing of the design diagram depends on other microservices of Spring Cloud, and the embodiment of the present application directly uses data), and after the insertion of the design diagram, the design diagram is inserted into the current document in the form of a picture, when the architecture design original drawing needs to be adjusted, the architecture diagram obtained after the modification is automatically updated in the document, and when the document is opened, it is reminded that the design diagram has changed, and the latest design diagram is loaded.

[0098] In step S204, when the change of the document content is listened to, the changed document block is queried, the saving interface is called to save the changed document block, and the online document is automatically saved.

[0099] In the embodiment of the present application, the lazy loading and block storage technology are adopted, so that the automatic saving can be more efficient. The change of the document state is monitored in real time, and saving is immediately performed when any modification occurs, and thanks to the block storage technology, only the block that has been modified needs to be saved, so that resource waste caused by saving of the whole document is avoided.

[0100] When the document is initially loaded, the document block JSON is temporarily stored by the front end, then the change event provided by AmEditor is used to listen to the change of the document content, the latest document block JSON is obtained, and the changed document block is found by comparison between the document block before the change of the document block JSON and the temporarily stored document block JSON, the saving interface is called to save the changed document block, and the online document is automatically saved.

[0101] The online document processing method based on structured storage provided in the embodiment stores the document content in the form of blocks, realizes dynamic update of the online document, renders the document when the document is opened, converts the reference relationship between the document and the document block into the relationship between objects, performs storage management, intuitively and clearly shows the relationship between the documents, saves the changed document block when the document content changes, and automatically saves, so that resource waste caused by saving of the whole document is avoided.

[0102] In the embodiment, an online document processing method based on structured storage is provided, and the flow includes the following steps:

[0103] Step S301, splitting the content elements of the online document into blocks, and storing each block as an independent object.

[0104] Specifically, the above step S301 includes:

[0105] Step S3011, using JS language development, introducing open source framework components, converting the document content into native Html, and splitting the content elements of the online document into blocks based on the Dom object of Html.

[0106] Step S3012, according to the label type of each block, selecting the corresponding label to identify the block, and editing and rendering the document based on the Dom object of the native Html.

[0107] Step S3013, splitting all the content on the front-end page into blocks according to the block identification, and outputting each block content in JSON format.

[0108] In the embodiment of the application, JS language development is adopted, and open source framework VUE, AmEditor and other components are introduced, the file content of the traditional word is converted into the form of native Html for display, and the document content is split into blocks based on the Dom object of Html. According to the label type (such as the text of the main body , title <h>Table< / h>

[0109]

[0110] The label identifies the block, and if the text has a style (e.g., font, size, color, etc.), it is applied Surrounding the text to record the style, for example: a paragraph of ordinary text "text sample of the text", where "text sample" four words are red (corresponding <span style＝"color:red">), the font is Songti (corresponding <span style＝"font-family:宋体">), bold (corresponding to <strong>), the tags are as follows:

[0111]

[0112] For the title in word, then select to use <h>Label< / h> < / strong> , pictures, etc.) to process different components, and the editing and rendering of the document are realized by processing each Dom object of the original Html. Specifically, the label types include normal text content, title, table, picture, etc. For the normal text content in the word, the <h1> <strong>"indicates a primary heading, <h2>The text entered in the default input mode is the normal text document. You can select the text and change it to the heading (e.g. Figure 10 Document heading change) by clicking the heading style.

[0113] For more complex content such as tables and pictures, use The tags are block identified, in The following uses other more rich Html tags for rendering, but the whole Still as a document block is saved, like a simple table (table header has two columns of name, age) label structure content as follows (here the label within the details are hidden, only keep the basic framework):

[0114]

[0115] When saving, the front-end page will split all the contents on the page into blocks according to the pre-defined block identifier, and the content of each block is output in JSON format (including the text content of the block, label type, style, etc.), and these block JSON data and the document basic information (including the name of the document, creator, creation time, modifier, modification time, etc.) are transmitted to the backend as a large JSON for saving.

[0116] In some optional embodiments, the method further comprises:

[0117] Step S3014, in response to the paragraph block addition request, generating the pageBlockId of the added paragraph block by using the snowflake algorithm, storing the pageBlockId in the database, recording the pageBlockId in the document basic information, and responding the pageBlockId to the front end.

[0118] In the embodiment of the application, the JSON content of an added paragraph block is as follows: this JSON contains the type blockType of the block, the content blockContent, the pageId to which the block belongs, the height blockHeight of the block, etc. Since it is an added block, it has not been saved, so there is no pageBlockId of the block. When saving, the pageBlockId is generated by using the snowflake algorithm and stored in the database, and the pageBlockId is recorded in the document basic information, and the pageBlockId is also responded to the front end for subsequent modification operation, and the data is updated by the pageBlockId during modification.

[0119] For example, as follows:

[0120]

[0121] For the modified document block, the JSON content of a modified block is as follows: in this JSON, the pageBlockId (which is automatically generated by the backend server during addition and returned to the front end) is added compared with the added block, and the other logic is consistent with the addition logic, and when saving, the data in the database will be updated according to the pageBlockId and no data will be added.

[0122] For example, as follows:

[0123]

[0124] For the document block without modification, if the current block is not modified, the block information will also be contained in the pageBlockList, but only the pageBlockId and the block height contain no block content, in order to maintain the integrity of the document containing block while minimizing the size of the request body.

[0125] For example, as follows:

[0126]

[0127] For the deleted document block, if the document block is deleted, the document block pageBlockId will also be uploaded and identified by removeFlag=true.

[0128] For example, as follows:

[0129]

[0130] A complete JSON example of an online document saving, including the basic information of the document, such as the document name pageTitle, the document type pageType (here is a data dictionary 1 representing a standard document) and the current document containing block content pageBlockList, the navigation data of the document (the same as the navigation window in the word), wherein each object in the pageBlockList corresponds to a document block, which contains the above-mentioned one newly added block, one updated block, one deleted block and one block without any modification.

[0131] For example, as follows:

[0132]

[0133]

[0134] The document saving process is shown in Figure 11 The online document saving process mainly includes:

[0135] (1) The browser front end obtains the basic information of the document and the document block information according to the user input, and initiates the saving;

[0136] (2) The backend server pre-processes the incoming data according to the grouping processing of the newly added, modified, deleted and unmodified;

[0137] (3) According to the identification and content of the document block, the data of the newly added, updated and deleted document block is processed;

[0138] (4) Save the document basic information (record the document blocks contained in the current document, obtain the list of all document blocks pageBlockId according to the incoming order of the blocks).

[0139] The backend performs addition, update and deletion operations on the basic information and document block data of the document according to the incoming JSON content. The document basic information (including the document name, creator, creation time, etc.) and the document block (including the text content, text style, type, etc.) are stored separately, the document basic information is saved to the document basic information table pt_eamd_page (structure as shown in Table 1), and the document block is saved to the pt_eamd_page_block (structure as shown in Table 2) table as an independent data for each block. When the document is loaded, the basic information of the document and the block object pageBlockId list contained in the document are queried first, and then the block object is loaded in real time through the object pageBlockId list to realize dynamic reference and version update of the document content (for details, see the document rendering content).

[0140] Table 1 Main data structure of document basic information

[0141]

[0142] Table 2 Main data structure of document block information

[0143]

[0144]

[0145] In step S302, in response to the online document opening request, the document basic information is queried, the data is loaded according to the document block pageBlockId list, the component is created according to the loaded data, the component tree is constructed, the lazy loading technology is used for document rendering, and the rendering area includes the paragraphs in the visible area and the adjacent buffer area.

[0146] Specifically, the document rendering by using the lazy loading technology in the above step S302 includes:

[0147] In step S3021, the flow continuous rendering technology is adopted, the entire online document is displayed as a seamless single page, and the original Html is rendered by the browser.

[0148] In the embodiment of the application, the flow continuous rendering technology is adopted, the entire document is displayed as a seamless single page, and the original Html is rendered by the browser, so that the loading performance of the document is better.

[0149] Compared with the traditional paging mode, the following core advantages are obtained by using the flow continuous rendering technology: users can directly locate at any position of the document (such as the third paragraph or the 500th paragraph) without waiting for page loading, and there is no fragmented browsing experience (such as Figure 12 document fragmentation browsing). Through the lazy loading technology, only the paragraphs in the visible area and the adjacent buffer area are rendered, the memory occupation is reduced, and the performance is optimized. The elimination of the data switching delay of the traditional paging supports horizontal / vertical mixed scrolling and adapts to complex layouts (such as technical drawings and long tables).

[0150] The schematic diagram of the lazy loading scheme is shown in Figure 13 A relatively large document may have N blocks, if all the blocks are loaded every time, the backend data query, the data transmission from the backend to the front end, and the front-end page rendering will cause a relatively large pressure, therefore, only the components in the screen visible area are displayed, as shown in Figure 4 only the contents of data1, data2 and data3 are loaded, and the other invisible contents are not loaded, when the scroll bar is dragged, the contents are reloaded according to the position of the scroll bar. In order to reduce the frequent data requests between the front end and the back end, the data in the range of 50% before and after the visible area is also preloaded, when the scroll bar is dragged in a small range, it can be directly displayed without calling the background interface query again, the lazy loading visible area data loading process (as shown in the lazy loading process flow chart Figure 14 ) Key core technology implementation includes:

[0151] (1) Listen to the scroll event: track the scroll position change;

[0152] (2) Get the visible area boundary: get the viewport position through getBoundingClientRect();

[0153] (3) Traverse the paragraph position: calculate the position of each an offset of the label relative to the viewport;

[0154] (4) Dynamic loading data: only render the paragraphs within the viewable area and the preloading buffer, reduce the number of DOM nodes.

[0155] In step S303, in response to the online document saving request, the document and the document block are abstracted into objects, are synchronized to the graph database, the relationship between the document and the document block is modeled as an edge in the graph database, and the relationship between the document and the document is converted into a graph data structure.

[0156] For details, see Figure 2 In step S203 of the embodiment shown, details are not repeated here.

[0157] In step S304, when the change of the document content is listened to, the changed document block is queried, the saving interface is called to save the changed document block, and the online document is automatically saved.

[0158] Specifically, the automatic saving of the online document in step S304 includes:

[0159] In step S3041, a debounce technique is used, and after the document block is changed, the saving operation is delayed for a preset time length.

[0160] In step S3042, if the document block content is changed again within the preset time length, the timing is restarted.

[0161] In the embodiment of the application, in order to prevent frequent calling of the saving interface caused by frequent changes of the document content, the front end uses a debounce technique, triggers a change event, and delays a preset time length (for example, 3 seconds in the embodiment of the application) to perform a saving operation. If the document content is changed again within the 3 seconds, the timing is restarted. Through this scheme, it is ensured that only the last saving is called when multiple triggers occur, a large number of repeated interface requests are avoided, and the request efficiency is improved.

[0162] In some optional embodiments, the method further includes:

[0163] In step S305, in response to the existing document import operation, the HTML conversion engine is used to extract the underlying XML data of the existing document to convert the existing document content and style into an HTML format and display the existing document content and style in the front end.

[0164] In step S306, the front end is rendered based on the HTML, the document is automatically divided into independent modules according to the DOM structure of the HTML and the pre-defined block identifier, the corresponding type is determined, the corresponding plug-in is selected according to the type, and the document content is mapped to the block structure of the online document to be saved.

[0165] In the embodiments of the present application, in order to ensure that the user can seamlessly transition from the traditional file document to the online document system, the import of the existing file is realized, and the continuous editing operation of the online document export modification and then import is realized, and the specific implementation process is as shown in the following Figure 15 The main content includes:

[0166] (1) When importing the existing document, through the efficient HTML conversion engine, the underlying XML data of Word is extracted, the content and style (such as font, color, paragraph format, table layout, etc.) of the Word document are losslessly converted into HTML format and displayed on the front end, and the presentation of the document in the online environment is highly consistent with the original file;

[0167] (2) The front end is rendered based on HTML, and according to the DOM structure of HTML and the pre-defined block identifier, the document content is automatically divided into independent modules and differentiated by type (such as paragraph, title, table, picture, etc.), and according to different types, the appropriate plug-in is automatically selected, the content is mapped to the block structure of the online document for saving, and the modular management and dynamic update of the document content are realized.

[0168] Specifically, when importing the existing document, the backend server extracts, parses, converts and other series of operations on the underlying xml (.docx,.doc file is essentially a compressed package, and the compressed package is some xml files recording the document content and style information) data of word, converts the content of the word file into html format and retains the complete content style, and then the JS front-end page processes the generated html into an online document for subsequent operation.

[0169] For the edited online document, it can also be exported as a word file for easy transmission. Since the complete HTML of the document is saved in the database (doc_html field in the document basic information table pt_eamd_page) when saved, only the file in the target format (such as Word, PDF) needs to be generated according to the HTML when exported, and all styles and layout information are retained to ensure the professionalism and readability of the exported file. At the same time, in order to modify the exported document and then import it again, when generating Word, an id is added as an identifier to the generated file and each document block (title, paragraph, table, etc.) in the file (this id is consistent with the data primary key in the database), so that when the file is imported again, the file id and block pageBlockId content can be used to determine whether to add, update or operate. For example, when a paragraph or title in Word is modified, the current block will be checked for the pageBlockId identifier when imported. If there is, the block information will be updated according to the pageBlockId. If there is no such identifier, it is considered to be a new block, and a new data will be added to the document block information table (pt_eamd_page_block), and the pageBlockId of this data will be recorded in the document block list in the document information table (pt_eamd_page). Whether importing from a local file to an online document or exporting an online document to a local file, the system supports bidirectional conversion to ensure that the document can be switched between the two formats without the need to reformat or adjust the format.

[0170] In some optional embodiments, the method further comprises:

[0171] Step S307, each block type is designed as an independent Vue component.

[0172] Step S308, in response to a business demand change request, a corresponding Vue block component is written and registered.

[0173] In the embodiments of the present application, since each block indicates the block type (blockType in the save request JSON) when stored, and different block types display different content, each block type is designed as an independent Vue component, which not only facilitates development and maintenance, but also facilitates future expansion. When the business demand changes and more block types are needed, only the corresponding Vue block component needs to be written in the front end and registered in the block menu of the editor, without the need to change the existing logic, thereby reducing the workload of repeated development. At the same time, dynamically loading the corresponding component according to the block type can improve the rendering efficiency and reduce the initial loading time of the document.

[0174] In this embodiment, there is also provided an online document processing system based on structured storage, which is used to implement the above embodiments and preferred embodiments, and the description of which has been made above. As used below, the term "module" can be a combination of software and / or hardware that implements a predetermined function. Although the system described in the following embodiments is preferably implemented in software, hardware, or a combination of software and hardware can also be implemented and conceived.

[0175] The embodiment provides an online document processing system based on structured storage, as shown in the accompanying drawings, comprising: Figure 16

[0176] A structured storage module 1601 is configured to split content elements of an online document into blocks and store each block as an independent object.

[0177] A document rendering module 1602 is configured to, in response to an online document opening request, query document basic information, load data according to a document block pageBlockId list, create components according to the loaded data, build a component tree, and perform document rendering by using a lazy loading technique, wherein the rendering area includes paragraphs in a visible area and adjacent buffer areas.

[0178] A reference relationship management module 1603 is configured to, in response to an online document saving request, abstract a document and document blocks as objects, synchronize to a graph database, model a relationship between the document and the document blocks as edges in the graph database, and convert the relationship between the document and the document blocks into a graph data structure.

[0179] A document automatic saving module 1604 is configured to, when a change in document content is detected, query a document block that has changed, call a saving interface to save the document block that has changed, and automatically save the online document.

[0180] Further function descriptions of the above modules and units are the same as those of the corresponding embodiments, and thus are not described herein.

[0181] The online document processing system based on structured storage in the embodiment is presented in the form of functional units, and the units refer to ASIC (Application Specific Integrated Circuit) circuits, processors and memories that execute one or more software or fixed programs, and / or other devices that can provide the above functions.

[0182] The embodiment of the present application also provides a computer device with the online document processing system based on structured storage shown in the accompanying drawings. Figure 16

[0183] Please refer to Figure 17 , Figure 17 ​​This is a schematic diagram of the structure of a computer device provided in an optional embodiment of the present invention, such as... Figure 17 As shown, the computer device includes one or more processors 10, memory 20, and interfaces for connecting the components, including high-speed interfaces and low-speed interfaces. The components communicate with each other via different buses and can be mounted on a common motherboard or otherwise installed as needed. The processors can process instructions executed within the computer device, including instructions stored in or on memory to display graphical information of a GUI on external input / output devices (such as display devices coupled to the interfaces). In some alternative implementations, multiple processors and / or multiple buses can be used with multiple memories and multiple memory modules, if desired. Similarly, multiple computer devices can be connected, each providing some of the necessary operations (e.g., as a server array, a group of blade servers, or a multiprocessor system). Figure 17 Take a processor 10 as an example.

[0184] Processor 10 may be a central processing unit, a network processor, or a combination thereof. Processor 10 may further include a hardware chip. The hardware chip may be an application-specific integrated circuit (ASIC), a programmable logic device (PLD), or a combination thereof. The programmable logic device may be a complex programmable logic device (CAMP), a field-programmable gate array (FPGA), a general-purpose array logic (GDA), or any combination thereof.

[0185] The memory 20 stores instructions executable by at least one processor 10 to cause at least one processor 10 to perform the method shown in the above embodiments.

[0186] The memory 20 may include a program storage area and a data storage area. The program storage area may store the operating system and applications required for at least one function; the data storage area may store data created based on the use of the computer device. Furthermore, the memory 20 may include high-speed random access memory and may also include non-transitory memory, such as at least one disk storage device, flash memory device, or other non-transitory solid-state storage device. In some alternative embodiments, the memory 20 may optionally include memory remotely located relative to the processor 10, and these remote memories may be connected to the computer device via a network. Examples of such networks include, but are not limited to, the Internet, intranets, local area networks, mobile communication networks, and combinations thereof.

[0187] The memory 20 may include volatile memory, such as random access memory; the memory may also include non-volatile memory, such as flash memory, hard disk or solid-state drive; the memory 20 may also include a combination of the above types of memory.

[0188] The computer device also includes an input device 30 and an output device 40. The processor 10, the memory 20, the input device 30 and the output device 40 can be connected by a bus or other means, Figure 17 The bus connection is taken as an example.

[0189] The input device 30 can receive inputted digital or character information, and generate key signal input related to user settings and function control of the computer device, such as a touch screen, etc. The output device 40 can include a display device, etc.

[0190] The embodiments of the present application also provide a computer readable storage medium, and the method according to the embodiments of the present application can be implemented in hardware, firmware, or recorded in a storage medium, or stored in a remote storage medium or a non-transitory machine readable storage medium and downloaded from a network and stored in a local storage medium, so that the method described herein can be processed by such software on a storage medium using a general purpose computer, a special purpose processor, or programmable or special hardware. The storage medium can be a magnetic disk, an optical disk, a read-only memory, a random access memory, a flash memory, a hard disk or a solid state disk, etc. Further, the storage medium can also include a combination of the above-mentioned memories. It can be understood that the computer, the processor, the microprocessor controller or the programmable hardware include a storage component that can store or receive software or computer code, which, when accessed and executed by the computer, the processor or the hardware, implements the method shown in the above embodiments.

[0191] Part of the present application can be applied as a computer program product, for example, computer program instructions, when executed by a computer, the operation of the computer can invoke or provide the method and / or technical solutions according to the present application. Those skilled in the art should understand that the form of computer program instructions in computer readable medium includes but is not limited to source file, executable file, installation package file, etc. Correspondingly, the way of computer program instructions executed by computer includes but is not limited to: the computer directly executes the instructions, or the computer executes the corresponding compiled program after compiling the instructions, or the computer reads and executes the instructions, or the computer reads and installs the instructions and then executes the corresponding installed program. Here, the computer readable medium can be any available computer readable storage medium or communication medium accessible to the computer.

[0192] Although the embodiments of the present application are described in conjunction with the accompanying drawings, various modifications and changes can be made by those skilled in the art without departing from the spirit and scope of the present application, and such modifications and changes fall within the scope of the present application. < / h2> < / strong> < / h1>

Claims

1. A method for online document processing based on structured storage, characterized in that, The method comprises: Splitting the content elements of the online document into blocks, and storing each block as an independent object in a structured manner; In response to an online document opening request, querying document basic information, loading data according to a document block pageBlockId list, creating a component according to the loaded data, building a component tree, and rendering the document by using a lazy loading technology, wherein the rendering area includes paragraphs in a visible area and adjacent buffer areas; In response to an online document saving request, abstracting the document and the document blocks into objects, synchronizing to a graph database, modeling the relationship between the document and the document blocks as edges in the graph database, and converting the relationship between the document and the document blocks into a graphical data structure; When a change in the document content is detected, querying the changed document block, calling a saving interface to save the changed document block, and automatically saving the online document.

2. The method of claim 1, wherein, The splitting of the content elements of the online document into blocks and the structured storage of each block as an independent object comprise: Developing by using a JS language, introducing an open source framework component, converting the document content into native Html, and splitting the content elements of the online document into blocks based on the Dom object of the Html; According to the tag type of each block, selecting a corresponding tag for block identification, editing and rendering the document by using the Dom object of the native Html, and the tag type includes text content, title, table, and picture; Splitting all the content on the front-end page into blocks according to the block identification, and outputting the content of each block in a JSON format.

3. The method of claim 2, wherein, The method further comprises: In response to a paragraph block addition request, generating a pageBlockId of the added paragraph block by using a snowflake algorithm, storing the pageBlockId in a database, recording the pageBlockId in the document basic information, and responding the pageBlockId to the front end.

4. The method of claim 2, wherein, The document rendering by using the lazy loading technology comprises: Using a streaming continuous rendering technology to display the entire online document as a seamless single page, and rendering the native Html by using a browser.

5. The method of claim 1, wherein, The automatic saving of the online document comprises: Using a debounce technology to delay a preset time period for executing a saving operation after the document block is changed; If the content of the document block is changed again within the preset time period, the time is restarted.

6. The method of claim 1, wherein, The method further comprises: In response to an existing document import operation, extracting the underlying XML data of the existing document by using an HTML conversion engine, converting the content and style of the existing document into an HTML format, and displaying the content and style in the front end; The front end is rendered based on the HTML, the document is automatically divided into independent modules based on the DOM structure of the HTML and the pre-defined block identification, the corresponding type is determined, the corresponding plug-in is selected according to the type, and the document content is mapped to the block structure of the online document for saving.

7. The method of claim 1, wherein, The method further comprises: Designing each block type as an independent Vue component; In response to a business requirement change request, registering the corresponding Vue block component by using the front end.

8. An online document processing system based on structured storage, characterized in that, The system comprises: A structured storage module configured to split the content elements of the online document into blocks, and store each block as an independent object in a structured manner. The document rendering module is configured to, in response to an online document opening request, query document basic information, load data according to a document block pageBlockId list, create components according to the loaded data, build a component tree, perform document rendering by using a lazy loading technique, and render a region including a visible area and a paragraph in a nearby buffer area. The reference relationship management module is configured to, in response to an online document saving request, abstract a document and a document block into an object, synchronize to a graph database, model a relationship between the document and the document block as an edge in the graph database, and convert a relationship between the document and the document block into a graphical data structure. The document automatic saving module is configured to, when a change in document content is detected, query a document block that has changed, call a saving interface to save the document block that has changed, and automatically save the online document.

9. A computer device, comprising: The memory and the processor are communicatively connected, the memory stores computer instructions, and the processor executes the computer instructions to perform the online document processing method based on structured storage according to any one of claims 1 to 7. The computer readable storage medium stores computer instructions, and the computer instructions are used to make a computer execute the online document processing method based on structured storage according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, ​

Images