Method for assembling cross-platform full-stack application and medium

Abstract

The invention discloses a method for assembling a cross-platform full-stack application and a medium, and belongs to the technical field of software. The method comprises the steps that a cross-platform UI frame is selected, and the UI frame is configured; defining a WebApi interface for processing data interaction; writing a Shell instruction adaptation program for starting a back-end service program; configuring an interface route in a Web back-end service, and deploying an SPA front-end file in a static file directory; developing an SPA front end, and outputting the static file to a back-end static file directory; a cache management strategy is started in a front-end code, and browser cache control is forced; and embedding the back-end service and the SPA front-end file into the cross-platform application during packaging. According to the method, the cross-platform UI, the back-end service and the SPA front end are integrated and seamlessly become a full-stack application which simultaneously comprises the cross-platform UI, the back-end service and the SPA front end, so that complex business requirements are met, the deployment cost is reduced, a condition for being published as an application is achieved, and finally user experience, program simplicity and stability are improved.

Description

Technical Field

[0001] The present invention belongs to the field of software technology, and in particular relates to a method, device and medium for assembling a cross-platform full-stack application. Background Art

[0002] Generally, when deploying a Web product with separated front-end and back-end, the deployment of back-end services and front-end services will be involved: the most mainstream back-end service is now deployed using Docker images, which requires downloading and installing Docker and making corresponding runtime images; the front-end generally needs to install Nginx for proxy. When the front-end is Vue, Vue's History mode needs to be specially configured in the configuration. In order to support Vue's automatic update, corresponding configuration is also required; when the back-end service uses Nginx proxy, cross-domain and other related configurations are required. The main disadvantages of this technology are: the deployment content is large and technical, requiring professional knowledge, only suitable for professionals, and cannot meet the needs of non-professionals; the deployment content is scattered, and when used in combination with cross-platform applications, it cannot be managed as a whole; the experience is a group of products, not an application, and cannot meet the needs of distribution as an application; the probability of error is greatly increased; it is impossible to intuitively know the status of related parts; it is impossible to actively start and shut down services according to business function needs and user needs.

[0003] The present invention enables non-professional users to effectively circumvent technical details and transparently use a product with complex content, structure and functions without having to consider DIY deployment. Summary of the invention

[0004] The purpose of this section is to summarize some aspects of embodiments of the present invention and briefly introduce some preferred embodiments. Some simplifications or omissions may be made in this section and the specification abstract and the invention title of this application to avoid blurring the purpose of this section, the specification abstract and the invention title, and such simplifications or omissions cannot be used to limit the scope of the present invention.

[0005] In view of the problems of the above or existing methods for assembling cross-platform full-stack applications, the present invention is proposed.

[0006] In order to solve the above technical problems, the present invention provides the following technical solutions: In a first aspect, an embodiment of the present invention provides a method for assembling a cross-platform full-stack application, including: selecting a cross-platform UI framework, configuring the UI framework to integrate it with a Web backend service, and supporting cross-platform interface display; selecting a backend technology stack and ensuring support for self-contained packaging, writing backend code, and defining a WebApi interface for processing data interaction; writing a Shell instruction adapter for starting a backend service program, and adding operating system detection and corresponding command selection to the Shell instruction; configuring interface routing in the Web backend service to enable application logic to interact with a SPA front end, enabling static file hosting, and deploying SPA front-end files in a static file directory; using a framework to develop a SPA front end, configuring front-end routing, packaging the front-end code, and outputting static files to the back-end static file directory; enabling cache management policies in the front-end code, configuring the back-end service to add HTTP headers, and forcing browser cache control; embedding the back-end service and the SPA front-end file into the cross-platform application during packaging to ensure that the application can run independently and provide complete services.

[0007] As a preferred solution of the method for assembling a cross-platform full-stack application of the present invention, the method of selecting a cross-platform UI framework, configuring the UI framework to integrate it with the Web backend service, and supporting cross-platform interface display includes: Use Visual Studio to install the Avalonia project template extension and create an Avalonia project; The UI framework can communicate with the backend service and exchange data with the Web backend through HTTP requests. The UI framework needs to be configured to interact with the backend through HTTP to ensure that the UI obtains data from the Web backend through the API interface. The front-end application should display data, update status, and perform user operations through the interface; The backend provides static file services to ensure that the UI framework can access and render the frontend pages.

[0008] As a preferred solution of the method for assembling a cross-platform full-stack application of the present invention, the method of selecting a backend technology stack and ensuring support for self-contained packaging, writing backend code, and defining a WebApi interface for processing data interaction includes: The inventory interface is accessed through the Avalonia application. The Avalonia application and SPA front-end call the back-end API through HTTP requests to obtain inventory data. User operations are sent to the back-end through POST / PUT / DELETE requests. The back-end processes the data and returns the results to the Avalonia application and SPA front-end to update their respective UIs.

[0009] As a preferred solution of the method for assembling a cross-platform full-stack application of the present invention, the Shell instruction adapter for writing the startup backend service program, adding the detection of the operating system and the corresponding command selection to the Shell instruction, includes: In the Shell script, execute the start command or PowerShell command to start the backend service. The start command runs in a new command line window. Start the program through the start command or PowerShell script. Ensure that the script can provide feedback when problems occur and add error detection: If the operating system detection fails, output an error message and exit the script; If the command to start the service fails, capture the error information and handle it accordingly, output the error information and record it in the log.

[0010] As a preferred solution of the method for assembling a cross-platform full-stack application described in the present invention, wherein: configuring interface routing in the Web backend service, enabling application logic to interact with the SPA frontend, enabling static file hosting, and deploying the SPA frontend file in the static file directory, includes: Provide data to the front-end through GET requests, specify a folder in the back-end service to store all front-end static resources, and output the files built by the SPA front-end building tool to a specific directory; In the backend service, configure the web framework to provide access to static files, use the frontend framework's build tool to generate the production version of the static resource files, and copy the build files to the backend static file directory; When a user visits a route on the SPA frontend, the service needs to redirect all unmatched requests to the index.html file, and configure a general catch-all route in the backend service to handle all requests and return index.html.

[0011] As a preferred solution of the method for assembling a cross-platform full-stack application of the present invention, the method of using a framework to develop a SPA front end, configuring front-end routing, packaging front-end code, and outputting static files to a back-end static file directory includes: If the browser does not support HTML5 History API, use hash mode. After completing the routing configuration, start developing the functions of the front-end application: design different components according to business needs, develop necessary interaction logic, optimize and test to ensure that the application can run normally on various devices and browsers. After development is completed, use the framework's build tool to package the front-end code into static files. After SPA packaging is completed, the static files generated by packaging are output to the static file directory of the backend service: Configure a static file directory in the backend service to store the files packaged by the frontend, and copy the generated files from the frontend build directory to the backend static file directory; In the front-end application, the API interface of the back-end service is called through HTTP requests to obtain the required data. If the front-end and back-end services are deployed under different domain names or ports, configure the CORS policy in the back-end service to allow the front-end to request cross-domain APIs.

[0012] As a preferred solution of the method for assembling a cross-platform full-stack application of the present invention, wherein: enabling the cache management strategy in the front-end code, configuring the back-end service to add the HTTP header, and forcing the browser cache control includes: Use a file name with a hash value. Whenever the file content changes, the file name also changes, and the browser reloads the new file. For resources that do not change frequently, set a long cache time such as 1 month, and use file versioning to avoid cache problems; for dynamic resources or frequently changing content, set a short cache time such as 1 hour, or completely prohibit caching.

[0013] As a preferred solution of the method for assembling a cross-platform full-stack application of the present invention, wherein: the backend service and the SPA front-end file are embedded into the cross-platform application during packaging, including: In the Avalonia application, start the backend service by starting the process, ensure that the backend service is bound to the local port, and in the Avalonia application, use the WebView control to load the SPA; Use the publishing function of .NET to package the backend service into a self-contained executable file, generate corresponding executable files for different operating systems, and ensure that the front-end static files are embedded in the static file directory of the backend service. After packaging, the backend service has the function of processing the front-end SPA file request and providing API interface; In the Avalonia project, the executable file of the backend service is embedded, and the Avalonia application is packaged as a cross-platform self-contained application using .NET. The backend service program and SPA front-end files are placed in the corresponding directory, and the final installation package is made through the installation package creation tools of each platform.

[0014] In a second aspect, an embodiment of the present invention provides a computing device, the computing device comprising: at least one processor, memory, and input-output unit; The memory is used to store a computer program, and the processor is used to call the computer program stored in the memory to execute the steps of the method for assembling a cross-platform full-stack application.

[0015] In a third aspect, an embodiment of the present invention provides a computer-readable storage medium, which includes instructions, which, when executed on a computer, enable the computer to execute the steps of a method for assembling a cross-platform full-stack application.

[0016] The beneficial effects of the present invention are as follows: the present invention enables applications to run seamlessly on different operating systems (such as Windows, macOS, and Linux) by selecting a cross-platform framework, combining a self-adaptive Shell instruction and a static file hosting mechanism, thereby reducing development and deployment costs. Through a cross-platform UI framework, the interface and interactive behavior on different platforms are ensured to remain consistent, thereby improving the consistency of user experience. By hosting the SPA front end through a static file service, no additional static server is required, which greatly reduces the complexity of front-end and back-end integration. By integrating the back-end service and the front-end file into one executable file, the complexity of dependent configuration and environment variables is reduced, and the startup speed and stability are improved. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the following briefly introduces the drawings required for describing the embodiments. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative labor. Among them: Figure 1 A flowchart of a method for assembling a cross-platform full-stack application provided by an embodiment of the present invention.

[0018] Figure 2 A block diagram of the system principles for assembling a cross-platform full-stack application provided by an embodiment of the present invention.

[0019] Figure 3 A schematic structural diagram of a medium according to an embodiment of the present invention is schematically shown.

[0020] Figure 4 A schematic diagram of the structure of a computing device according to an embodiment of the present invention is schematically shown.

[0021] In the drawings, the same or corresponding reference numerals represent the same or corresponding parts. DETAILED DESCRIPTION

[0022] In order to make the above-mentioned objects, features and advantages of the present invention more obvious and easy to understand, the specific implementation methods of the present invention are described in detail below in conjunction with the accompanying drawings.

[0023] In the following description, many specific details are set forth to facilitate a full understanding of the present invention, but the present invention may also be implemented in other ways different from those described herein, and those skilled in the art may make similar generalizations without violating the connotation of the present invention. Therefore, the present invention is not limited to the specific embodiments disclosed below.

[0024] Secondly, the term "one embodiment" or "embodiment" as used herein refers to a specific feature, structure, or characteristic that may be included in at least one implementation of the present invention. The term "in one embodiment" that appears in different places in this specification does not necessarily refer to the same embodiment, nor does it refer to a separate or selective embodiment that is mutually exclusive with other embodiments.

[0025] Reference Figure 1 , which is the first embodiment of the present invention, and provides a method for assembling a cross-platform full-stack application, comprising: S1: Select a cross-platform UI framework, configure the UI framework to integrate it with the Web backend service, and support cross-platform interface display.

[0026] Preferably, use Visual Studio to install the Avalonia project template extension and create an Avalonia project; the UI framework can communicate with the back-end service and interact with the Web back-end through HTTP requests. The UI framework needs to be configured to interact with the back-end through HTTP to ensure that the UI obtains data from the Web back-end through the API interface. The front-end application should display data, update status, and perform user operations through the interface; the back-end provides static file services to ensure that the UI framework can access and render the front-end pages.

[0027] Furthermore, in the front-end application, configure the HTTP client to interact with the back-end service. The back-end service needs to support CORS to allow front-end requests, or solve cross-domain problems through a proxy server. The front-end calls the back-end API interface through HTTP requests to obtain data. The back-end processes the request and returns data in JSON format for front-end rendering. Maintain the data status through the state management tool on the front-end, update the page content according to the data returned by the back-end, and implement dynamic interaction functions. Package the front-end project into static files through the packaging tool, upload the output directory to the back-end service, configure the static file service on the back-end, and bind the static file directory to the HTTP route. Configure the back-end route rewrite rules to ensure that all requests point to index.html to support the History route mode of Vue.js or React.js. Set the HTTP response header on the back-end and configure the cache control policy to prevent the browser cache from causing untimely updates to the front-end.

[0028] S2: Select the backend technology stack and ensure that it supports self-contained packaging, write backend code, and define the WebApi interface to handle data interaction.

[0029] Preferably, the inventory interface is accessed through the Avalonia application, and the Avalonia application and SPA front-end call the back-end API through HTTP requests to obtain inventory data. User operations are sent to the back-end through POST / PUT / DELETE requests. The back-end processes the data and returns the results to the Avalonia application and SPA front-end to update their respective UIs.

[0030] Furthermore, using the MVVM pattern in the Avalonia application, create MainViewModel as the bound ViewModel.

[0031] Define the InventoryItems property of ObservableCollection type to store inventory data and bind it to DataGrid. In MainViewModel, send requests to the backend through HTTP client. Check the response status of each request to ensure that the UI is updated only after success. When the request fails, capture the error and display a friendly prompt. Add a button to the interface and bind it to the command of the ViewModel. Define the ICommand implementation in the ViewModel to handle user click events.

[0032] S3: Write a Shell instruction adapter to start the backend service program, and add operating system detection and corresponding command selection to the Shell instruction.

[0033] Preferably, in the Shell script, execute the start command or PowerShell command to start the backend service. The start command runs in a new command line window. The program is started by the start command or PowerShell script to ensure that the script can provide feedback when a problem occurs. Error detection is added: if the operating system detection fails, output an error message and exit the script; if the command to start the service fails, capture the error message and perform corresponding processing, output the error message and record the log.

[0034] S4: Configure interface routing in the Web backend service to enable the application logic to interact with the SPA frontend, enable static file hosting, and deploy the SPA frontend files in the static file directory.

[0035] Preferably, data is provided to the front-end through a GET request, a folder is specified in the back-end service to store all front-end static resources, and the files built by the SPA front-end build tool are output to a specific directory; in the back-end service, the Web framework is configured to provide access to static files, and the production version of the static resource files is generated using the front-end framework's build tool, and the built files are copied to the back-end static file directory; when a user accesses a certain route on the SPA front-end, the service needs to redirect all unmatched requests to the index.html file, and a general catch-all route is configured in the back-end service to handle all requests and return index.html.

[0036] Furthermore, single-page applications (SPAs) use front-end routing to control page navigation. When a user visits a non-root path, the back-end service needs to return index.html to support SPA route resolution. Configure the back-end's general routing rules to intercept all unmatched requests and return the front-end's index.html. Define a general catch-all route in the back-end service: match all unmatched request paths and return index.html for the front-end framework to resolve SPA routes.

[0037] S5: Use the framework to develop the SPA front end, configure the front-end routing, package the front-end code, and output the static files to the back-end static file directory.

[0038] Preferably, if the browser does not support HTML5 History API, use hash mode; after completing the routing configuration, start developing the functions of the front-end application: design different components according to business needs, develop necessary interaction logic, optimize and test to ensure that the application can run normally on various devices and browsers. After development is completed, use the framework's build tool to package the front-end code into static files; after SPA packaging is completed, output the packaged static files to the static file directory of the back-end service: configure a static file directory in the back-end service to store the front-end packaged files, and copy the generated files from the front-end build directory to the back-end static file directory; in the front-end application, call the API interface of the back-end service through HTTP requests to obtain the required data. If the front-end and back-end services are deployed under different domain names or ports, configure the CORS policy in the back-end service to allow the front-end to request cross-domain APIs.

[0039] Furthermore, choose front-end frameworks such as Vue.js, React.js, Angular, etc. to develop single-page applications and keep the front-end and back-end codes separate. In the back-end service, specify a directory for storing front-end static files, such as / backend / static or a specified relative path.

[0040] After the build is complete, manually copy all files in / frontend / dist (or the corresponding build directory) to the backend static file directory / backend / static or the specified relative path. Create an automated script to automatically copy static files to the backend directory after the build. Use express.static middleware to specify the static file directory and set the access path for static files. Ensure that the backend service loads the static file configuration at startup so that the frontend resources can be accessed through the web server.

[0041] Call the corresponding business logic processing function according to the requested URL and HTTP method. Process data operations, such as querying, inserting, updating, and deleting data from the database. Verify the data submitted by the front end to ensure the correctness of the data format and content. Use validation libraries (such as Joi, Validator.js) to perform data validation to prevent illegal data from entering the system.

[0042] Use axios, fetch or other HTTP client libraries to initiate HTTP requests in the front-end application. Configure the API request path in the front-end application to point to the API endpoint of the back-end service. After the front-end obtains data through the API, it displays the data in the UI component. When the user operates on the front-end, the data is submitted to the back-end for processing through the API.

[0043] S6: Enable cache management policy in the front-end code and configure the back-end service to add HTTP headers to force browser cache control.

[0044] Preferably, use a file name with a hash value. Whenever the file content changes, the file name also changes, and the browser reloads the new file. For resources that do not change frequently, set a long cache time such as 1 month, and use file versioning to avoid caching problems; for dynamic resources or frequently changing content, set a short cache time such as 1 hour, or completely prohibit caching.

[0045] Furthermore, taking Webpack as an example, use [contenthash] in the output configuration, such as: output: { filename: '[name].[contenthash].js', path: path.resolve(__dirname, 'dist'), }, In this way, every time the file content changes, a new file name is generated; Assume that the generated files have the following contents: app.abc123.js; vendor.efg456.js; style.xyz789.css; In the HTML template, the corresponding file name is automatically inserted by the build tool: If the code changes, abc123 will become a new hash like lmn890, and the browser will load the new file instead of the old version.

[0046] S7: When packaging, embed the backend services and SPA frontend files into the cross-platform application to ensure that the application can run independently and provide complete services.

[0047] Preferably, in the Avalonia application, the backend service is started by starting the process, ensuring that the backend service is bound to the local port, and in the Avalonia application, the SPA is loaded using the WebView control; Use the publishing function of .NET to package the backend service into a self-contained executable file, generate corresponding executable files for different operating systems, and ensure that the front-end static files are embedded in the static file directory of the backend service. After packaging, the backend service has the function of processing the front-end SPA file request and providing API interface; In the Avalonia project, the executable file of the backend service is embedded, and the Avalonia application is packaged as a cross-platform self-contained application using .NET. The backend service program and SPA are placed in the corresponding directory, and the final installation package is made through the installation package creation tools of each platform.

[0048] Furthermore, ASP.NET Core is used to build the backend service, the static file directory stores the SPA files, and the Web API processes the data requests to ensure that the backend service is bound to the local port; Use Visual Studio to create an Avalonia application project and add a WebView control to load the SPA: xmlns:d= HYPERLINK "http: / / schemas.microsoft.com / expression / blend / 2008" http: / / schemas.microsoft.com / expression / blend / 2008 xmlns:mc= HYPERLINK "http: / / schemas.openxmlformats.org / markup-compatibility / 2006" http: / / schemas.openxmlformats.org / markup-compatibility / 2006 xmlns:dialog="clr-namespace:ProjectName.ViewModels.Dialog" mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450" x:DataType="dialog:WebViewContentDialogViewModel" x:Class="ProjectName.Pages.Dialog.ContentDialogWebView" Padding="0" Margin="0"> Url="http: / / localhost:5000" ScrollViewer.VerticalScrollBarVisibility="Hidden" ScrollViewer.HorizontalScrollBarVisibility="Hidden" / > In the MainWindow.xaml.cs file, use System.Diagnostics.Process to start the backend service: public MainWindow() { InitializeComponent(); StartBackendService(); } private void StartBackendService() { if (RuntimeInformation.IsOSPlatform(OSPlatform.Windows)) { StartWindowsBackendService();} else { StartBashBackendService(); } } / / Windows private void StartWindowsBackendService() { var processStartInfo = new ProcessStartInfo { FileName = "backend.exe", / / executable file name of the backend service Arguments = "--urls=http: / / localhost:5000", / / Specify the URL for the service to listen on RedirectStandardOutput = true, RedirectStandardError = true, UseShellExecute = false, CreateNoWindow = true }; var process = new Process { StartInfo = processStartInfo }; process.Start(); } / / Linux and MacOS private void StartBashBackendService() { var processStartInfo = new ProcessStartInfo { FileName = " / bin / bash", / / Specify Bash command path Arguments = " -c ASPNETCORE_URLS=http: / / *:5000 backend", / / Specify the URL and backend service program for service monitoring RedirectStandardOutput = true, RedirectStandardError = true, UseShellExecute = false, CreateNoWindow = true }; var process = new Process { StartInfo = processStartInfo }; process.Start(); process.WaitForExit(1500); process.Kill(); } Make sure backend.exe is in the same directory as the Avalonia project or in a fixed relative directory.

[0049] Next, refer to Figure 2 , self-contained packaging of cross-platform applications and backend service programs. Cross-platform applications start Web backend service programs through Shell instructions. Web backend service programs provide WebApi interfaces and static file services at the same time. SPA front-ends are hosted through static file services. This is a complete combination of usage methods; Cross-platform applications start the Web backend service program through Shell instructions. For different operating systems, the Shell instruction startup method is different and needs to be adapted; Web services provide WebApi interfaces while providing static file services; static file services host SPA front-ends, and at the same time, the problem of SPA front-end cache updates must be solved and support for Vue History mode must be implemented.

[0050] Next, refer to Figure 3 For a description of the computer-readable storage medium of the embodiment of the present invention, please refer to Figure 3, the computer-readable storage medium shown is a CD 30, on which a computer program (i.e., a program product) is stored. When the computer program is executed by the processor, the steps recorded in the above method implementation method are implemented, for example, selecting a cross-platform UI framework, configuring the UI framework to integrate it with the Web backend service, and supporting cross-platform interface display; selecting a backend technology stack and ensuring support for self-contained packaging, writing backend code, and defining a WebApi interface for processing data interaction; writing a Shell instruction adapter for starting the backend service program, adding operating system detection and corresponding command selection to the Shell instruction; configuring interface routing in the Web backend service to enable application logic to interact with the SPA frontend, enabling static file hosting, and deploying the SPA frontend file in the static file directory; using the framework to develop the SPA frontend, configuring the frontend routing, packaging the frontend code, and outputting the static file to the backend static file directory; enabling the cache management policy in the frontend code, configuring the backend service to add HTTP headers, and forcing browser cache control; embedding the backend service and the SPA frontend file into the cross-platform application during packaging to ensure that the application can run independently and provide complete services; the specific implementation methods of each step will not be repeated here.

[0051] It should be noted that examples of the computer-readable storage medium may also include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other optical or magnetic storage media, which are not listed here one by one.

[0052] Next, refer to Figure 4 , Figure 4 A block diagram of an exemplary computing device 40 suitable for implementing embodiments of the present invention is shown, and the computing device 40 may be a computer system or a server. Figure 4 The computing device 40 shown is only an example and should not bring any limitation to the functionality and scope of use of the embodiments of the present invention.

[0053] like Figure 4 As shown, the components of the computing device 40 may include, but are not limited to: one or more processors or processing units 401 , a system memory 402 , and a bus 403 connecting different system components (including the system memory 402 and the processing unit 401 ).

[0054] The computing device 40 typically includes a variety of computer system readable media. These media can be any available media that can be accessed by the computing device 40, including volatile and non-volatile media, removable and non-removable media.

[0055] The system memory 402 may include computer system readable media in the form of volatile memory, such as random access memory (RAM) 4021 and / or cache memory 4022. The computing device 40 may further include other removable / non-removable, volatile / non-volatile computer system storage media. By way of example only, the ROM 4023 may be used to read and write non-removable, non-volatile magnetic media ( Figure 4 is not shown in the Figure 4 As shown in FIG. 4 , a disk drive for reading and writing a removable non-volatile disk (e.g., a “floppy disk”) and an optical disk drive for reading and writing a removable non-volatile optical disk (e.g., a CD-ROM, a DVD-ROM, or other optical media) may be provided. In these cases, each drive may be connected to bus 403 via one or more data medium interfaces. System memory 402 may include at least one program product having a set (e.g., at least one) of program modules that are configured to perform the functions of various embodiments of the present invention.

[0056] A program / utility 4025 having a set (at least one) of program modules 4024 may be stored, for example, in system memory 402, and such program modules 4024 include, but are not limited to, an operating system, one or more application programs, other program modules, and program data, each of which or some combination may include an implementation of a network environment. Program modules 4024 generally perform the functions and / or methods of the embodiments described herein.

[0057] The computing device 40 may also communicate with one or more external devices 404 (e.g., a keyboard, a pointing device, a display, etc.). Such communication may be performed via an input / output (I / O) interface 405. Furthermore, the computing device 40 may also communicate with one or more networks (e.g., a local area network (LAN), a wide area network (WAN), and / or a public network, such as the Internet) via a network adapter 406. Figure 4 As shown, the network adapter 406 communicates with other modules (such as the processing unit 401, etc.) of the computing device 40 via the bus 403. It should be understood that although Figure 4 Not shown, other hardware and / or software modules may be used in conjunction with computing device 40 .

[0058] The processing unit 401 executes various functional applications and data processing by running the programs stored in the system memory 402, for example, selecting a cross-platform UI framework, configuring the UI framework to integrate it with the Web backend service, and supporting cross-platform interface display; selecting a backend technology stack and ensuring support for self-contained packaging, writing backend code, and defining a WebApi interface for processing data interaction; writing a Shell instruction adapter for starting the backend service program, adding operating system detection and corresponding command selection to the Shell instruction; configuring interface routing in the Web backend service to enable application logic to interact with the SPA frontend, enabling static file hosting, and deploying the SPA frontend files in the static file directory; using the framework to develop the SPA frontend, configuring the frontend routing, packaging the frontend code, and outputting the static files to the backend static file directory; Enable the cache management policy in the front-end code, configure the back-end service to add HTTP headers, and force browser cache control; embed the back-end service and SPA front-end files into the cross-platform application during packaging to ensure that the application can run independently and provide complete services. The specific implementation methods of each step will not be repeated here. It should be noted that although several units / modules or sub-units / sub-modules of the synchronous escape wiring device based on multi-commodity flows are mentioned in the above detailed description, this division is merely exemplary and not mandatory. In fact, according to an embodiment of the present invention, the features and functions of two or more units / modules described above may be concretized in one unit / module. Conversely, the features and functions of a unit / module described above may be further divided to be concretized by multiple units / modules.

[0059] In the description of the present invention, it should be noted that the terms “first”, “second” and “third” are only used for descriptive purposes and cannot be understood as indicating or implying relative importance.

[0060] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working processes of the systems, devices and units described above can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

[0061] In the several embodiments provided by the present invention, it should be understood that the disclosed systems, devices and methods can be implemented in other ways. The device embodiments described above are only schematic. For example, the division of the units is only a logical function division. There may be other division methods in actual implementation. For example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some communication interfaces, and the indirect coupling or communication connection of devices or units can be electrical, mechanical or other forms.

[0062] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0063] In addition, each functional unit in each embodiment of the present invention may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit.

[0064] If the functions are implemented in the form of software functional units and sold or used as independent products, they can be stored in a non-volatile computer-readable storage medium that can be executed by a processor. Based on this understanding, the technical solution of the present invention, or the part that contributes to the prior art, or the part of the technical solution, can be embodied in the form of a software product. The computer software product is stored in a storage medium, including several instructions for enabling a computer device (which can be a personal computer, server, or network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present invention. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk, etc., various media that can store program codes.

[0065] Finally, it should be noted that the above-described embodiments are only specific implementations of the present invention, which are used to illustrate the technical solutions of the present invention, rather than to limit them. The protection scope of the present invention is not limited thereto. Although the present invention is described in detail with reference to the above-described embodiments, ordinary technicians in the field should understand that any technician familiar with the technical field can still modify the technical solutions recorded in the above-described embodiments within the technical scope disclosed by the present invention, or can easily think of changes, or make equivalent replacements for some of the technical features therein; and these modifications, changes or replacements do not make the essence of the corresponding technical solutions deviate from the spirit and scope of the technical solutions of the embodiments of the present invention, and should be included in the protection scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the claims.

[0066] In addition, although the operations of the method of the present invention are described in a specific order in the drawings, this does not require or imply that the operations must be performed in this specific order, or that all the operations shown must be performed to achieve the desired results. Additionally or alternatively, some steps may be omitted, multiple steps may be combined into one step, and / or one step may be decomposed into multiple steps.

[0067] It should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention and are not intended to limit the present invention. Although the present invention has been described in detail with reference to the preferred embodiments, those skilled in the art should understand that the technical solutions of the present invention may be modified or replaced by equivalents without departing from the spirit and scope of the technical solutions of the present invention, which should all be included in the scope of the claims of the present invention.

Claims

1. A method for assembling a cross-platform full-stack application, characterized in that: include: Select a cross-platform UI framework, configure the UI framework to integrate it with the Web backend service, and support cross-platform interface display; Select the backend technology stack and ensure that it supports self-contained packaging, write backend code, and define the WebApi interface to handle data interaction; Write a Shell instruction adapter to start the backend service program, and add operating system detection and corresponding command selection to the Shell instruction; Configure interface routing in the Web backend service to enable the application logic to interact with the SPA frontend, enable static file hosting, and deploy the SPA frontend files in the static file directory; Use the framework to develop the SPA front end, configure the front-end routing, package the front-end code, and output the static files to the back-end static file directory; Enable cache management policy in the front-end code and configure the back-end service to add HTTP headers to force browser cache control; When packaging, the backend services and SPA frontend files are embedded into the cross-platform application to ensure that the application can run independently and provide complete services.

2. The method for assembling a cross-platform full-stack application according to claim 1, characterized in that: The above mentioned process involves selecting a cross-platform UI framework, configuring the UI framework, integrating it with the Web backend service, and supporting cross-platform interface display, including: Use Visual Studio to install the Avalonia project template extension and create an Avalonia project; The UI framework can communicate with the backend service and exchange data with the Web backend through HTTP requests. The UI framework needs to be configured to interact with the backend through HTTP to ensure that the UI obtains data from the Web backend through the API interface. The front-end application should display data, update status, and perform user operations through the interface; The backend provides static file services to ensure that the UI framework can access and render the frontend pages.

3. The method for assembling a cross-platform full-stack application according to claim 1, characterized in that: The selection of the backend technology stack and ensuring support for self-contained packaging, writing backend code, and defining the WebApi interface for processing data interaction include: The inventory interface is accessed through the Avalonia application. The Avalonia application and SPA front-end call the back-end API through HTTP requests to obtain inventory data. User operations are sent to the back-end through POST / PUT / DELETE requests. The back-end processes the data and returns the results to the Avalonia application and SPA front-end to update their respective UIs.

4. The method for assembling a cross-platform full-stack application according to claim 1, characterized in that: The Shell instruction adapter program for starting the backend service program is written, and the detection of the operating system and the corresponding command selection are added to the Shell instruction, including: In the Shell script, execute the start command or PowerShell command to start the backend service. The start command runs in a new command line window. Start the program through the start command or PowerShell script. Ensure that the script can provide feedback when problems occur and add error detection: If the operating system detection fails, output an error message and exit the script; If the command to start the service fails, capture the error information and handle it accordingly, output the error information and record it in the log.

5. The method for assembling a cross-platform full-stack application according to claim 1, characterized in that: The interface routing is configured in the Web backend service to enable the application logic to interact with the SPA frontend, enable static file hosting, and deploy the SPA frontend files in the static file directory, including: Provide data to the front-end through GET requests, specify a folder in the back-end service to store all the front-end static resources, and output the files built by the SPA front-end building tool to a specific directory; In the backend service, configure the web framework to provide access to static files, use the frontend framework's build tool to generate the production version of the static resource files, and copy the build files to the backend static file directory; When a user visits a route on the SPA frontend, the service needs to redirect all unmatched requests to the index.html file, and configure a general catch-all route in the backend service to handle all requests and return index.html.

6. The method for assembling a cross-platform full-stack application according to claim 1, characterized in that: The framework is used to develop the SPA front end, configure the front-end routing, package the front-end code, and output the static files to the back-end static file directory, including: If the browser does not support HTML5 History API, use hash mode. After completing the routing configuration, start developing the functions of the front-end application: design different components according to business needs, develop necessary interaction logic, optimize and test to ensure that the application can run normally on various devices and browsers. After development is completed, use the framework's build tool to package the front-end code into static files. After SPA packaging is completed, the static files generated by packaging are output to the static file directory of the backend service: Configure a static file directory in the backend service to store the files packaged by the frontend, and copy the generated files from the frontend build directory to the backend static file directory; In the front-end application, the API interface of the back-end service is called through HTTP requests to obtain the required data. If the front-end and back-end services are deployed under different domain names or ports, configure the CORS policy in the back-end service to allow the front-end to request cross-domain APIs.

7. The method for assembling a cross-platform full-stack application according to claim 1, characterized in that: The cache management strategy is enabled in the front-end code, and the back-end service is configured to add HTTP headers to force browser cache control, including: Use a file name with a hash value. Whenever the file content changes, the file name also changes, and the browser reloads the new file. For resources that do not change frequently, set a long cache time such as 1 month, and use file versioning to avoid cache problems; for dynamic resources or frequently changing content, set a short cache time such as 1 hour, or completely prohibit caching.

8. The method for assembling a cross-platform full-stack application according to claim 1, characterized in that: The packaging embeds the backend service and SPA frontend files into the cross-platform application, including: In the Avalonia application, start the backend service by starting the process, ensure that the backend service is bound to the local port, and in the Avalonia application, use the WebView control to load the SPA; Use the publishing function of .NET to package the backend service into a self-contained executable file, generate corresponding executable files for different operating systems, and ensure that the front-end static files are embedded in the static file directory of the backend service. After packaging, the backend service has the function of processing the front-end SPA file request and providing API interface; In the Avalonia project, the executable file of the backend service is embedded, and the Avalonia application is packaged as a cross-platform self-contained application using .NET. The backend service program and SPA front-end files are placed in the corresponding directory, and the final installation package is made through the installation package creation tools of each platform.

9. A computing device, comprising: at least one processor, memory, and input-output unit; The memory is used to store a computer program, and the processor is used to call the computer program stored in the memory to execute the steps of the method for assembling a cross-platform full-stack application as described in any one of claims 1 to 7.

10. A computer-readable storage medium comprising instructions, which, when executed on a computer, enables the computer to execute the steps of the method for assembling a cross-platform full-stack application as described in any one of claims 1 to 7.

Images