Website Operation Mechanism and Web Application Development

12002

1. Course Introduction

In this lesson, you will learn about the concept of web applications, understand their working process, and recognize their structure. You will also learn what the Jianghu JS framework is, and through practical project cases, gain a specific understanding of how the front end, back end, and communication protocol of the Jianghu JS framework work together, thereby better understanding the concept and actual operation of web applications.

2. What is a Web Application?

A web application is a program that runs on the internet. They typically operate on a server and use a browser as the user interface. Common types include chat software, news websites, online stores, office management tools, and gaming platforms.

Users interact with web applications by opening URLs, browsing, filling out information, and submitting data, then waiting for the server to return the corresponding information.

Web applications are generally divided into front end and back end. The front end is responsible for displaying the user interface and receiving user actions, sending requests to the back end; while the back end processes the relevant information based on the requests sent by the front end, operates on the data, and returns the results to the front end for display.

3. Working Process of Web Applications

Steps involved in the working process:

(1) User Sends Request: The user enters a URL in the browser, browses, fills out information, submits forms, etc., sending requests to the server.

(2) Front End Processing: The front end receives the user request, generates the corresponding data or page content based on the request, and sends the request to the back end, which processes the request and returns data.

(3) Back End Processing: The back end receives the requests sent by the front end, processes these requests, which may include accessing databases, performing calculations, validating user identities, etc.

(4) Return Data: The back end generates response data and returns it to the front end.

(5) Page Update: The front end updates the page content based on the data returned from the back end, allowing the user to see the latest information.

This process is a cycle where users interact with the web application, and the front end and back end collaborate to process requests and return data, thus realizing the functionality of the web application, with both working together to complete the entire application.

Example to Illustrate the Working Process:

In the jianghujs-basic project installed in Lesson 001, when opening the doUiAction page, we added a student's data, and the working process is as follows:

(1) Open the student management page in the browser, click the add button, open the add drawer, fill out the form information, and when clicking the save button, a request is initiated to the server.

(2) The front end receives the request to add a student, generates the corresponding data or page content, and sends the data to the back end for processing.

(3) The back end receives this request data, processes it, and performs an insert operation on the database based on the new request, adding this new data.

(4) If the database operation is successfully completed, the server will send a response to the front end, informing the result of the operation.

(5) The front end receives the response from the back end, updates the page, allowing the user to see the latest operation results.

In this example, you can see the entire working process of the student management page operation for adding student information, which is the working process between the front end and back end.

4. Main Structure of Web Applications

From the above example, we understand that web applications include the front end and back end, and data communication between the front end and back end is conducted through a set of communication protocols. Therefore, the structure of a web application typically consists of the front end, back end, and communication protocol, each fulfilling different roles and functions, collectively building a complete web application system.

Concept of Front End: The front end refers to the part visible to the user's browser. The front end is typically built using technologies such as HTML, CSS, and JavaScript, responsible for displaying data, receiving user input, initiating requests to the back end, and presenting results to the user.

Concept of Back End: The back end is responsible for processing requests sent by the front end, handling relevant information or operating on the database based on the requests, and returning results to the front end. The back end typically includes two parts: control logic and database. The control logic is responsible for processing requests, validating user identities, executing business logic, etc., while the database part is responsible for data storage and management.

Concept of Communication Protocol: A communication protocol refers to the rules and agreements followed during data communication between the front end and back end.

5. Front End, Back End, and Communication Protocol of Jianghu JS Framework

The Jianghu JS framework is an enterprise-level JavaScript application framework based on Node.js and Egg.js. Simply put, it is a software toolkit designed to help developers build web applications suitable for enterprise use.

This framework simplifies the cumbersome configuration work of the back end through a database configuration, and its Jianghu jianghu-init tool can quickly create projects, providing various out-of-the-box Jianghu application templates to help developers build enterprise-level web applications that meet complex business requirements, are flexible to customize, and have user and permission management features.

The structure of the Jianghu JS framework is divided into front end, back end, and communication protocol. We will use the jianghujs-basic project as an example:

Front End of Jianghu JS

The front end of Jianghu JS is the part visible in the browser. When the project is started and the URL http://127.0.0.1:7001 is opened in the browser, the page displayed belongs to the front end. For example, the doUiAction page corresponds to the file jianghujs-basic\app\view\page\doUiAction.html in the Jianghu JS framework.

Back End of Jianghu JS

The back end of Jianghu JS is responsible for processing the received information and data. The back end also includes the database jianghujs-basic, which is used to store student information. The back end provides data interfaces to the front end, acting as a communication bridge, communicating with the front end to process information and operate on the database. When the front end's request is completed, it accesses the student table in the database and operates on the data based on the request.

Communication Protocol of Jianghu JS Framework

The content of the communication protocol is usually written in a specific format, containing specific fields. For example, look at the content in the red box in the image below; you can see that the code is written according to the specified format, and the specific meanings of the fields will be explained in detail in Lesson 5.

Working Process of Web Applications Generated by Jianghu JS Framework

The student management page generated by the Jianghu JS framework allows operations such as entering, querying, modifying, and deleting student information through the browser, initiating requests to the front end of Jianghu JS. The front end of Jianghu JS is responsible for sending these requests to the back end according to the format of the communication protocol.

The Jianghu JS back end processes the requests from the front end, operates on the database, and returns the data to the front end according to the communication format. Together, they complete a complete student information management function, which is the working process of the web application generated by the Jianghu JS framework.