面试准备

自我介绍

面试官你好，我叫朱振东。我来自南京师范大学，今年研三。我学习前端呢有一年多的时间。我掌握的技能主要是前端三剑客加vue，了解TypeScript和git的基本使用。我有一段实习经历，我实习的公司主要是做生物实验数字化的，他们利用了微前端的乾坤框架，正在从vue2向vue3迁移，我做的主要工作呢，是根据每个版本的需求对相应的组件进行开发。我自己呢也是做过几个项目，技术栈主要是vue。最近是在通过vue设计与实现这本书学习vue的源码。

实习经历

我实习的公司是做生物实验室数字化的，他们主要开发了一个叫易览笔记的应用，内容是对生物实验过程的一些记录。包括库存样品的管理，实验的记录、模板的管理等。
我刚开始去是帮公司做他们的新官网，根据ui的设计稿进行开发并且做了移动端的适配。之后是根据每个版本的功能需求来写组件。
印象最深的是我写的一个出库模态框表格，它接收父组件传过来的数据（有权限的数据可以展示库存信息，直接跳转至库存；没有权限的数据看不到库存信息，需要申请出库，再打开个申请出库的模态框。）所以我通过watch监视父组件传过来的props，对每条数据，取出后端接口需要的信息，统一将他们放到一个数组里发给后端，得到每个数据是否有权限的数组。再遍历数据，为其添加一条hasPermission属性，判断该数据的hasPermission属性，将其加入有权限或没有权限的数组。在template里给公共表格组件传递作用域插槽，用v-if来控制库存信息的展示。
侧边栏导航：点击头像会弹出子导航栏。由于主导航栏会展开和折叠，点击头像的导航栏也需要根据其位置来变化。
父组件设置相对定位，我的组件设置绝对定位，通过style标签里用v-bind绑定我的组件的left属性的偏移量，用一个变量表示，因为侧边栏会伸缩收回，用watch监听这个变量，当主导航栏变化时，改变这个变量的值。

问: ⼯作⾥中的token是怎么管理的？
我们公司的token管理都是通过vuex配合本地存储来做的，使⽤vuex是因为token数据⽐较特殊，在很多模块中都可能会⽤到，vuex⽅便管理，配合本地存储⽐如localstorage，是因为vuex有⼀个不好的地⽅就是刷新就丢失，因为它是基于内存嘛，配合⼀下localStorage可以保持持久化 。追问: 如果不⽤vuex只⽤本地存储能实现吗？
答: 效果上⾃然是没有问题的，不过我感觉俩种内存的优势融合⼀下岂不是更好吗。
问: excel导⼊功能的实现流程简要描述⼀下？
当时公司的场景⼤概⼀个excel⽂件⾥就⼏⼗条数据，量⽐较少，和后端商量之后制定了前端主导的⽅案，解析的过程放到了浏览器端做，当时是参考了⼀下vue-admin中的现成的⽅案。⼤概流程是这样的，⼈事那边准备好⼀个标准的excel⽂件，然后通过插件解析成js数据，把js数据格式
化⼀下，最后个通过调⽤后端接⼝完成导⼊
追问: 如果数据量⽐较⼤，你打算怎么做？
如果量很⼤的话，浏览器算⼒扛不住，可能在技术选型的过程中就让后端主导了，前端只负责⼀ 个⽂件上传，把excel⽂件传过去之后让服务端做解析的事情，前端还省事了。
问: 有没有封装过⼀些⾃⼰的业务组件，简单说⼀下？
有的，不过我封装的基本都是和业务挂钩的组件，我挑⼀个⽐较简单的说⼀下吧，之前做业务的时候有遇到过 多个业务模块⽤到了类似的模板结构，就使⽤插槽封装了⼀些组件。⼤概的封装思路就是先把可复⽤的模板部分写好，然后把可变的需要⾃定义的部分⽤slot插槽占位要是插槽个数⽐较多的话，可以区分⼀下默认插槽和具名插槽，尤其是功能区域⽐较明显的部分，⽤具名会更加清晰

项目经历

图书商城系统

这个项目是一个电商网站项目，包括首页、商品列表、购物车、结算、登录注册等模块。技术栈采用了vue3.2、ts、pinia、vue-router、element-plus等。
首页展示了图书分类组件、广告轮播组件、热门推荐组件以及新书上市组件、菜单组件等：

• 包括了搜索框和购物车按钮和用户是否登录。根据搜索内容将其添加到路由的query参数中跳转；购物车上展示了有多少商品已经加到了购物车，从store中取出数据展示，点击可跳转到购物车页面；计算属性从store中取出userInfo，看其有无username来确认是否有用户登录，退出登录调用store中的方法；图书分类组件用来显示图书的分类；广告轮播组件；热门推荐组件、新书上市组件都是在created中拿数据渲染。
• 商品列表组件是复用的，接收父组件传过来的props，循环遍历把每条数据传给商品列表项组件。

图书详情页里面用了动态组件切换图书介绍、评论、问答三个组件
购物车主要存放在pinia中，用一个items数组保存加到购物车里的商品；getters可以获取购物车所有商品的总价(reduce实现，价格乘数量），可以计算单项商品价格(根据id找到商品然后原价折扣)，获取购物车商品数量；actions中可以增加商品数量(根据id找到商品，有的话数量字段加上传过来的数量)，可以增加商品(拿到商品信息push到items)，清空购物车，删除购物车中商品(根据id然后用splice)
结算主要是清空购物车然后调取支付接口
*用户注册登录，点击注册验证表单，通过则拼数据发后端然后保存在store；点登录，验证表单发请求，返回200跳转到登录页前面的路由。

内容发布系统

主要分为文章和评论模块、用户模块、后台管理模块；使用vue2+axios+view-design组件库等前端技术。