axios在vue中的使用及图片加载问题的解决

1.基本使用

1.1安装

利用 npm 安装 npm install axios --save

1.2在main.js中引入

1.3在组件中使用

created: function () {
          
   
    this.$http.get(./goods/goods.json).then((res) => {
          
   
      this.goods = res.data;
    })
  },

2.axios请求方法

get：多用来获取数据 post：多用来新增数据 put：多用来修改数据（需要传递所有字段，相当于全部更新） patch：多用来修改数据，是在put的基础上新增改进的，适用于局部更新，比如我只想修改用户名，只传用户名的字段就ok了，而不需要像put一样把所有字段传过去。 delete：多用来删除数据

get请求

//方式一：
    axios.get(url, config).then((res) => {
          
    })
	//例子
	axios.get(url, {
          
    params: {
          
   id:8} }).then((res) => {
          
    console.log(res)})
	//最后请求的是url?id=8,返回的数据在res中
  
   //方式二：
   axios({
          
   
      method: "get",
      url: "",
      params: {
          
   },
      ......
    }).then((res) => {
          
    })

post请求

form-data 表单提交，图片上传、文件上传时用该类型比较多

//方式一
    axios.post(url, data, config).then((res) => {
          
    })
    //这里的data就是前端传输过去的数据。不用写成下面的形式,有兴趣大家可以试一试
    //axios.post(url,{data:{id:2}}).then((res) => { })
   
    
//方式二
    axios({
          
   
      method: "post",
      url: "",
      data: ,
    }).then((res) => {
          
    })

3.图片无法请求问题的解决

一般我们在html中或者vue组件文件中引用图片是这样，这是不需要做特别处理的 但是我们这时候可能会有个需求就是我们要动态绑定一组本地图片,但是打包后图片路径却并没有被处理或者说特别怪异,导致本地图片资源无法加载,找到了两种解决的方法

方法一

直接将图片放在public下

方法二

添加require并将路径进行拼接