digression
I took a few months off for personal reasons, thought about my future, and did some things I didn’t have time to do before. Finally, I found that coding was right for me. So again began to brush up the topic, consolidated the previous weak place, knocked up the code, toward a new period of the program ape career march!
Project introduction
This project is mainly used as a portal for an exhibition organization, including content display, login verification, authorization display, user communication and other processes.
In this project, I was mainly responsible for the implementation of an overall display framework, such as the display of the rotation chart, the layout and optimization of the home page, and the most important thing is to make the home page of the whole website and pure display pages into a configurable system. It was also a challenge for me, so I jumped at the task.
Project background
The previous website of Party A had outdated overall display style, had many inconvenience in maintenance, and could not meet their business needs in functions. Therefore, Party A found the former company, hoping to build a portal website with modern style, easy maintenance, and new functions.
Since it was the first time for me and leader to build a configurable portal (leader was a pure back end), we explored and practiced from beginning to end.
Practice process
1. Technical selection
Since all of the company’s front-end projects were developed using Vue as the basic framework, this project was no exception and was developed using Vue’s family bucket.
Component library aspect after comparing several, finally selected Element UI as the base component library. Other Web component libraries of the same size, such as Ant Design Vue or ViewUI, are either not fully ported, or updated slowly or more slowly, or stylized to meet business requirements.
2. Implementation idea
After the selection, is to sort out the implementation ideas.
Because of the need to implement a pure display page configuration, so we consulted some solutions to the implementation of the CMS system, each needs to display module as a node, keep the necessary information for each node and its parent and child node, to form a tree structure, based on tree structure data parsing, With custom encapsulated Vue components for page rendering.
Below is the general structure of the node table (class diagram will be used, please do not make fun of his four different = =)
classDiagram
Node <|-- Node
Node <|-- SubNode
class Node{
+Number id
+String lang
+Number pid
+Number sort
+Array<Node> subs
+...
}
class SubNode{
+String type
+...
}
Data in the query, with Lang as the query condition, query the corresponding language nodes, forming a tree, and then according to the sequence of nodes in order to parse the content, and combined with custom encapsulated Vue components, display different content.
At the same time, the order of nodes is also the order of the navigation bar, dynamic rendering of the navigation bar, making it very convenient to add and delete pages.
For different types of leaf nodes, we also set up corresponding schemes of various types. Each type has different processing modes. For example, LINK node will jump. The ARTICLE node inserts content directly into the page as V-HTML for different customizations.
In this way, when we need to change the displayed content or picture, we only need to change the corresponding data, greatly improving the efficiency of maintenance and reducing the work required when the service changes.
3. The difficulty
In practice, the biggest headache is the encapsulation of custom components. Because the home page is made up of several modules with different functions, rather than being displayed by inserting HTML code directly into the content page, the Element UI component library was modified to suit the needs of the business.
4. The optimization
After the initial effect was achieved, the loading speed of the first screen was far from ideal, because many pictures were loaded on the first screen according to the requirements of Party A. To solve this problem, I took several measures in the subsequent development to improve user experience:
- Lazy loading is used to reduce the load of resources on the first screen, thus reducing the user wait time.
- Skeleton screen is used to avoid users’ feeling of network congestion.
- Use picture server, reduce the use of user network resources, reduce the server pressure when the page request.
- Optimize custom components to improve rendering efficiency.
- Using the Local Storage to cache data reduces the number of resource requests and the blank screen time.
conclusion
At the beginning, the leader said that the home page could not be configured first, and then deal with the home page after putting up the overall framework. However, I had a second thought, anyway, it was all to be done, so we could deal with it together. After spending a weekend and a week fighting until 11 o ‘clock, I finally made the first version.
Subsequent tasks also proved that my decision was not wrong, since there were many issues related to the homepage in the subsequent development, if I had made a hard-coded homepage first, I would have to write a new implementation again in the subsequent changes, which was not worth the loss.
When doing this project, and the product communication a lot, for some unreasonable design puts forward his own opinions, feedback to party a after also to party a’s consent, I thought this should be the front end to do, and leader, product when they chat later just know, the team I was the only positive feedback, In the details part, I put forward my own ideas. The leader also said that I brought him some surprises in other places besides programming, and he was a little embarrassed.
When I resigned, the project basically met the requirements of Party A, but there were still many shortcomings from the technical details and the original advanced idea, such as realizing the whole website without code editing content, realizing the website with multi-language support functions, etc.
This is the summary of the project, because the code is not easy to post, so it may be a bit boring, but I still hope to give you some inspiration and flash. Thanks for reading!
This article is participating in the “Nuggets 2021 Spring Recruitment Campaign”, click to see the details of the campaign