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組件
*-中間循環顯示購物車中商品內容
[ ] 商品名稱 價格 數量 (刪除)