Vue.js常见问题解决办法

Git Bash 中 解决 Ctrl+C 端口一直占用问题

tskill node

在vue组件中使用axios

// 方法一:直接在.vue文件中引入使用  
  
// 在.vue文件中使用%MINIFYHTML14eecc5fc45554ba519376fb3184a4572%// 方法二:注册为全局的函数  
  
// 首先在main.js文件中引入  
import axios from '../node_modules/axios';  
  
Vue.prototype.$axios = axios;  
  
new Vue({  
  el: '#app',  
  router,  
  store,  
  axios,  
  echarts,  
  template: '',  
  components: { App }  
});  
其次在.vue文件中使用  
  defaultData(){  
        let _this = this;  
        _this.$axios.get('http://' + _this.$store.state.defaultHttp + '?action_type=comp_news&comp_id=' + _this.$store.state.compValue + '&offset=0&len=' + _this.pageNum, {}, {  
            headers: {}  
        }).then(function (response) {  
              
        }).catch(function (response) {  
            console.log(response);  
        });  
    }      

Api及跨域

知乎日报Apihttps://news-at.zhihu.com/api/4/news/latest

解决跨域问题

解决办法1
谷歌浏览器或者QQ浏览器安装一个插件Allow-Control-Allow-Origin: *

解决办法2
嵌套,让别人做转发

嵌套转发https://bird.ioliu.cn/v1?url=https://news-at.zhihu.com/api/4/news/latest

解决访问api图片403禁止访问问题

使用方法:把api图片连接提取出来,使用下面方法过滤

getImage(url){
    // console.log(url);
    // 把现在的图片连接传进来,返回一个不受限制的路径
    if(url !== undefined){
        return url[0].replace(/http\w{0,1}:\/\/p/g,'https://images.weserv.nl/?url=p');
    }
}

Html结构

图片:
本站所有文章均由网友分享,仅用于参考学习用,请勿直接转载,如有侵权,请联系网站客服删除相关文章。若由于商用引起版权纠纷,一切责任均由使用者承担
极客文库 » Vue.js常见问题解决办法

Leave a Reply

欢迎加入「极客文库」,成为原创作者从这里开始!

立即加入 了解更多