CN113448575A - Automatic webpage front-end page generation system and method - Google Patents

Automatic webpage front-end page generation system and method Download PDF

Info

Publication number
CN113448575A
CN113448575A CN202010230771.5A CN202010230771A CN113448575A CN 113448575 A CN113448575 A CN 113448575A CN 202010230771 A CN202010230771 A CN 202010230771A CN 113448575 A CN113448575 A CN 113448575A
Authority
CN
China
Prior art keywords
design
page
configuration information
function
webpage
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202010230771.5A
Other languages
Chinese (zh)
Inventor
王鑫炎
张光辉
邹朝辉
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Sichuan Yushang Mutual Entertainment Technology Co ltd
Original Assignee
Sichuan Yushang Mutual Entertainment Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Sichuan Yushang Mutual Entertainment Technology Co ltd filed Critical Sichuan Yushang Mutual Entertainment Technology Co ltd
Priority to CN202010230771.5A priority Critical patent/CN113448575A/en
Publication of CN113448575A publication Critical patent/CN113448575A/en
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/958Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Human Computer Interaction (AREA)
  • Data Mining & Analysis (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

The invention discloses an automatic webpage front-end page generation system and method, relating to the technical field of network development, wherein the system comprises: the webpage design unit is used for carrying out webpage design according to the design drawing and generating a product design document; an acquisition unit configured to acquire a product design document, the product design document including: designing N functional pages, wherein N is a natural number greater than 0; the first conversion unit is used for converting the design of the N functional pages according to a preset page design configuration template to obtain page design configuration information; the second conversion unit is used for converting the page design configuration information into page front-end configuration information; and the generating unit is used for generating a webpage according to the front-end configuration information of the webpage. The method has the advantages of high efficiency and high personalization degree.

Description

Automatic webpage front-end page generation system and method
Technical Field
The invention relates to the technical field of remote network development, in particular to an automatic webpage front-end generating system and method.
Background
The front-end development is a process of creating a front-end interface such as a Web page or app and the like and presenting the front-end interface to a user, and user interface interaction of an internet product is realized through HTML, CSS and JavaScript and various derived technologies, frames and solutions. It evolved from web page production and has a very obvious epoch feature in name. In the evolution process of the internet, the webpage making is a product of the Web1.0 era, the main content of the early website is static, pictures and characters are taken as the main content, and the behavior of a user using the website is also taken as the main content of browsing. With the development of internet technology and the application of HTML5 and CSS3, modern web pages are more beautiful, the interaction effect is obvious, and the functions are more powerful.
In a business system, a large number of background management pages exist, and with the development of business, the number of the management pages is increased, and a large amount of development manpower is required to be consumed for development and maintenance. In such business system pages, it is needless to say that the back-end development labor needs to be invested due to different business properties, but the front-end pages have high similarity with the front-end technology, and the labor efficiency is low due to the repeated investments of the front-end development labor.
Meanwhile, the current professional rapid prototyping tool can enable an expert who is responsible for defining design and specification, design function and interface to rapidly create wire frame diagrams, flow charts, prototypes and specification documents of application software or a Web site. The great advantage of the tool is that the visualization working environment can show the prototype of the website in the shortest time without programming. There is a significant distance from the site prototype to the actual user-accessible site, which still requires software engineers to spend months or even longer to complete.
Disclosure of Invention
In view of this, the present invention provides an automated webpage front-end page generation system and method, which have the advantages of high efficiency and high personalization degree.
In order to achieve the purpose, the invention adopts the following technical scheme:
an automated web page front end page generation system, the system comprising: the webpage design unit is used for carrying out webpage design according to the design drawing and generating a product design document; an acquisition unit configured to acquire a product design document, the product design document including: designing N functional pages, wherein N is a natural number greater than 0; the first conversion unit is used for converting the design of the N functional pages according to a preset page design configuration template to obtain page design configuration information; the second conversion unit is used for converting the page design configuration information into page front-end configuration information; and the generating unit is used for generating a webpage according to the front-end configuration information of the webpage.
Further, the web page design unit includes: the design drawing loading subunit is used for loading a design drawing corresponding to the current webpage in a browser plug-in; the design drawing transparency processing subunit performs transparency processing on the design drawing; and the design drawing element attribute setting subunit is used for adjusting the attributes of the elements corresponding to the current webpage according to the attributes of the elements on the design drawing.
Furthermore, the design drawing loading subunit comprises a size obtaining subunit, a calculating subunit and a design drawing positioning subunit, wherein the size obtaining subunit is used for obtaining the size of the design drawing and the size of the browser visual window; the calculating subunit is used for calculating the position coordinates of the design drawing in the visual window of the browser according to the data acquired by the size acquiring subunit; the design drawing positioning subunit is used for positioning the design drawing in the browser visual window according to the position coordinate of the design drawing calculated by the calculating subunit in the browser visual window.
A method of automating a web page front end page generation system, the method performing the steps of:
step 1: according to the design drawing, carrying out webpage design to generate a product design document;
step 2: obtaining a product design document, the product design document comprising: designing N functional pages, wherein N is a natural number greater than 0;
and step 3: converting the design of the N functional pages according to a preset page design configuration template to obtain page design configuration information;
and 4, step 4: converting the page design configuration information into page front-end configuration information;
and 5: and generating a webpage according to the front-end configuration information of the webpage.
Further, the function page includes: presetting a keyword; the converting the design of the N functional pages according to a preset page design configuration template to obtain page design configuration information specifically includes: dividing the product design document according to the preset keywords to obtain the design of the N functional pages; converting the design of the functional page into corresponding page design configuration information according to a preset page design configuration template to obtain N pieces of page design configuration information; the converting the page design configuration information into page front-end configuration information specifically includes: and converting the N pieces of page design configuration information into page front-end configuration information.
Further, the design of the function page includes: a function point; the page design configuration template comprises: a function item; the function item corresponds to the function point; the converting the design of the functional page into corresponding page design configuration information according to a preset page design configuration template specifically includes: and searching related fields of the function points in the design of the function page, and filling the related fields of the function points into function items corresponding to the function points.
Further, the design of the function page further includes: service attributes and attribute definitions corresponding to the service attributes; the converting the design of the functional page into corresponding page design configuration information according to the page design configuration template further comprises: searching the service attribute and the attribute definition corresponding to the service attribute in the design of the function page; after filling the relevant fields of the function points into the function items corresponding to the function points, traversing the page design configuration template after the relevant fields of the function points are filled; and if the service attribute which is the same as the service attribute in the functional page is found in the page design configuration template, supplementing the attribute definition of the same service attribute into the page design configuration template.
By adopting the technical scheme, the invention has the beneficial effects that: the method and the device can directly convert the webpage design into the webpage capable of directly running, and the efficiency of generating the webpage is high. And the configuration of the user-defined webpage can be carried out according to the requirement, the personalization degree is high, and the application range is wide.
Drawings
The invention is described in further detail below with reference to the following figures and detailed description:
fig. 1 is a schematic system structure diagram of an automated web page front end page generation system according to an embodiment of the present invention.
Fig. 2 is a flowchart illustrating a method for generating an automated webpage front-end page according to an embodiment of the present invention.
Detailed Description
The following description of the embodiments of the present invention is provided for illustrative purposes, and other advantages and effects of the present invention will become apparent to those skilled in the art from the present disclosure.
Please refer to fig. 1 and fig. 2. It should be understood that the structures, ratios, sizes, and the like shown in the drawings and described in the specification are only used for matching with the disclosure of the specification, so as to be understood and read by those skilled in the art, and are not used to limit the conditions of the present invention, so that the present invention has no technical significance. In addition, the terms such as "upper", "lower", "left", "right", "middle" and "one" used in the present specification are for clarity of description, and are not intended to limit the scope of the present invention, and changes or modifications in the relative relationship may be made without substantial technical changes and modifications.
Example 1
An automated web page front end page generation system, the system comprising: the webpage design unit is used for carrying out webpage design according to the design drawing and generating a product design document; an acquisition unit configured to acquire a product design document, the product design document including: designing N functional pages, wherein N is a natural number greater than 0; the first conversion unit is used for converting the design of the N functional pages according to a preset page design configuration template to obtain page design configuration information; the second conversion unit is used for converting the page design configuration information into page front-end configuration information; and the generating unit is used for generating a webpage according to the front-end configuration information of the webpage.
Specifically, the webpage design aims at page beautification design, and the page design is adjusted and beautified by using more reasonable colors, fonts, pictures and styles by using PS (personal information system), AI (Artificial Intelligence) and other software. The webpage design is used as a visual language, particularly for arrangement and layout, and the format design expresses harmony and beauty through the space combination of characters and graphs. The layout design of pages of a multi-page site requires that organic connection among the pages is reflected, and particularly, the relationship between the order and the content among the pages and in the pages is well processed. In order to achieve the best visual performance effect, the reasonability of the overall layout is repeatedly knocked, so that a viewer has smooth visual experience.
Example 2
Further, the web page design unit includes: the design drawing loading subunit is used for loading a design drawing corresponding to the current webpage in a browser plug-in; the design drawing transparency processing subunit performs transparency processing on the design drawing; and the design drawing element attribute setting subunit is used for adjusting the attributes of the elements corresponding to the current webpage according to the attributes of the elements on the design drawing.
Example 3
Furthermore, the design drawing loading subunit comprises a size obtaining subunit, a calculating subunit and a design drawing positioning subunit, wherein the size obtaining subunit is used for obtaining the size of the design drawing and the size of the browser visual window; the calculating subunit is used for calculating the position coordinates of the design drawing in the visual window of the browser according to the data acquired by the size acquiring subunit; the design drawing positioning subunit is used for positioning the design drawing in the browser visual window according to the position coordinate of the design drawing calculated by the calculating subunit in the browser visual window.
Specifically, currently, when a web page developer develops a web page interface, a design drawing needs to be displayed on one screen, and a browser (or code) needs to be displayed on the other screen to implement the design of the designer. The web page developer positions elements in the web page on the other screen according to the marks of the designer displayed on one screen, so that the designed web page can not necessarily accurately restore the design drawing, and the designed web page can only refer to the design drawing on one screen and compare the design drawing with the browser on the other screen. The existing mode can only be used for separately comparing two screens, the design effect is not visual, the efficiency of the mode is extremely low, and a great deal of time is spent on development and designers.
Example 4
A method of automating a web page front end page generation system, the method performing the steps of:
step 1: according to the design drawing, carrying out webpage design to generate a product design document;
step 2: obtaining a product design document, the product design document comprising: designing N functional pages, wherein N is a natural number greater than 0;
and step 3: converting the design of the N functional pages according to a preset page design configuration template to obtain page design configuration information;
and 4, step 4: converting the page design configuration information into page front-end configuration information;
and 5: and generating a webpage according to the front-end configuration information of the webpage.
Specifically, website construction refers to the transmission of information in electronic format through the internet through a series of processes of design, modeling, and execution using a markup language, and the information is finally browsed by a user in the form of a graphical user interface. Briefly, the goal of web page design is to generate a web site. Simple information such as words, pictures and tables can be placed on web pages by using markup languages such as hypertext markup language, extensible hypertext markup language, etc. Multimedia files of more complex information such as vector graphics, animation, video, audio, etc. require plug-ins to run, as well as markup language porting within the web site.
Example 5
Further, the function page includes: presetting a keyword; the converting the design of the N functional pages according to a preset page design configuration template to obtain page design configuration information specifically includes: dividing the product design document according to the preset keywords to obtain the design of the N functional pages; converting the design of the functional page into corresponding page design configuration information according to a preset page design configuration template to obtain N pieces of page design configuration information; the converting the page design configuration information into page front-end configuration information specifically includes: and converting the N pieces of page design configuration information into page front-end configuration information.
Example 6
Further, the design of the function page includes: a function point; the page design configuration template comprises: a function item; the function item corresponds to the function point; the converting the design of the functional page into corresponding page design configuration information according to a preset page design configuration template specifically includes: and searching related fields of the function points in the design of the function page, and filling the related fields of the function points into function items corresponding to the function points.
In particular, web site construction is a broad term covering production and maintenance web sites used in many different skills and disciplines. Web page design, web page graphic design, interface design, creation in different fields, including standardized code and proprietary software, user experience design and search engine optimization. Many people often divide a number of work groups that are responsible for designing different aspects of a web site. The web page design is the front end (client) of the design process, and the website is usually used for describing and is not a simple page, and the website comprises a plurality of tasks, including domain name registration design effect drawing, layout page, code writing and the like.
Example 7
Further, the design of the function page further includes: service attributes and attribute definitions corresponding to the service attributes; the converting the design of the functional page into corresponding page design configuration information according to the page design configuration template further comprises: searching the service attribute and the attribute definition corresponding to the service attribute in the design of the function page; after filling the relevant fields of the function points into the function items corresponding to the function points, traversing the page design configuration template after the relevant fields of the function points are filled; and if the service attribute which is the same as the service attribute in the functional page is found in the page design configuration template, supplementing the attribute definition of the same service attribute into the page design configuration template.
It should be noted that, the system provided in the foregoing embodiment is only illustrated by dividing the functional units, and in practical applications, the functions may be distributed by different functional units according to needs, that is, the units or steps in the embodiments of the present invention are further decomposed or combined, for example, the units in the foregoing embodiment may be combined into one unit, or may be further decomposed into multiple sub-units, so as to complete all or part of the functions described above. The names of the units and steps involved in the embodiments of the present invention are only for distinguishing the units or steps, and are not to be construed as unduly limiting the present invention.
It can be clearly understood by those skilled in the art that, for convenience and brevity of description, the specific working processes and related descriptions of the storage unit and the processing unit described above may refer to the corresponding processes in the foregoing method embodiments, and are not described herein again.
Those of skill in the art would appreciate that the various illustrative elements, method steps, and steps described in connection with the embodiments disclosed herein may be implemented as electronic hardware, computer software, or combinations of both, and that the software elements, method steps, and corresponding programs may be located in Random Access Memory (RAM), memory, Read Only Memory (ROM), electrically programmable ROM, electrically erasable programmable ROM, registers, hard disk, a removable disk, a CD-ROM, or any other form of storage medium known in the art. To clearly illustrate this interchangeability of electronic hardware and software, various illustrative components and steps have been described above generally in terms of their functionality. Whether such functionality is implemented as electronic hardware or software depends upon the particular application and design constraints imposed on the solution. Skilled artisans may implement the described functionality in varying ways for each particular application, but such implementation decisions should not be interpreted as causing a departure from the scope of the present invention.
The terms "first," "second," and the like are used for distinguishing between similar elements and not necessarily for describing or implying a particular order or sequence.
The terms "comprises," "comprising," or any other similar term are intended to cover a non-exclusive inclusion, such that a process, method, article, or unit that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or unit.
So far, the technical solutions of the present invention have been described in connection with the preferred embodiments shown in the drawings, but it is easily understood by those skilled in the art that the scope of the present invention is obviously not limited to these specific embodiments. Equivalent changes or substitutions of related technical features can be made by those skilled in the art without departing from the principle of the invention, and the technical scheme after the changes or substitutions can fall into the protection scope of the invention.
The above description is only a preferred embodiment of the present invention, and is not intended to limit the scope of the present invention.
The foregoing embodiments are merely illustrative of the principles and utilities of the present invention and are not intended to limit the invention. Any person skilled in the art can modify or change the above-mentioned embodiments without departing from the spirit and scope of the present invention. Accordingly, it is intended that all equivalent modifications or changes which can be made by those skilled in the art without departing from the spirit and technical spirit of the present invention be covered by the claims of the present invention.

Claims (7)

1. An automated web page front end page generation system, the system comprising: the webpage design unit is used for carrying out webpage design according to the design drawing and generating a product design document; an acquisition unit configured to acquire a product design document, the product design document including: designing N functional pages, wherein N is a natural number greater than 0; the first conversion unit is used for converting the design of the N functional pages according to a preset page design configuration template to obtain page design configuration information; the second conversion unit is used for converting the page design configuration information into page front-end configuration information; and the generating unit is used for generating a webpage according to the front-end configuration information of the webpage.
2. The system of claim 1, wherein the web page design unit comprises: the design drawing loading subunit is used for loading a design drawing corresponding to the current webpage in a browser plug-in; the design drawing transparency processing subunit performs transparency processing on the design drawing; and the design drawing element attribute setting subunit is used for adjusting the attributes of the elements corresponding to the current webpage according to the attributes of the elements on the design drawing.
3. The system of claim 2, wherein the design drawing loading subunit includes a size obtaining subunit, a calculating subunit, and a design drawing positioning subunit, the size obtaining subunit being configured to obtain a size of the design drawing and a size of the browser visual window; the calculating subunit is used for calculating the position coordinates of the design drawing in the visual window of the browser according to the data acquired by the size acquiring subunit; the design drawing positioning subunit is used for positioning the design drawing in the browser visual window according to the position coordinate of the design drawing calculated by the calculating subunit in the browser visual window.
4. A method for an automated web page front end page generation system based on one of claims 1 to 3, characterized in that the method performs the following steps:
step 1: according to the design drawing, carrying out webpage design to generate a product design document;
step 2: obtaining a product design document, the product design document comprising: designing N functional pages, wherein N is a natural number greater than 0;
and step 3: converting the design of the N functional pages according to a preset page design configuration template to obtain page design configuration information;
and 4, step 4: converting the page design configuration information into page front-end configuration information;
and 5: and generating a webpage according to the front-end configuration information of the webpage.
5. The method of claim 4, wherein the function page comprises: presetting a keyword; the converting the design of the N functional pages according to a preset page design configuration template to obtain page design configuration information specifically includes: dividing the product design document according to the preset keywords to obtain the design of the N functional pages; converting the design of the functional page into corresponding page design configuration information according to a preset page design configuration template to obtain N pieces of page design configuration information; the converting the page design configuration information into page front-end configuration information specifically includes: and converting the N pieces of page design configuration information into page front-end configuration information.
6. The method of claim 5, wherein the design of the function page comprises: a function point; the page design configuration template comprises: a function item; the function item corresponds to the function point; the converting the design of the functional page into corresponding page design configuration information according to a preset page design configuration template specifically includes: and searching related fields of the function points in the design of the function page, and filling the related fields of the function points into function items corresponding to the function points.
7. The method of claim 6, wherein the designing of the function page further comprises: service attributes and attribute definitions corresponding to the service attributes; the converting the design of the functional page into corresponding page design configuration information according to the page design configuration template further comprises: searching the service attribute and the attribute definition corresponding to the service attribute in the design of the function page; after filling the relevant fields of the function points into the function items corresponding to the function points, traversing the page design configuration template after the relevant fields of the function points are filled; and if the service attribute which is the same as the service attribute in the functional page is found in the page design configuration template, supplementing the attribute definition of the same service attribute into the page design configuration template.
CN202010230771.5A 2020-03-27 2020-03-27 Automatic webpage front-end page generation system and method Pending CN113448575A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010230771.5A CN113448575A (en) 2020-03-27 2020-03-27 Automatic webpage front-end page generation system and method

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010230771.5A CN113448575A (en) 2020-03-27 2020-03-27 Automatic webpage front-end page generation system and method

Publications (1)

Publication Number Publication Date
CN113448575A true CN113448575A (en) 2021-09-28

Family

ID=77807924

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010230771.5A Pending CN113448575A (en) 2020-03-27 2020-03-27 Automatic webpage front-end page generation system and method

Country Status (1)

Country Link
CN (1) CN113448575A (en)

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106528887A (en) * 2016-12-19 2017-03-22 广州视源电子科技股份有限公司 Webpage design method and system
CN109582909A (en) * 2018-12-19 2019-04-05 拉扎斯网络科技(上海)有限公司 Webpage automatic generation method and device, electronic equipment and storage medium

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106528887A (en) * 2016-12-19 2017-03-22 广州视源电子科技股份有限公司 Webpage design method and system
CN109582909A (en) * 2018-12-19 2019-04-05 拉扎斯网络科技(上海)有限公司 Webpage automatic generation method and device, electronic equipment and storage medium

Similar Documents

Publication Publication Date Title
AU2022206714B2 (en) System and method for implementing containers which extract and apply semantic page knowledge
US9142192B2 (en) Simulation of web applications and secondary devices in a web browser, web application development tools, and methods using the same
TWI476677B (en) Method and system for developing web applications
US7272789B2 (en) Method of formatting documents
CN111475163A (en) Method, device and equipment for generating code file of view template and storage medium
CN102646038B (en) Control content display method, control content display device and mobile terminal
CN105528418B (en) A kind of design documentation generation method and device
Lamigueiro Displaying time series, spatial, and space-time data with R
US10049095B2 (en) In-context editing of output presentations via automatic pattern detection
Yim et al. Matplotlib for Python Developers: Effective techniques for data visualization with Python
CN109213480B (en) Method, storage medium, equipment and system for developing background management page
CN106155754A (en) A kind of processing method and processing device of indicating template
CN113448575A (en) Automatic webpage front-end page generation system and method
KR102649627B1 (en) An automatic image placement and execution method using the DTP program, an adobe indesign
Neumann et al. Webmapping with Scalable Vector Graphics (SVG): Delivering the promise of high quality and interactive web maps
Boulos et al. Web GIS in practice II: interactive SVG maps of diagnoses of sexually transmitted diseases by Primary Care Trust in London, 1997–2003
CN112330772A (en) Radar map generation method, device, equipment and storage medium
ESCAP Producing land cover change maps and statistics: step by step guide on the use of QGIS and RStudio
US20220207092A1 (en) Computer service for indexing threaded comments with pagination support
Król Map charts: visualisation of statistical data on a background map–case study
Schwarz et al. Describing Data
CN115080887A (en) Cross-platform display method, device, equipment and medium for webpage data
CN117708448A (en) Configuration graphic plug-in configuration and display implementation method based on WEB rendering engine
Yin et al. Concept and signification of geo-cartography data
Chen et al. Web-Based Statistical Graphics using XML Technologies

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination