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组件

*-中间循环显示购物车中商品内容

[ ]  商品名称   价格    数量   (删除)