eva813/vue-final

Hi there 👋

Hi, I'm Eva!

Languages and Tools:

 

Official Website | Discord | LinkedIn |

vue-final's Issues

顧客評論區

要製作的功能

從json-server 建立評論區資料，並於頁面串接該資料，渲然於畫面上。

情況說明

1. json-server 檔案內容

{
 "evaluations": [
    {
      "productId": 1,
      "userName": "John",
      "avatar": "https://i.imgur.com/xRaisL0.png",
      "score": 5,
      "evaluateDate": "2021/02/28"
    },
    {
      "productId": 1,
      "userName": "Henrry",
      "avatar": "https://i.imgur.com/xRaisL0.png",
      "score": 3,
      "evaluateDate": "2021/04/14"
    },
    {
      "productId": 1,
      "userName": "Fanny",
      "avatar": "https://i.imgur.com/xRaisL0.png",
      "score": 5,
      "evaluateDate": "2021/04/22"
    },
    {
      "productId": 1,
      "userName": "Ben",
      "avatar": "https://i.imgur.com/xRaisL0.png",
      "score": 5,
      "evaluateDate": "2021/08/28"
    },
    {
      "productId": 1,
      "userName": "May",
      "avatar": "https://i.imgur.com/xRaisL0.png",
      "score": 3,
      "evaluateDate": "2021/08/28"
    }
  ]

}

商品介紹頁面

• 從資料庫取得評論資料

 <div class="review-comments">
                  <div
                    class="row mb-5"
                    v-for="(item, key) in evaluationArr"
                    :key="item.userName"
                  >
                    <div class="col-3">
                      <div class="review-comment-author d-flex">
                        <img :src="item.avatar" alt="評論者頭像" />
                        <div class="review-comment-author-info">
                          <div class="review-comment-author-info-name">
                            {{ item.userName }}
                          </div>
                          <div class="review-comment-author-info-date">
                            {{ item.evaluateDate }}
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-8">
                      <div class="review-comment-stars">
                        <font-awesome-icon :icon="['fas', 'star']" />
                        <div>{{ item.score }}</div>
                        <!-- <font-awesome-icon :icon="['fas', 'star']" />
                        <font-awesome-icon :icon="['fas', 'star']" />
                        <font-awesome-icon :icon="['fas', 'star']" />
                        <font-awesome-icon :icon="['fas', 'star']" /> -->
                      </div>
                    </div>
                  </div>
                  
                  </div> 
                </div>

data(){
 return{
    evaluationArr: [],

}

},
mounted(){
    axios({
      method: "get",
      url: "http://localhost:3000/evaluations",
      //API要求的資料
    })
      .then((response) => {
        //console.log(response.data);
        this.evaluationArr = response.data;
      })
      .catch((error) => console.log(error));

}

問題詢問

• 如何將 score 分數，轉化成為 star 圖示。

proxy的取用

問題描述：

要製作加入購物車的彈跳視窗。
已經有取得陣列，但陣列的形式為proxy。

要執行目的：要取得proxy中的索引值，將購物車的彈跳視窗中第一個筆資料的上方框線改為透明。

 console.log(this.displayCartItems);

語法：

在cart-item-container我有將陣列中的每個item都有顯示，但嘗試要取得索引值的時候，發現我的key是title的資料

<div class="cart-panel">
    <div class="cart-items">
      <div
        class="cart-item-container v-for"
        v-for="(item, index) in displayCartItems"
        :key="item.title"
      >
        <div
          class="dd"
          :class="['cart-item', item === item[0] ? 'first-none' : '']"
        >
          <a href="" target="_blank" class="product-link">
            <img class="cart-item-img" :src="item.src" alt="product-img" />
          </a>
          <div class="cart-item-content">
            <div class="cart-item-title">{{ index }}{{ item.title }}</div>
            <div class="price-detail">
              <span>{{ item.inCart }}</span>
              <span style="margin: 0 3px">x</span>
              <span>NT{{ item.price }}</span>
            </div>
          </div>
          <div class="remove">
            <a href=""
              ><font-awesome-icon
                class="del-icon"
                :icon="['fas', 'trash-alt']"
                @click="deleteBtn(index)"
            /></a>
          </div>
        </div>
      </div>
    </div>
    <div class="cart-check-btn button">
      <button class="btn">訂單結帳</button>
    </div>
  </div>

根據上方

<div class="cart-item-title">{{ index }}{{ item.title }}</div>

想請問該如何取得物件索引值

或是..

該如何轉換proxy 為 物件

post 購物車資料

情況描述

講點擊該品項post到資料庫的事件綁在加入購物車按鈕上

• 前兩筆為測試資料，打入的為id=84 開始

methods:{
 postShopingCart(item, key) {
      axios
        .post("http://localhost:3000/cart", item)
        .then((response) => console.log(response))
        .catch((error) => console.log(error));
    }
}

post之後，資料庫的資料如下：

"cart": [
    {
      "title": "【開鍋祭】美國CHOICE安格斯沙朗200g",
      "price": 588,
      "src": "https://i.imgur.com/KtxCkY3.jpg",
      "inCart": 0,
      "productId": 83
    },
    {
      "title": "【開鍋祭】美國CHOICE安格斯沙朗200g",
      "price": 588,
      "src": "https://i.imgur.com/KtxCkY3.jpg",
      "inCart": 0,
      "id": 83
    },
    {
      "category": "food",
      "title": "酵素旅行包(20入/盒)",
      "price": 1380,
      "src": "https://i.imgur.com/morS6ov.png",
      "src2": "https://i.imgur.com/1q3IRmV.png",
      "inCart": 0,
      "productId": 1,
      "date": "2021-09-16",
      "id": 84
    },
    {
      "category": "food",
      "subCategory": "frozen-food",
      "title": "番茄紅燒牛肉湯麵",
      "price": 158,
      "src": "https://i.imgur.com/Q20LLdN.png",
      "inCart": 0,
      "productId": 5,
      "date": "2021-09-16",
      "id": 85
    },
    {
      "category": "food",
      "title": "酵素旅行包(20入/盒)",
      "price": 1380,
      "src": "https://i.imgur.com/morS6ov.png",
      "src2": "https://i.imgur.com/1q3IRmV.png",
      "inCart": 0,
      "productId": 1,
      "date": "2021-09-16",
      "id": 86
    }
  ]

問題

1. 我無法判斷，此商品是否重複加入，並計算inCart的數量

• 可以發現 ·酵素旅行包(20入/盒) 重複加入購物車中

axios 串取資料

使用 json-server 在 vscode 中建立 db.json

• json-server --watch db.json
• 成功建立資料

postman 建立 API

• 在 collection 建立資料夾，以及 GET data

回到專案 foodpage.vue

使用 axios

mounted() {
  
    axios
      .get("http://localhost:3000/products")
      .then((response) => (this.food = response.data))
      .catch((err) => {
        console.log(err);
      });
  },

執行 npm run serve

出現錯誤 GET http://localhost:3000/products net::ERR_CONNECTION_REFUSED

進入商品介紹頁面

執行的事項

實現在商品列表頁面點擊該項產品後，可進入商品介紹頁面，取得該項商品的資料

問題描述：

1. 在產品列表頁面

• 預期設定點擊該商品，要得到商品id

<div class="card-top">
              <router-link
                class="card-img-link"
                href="#"
                :to="{ path: `/foodproduct/${item.key}` }"
              >
                <img :src="item.src" class="card-img-top" alt="product-img" />
              </router-link>
              
            </div>

報錯：

2. 透過router-link 進入 商品介紹頁面
   試圖在進入該頁面時，得到商品id，並取得該項商品的資料

mounted() {
    let id = this.$route.params.id;
    console.log(id);

    axios({
      method: "get",
      url: "https://eva-final-project.herokuapp.com/products/" + id,
      //API要求的資料
    })
      .then((response) => {
        // $route.params.id
        console.log(response.data);
      })
      .catch((error) => console.log(error));
  },

跨元件資料傳遞

詢問 資料傳遞

tags: 程式柴

問題詢問：
目前想處理的問題是，要將在產品頁面存取的加入購物車資料，傳到購物車頁面，並顯示於畫面上。而兩個page是建立兩個router。

示意圖如下：

Apage:產品頁面

Bpage:購物車

想要執行的是

要將在Apage所存取的加入購物車陣列傳到Bpage

目前已完成

在加入購物車的點擊，有存取到陣列，並存放到localStorage

嘗試的解決方式：採用mitt

參考文章：https://wcc723.github.io/development/2020/12/15/vue-3-mitt/
嘗試在自己專案執行上述的2個頁面資料傳遞，但始終無法接收。

執行方式如下：

• 在foodpage頁面：

<div>
    {{ text }} <button type="button" @click="pushData">發送至另一個元件</button>
  </div>

<script>
import Navbar from "@/components/Navbar.vue";
import Breadcrumb from "@/components/Breadcrumb.vue";
import Pagination from "@/components/Pagination.vue";
import Footer from "@/components/Footer.vue";
export default {
  name: "FoodPage",
  components: {
    Navbar,
    Breadcrumb,
    Pagination,
    Footer,
  },

  data() {
    return {

      text: "這有一段話",
    };
  },
  methods: {

    pushData() {
      console.log("send foodpage data");
      this.emitter.emit("getData", this.text);
    },
  },

};
</script>

顯示於畫面，並於點擊後，觸發console資料

• 於shoppingcart頁面：

<div>{{ text }}</div>

<script>
import Navbar from "@/components/Navbar.vue";
import Footer from "@/components/Footer.vue";
export default {
  name: "ShoppingCart",
  components: {
    Navbar,
    Footer,
  },
  data() {
    return {
      text: "原始資料",
     
    };
  },
  methods: {
   
  },
 
  created() {
    this.emitter.on("getData", (msg) => {
      this.text = msg;
      console.log("shopping", msg);
    });
    //console.log(this.cartItems);
  },
};
</script>

結果，沒有傳入預期要顯示的資料，也沒有接收的訊息console.log("shopping", msg);

---

而嘗試單一頁面，放入2個小元件，如下圖：

• 此方式，則可以成功將componentA傳遞資料給componentB
  

或是該使用vuex來做資料管理？