1、axios请求中post请求的坑。刚开始的坑是,使用axios的post方法请求数据,数据被拦截,数据一直传不到后端那边。后来查文档才得知 axios对于post请求是有拦截功能的,需要自己判断,或者使用提请的 qs 方法,将传给后端的数据进行下处理。
2、路由传参的功能的坑。之前一直使用路由传参,但是当本页面刷新的时候,页面上是没有参数的,因为参数是从上个页面传入进来的。 解决办法:使用了缓存,和vuex状态管理。但是由于项目并不是很大型的项目,所以使用最多的是缓存。
3、页面缓存的坑。有个填写信息的页面,需要填写一部分信息,进入查新协议页面,返回的时候,页面上填写的信息还需要留存。 解决办法:使用vue提供的keep-alive,来完成页面的缓存。
4、vue组件动态加载的坑。由于首页的排版不确定,然后想着,让组件动态显示,根据后端传入的数据,传入那个组件的数据,就显示那个组件。解决办法:和后端商量好,做个标识。前端根据标识判断,动态显示组件。
- 使用到了vue中的 , 刚开始想着是不是和原生js一样使用append直接可以插入进入呢,但是后来发现根本不可以,思路是可以的,但是实现起来是行不通的。因为append后面插入的必须是个节点,而不是组件。后来就去查阅vue文档。
但是现在还有个问题,首页是通过动态组件添加的,数据得从后端接口返回,但是接口请求也是需要时间,所以,刚开始进入页面的是,页面先会是空白,但是这样的体验并不友好,会让用户感觉到页面就是一片空白,但是好的解决办法现在暂时没有想出来。好的解决办法还在寻找ing。【师傅有建议添加个加载的gif图,但是,感觉。。。,我在找下看还有别的办法没,实在没有的话,就只能添加个gif图了。】
5、解析后端返回的map格式数据的坑。 之前解析数据的时候,直接就可以拿去,然后直接渲染页面使用即可。但是这次遇到后端返回的是map格式的数据,这就得解析下了。 例如:body['1'] 。根据返回的格式,自己解析成自己需要的数据格式。
6、更新文件缓存的坑。每次打包好文件给后端更新的时候,用户手机上总会留下,上次版本的信息,而且每次都得清下缓存,才会显示最新版本的数据。后来,我师傅提了个建议,让后端返回一个更新版本的接口,前端每次更新版本的时候,都会给后端传入时间戳,然后后端接收后判断和库里的时间戳是否相同,相同的返回不需要更新,不相同的话,返回要更新,然后前端这边的处理方法是:需要更新的话,清除掉缓存,刷新页面即可。
- 虽然说给.js .css文件后缀加上时间戳也是可以的,但是页面的入口index.html每次都是一样的,所以。。。就不会更新,,百度一些说在nginx服务器上,写上强制更新,但是由于公司服务器上的文件很多,万一操作失误那就麻烦了。
7、h5页面打开调试日志。h5页面不像小程序那样,直接可以打开控制台,在手机上查看日志,得需要自己安装vConsole的插件来实现。 详见博客:【同微信小程序一样的移动端调试工具】移动端调试工具VConsole_柠檬不萌只是酸i的博客-优快云博客_vconsole类似工具
8、获取首页链接里面的参数问题。获取是可以获取到,只要不跳转出这个项目的页面,都是可以的,但是该项目链接了许多外链,所以,有时候返回的时候,页面就会显示空白,因为获取的参数出了问题。解决办法:将参数设置成了缓存,但是返回的速度快了,首页同样还是会出现拿不到参数,的问题。
- 解决办法还在寻找ing。
9、h5里面的搜索。h5里面input实现在手机上按下“搜索”,“go”,“前往”等按钮的时候,同时会触发像PC端的Enter。 input标签需要设置属性:type="search" 。
10、登录接口bug。需要判断 errCode 10001状态的情况。如果出现 errCode出现 10001,则清空原来的session,重新请求该网络请求。
11、封装的请求方法不需要在传入相同的参数。 封装的方法,每个方法里面都得传入sessoin,但是里面需要有个版本的方法不需要传入session,那么就得在封装的方法里面进行判断。详见博客:axios请求需要注意的,axios的get请求传入参数需要注意的
- (config.method == 'get') {
console.log('config.params.version',config.params.version)
if(config.params.version == 'v'){ // 在更新版本的接口里面会用到
config.url = config.url
}else{
config.url = config.url + '?session='+localStorage.getItem('session');
}
}