node.js評論列表和添加購物車數據庫表建立

 2.1:評論列表--發表評論

  用戶點擊新聞列表某一條新聞，看到新聞詳細發表評論

  -用戶輸入評論內容

  -發表評論 [將用戶評論內容保存數據庫 xz_comment]

  2.2:評論列表--發表評論-開發評論

  -查詢數據庫表 xz_comment[id,content,ctime,nid]

  -node.js 建立程序接收評論內容添加

   (1)用戶請求方式 POST app.post("/addcomment")

   (2)請求參數          content,nid

     2.1:post獲取參數   下載安裝第三方模塊 body-parser

     2.2:post獲取參數   配置模塊

     2.3:post 獲取參數  req.body.nid req.body.content

   (3)SQL  INSERT INTO xz_comment VALUES(null,?,now(),?)

   (4)JSON {code:1,msg:"發表成功"}

   

用戶請求方式 GET	用戶請求方式 POST
發送請求參數：最1KB	發送請求參數：不限制
做用:獲取服務器數據	做用:向服務器發送數據
場景:分頁;詳細;	場景:註冊;添加;上傳圖片
安全:較差	安全:較差          HTTPS安全級別高

 

  -腳手架 comment.vue 發表評論

   -引入第三方模板 qs

    1.1:下載npm i qs 模塊

    1.2:在main.js 引入qs模塊  import qs from 'qs';

    1.3:在main.js Vue對象屬性  Vue.prototype.qs = qs;

    1.4 comment.vue

    var postData = this.qs.stringify({

       nid:9,

       content:"......"

     })

     this.axios.post("127..", postData).then(result=>{

     })

    -在comment.vue 添加mint-ui Toast

    由Toast只有在comment.vue 等少數組件中使用

    (1)在當前組件引入  import {Toast} from "mint-ui"

    (2)當即調用        Toast("評論內容不能爲空");

   

   -常見錯誤 

   (1)Duplicate keys detected: '2'

   <div v-for="item in list" :key="item.id"></div>

   緣由:若是item.id有重複值 2 2

   this.list=[] this.pno++  

   post  this.pno = 1; getMore() [{id:1,img.},{id:2}]

 

  2.3:商品詳細

   1-建立空組件 src/components/goods/GoodInfo.vue

   2-添加訪問路徑   /GoodInfo

   3-添加 card.html 卡片佈局

   4-建立 src/components/sub/swiperBox.vue 子組件

   5*-swiperBox.vue 當父組件調用子組件時傳遞數組

   GoodInfo.vue 商品名稱; 價格;數量 1

  【添加購物車】

  *-獲取當前商品編號

   GoodList.vue  -> GoodInfo.vue   參數pid

   (1)爲商品列表中每一張圖片綁定點擊事件

     跳轉GoodInfo.vue 組件

     參數 ?pid=2

   #通用參數從模板傳遞事件處理函數

   <img @click="jumpInfo" :data-lid="item.lid"/>

    jumpInfo(e){

      var pid = e.target.dataset.lid;

      this.$router.push("/GoodInfo?pid="+pid)

    }

  -發送ajax 獲取商品名稱 價格

   node.js

     參數:pid

     sql:  SELECT lname,price FROM xz_laptop WHERE lid = ?

     json {code:1,data:[]}

   GoodInfo.vue

    -data:{info:{}}

    -methods:{findGood} result.data.data[0]

    -created()