vue登录功能和将商品添加至购物车实现

Posted 2021-03-25 sna-ling

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

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

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