手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表2018年12月的文章

vue-nprogress-pjax 插件

 基于昨天写的vue+blade+(vue-pjax-adapter),发现没有任何进度提示,感觉比较不直观,但vue-pjax-adapter不能注入方法(或许是我不会)。

在app.js里引入了nprogress后。在axios请求前尝试注入,比如:
JavaScript代码
  1. window.axios.interceptors.request.use((config) => {  
  2.     console.log(before);  
  3.     NProgress.configure({easing: 'ease', speed: 1000, showSpinner: true});  
  4.     NProgress.start();  
  5.     return config;  
  6. });  
  7. window.axios.interceptors.response.use((response) => {  
  8.     NProgress.done();  
  9.     console.log(after);  
  10.     return response;  
  11. }, (error) => {  
  12.     return Promise.reject(error);  
  13. });  
但是没有看到有任何需求。才尝试修改了一下vue-pjax-adapter插件
用法和vue-pjax-adapter完全一样:
XML/HTML代码
  1. import nPjaxAdapter from 'vue-nprogress-pjax';  
  2. window.Vue.use(nPjaxAdapter);  
  3. /**  
  4.  * 如果不是标准的pjax-container,就是这样使用  
  5.  * // window.Vue.use(nPjaxAdapter, {  
  6.  //     targetSelector: '#my-custom-target',  
  7.  // });  
  8.  */  
就这样简单。现在切换页面有进度条了
 代码在这里:https://www.npmjs.com/package/vue-nprogress-pjax
 
 
 

搞定:Yii2+blade+vue+pjax

 如题,利用laravel-mix进行开发。HTML页面的blade,基本上只含主体结构 。具体的页面全部用vue加载(当成一个个的component)

这样就真正完全利用了vue的各种组件,然后也能享受PHP的变量开发,只是这样就得一个个的加载页面了(每次都得加载app.js,一个app.js可是将近2M的)
所以,加载vue-pjax-adapter。利用pjax的特性。少加载很多内容。但这个插件,原来也是for laravel的。用了之后,发现网址不会变了。看了下代码。他的pushState的更换居然是利用response.headers中的x-pjax-url,于是在Yii的controller->afterAction中增加:response->headers->set('x-pjax-url',url::current),一切都搞定
 
在开发的时候,使用mix文件的browseSync+webpack的watch。改动后自动刷新页面。也是一个不算爽的爽功能了
 
减轻不少压力。在没有专业前端的情况下也能享受VUE的开发乐趣(其实就是不用vuex,vue-router等)

测试数据库升到MYSQL5.7

 测试了一下,将MYSQL升到了5.7的RDS,但该RDS因为不支持MYISAM,所以将表结构调整为INNODB,同时,因为PHP版本是7.2,可能带来了不少问题。

先这样尝试了。后续有问题我再调整。可能会慢上好多(很纠结)

报了很多异常。估计后续真的要转成Yii2了。其实5年前转过一次。那时候是用Yii1的,但因为中间要改的东西非常多,在写了2/3左右 的时候处理掉了。现在可能真的要重操起来了。(话说,现在PHP的博客好象也就只剩那几个了,什么Wordpress,Typecho还坚挺 的活着。)

是不是要坚持还真是一说。