Series Article Directory
Chapter 1 of a series of articles:
Introduction and actual combat of vue3+electron development of desktop software (0) - creating electron applications
Article directory
foreword
The previous article introduced the routing implementation based on the router plug-in and view ui.
Based on the above, this article uses the parameters configured in router.js to realize quick navigation on the homepage. Through the transformation of router, we can further understand the usage of routing.
1. Scene
In the system, in addition to the routing list on the left, we may also need to implement quick navigation on the home page, which can render our commonly used page routes on the home page, so that users can quickly open the required pages.
Based on the realization of front-end shortcut navigation, combined with cache or database, user behavior detection can be realized, and different shortcut navigation can be provided for different users, thereby improving user experience.
2. Design ideas
1. Where does the quick navigation come from?
No matter what style of shortcut navigation is made, in essence, it is just a routing link like the sidebar, which is equivalent to a subset of the full routing. Therefore, the data for shortcut navigation should come from the routing file.
2. Optimization of routing files
Since the shortcut navigation comes from the routing file, the first thing we need to do is to distinguish which one can be used as a shortcut navigation and which one is not processed on each routing node of the routing file.
So we add an attribute parameter: isHomeList. Take an object in the routing file as an example:
{
path: '/gitTool',
name: 'gitTool',
component: Layout,
meta: {
// hideInMenu: true
},
children: [
{
path: '/gitTool_page',
name: 'gitTool_page',
meta: {
title: "git工具",
icon:'md-hammer',
// iconFont:'#icon-weixin', //如果是阿里图标，使用这个参数
isHomeList:true //不要用is开头命名
},
component: () => import('@/views/GitTool/GitTool.vue')
}
]
},
按照规范，布尔类型参数是不能以is开头，这主要是为了照顾后端某些自动序列化，有些规范可以任性，但是这个规范如果不注意，在和后端合作写路由管理的时候，会出现bug或者增加工作量。我这里写个反例，以作提醒。
同时我也建议，想把前端做好，对后端的技术要求是，起码能用后端框架写业务代码，达到后端码农的水平。专精前端，熟悉后端，才能做一个能无碍沟通，解决问题的T型人才。
3. Rendering of home page shortcut navigation
The home page gets the routing data, and then filters it according to the isHomeList attribute.
const homeList=ref([])
function getHomeList(list){
return list.filter((v,i)=>{
if(v.meta.isHomeList){
return v
}
})
}
onMounted(()=>{
homeList.value=getHomeList(router.getRoutes())
})
- router.getRoutes(): get routing data
- getHomeList: filter out the data whose isHomeList is true from the routing data
4. Cooperate with the backend to realize routing management
A general management system will include a routing management module, so routing data will not be directly defined on the front end. Instead, through: management module maintenance data --> backend save data --> home page to obtain routing data.
5. Render shortcut navigation
Front-end rendering logic:
<Row>
<Col v-for="item in homeList">
<Card style="width:120px;margin: 8px" @click="turntoPage(item.name)">
<div style="text-align:center">
<svg v-if="item.meta.iconFont" class="icon" aria-hidden="true">
<use v-bind:xlink:href="item.meta.iconFont"></use>
</svg>
<Icon v-else :type="item.meta.icon" />
<h3>{
{
item.meta.title }}</h3>
</div>
</Card>
</Col>
</Row>
After getting the above homeList data, just render the required attributes on the page.
The final effect is as follows:
This simply implements shortcut navigation controlled by routing attributes. In the future, whether you want to optimize the homepage navigation according to the user's operating habits, or cooperate with the backend to use routing management to set the homepage navigation, you can achieve it by operating the isHomeList property.
Summarize
If you understand the implementation of the router-based navigation bar in the previous article, then this article can only be regarded as a small demo, which aims to open up ideas - as long as the design is reasonable, the object properties in router.js can be manipulated as you like.
In fact, whether it is the rendering of the navigation bar or the rendering of the shortcut navigation on the home page, there is a very important idea in the front end-the decoupling of rendering logic and business logic.
The rendering logic is how to render the data into a page after I get the data. Business logic is generating data. Why is a small attribute of siHomeList able to support various expansions in the future?
It is because the rendering of my entire page is implemented based on isHomeList, which ensures that my page input is unique and fixed. No matter what business you want to do in the future, as long as you maintain isHomeList reasonably through your own business logic, you can support your business.
See the big from the small, the entire router.js is the embodiment of this idea. All my operations related to routing, whether you are doing navigation bar, home page shortcut navigation, historical navigation records, statistics of page opening times, etc., are all realized through the objects exposed in router.js. In the end, a roughly hierarchical structure will be formed: business layer (controller) - router object layer - page layer (view).
The business layer focuses on how to form a scientific router object, and the page layer focuses on how to render the router object more robustly.
It is based on this layered thinking that we can easily expand a shortcut navigation function. However, the kind of thinking introduced in the summary is for students who are only close to the door. If you want to write the front-end code more elegantly, you are always eager to stand in front of a gate and cannot enter. So I hope the above few words can give you some inspiration.
But there will always be people who disagree with this kind of thinking, and feel that layering affects their own concerns, resulting in separation of concerns, which affects the readability of the code, and that is not harmful. The above is just a family's opinion, and it must not be applicable to all scenarios, and it may even be unreasonable.
A year later, when I re-examine myself now, I probably feel naive.
I wish you all, seek common ground while reserving differences, and make progress together.