用vue写网易云课堂项目的过程

最新推荐文章于 2022-06-26 10:35:48 发布

原创最新推荐文章于 2022-06-26 10:35:48 发布 · 935 阅读

0 ·

CC 4.0 BY-SA版权

本文分享了使用Vue构建网易云课堂项目时遇到的挑战，包括处理input错误时边框变红的样式控制，axios请求中传递token的方法，以及解决因路径问题导致图片加载失败的过滤器实现。

那是相当难啊

1. 首先，写input输入错误会出现边框变红色，这怎么拿到边框的啊

在外面加一个<div class="inputbox" ref="mybox">
然后再失去焦点后用这个 this.$refs.mybox.style= 'border-color:red'

2.发送axios请求时传token的参数

后台给的时这样的：
获取用户信息

url
  /api/v1/users/info
method
  get
headers
  authorization Bearer token  // 需要提供jwt信息
return
  {
  }

发送出来的请求时这样的：

created(){
    let token=localStorage.getItem('token')
    if(token){
      console.log(token)
      axios.get('http://api.cat-shop.penkuoer.com/api/v1/users/info',{
        headers:{
          'authorization': 'Bearer '+token //这里有一个空格
        }
      }).then(res=>{
        console.log(res)
        this.touxiang=res.data.avatar
        this.name=res.data.nickName
      })
    }
  }

3.当从接口里面获取图片的时候，可能有的图片因为路径问题加载不出来，此时需要一个过滤器来保证图片加载的完整行

<div class="txt" v-for="item in list" :key="item.id">
      <div class="txt_left txt1  txt_margin">
        <img :src="item.coverImg | glq" alt="">
        <div>{{item.name}}</div>
 </div>

created () {
    axios
      .get('http://api.cat-shop.penkuoer.com/api/v1/products',{
        params:{
          per:8,
          page:1
        }
      })
      .then((res)=> {
    let y = res.data.products;
    console.log(y)
    this.list=y
      })
  },
  filters:{
    glq:function(res){
      if(res){
        return res.startsWith('http')?res:'http://api.cat-shop.penkuoer.com'+res
      }
    }
  }

这样写即可完成一个图片的过滤器