博客

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并将路径进行拼接