2024年Web前端最新循序渐进VUE+Element 前端应用开发(17）--- 菜单资源管理，面试复盘总结怎么写

TCP协议

• TCP 和 UDP 的区别？
• TCP 三次握手的过程？
• 为什么是三次而不是两次、四次？
• 三次握手过程中可以携带数据么？
• 说说 TCP 四次挥手的过程
• 为什么是四次挥手而不是三次？
• 半连接队列和 SYN Flood 攻击的关系
• 如何应对 SYN Flood 攻击？
• 介绍一下 TCP 报文头部的字段
• TCP 快速打开的原理(TFO)
• 说说TCP报文中时间戳的作用？
• TCP 的超时重传时间是如何计算的？
• TCP 的流量控制
• TCP 的拥塞控制
• 说说 Nagle 算法和延迟确认？
• 如何理解 TCP 的 keep-alive？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

浏览器篇

• 浏览器缓存?
• 说一说浏览器的本地存储？各自优劣如何？
• 说一说从输入URL到页面呈现发生了什么？
• 谈谈你对重绘和回流的理解
• XSS攻击
• CSRF攻击
• HTTPS为什么让数据传输更安全？
• 实现事件的防抖和节流？
• 实现图片懒加载？

菜单项的组件，是在Layout/Components/Sidebar/Item.vue进行修改，以适应Awesome图标的处理:

render(createElement, context) {

const { icon, title } = context.props

const vnodes = []

if (icon) {

// vnodes.push() // 使用自定义svg图标

// vnodes.push() // 使用内置element图标

vnodes.push()// 使用awesome图标

}

if (title) {

vnodes.push({(title)})

}

return vnodes

}

通过各个地方进行修改，我们就可以使用Awesome的图标集合了。

2、菜单和路由的结合管理

========================================================================

在前面随笔《循序渐进VUE+Element 前端应用开发(3）— 动态菜单和路由的关联处理》我介绍了用户动态配置的菜单资源，结合本系统的所有路由，实现菜单的显示外，还过滤了系统路由，实现可访问路由的管理，两者结合实现了系统有效的菜单和路由的控制。

前端通过接口动态获取菜单列表，通过菜单的名称和路由名称的对应关系，我们以菜单集合为对照，然后过滤本地所有静态路由的列表，然后获得用户可以访问的路由列表，设置动态路由给前端，从而实现了界面根据用户角色/权限的不同，而变化用户的菜单界面和可访问路由集合。

菜单路由处理的大概的操作过程如下所示:

前端界面的动态菜单、本地路由、菜单导航和可访问路由的几个概念如下所示。

在前端界面处理中，我们通过Element界面组件的方式展示动态菜单信息，并结合菜单和路由的关系，实现菜单跳转到对应视图的处理过程。

因此，系统管理里面的菜单信息配置界面中，菜单的Web地址，对应的是系统静态路由的名称，如下界面所示。

之前定义系统的路由信息格式如下所示:

// 定义本系统的所有路由，具体路由呈现经过菜单数据过滤

export const asyncRoutes = {

‘dashboard’: {

path: ‘/dashboard’,

component: Layout,

children: [{

path: ‘dashboard’,

name: ‘dashboard’,

component: () => import(‘@/views/dashboard/index’)

}]

},

‘product’: {

path: ‘/product’,

component: Layout,

children: [{

path: ‘/product’,

name: ‘product’,

component: () => import(‘@/views/Product/index’)

}]

},

… //省略部分

‘icon’: {

path: ‘/icon’,

component: Layout,

children: [{

path: ‘/icon’,

name: ‘icon’,

component: () => import(‘@/views/icons/index’)

}]

},

‘external-link’: {

path: ‘http://www.iqidi.com’,

name: ‘external-link’

}

}

有了这些准备，我们在用户登录系统后，就从后台获取对应的菜单列表。

在系统登录处理过程中，考虑到初始化的时候，如果用户是管理员admin，并且获取用户菜单为空，可以考虑使用预设的静态菜单资源，可以让用户先配置好权限菜单。

// 系统静态菜单

var staticmenus = await GetStaticMenus()

// console.log(menus)

// 如果用户是admin 并且角色集合中没有菜单，则使用静态菜单

var username = store.getters.name // 用户名

if (username === ‘admin’) {

if (!menus || typeof (menus) === ‘undefined’ || menus.length === 0) {

menus = staticmenus // 系统管理员，初始化的时候使用静态菜单

}

}

由于之前开发了一个基于Winform的ABP前端应用，因此我们菜单为了整合两个应用，在菜单表示增加一个一个Tag标签，用来区分是Winform界面的菜单还是Web的菜单，毕竟两者菜单的处理方式是不同的。

addForm: { // 添加表单

id: this.guid(),

pid: ‘’,

name: ‘’,

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-Alu58YIx-1715462412378)]