• 极客专栏正式上线!欢迎访问 https://www.jikewenku.com/topic.html
  • 极客专栏正式上线!欢迎访问 https://www.jikewenku.com/topic.html

Vue.js常见问题解决办法

编程语言 Geekerstar 1年前 (2018-04-14) 389次浏览 已收录 0个评论 扫描二维码
文章目录[隐藏]

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

tskill node

在vue组件中使用axios

// 方法一:直接在.vue文件中引入使用  
  
// 在.vue文件中使用  
<script>  
  import axios from 'axios';  
  export default {  
    name: 'news',  
    data () {  
      return {  
      }  
    },  
    methods: {  
      getNewsFn(){  
        axios.get(this.dataURL + '/getNews').then((news) => {  
            this.news = news.data;  
          }  
        ).catch((err) => {  
            console.log(err);  
          }  
        );  
      }  
    }  
  }  
</script>  
  
  
// 方法二:注册为全局的函数  
  
// 首先在main.js文件中引入  
import axios from '../node_modules/axios';  
  
Vue.prototype.$axios = axios;  
  
new Vue({  
  el: '#app',  
  router,  
  store,  
  axios,  
  echarts,  
  template: '<App/>',  
  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结构

<div>图片:<img :src="https://cdn.jikewenku.com/qiniu/781/image/b0755ca6d5e2547646b1cdaf5af92892.jpg?watermark/1/image/aHR0cHM6Ly93d3cuamlrZXdlbmt1LmNvbS93cC1jb250ZW50L3VwbG9hZHMvMjAxOC8wNC8yMDE4MDQxODA4MTI0OTkzLnBuZw==/dissolve/100/gravity/SouthEast/dx/10/dy/10" :alt="item.title"></div>

丨极客文库, 版权所有丨如未注明 , 均为原创丨
本网站采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议进行授权
转载请注明原文链接:Vue.js常见问题解决办法
喜欢 (0)
[247507792@qq.com]
分享 (0)
Geekerstar
关于作者:
本站技术支持

您必须 登录 才能发表评论!

  • 精品技术教程
  • 编程资源分享
  • 问答交流社区
  • 极客文库知识库

客服QQ


QQ:2248886839


工作时间:09:00-23:00