vue登陸功能和將商品添加至購物車實現

 2.1: 學子商城--用戶登陸

  用戶登陸商城用戶操做行爲,操做用戶輸入用戶名和密碼 

  點擊登陸按鈕，一種狀況登陸成功 一種狀況登陸失敗

  "用戶名或密碼有誤請檢查"

  2.2:如何實現用戶登陸

  (1)數據庫 xz_login 用戶登陸表[id;uname;upwd]

    id INT

    uname VARCHAR(25)

    upwd  VARCHAR(32) 加密處理

    xz_login

    1  tom     123

    2  jerry     123

   知識擴展:加密經過複雜算法將明文加密轉換密文保存

    原來密碼 123(明文)  加密  219ds98kjkjds9832wiu32(密文)

   知識擴展:單向加密 md5 加密

            在mysql數據庫有一個函數md5('123')

   知識擴展:如何提升安全性 讓用戶密碼8位以上

            大寫小寫數字特殊符號  ABcOO0_9

   操做: upwd VARCHAR(32)

  (2)node.js(技巧)

    -請求方法 get 請求地址  /login

    -參數 用戶名密碼 

    -sql   SELECT id FROM xz_login

          WHERE uname = ? AND upwd = md5(?)

     技巧:用戶輸入密碼加密後與數據庫密文比較

     pool.quey(sql,[uname,upwd],(err,result)=>{

         if(result.length==0) 用戶名或密碼錯誤

      })

    -json {code:1,msg:"登陸成功"}

        {code:-1,msg:"用戶名或密碼錯誤"}

  (3)腳手架表單

   *-建立組件      src/components/home/Login.vue

   *-組件分配路徑  /Login

   *-建立卡片 mui

   *-在卡片建立表單

    #不要添加action屬性

    #登陸按鈕 <input type="button" value="登陸" />

   -爲 button綁定點擊事件發送 ajax

  (4)差一點若是用戶登陸成將用戶編號 id保存服務器端對象

     session

 

  2.3: 學子商城--購物車

   購物車保存用戶想購物買商品臨時對象 

   購物車能夠保存在

   (1)數據庫  ok

   (2)cookie

  2.4: 學子商城--將商品添加至購物車-開發數據庫

   xz_cart 購物車表 id count price pid uid

   id 編號;count 購買數量;price 購買時價格;pid 購物商品編號;

   uid 登陸用戶編號

  2.5: 學子商城--將商品添加至購物車-node.js(重點 非阻塞)

   請求方式 GET 請求路徑 /addcart

   參數:pid/count/uid/price

   sql:

   -查詢當前用戶是否己經將商品添加至購物車

   SELECT id FROM xz_cart WHERE pid = ? AND uid = ?

   -更新數量

   UPDATE xz_cart SET count=count+ num WHERE pid=? AND uid=?

   -將商品信息添加購物車

   INSERT INTO ....

   json

   {code:1,msg:"商品添加成功"}

   2.6: 學子商城--將商品添加至購物車-node.js解決阻塞問題

    (1)SELECT id FROM xz_cart WHERE uid = ? AND pid = ?

      pool.query(sql,[uid,pid],(err,result)=>{

        #回調函數,何時調用函數

        if(result.length==0){

          var sql = "INSERT ..."

        }else{

          var sql = "UPDATE..."

        }

        (2)pool.query(sql,(err,result)=>{

        })

      })

   常見錯誤

   1: 沒法訪問此網站   檢查node.js 出錯信息

   緣由:node.js由於出錯中止工做

   SQL syntax sql語句不正確附近

   2: Table 'xz.xz_cart' doesn't exist

   xz_cart1 表不存在

   緣由:表名 拼寫錯誤/ 表不存在

   3: Unknown column 'count1' in 'field list'

   緣由:列名不正確

   

   2.7: 學子商城--將商品添加至購物車-腳手架

   (1)GoodInfo.vue

   (2)有一個按鈕 "加入購物車 "

   (3)綁定點擊事件

   (4)pid uid=1 price

   

   

   2.8: 學子商城--購物車列表/全選/清空/批量刪除/刪除/..

   (1)庫xz_cart[id/count/price/pid/uid]

   (2)node.js查詢購物車全部數據

    - 參數 uid

    - sql   SELECT id,count,price,pid,uid,lname 

           xz_cart/xz_laptop

    -json   {code:1,data:[]}

   (3)腳手架對應組件顯示購物車

   *-建立空組件 src/components/home/ShopCart.vue

   *-爲組件分配路徑  /ShopCart

   *-mui組件庫 card組件

   *-中間循環顯示購物車中商品內容

   [ ]  商品名稱   價格    數量   (刪除)