Front End Design Manual

First, clear the front-end needs to implement the functional module ( embodies the principle of modularity )

1. Page Overall Framework
2. User Login Module
3. Article editing module
4. Event Display Module
5. Registration module
6. Community Backstage Management Module

The data interaction between the front end and the back end is in each module.

Two, each function module realization Way

1. Overall page frame

A) First the UI to draw the overall layout of the page and the framework.

b) Learn html,css and semantic-ui knowledge, and according to the knowledge of the UI draw the page to achieve, as far as possible to achieve beautiful and practical.

c) The first edition of the page to modify and adjust, according to your feedback will make the page more perfect.

Possible difficulties: the adaptability of different sizes of pages and the adaptability of different browsers, the handling of display error conditions, reflects the principle of handling errors .

Follow the principle: Static page implementation should be separated from the functional implementation, the design of the page can be filled into different functional modules, different functional modules can also be adapted to different pages, reflecting the principle of coupling and interface and implementation of the principle of separation .

2. User Login Module

A) Clear user Login module needs to implement the function, user login, user log out, user registration, Community login function, community registration due to the limited number of societies, so the background manually add can.

b) User login and Community login according to the different UID, enter the user name and password to return the user identity information.

c) The logout function is to clear the information temporarily stored in the browser and return to the initial page.

Possible difficulties: During the login process to protect the user information, the process of password transmission needs to have a certain encryption method, choose a secure transport protocol, these methods embody the information hiding and encapsulation principles .

3. Article editing module (need to have community status)

A) editing modules require the first release of articles and the re-editing of post-release articles.

b) Use the Open source Ueditor Rich Text editor to implement editing functions when publishing articles.

c) To obtain the user's written content of plain text, formatted content and a variety of information required.

D) The first-time feature only needs to deal with what the user first enters, and the re-editing function requires that the HTML code of the previously formatted content be filled into the editor first, and the subsequent editing process is the same as publishing.

Possible difficulties: the editor of various functions of the call, a variety of information transmission, to ensure that the article in the transmission process of correctness and integrity.

4. Activity Display Module

A) The information displayed, the name of the activity, the summary, and the time of the event.

b) Get the information that needs to be displayed by sending a request to the back end.

c) The information obtained is displayed on the page.

Possible difficulties: The display of information updates, need to be timely, display the correctness of information typesetting.

5. Registration Module

A) A user registration module is required on the event display page.

b) When the user clicks on the registration, the information filled in by the user will be passed to the backend.

Possible difficulties: users click to register to determine the user's login status and login identity information, not logged in users and the community can not enroll.

6. Community Backstage Management Module

A) There are two functions of activity management function, Activity list management function.

b) The activity management function first need to show the activities of the society, the same as the Activity Display module, management needs to have the function of adding and modifying, the function of adding and changing is realized by the article editing module, and the function of the deletion needs to interact with the data in the background.

c) The Activity list management function is also the first to display the information of the registered users, the list of the increase and deletion check action.

Possible difficulties: This part requires a large number of data interaction with the back end, in order to ensure the correctness of data transmission as far as possible to improve the speed of transmission, when the implementation of bulk deletion action, in a short period of time there is a large number of data interaction, this is to ensure that the entire process can be done correctly and efficiently, reflecting The principle of the ability to deal with large amounts of data .

Iii. Summary

In addition to the above modules, there is a small amount of detail, which is no longer described here, in the implementation of the process to improvise.

Because the function is modular, so the code in the process of writing different parts of the function is also separated, not only embodies the principle of modularity , modularity is also easy to modify and adjust the program, when the demand changes can be quickly added or modified functions, reflects the Software to respond to the principle of change flexibility .

Front End Design Manual