axios 的安装命令是什么?
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。
安装命令:npm i axios--save(i 是 instyle 的缩写,s 是 save 的缩写),这样就 可以安装到项目里。
<template>
  <div>
    <div
      v-for="(item,index) in  goods"
      :key="index"
      style="border:1px solid #999;margin:10px"
      @click="gotoDetails(item.id)"  // 点击图片进入详情页
    >
      <img :src="item.mainPic" width="260px" /> // 商品主图链接
      <p>{{item.title}}</p>
      <p>
        <!-- 领券后的价格 -->
        <span>{{item.actualPrice}}</span>  
        <!-- 商品原价 -->
        <s>{{item.originalPrice}}</s>
      </p>
      <!-- 销量 -->
      <p>销量:{{item.monthSales}}</p>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      goods: []
    };
  },
  mounted() {
    this.$axios
      .get("http://api.kudesoft.cn/tdk/goods", {
        params: {
          pageId: 1, // 商品第几页
          cids: 6 // 商品种类,6代表零食 如其他:衣服、化妆品
        }
      })
      .then(res => {
        console.log(res.data.data.data.list); // list是访问接口中的固定写法
        let list = res.data.data.data.list;
        this.goods = list;
      })
      .catch(err => {
        console.log(err);
      });
  },
  methods: {
    gotoDetails(id) {
      this.$router.push({
        path: "/details",
        query: {
          id
        }
      });