面试题

自我介绍:
我是来面试公司web前段开发的
你好，我叫xxx，来自xxxx
在此期间就职过两家公司，中科yi倚天和光合公司 都有过1年多的工作经验，
在我河南郑州的光和公司我们做项目主要用到的技术栈 就是
html,css，javaScript原生，
,jQuery，bootstrap第三方ui框架来开发项目

在中科倚天公司 做项目主要用到 技术 Vue全家桶Vue-Cli、Vue、Vue-Router、Axios、Vuex，Vant-UI ， Element-UI，Webpack 等。
做过，电商项目，移动端的项目 ，PC端等行业的项目。
负责过 匠心小镇app项目
一家民宿项目 觅食蜂app、项目，微信小程序入艺，，好物匠后台管理系统，
使用Git进行项目版本控制协助开发
以上是我的自我介绍 谢谢 你还有什么要问的吗？

匠心小镇 移动端

这个匠心小镇是一款家庭的生活用品
项目里面功能的实现？

搜索功能的实现

在搜索这块我是调了一个后台搜索的接口，通过v-model双向数据绑定
把页面中用户在input框中输入的值作为参数传递给接口，
可以实现字母搜索或着拼音搜索
然后接口会返回我通过关键字（或者拼音字母）作为参数而指定的一些数据返回给用户，
最后把这些数据进行排版渲染到页面上即可

二级分类切换

二级分类切换我就是使用第三方的vant-ui 的Sidebar侧边栏实现切换
，通过数据接口将对应的title渲染出来，绑定了点击事件通过id传参，每次点击的时候对应id下的内容显示

收藏的功能

首先要得到当前收藏数据id 请求收藏的接口 返回数据 让收藏图标变成已收藏
取消收藏，就在取消收藏的接口上拼接上当前收藏的数据 请求取消收藏的接口 返回数据 让收藏图标变成取消收藏
然后在我的页面 收藏里面渲染收藏的数据
收藏 直接请求收藏接口 返回数据，渲染页面
取消收藏 传当前数据的id 请求取消收藏的接口，判断data里面的data如果是1 就取消收藏

瀑布流布局的原理实现

瀑布流又称瀑布流式布局，视觉表现为参差不齐的多栏布局
后面的元素依次添加到其后，等宽不等
高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。
当第一排排满足够多的等宽图片时之后
放置的图片会往下面排放。

到底加载 在外面加一个大盒子 不设置高 提示里面的元素撑起了的

实现 ：我用的是css3的特性以及弹性盒子布局 实现的

购物车功能 的 加减 全选 总价 删除

这里功能都是调取后端接口来实现的
全选的实现：先双向数据绑定flag
通过 change点击事件
在return里面定义一个flag 为false 在定义一个空数组
通过all 这个方法 把arr的方法添加到str里面他为true方法他就全选了 取消呢就是把str这个数组为空
//全选
all(){
// alert(this.flag)
if(this.flag){
for(var i in this.arr){
this.aa.push(this.arr[i].id)
}
}else{
this.aa=[]
}
}
},

总价的实现：

后台会返回数据，用到了计算属性，具体定义一个变量为零，循环遍历被选中的数组，变量加等于商品数量乘以商品单价，最后返回变量就是总价
computed:{
// 总价
// count(){
// var sum =0 ;
// for(var i in this.arr){
// sum+=this.arr[i].number*this.arr[i].price
// }
// return sum
// }

删除的实现

首先后台会返回接口，然后调用后台返回的接口，通过delete属性进行删除；如果后台没有返回数据接口的话，就通过Splice实现的删除。
del(key){
this.arr.splice(key,1)
},

加减 的实现

首先在vuex里面定义一个状态count,
然后在异步操作里面调用加减的接口，在同步操作里面让count++,和count–,在执行count–的时候会判断count不能为0，或者为0的时候进行删除

add(key){
this.arr[key].number ++
},
jan(key){
if(this.arr[key].number>1){
this.arr[key].number –

        }else{
         alert("请不能少于1哦！")
        }
       
    },

封装 的实现 思路

我封装过弹出框 星星评分 taost轻提示
封装
点击botton 按钮 确定和取消 他弹出的内容那块的框 在封装的组件 写好多种样式 在子组件中用$emit()暴露（派发）事件，父组件中用绑定的事件去监听 然后挂载上传递的数据 在子组件 props 来接受这个数据

Get和post的区别 ？

get参数通过url传递，post放在 body中。

get请求在url中传递的参数是有长度限制的，而post没有。

get比post更不安全，因为参数直接暴露在url中，所以不能用来传递敏感信息。

get请求只能进行url编码，而post支持多种编码方式

get请求参数会被完整保留在浏览历史记录里，而post中的参数不会被保留。

GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。

GET产生一个TCP数据包；POST产生两个TCP数据包。

对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；

而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。

state 的存储和localstorage 存储的区别？

1.最重要的区别：vuex存储在内存，localstorage则以文件的方式存储在本地
2.应用场景：vuex用于组件之间的传值，localstorage则主要用于不同页面之间的传值。
3.永久性：当刷新页面时vuex存储的值会丢失，localstorage不会。

、使用vant来实现上拉刷新，下拉加载功能模块；

思路：这个地方我是使用了vant-ui里面的PullRefresh- 下拉刷新和Loading 加载，把接口里面的数据使用拓展运算符进行拼接，拼接的时候使用Loading 加载

Animate。Css的使用

animate里面包含了许多常用的css动画，我们要使用的它的话需要把它加到自己的页面中，接着就可以在需要动画的元素标签上直接调用里面的动画，然后调节动画次数延迟等达到自己需要的效果就可以了。
完成路由拦截，app的登录，注册以及验证码功能；
思路：路由拦截我们使用的是全局的路由拦截，如果点击到了需要登录之后才能进入的页面之后，如果数据里面没有存储到token，那么就会重定向到登录页面，以及登录获取token

公司项目开发流程

1第一呢我们是公司呢是开一个需求讨论会
然后大家对这个项目的这个功能 进行一个分析和
和确定一下项目的一个周期 大家认领一下任 务
2 产品经理 用一些蓝湖 的之类的软件进行原型图的设计
3 就是公司我们的 UI 设计师 把效果图设计出来
4 ul效果图设计好给我 和后台数据
给我 我拿到效果图 就要高度还原页面
把特效和业务逻辑给实现
5 后端 封装接口
6项目 就是提测模块然后如果有bug就要打回
给我然后进行修改 最后测试没有问题
7 部署
8 发布上线
前端简称 ：FE
后端 ：BE
QA ：测试

进公司主要问的 兼容 优化 封装 你开发遇到的 问题怎么解决的

1vue浏览器兼容问题？

• 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
  2优化 ？

1. 加载方面

1、路由懒加载

加载的资源过多，页面会出现白屏的情况，不利于用户体验。被访问的时候才加载对应的组件，这样就更加高效了。
路由懒加载：

. 缓存方面
利用keep-alive结合导航守卫实现页面缓存
性能考虑避免多次重复渲染降低性能。keep-alive组件。
项目实践<