renren-fast-vue踩坑记录

前言:

公司要开发新零售产品的项目,决定采用更为流弊的renren-fast(人人开源)框架,官方文档地址:https://www.renren.io/guide

个人之前也没有了解过,网上文档更是少的可怜,不管是谷歌还是论坛上都找不到多少相关信息,废话不多说,先来看看我们前端的框架吧,github地址:https://github.com/daxiongYang/renren-fast-vue

renren-fast-vue踩坑记录_第1张图片

renren-fast-vue踩坑记录_第2张图片

项目开发、部署等都在wiki中有说明(这也是网上唯一能找到的一点文档)

renren-fast-vue踩坑记录_第3张图片

项目也有了,文档也看了,cnpm run build依赖包也安装了,但npm run dev时发现项目都跑不起来 报各种各样的错,接下来我们来分析一下:

renren-fast-vue踩坑记录_第4张图片

解决路径404的方法有两种:

1.使用跨域代理,就像github库wiki里描述的那样

renren-fast-vue踩坑记录_第5张图片

renren-fast-vue踩坑记录_第6张图片

需要注意的时,默认的target地址是不能改的,因为他对应的是renren-fast的后台接口,你要想能正常返回结果查看项目演示,就得用人家这个地址(虽然项目跑起来了,界面也看到了,但对于咱们来说没有任何吊用,看第二种方法)

2.使用mockJs,调用本地模拟数据

renren-fast-vue踩坑记录_第7张图片

值得注意的是,文档上写的是默认开启,但代码中并非全为true,而是false,之所以路径错误,原因就在于此,mockJs本地模拟数据没有开启,收到将对应的代码全改为true,重启项目,一切ok

renren-fast-vue踩坑记录_第8张图片

renren-fast-vue踩坑记录_第9张图片

常见问题:
 

  1. 去除ESLint代码校验问题
    renren-fast-vue踩坑记录_第10张图片
  2. 解决办法:将config/index.js下面的useEslint改为false

    renren-fast-vue踩坑记录_第11张图片

  3. renren-fast的动态路由是随着菜单的url生成的,对于不想再菜单栏展示的路由页面,可以在router\index.js目录下的mainRoutes主入口路由里配置。

  4. 页面直接跳转(列表进详情),详情页数据不刷新,原因是vue单页面应用的机制不会检测到页面发生变化,解决方法是将常用的created或mounted周期函数换成activated

  5. 关于用户登录后获取token存储并用于其他接口校验的问题,renren-fast框架默认使用的是cookie存储,由于cookie的存储机制是针对整个浏览器的,这就引发一个问题,多个角色的用户不能同时登录,因为他们的token会互相替换,致使不同项目拿到的cookie永远是同一个值,解决办法,使用sessionStorage存储,需要改动四个地方:
    renren-fast-vue踩坑记录_第12张图片
    renren-fast-vue踩坑记录_第13张图片
    renren-fast-vue踩坑记录_第14张图片
    renren-fast-vue踩坑记录_第15张图片

你可能感兴趣的:(vue)