鸿蒙应用开发之使用用户首选项存储数据

啊顾y

已于 2024-04-26 15:46:14 修改

阅读量521

点赞数 9

文章标签：鸿蒙 harmonyos 华为教育电商

于 2024-04-25 17:27:42 首次发布

本文链接：https://blog.csdn.net/m0_59926833/article/details/138189762

版权

完善功能：实现添加购物车和立即购买功能

前言

本章是对上一篇文章（商品详情页）的补充

需要用到黑马智慧商城接口。地址：wiki - 智慧商城-实战项目 (apifox.com)

一、添加商品至购物车

如果用户进行了登录操作，那么后台会返回一个Token给你。

业务逻辑是：有Token才能点击加入购物车和立即购买，否则跳转到登录页进行登录。

1.登录页

在用户点击（立即登录）按钮的时候，接收后台返回的Token数据，并存入

1.获取后台返回的Token值

//登录请求
   login(){
     axios.post('http://smart-shop.itheima.net/index.php?s=/api/passport/login',{
      form:{
        isParty:false,//是否存在第三方用户信息
        mobile:this.mobilePhone,//手机号
        partyData:{},//三方登录信息
        smsCode:'246810'//短信验证码
      }
    },{
       headers:{
       platform:'H5'
       }
     }).then((res)=>{
       //获取接口返回的token
       this.setToken('tokensss',res.data.data.token)
       //路由跳转
       router.replaceUrl({url:"pages/Layout"})
       //提示发送的状态
      promptAction.showToast({
        message:res.data.message,
        duration:2000
      })
    }).catch((err)=>{
      console.info('err'+err)
    })
  }

2.将Token值存入本地

//用户首选项，存入token
  setToken(key,token?){
    //使用用户首选项进行存储
    //this.context：当前页面的上下文，key：存入用户首选项的名称（键名）
    preferences.getPreferences(this.context,key)
      .then((res)=>{//res：获取到的首选项实例，可以对res操作进行增删改查
        //判断是否已经存在key， flag：boolean，返回有或者无
        res.has(key).then((flag)=>{
          //如果有键名key存在了
          if(flag){
            //调用get方法获取值（key：键名，‘默认值0’：填入默认值，val：值的内容）
            res.get(key,'默认值0',(err:Error,val:preferences.ValueType)=>{
              if(err){
                console.log(err.message)
              }
              console.log("您的Token为：" + val);
            })
          }else{//如果键名key不存在
            //调用put方法，存入。（key：键名，token：要存入的值）
            res.put(key,token).then(()=>{
              //刷盘，进行数据持久化
              res.flush()
              console.log('刷入完成 token:'+token)
            })
          }
        })
      })
  }

2.购物车页

1.判断是否有Token

只需要在加入购物车添加点击事件：

preferences.getPreferences(this.context,"tokensss").then((res)=>{
              res.has('tokensss').then((bol)=>{
                //登陆过了，存在Token：
                if(bol){
                  res.get("tokensss","null").then((val)=>{
                    //this.addShopCart()函数，则向后台发送请求，添加商品至购物车
                    this.addShopCart(val,this.gid,this.num.price)
                  })
                }else {//否则跳转登录页
                  router.replaceUrl({url:"pages/Login"})
                  promptAction.showToast({message:'请先登录'})
                }
              })
            })

2.发送请求，添加至购物车

即this.addShopCart()函数：

 //加入购物车
  async addShopCart(token,gid,gnum){
    const data = await axios.post('https://smart-shop.itheima.net/index.php?s=/api/cart/add',{
      goodsId:gid,
      goodsNum:gnum,
      goodsSkuId:"0"
    },{
      headers:{
        ['Access-Token']:token,//这里的Access-Token需要用中括号加引号包起来，否则会出错！！！
        platform:'H5'
    }})
    //提示添加商品至购物车
    promptAction.showToast({message:data.data.message})
    //关闭添加商品规格的面板
    this.isShowPanel = false
  }