介绍你的项目?

  1. 多环境变量,axios请求响应拦截,api封装统一管理

面试官你好,《xxx》这个项目是我自己独立开发的,下面我给您介绍一下,我从0开始,到发布上线的流程。首先,开发这个项目我用的最新的vue脚手架3.0,项目创建完后,首先我会配置多环境变量,方便后期测试,上线阶段快速切换后台接口。然后安装配置项目所用的ui框架(后台管理系统element-ui,移动端vant-ui),之后安装axios,对axios进行封装,添加请求拦截,和响应拦截,我一般在请求拦截器中,给请求头添加token字段。当然这个token要存储在vuex中(稍后会降到),还有loding动画的开启,响应拦截器中,我一般会关闭请求时开启的动画,根据后端返回的状态码(code值),验证token是否有效或过期(一般401表示token无效,402表示token过期)。接着我会用封装好的axios进行api接口的封装,这里我用到了async、await封装请求接口函数,这样可以将异步操作同步化操作,代码更加友好,避免回到地狱的出现。

  1. vuex使用

我这个《xxx》项目用vuex对数据进行了共享。包括token,购物车中的商品数据,商品类型,商品总价,商品订单,收货地址,等。之前遇到过刷新页面vuex数据丢失的问题,我查阅资料,可以用数据持久化解决,原理就是把vuex中的数据,同步到sessionStorage中,用一个插件就可以解决vuex-persistedstate。

  1. 组件化拆分,开发项目

整个项目采用组件拆分的思想开发的,开发初期,我会创建三个目录,分别是views(页面级组件目录,比如home首页,category分类,detail详情,cart购物车,myself个人中心),common(公共组件目录比如:header公共头组件,swiper轮播组件,item商品信息组件,list上拉列表组件),feature(功能性组件目录,比如toTop返回顶部组件,search搜索组件,sku商品规格组件等),
列举5个重要的组件说下。

  1. 支付

最后遇到最大的问题是支付,和打包上线时webpack配置打包优化。

先说下支付吧,支付主要做了支付宝支付,和微信支付。我给您重点说下支付宝页面支付吧。当我们选中支付吧支付,点击确定按钮,页面跳转到支付宝页面,进行支付。
详细看vuex项目中的微信支付、支付宝支付

  1. 优化

最近就是项目优化,优化分为代码优化,和webpack打包优化。
代码优化详看:vue项目代码优化说出4点即可,webpack打包优化想看webpack打包优化说出4点即可。

无敌中。。。记住老湿的话。保你面试成功。

Logo

这里是“一人公司”的成长家园。我们提供从产品曝光、技术变现到法律财税的全栈内容,并连接云服务、办公空间等稀缺资源,助你专注创造,无忧运营。

更多推荐