Auto commit

package.json

@@ -7,6 +7,7 @@
     "preview": "vite preview --port 4173"
   },
   "dependencies": {
+    "axios": "^1.4.0",
     "guess": "^1.0.2",
     "vue": "^3.2.37"
   },

src/App.vue

@@ -4,16 +4,42 @@
     <!-- 页面头部 -->
     <Header title="购物车案例"></Header>
     <!-- 页面主体 -->
-    <h1>App 根组件</h1>
+    <!-- <h1>App 根组件</h1> -->
+    <!-- 商品列表 -->
+    <Goods v-for="item in list" :key="item.id" :title="item.goods_name" :pic="item.goods_img" :chstate="item.goods_state"
+      :id="item.id"></Goods>
   </div>
 </template>
 
 <script>
+import axios from 'axios'
 import Header from '@/components/Header/Header.vue'
+import Goods from '@/components/Goods/Goods.vue'
 
 export default {
   components: {
     Header,
+    Goods,
+  },
+  data() {
+    return {
+      list: []
+    }
+  },
+  methods: {
+    async initBuyCars() {
+      // 通过 axios 请求数据
+      const { data: res } = await axios.get('https://www.escook.cn/api/cart')
+      if (res.status === 200) {
+        // 请求成功，将数据赋值给 list
+        this.list = res.list
+
+      }
+    }
+  },
+  created() {
+    // 在实例创建之后请求数据
+    this.initBuyCars()
   }
 }
 </script>
@@ -21,7 +47,7 @@ export default {
 <style lang="less" scoped>
 /* 应用程序容器样式 */
 .app-container {
-  
+
   padding-top: 45px;
   /* 顶部内边距 */
   padding-bottom: 50px;

src/assets/base.css

 /* color palette from <https://github.com/vuejs/theme> */
-:root {
+/* :root {
   --vt-c-white: #ffffff;
   --vt-c-white-soft: #f8f8f8;
   --vt-c-white-mute: #f2f2f2;
@@ -19,10 +19,10 @@
   --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
   --vt-c-text-dark-1: var(--vt-c-white);
   --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
+} */
 
 /* semantic color variables for this project */
-:root {
+/* :root {
   --color-background: var(--vt-c-white);
   --color-background-soft: var(--vt-c-white-soft);
   --color-background-mute: var(--vt-c-white-mute);
@@ -71,4 +71,4 @@ body {
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-}
+} */

src/assets/main.css

-@import "./base.css";
+/* @import "./base.css";
 
 #app {
   max-width: 1280px;
@@ -33,3 +33,7 @@ a,
     padding: 0 2rem;
   }
 }
+ */
+
+
+

src/components/Goods/Goods.vue

@@ -4,17 +4,17 @@
     <div class="thumb">
       <div class="custom-control custom-checkbox">
         <!-- 复选框 -->
-        <input type="checkbox" class="custom-control-input" id="cb1" :checked="true" />
-        <label class="custom-control-label" for="cb1">
+        <input type="checkbox" class="custom-control-input" :id="'cb' +id" :checked="chstate" />
+        <label class="custom-control-label" :for="'cb' +id">
           <!-- 商品的缩略图 -->
-          <img src="../../assets/logo.png" alt="" />
+          <img :src="pic" alt="" />
         </label>
       </div>
     </div>
     <!-- 右侧信息区域 -->
     <div class="goods-info">
       <!-- 商品标题 -->
-      <h6 class="goods-title">商品名称商品名称商品名称商品名称</h6>
+      <h6 class="goods-title">{{title}}</h6>
       <div class="goods-info-bottom">
         <!-- 商品价格 -->
         <span class="goods-price">￥0</span>
@@ -25,7 +25,26 @@
 </template>
 
 <script>
-export default {}
+export default {
+  props:{
+    title:{
+      type:String,
+      default:'商品名称',
+    },
+    pic:{
+      type:String,
+      default:'',
+    },
+    chstate:{
+      type:Boolean,
+      default:true,
+    },
+    id:{
+      type:Number,
+      required:true,
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped>

src/components/Header/Header.vue

 <template>
-  <div class="header-container">{{title}}</div>
+  <div class="header-container">{{ title }}</div>
 </template>
 
 <script>
 export default {
-  props:{
-    title:{
-      type:String,
-      default:'标题',
+  props: {
+    title: {
+      type: String,
+      default: '标题',
     },
   }
 }