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)=>)
-json
(3)腳手架表單
*-建立元件 src/components/home/login.vue
*-元件分配路徑 /login
*-建立卡片 mui
*-在卡片建立表單
#不要新增action屬性
#登入按鈕
-為 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
2.6: 學子**--將商品新增至購物車-node.js解決阻塞問題
(1)select id from xz_cart where uid = ? and pid = ?
pool.query(sql,[uid,pid],(err,result)=>else
(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
(3)腳手架對應元件顯示購物車
*-建立空元件 src/components/home/shopcart.vue
*-為元件分配路徑 /shopcart
*-mui元件庫 card元件
*-中間迴圈顯示購物車中商品內容
[ ] 商品名稱 ** 數量 (刪除)
vue登入功能
引入需要的模組 eg const mysql require mysql const express require express const cors require cors 解決跨域問題 建立連線池 提高效率 var pool mysql.createpool 建立express物件 var...
Vue實現專案中的商品列表，商品詳情等功能
es6 學習資料 掌握npm的使用 npm的使用 在安裝npm前先要安裝node的環境，安裝的過程如下 npm 是乙個 第三方模組的託管 指的就是 npm 是node的包管理工具 全名叫做 node package manager 在我們安裝node時候，就已經順便也安裝了 npm 這個管理工具 包...
首頁 詳情和登入功能
學習過程中記錄的筆記，比較簡略 yarn add react router domimport from react router dom function exact render route detail exact render route div browserrouter div prov...