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组件
*-中间循环显示购物车中商品内容
[ ] 商品名称 价格 数量 (删除)