Building Step by Step (3): Modifying Page Templates and Functions
120021. Course Introduction
In this course, you will learn about the structure of the front-end page code of the Jianghu JS framework and understand that it consists of templates and scripts. The template part is made up of the framework's own templates and templates related to its business. The script part mainly consists of variables and functions, and it introduces how to use the doUiAction function for construction plans.
Finally, by hands-on modifying the page and observing the changes, you will deepen your understanding of the knowledge learned above.
2. Understanding the Code Structure of the Front-End Page in Jianghu JS Framework
In the Jianghu JS framework, the code for the front-end page is organized and written from top to bottom, which means that the structure, styles, and scripts of the page are presented in the code file in a top-down order.
Open doUiAction.html in VSCode, and you will see a small downward arrow next to the line numbers. Clicking it will hide the details of the code, allowing us to see the framework of this page's code.
The red box above represents the template part, while the red box below represents the script part.
3. Analyzing the Jianghu JS Framework Front-End Page: Template
The template determines the appearance of the page. When the browser opens the doUiAction.html page, it displays a menu and a main content area.
From the above image, we can see that the navigation bar, login, and background are present on every page, while the main content is a unique data table. This indicates that the Jianghu JS framework front-end page has its own templates and templates related to its business functions.
Jianghu JS Framework's Own Template
The Jianghu JS framework provides a basic template that includes some common layouts, styles, and components to standardize the appearance and style of the entire application. This helps ensure consistency and professionalism in the application, reduces repetitive work, and improves development efficiency.
In the code, {% extends 'template/jhTemplateV4.html' %} means inheriting from the jhTemplateV4.html template.
{% %} is the syntax for Nunjucks template, which introduces the template/jhTemplateV4.html file as the base template and then modifies it. For more detailed information about Nunjucks template syntax, please refer to point 6 for further reading.
Templates Related to Jianghu JS's Own Business Functions
The main content of the page is a data table with CRUD (Create, Read, Update, Delete) functionalities. The corresponding code is enclosed within {% block vueTemplate %}{% endblock %}, which contains the code related to its business, including data tables, buttons, drawers, and other VuetifyJS components.
{% block %}{% endblock %} is the syntax for Nunjucks template, which introduces the template/jhTemplateV4.html file as the base template and then writes its own business-related templates on top. For more detailed information about Nunjucks template syntax, please refer to point 6 for further reading.
4. Analyzing the Jianghu JS Framework Front-End Page: Script Code
The script code for the Jianghu JS framework front-end page is placed within {% block vueScript %}{% endblock %}, which is used to implement the dynamic effects of the page.
Main Content of the Script: Variables and Functions
An important part of the script code in the Jianghu JS framework front-end page is the variables and functions. The CRUD operations in the template are accomplished by variables and functions.
The data: {} part represents variables, while functions are placed inside methods: {}, such as async getTableData(){} and async doCreateItem(){}. These functions are called asynchronous functions, which allow the program to continue executing other tasks while waiting for the completion of this function's operations, thereby improving the program's performance and responsiveness.
A project involves many functions, and how to classify and organize these functions so that one can clearly understand what task a function is meant to accomplish is what the "construction plan" aims to achieve.
Construction Plan
Simply put, a construction plan describes what needs to be done, how to do it, and what goals to achieve. Writing code according to the construction plan helps ensure efficient development and good code quality for the project.
Writing Construction Plans in Jianghu JS Framework
In the Jianghu JS framework, the doUiAction function is used to create construction plans, applying the principles of the construction plan to programming, which is a characteristic of the Jianghu JS framework.
In the example below, the CRUD operations in the page are organized within the same doUiAction function, making it clear what all operations on this page are when looking at this function.
The doUiAction function is based on "unified transfer chain operations," allowing different functions to be grouped together in a reusable manner, executed in a chain through doUiAction("uiActionId", uiActionParamObj), making it easy to maintain and modify.
All CRUD operations in the front-end page files call the doUiAction function.
For example, when uiActionId is startCreateItem, it will sequentially execute the prepareCreateFormData function and the openCreateDrawer function, achieving a chain execution effect.
5. Project: Modify the Front-End Page of the Student Management System
(1) Modify the text or variable names in the doUiAction.html file and observe the changes in the page using the browser.
(2) Add a button in the doUiAction.html file and observe the changes in the page using the browser.