2024年前端最新循序渐进VUE+Element 前端应用开发(17）--- 菜单资源管理(1)，腾讯面试笔试题

总结

前端资料汇总

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

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
  喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

菜单查看明细界面如下所示，主要就是简单展示菜单相关的属性数据。

而菜单的编辑或新增界面，需要考虑从已有菜单中选择列表，以及选择图标信息。

其中的Awesome图标，我们封装了选择图标的组件，只从Font Awesome图标中选择，毕竟自带的Element图标太少，不太满足要求。

关于Awesome图标组件的使用，可以参考下之前我写过的随笔《循序渐进VUE+Element 前端应用开发(11）— 图标的维护和使用》。

其中的Web图标选择控件，是根据e-icon-picker控件进行修改，以采用Font Awesome图标集合的处理:

// Vue-Awesome图标自动加入

const req = require.context(‘vue-awesome/icons’, true, /.js$/)

const requireAll = requireContext => requireContext.keys()

const re = /./(.*).js/

const fontAwesome = requireAll(req).filter((key) => {

return key.indexOf(‘index.js’) < 0

}).map(i => {

return i.match(re)[1]

})

菜单的展示我们也根据配置，从Awesome中选择构建菜单的图标项目即可。

菜单项的组件，是在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’,

ES6

• 列举常用的ES6特性：

• 箭头函数需要注意哪些地方？

• let、const、var

• 拓展：var方式定义的变量有什么样的bug？

• Set数据结构

• 拓展：数组去重的方法

• 箭头函数this的指向。

• 手写ES6 class继承。

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

微信小程序

• 简单描述一下微信小程序的相关文件类型?

• 你是怎么封装微信小程序的数据请求？

• 有哪些参数传值的方法？

• 你使用过哪些方法，来提高微信小程序的应用速度？

• 小程序和原生App哪个好？

• 简述微信小程序原理？

• 分析微信小程序的优劣势

• 怎么解决小程序的异步请求问题？