尚硅谷Vue电商项目笔记5-购物车的实现和Promise的回顾

最新推荐文章于 2024-09-03 21:44:01 发布
最新推荐文章于 2024-09-03 21:44:01 发布
阅读量498 收藏 2
点赞数
分类专栏： Vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ziyoumingming/article/details/123280338
版权
本文详细介绍了在一个Vue电商项目中实现购物车功能的全过程，包括商品数量增减的逻辑处理、添加购物车的异步操作、路由跳转策略以及Vuex状态管理。同时，深入探讨了Promise的使用，包括其返回值特性和async函数的错误处理。文章还涵盖了错误处理、数据验证、Vuex模块化以及前端与后端交互的关键细节，如用户标识的生成和请求头的设置。
摘要由CSDN通过智能技术生成

尚硅谷Vue电商项目笔记5-购物车的实现和Promise的回顾

教程地址

实现Detail商品数量的增加和减少

注意:

  1. 用来输入数量的是input,用户可以自己输入数量,所以要对用户输入的数量进行逻辑操作,防止他们输入错误的内容
  2. 输入框的blur事件,是当失去焦点的时候触发,但是这个事件不好,因为只要输入焦点就会触发该事件,而不能判断这次输入的数据和之前的数据是否一样才会去触发
  3. 使用change事件,该事件包含了失去焦点事件,当输入框失去焦点的时候,如果里面的数据和之前的不一样才会触发,否则不会触发
    • 当时去焦点的时候使用$event.target.value判断里面输入的数字,如果不合法就将skuNum设置为1
    • 当失去焦点的时候合法,就使用用户输入的数字
<div class="controls">
  <!-- 当用户输入一个非数字,则转换为nan,还是会走skuNum=1,并且这里将收集到的字符串使用*1,转换为了数字 -->
  <input autocomplete="off" class="itxt" v-model="skuNum" @change="$event.target.value >=1 ? skuNum = $event.target.value*1 : skuNum=1">
  <a href="javascript:" class="plus" @click="skuNum++">+</a>
  <a href="javascript:" class="mins" @click="skuNum > 1 ? skuNum-- : skuNum = skuNum">-</a>
</div>

点击添加购物车按钮跳转到添加成功页面

特别的地方:

  1. 之前的跳转都是点击直接跳转,因为在跳转之前不需要发送请求,而是跳转过去之后发送请求后去数据
  2. 但是加入购物车,需要先将请求发给后台,后台需要把这个购物车信息存储到数据库,请求成功返回信息,在根据信息去跳转,否则可能后台添加数据库失败,但是我们还是跳转到购物车页面,这样就会出问题

操作步骤:

  1. 根据接口书写接口请求函数,需要两个参数,一个是skuId,一个是skuNum
  2. 将需请求成功的购物车组件拷贝到pages目录下
  3. 该组件是路由组件,所以进行路由注册
  4. 创建新的模块shopcart专门存放购物车相关的数据,写vuex,不要忘记将模块化的vuex最终合并到主文件中

async函数:

  1. 该函数被称作异步函数,一般内部都是有异步操作的
  2. 该函数的返回值一定是promise实例对象,不看return
  3. return的结果如果是非promise对,那么该promise的状态一定式成功的,成功的结果就是return的结果
  4. return的结果如果是promise对象,那么要看这个return后面的promise对象是成功的还是失败的
    • 如果return的promise对象是成功的,那么promise对象就是成功的,成功的结果就是return的promise的成功结果
    • 如果return的promise对象是失败的,那么promise对象就是失败的,失败的原因就是return的promise的失败原因
  5. 如果没有return结果而是抛出错误,promise也是失败的,原因就是抛出的错误原因

请求接口函数:

// 添加购物车的请求接口函数:/api/cart/addToCart/{ skuId }/{ skuNum }
export const reqAddOrUpdateShopCart = (skuId,skuNum)=>{
  return request({
    url:`/cart/addToCart/${ skuId }/${ skuNum }`,
    method:'post'
  })
}

路由配置:

{
  path:'/saddcartsuccess',
  component:AddCartSuccess
},

vuex文件:

  1. 该文件只有actions函数,因为不需要存储数据
  2. 因为dispatch的时候,只能传递两个参数,所以需要携带的参数skuId和skuNum需要通过对象的形式传递,在接收的时候也需要对象的形式接收
  3. async如果返回的是字符串,则返回的永远都是成功状态的promise实例对象,所以当请求失败的时候,这里返回了一个失败的promise对象
import {reqAddOrUpdateShopCart} from '@/api'
const state = {}
const mutations = {}
const actions = {
  // 这个发送请求的函数比较特殊,因为没有获取数据,转交给mutations来存储数据
  // dispath只能传递两个参数,一个是要派发的任务,另一个就是对象,所以这里多个参数,提前使用解构赋值拿出来
  async addOrUpdateShopCart({commit},{skuId,skuNum}){
    const result = await reqAddOrUpdateShopCart(skuId,skuNum)
    // 这种写法是可以的,但是async函数返回的promise将永远成功,不符合常理,promise实例如果返回非promise实例,则该promise实例的状态永远都是成功的
    // if(result === 200){return 'ok'} else {return 'failed'}
    if(result.code === 200){
      return 'ok'
    }else{
      return Promise.reject(new Error('failed'))
    }
  },
}
const getters = {}
export default {
  state,mutations,actions,getters
}

跳转到购物车的回调函数:

  1. 执行dispatch的时候,使用try-catch的形式来处理可能失败的情况
  2. 在传递参数的时候,因为只能两个参数所以第二个参数以对象的形式传递,千万不要忘记对象是键值对的形式
  3. 向后台发送请求添加购物车是否成功的时候携带的参数跟跳转到成功购物车页面需要的参数不一样,购物车页面要的是skuNum(数量)和skuInfo(详情)
    • 数量直接通过query参数传递
    • 但是详情比较复杂是一个对象,所以利用本地存储的形式,但是在传递对象的时候不要忘记使用JSON.stringify获取的时候使用JSON.parse

注意:这里使用的是async函数

async addShopCart(){
  // 第一步发送请求添加购物车
  try {
    // 因为addOrUpdateShopCart函数是async函数,所以执行,有可能两种结果,一个是成功的promise实例,一个是失败的promise实例
    await this.$store.dispatch('addOrUpdateShopCart',{skuId:this.skuId,skuNum:this.skuNum})
    alert('添加购物车成功,准备跳转到购物车页面')
    // 第二步:根据请求添加购车返回信息决定是否跳转到添加购物车成功页面
    // 跳转到购物车页面要携带两个东西,一个是数量,一个是商品的详情,数量直接通过参数带过去,详情因为是复杂信息存储到本地
    this.$router.push('/saddcartsuccess?skuNum='+this.skuNum)
    // sessionStorage浏览器关闭消失,localStorage一直存在
    sessionStorage.setItem('SKUINFO_KEY',JSON.stringify(this.skuInfo))
  } catch (error) {
    alert(error.message)
  }
}

添加购物车成功之后,在成功页面展示数据

  1. 在data中定义需要的数据
  2. 在beforeMount中将数据获取出来
  3. 使用数据展示数量,展示名字,展示图片即可
  4. 解决图标显示问题:将需要的iconfont.css和fonts字体目录拷贝到public下就可以正常工作,因为iconfont.css在reset.css中已经引入过了
  5. 使用<router-link>替换<a>实现跳转到详情页面,跳转到详情需要一个params参数,表示是那种商品,然后再Detail组件中,mounted会发送请求获取数据

添加购物车成功之后获取数据:

export default {
  name: 'AddCartSuccess',
  data(){
    return {
      skuNum:'',
      skuInfo:{}
    }
  },
  beforeMount(){
    this.skuNum = this.$route.query.skuNum
    this.skuInfo = JSON.parse(sessionStorage.getItem('SKUINFO_KEY'))
  }
}

重新跳转到详情页面:

<router-link :to="`/detail/${skuInfo.id}`" class="sui-btn btn-xlarge">查看商品详情</router-link>

购物车页面

从购物车成功页面跳转到购物车结算页面

  1. 使用提供的路由组件ShopCart拷贝到pages下,然后配置路由信息,点击去购物车结算使用<router-link>进行跳转
  2. 调整静态页面的css结构,百分比分别是:15,35,10,17,10,13

跳转到购物车结算页面:

<router-link to="/shopcart" >去购物车结算 > </router-link>

获取数据展示结算页面

  1. 编写请求接口函数
  2. 引入请求接口函数,编写Vuex获取数据
  3. ShopCart组件挂载后从Vuex中获取数据

请求接口函数别忘记暴露出去:

// 获取购物车信息的请求接口函数:/api/cart/cartList
export const reqShopCartInfo = ()=>{
  return request({
    url:'/cart/cartList',
    method:'get'
  })
}

将派发请求定义成一个方法,这样以后只需要调用请求就可以发送请求获取数据:

export default {
  name: 'ShopCart',
  methods:{
    // 派发请求定义成一个方法,方便之后使用
    getShopCartInfo(){
      this.$store.dispatch('getShopCartInfo')
    }
  },
  mounted(){
    this.getShopCartInfo()
  }
}

问题:通过network中查看,请求发送成功,但是数据中data:[]

  1. 添加购物车的时候向数据库存储数据,但是没有给数据库一个标识
  2. 在获取数据的时候不知道该获取谁的

生成临时标识

注意:临时标识就是用户没有登陆的时候使用的标识,临时标识在请求拦截器中,添加到请求头中,这样在访问后台的时候,每次请求都会携带这个标识

  1. 在store目录下创建一个user模块,该模块负责存储用户临时标识信息,引入工具方法生成uuid,然后存储在state中(不要忘记将该模块引入主模块)
// 引入和用户相关的工具包
import { getUserTempId } from '@/utils/userabout'
const state = {
  userTempId: getUserTempId()
}
const mutations = {}
const actions = {}
const getters = {}
export default {
  state,mutations,actions,getters
}
  1. 创建utils目录,在该目录下创建userabout.js定义和用户相关的工具函数
// uuid是一个依赖包,不需要下载,直接引入即可
import { v4 as uuidv4 } from 'uuid'
// 这个函数专门用来生成用户的唯一标识,每个浏览器拥有的都是相同的,因为存储到了lcoalStorage中
export const getUserTempId = ()=>{
  // 先从localStorage获取
  let userTempId = localStorage.getItem('USERTEMPID_KEY')
  // 如果没有获取到则返回null
  if(!userTempId){
    // 如果没有我就自己生成一个uuid,然后存储起来,这样以后获取都是从localStroage中获取,就获取到的都是一样的了
    userTempId = uuidv4()
    localStorage.setItem('USERTEMPID_KEY',userTempId)
  }
  // 需要存储到仓库中,所以返回出去
  return userTempId
}
  1. 在封装的axios中请求拦截器中添加请求头,这样就能在跳转到购物车页面获取到数据
// 如果需要给axios添加额外的功能,或者给请求头添加额外的信息,必须使用到请求拦截器和响应拦截器
server.interceptors.request.use((config) => { // 请求拦截器也有一个失败的回调,但是一般没有用,因为失败了就没有下文了
  // 在发送请求之前从大仓库中查看是否有唯一的userTempId,注意这里是一个模块,而不是组件,所以不能直接使用this.$store,所以要引入store
  const userTempId = store.state.user.userTempId
  if(userTempId){
    // 添加的请求头必须是userTempId
    console.log(userTempId)
    config.headers.userTempId = userTempId
  }
  // 添加额外的功能,或者添加特殊的请求头,这里执行nprogress的start
  nprogress.start()
  return config // 将配置对象返回,否则请求无法真正发出
})

购物车页面的数据展示

  1. 使用getters简化从Vuex中获取数据
  2. 因为数据结构很奇怪,所以使用计算属性继续简化出来要遍历的数据
  3. 展示数据:计算总价,计算已经选择的商品,计算全选,注意:全选按钮,没有指定vlaue,也没有使用数组接收,那么默认收集的是checked,所以全选按钮使用v-model

全选按钮的绑定:

<div class="select-all">
  <!-- 使用v-mode进行双向数据绑定,在多选框中,指定了value然后使用数组接收,但是,对于checkbox,是单个的,v-model没有使用数组接收,则收集的是checked属性即布尔值,而不是value -->
  <input class="chooseAll" type="checkbox" v-model="isCheckAll" />
  <span>全选</span>
</div>

计算属性需要计算的值:

// shopcartVuex中使用getters简化数据获取
const getters = {
  cartInfo(state){
    // 获取到数组的第一项,只有一项,然后避免假报错
    return state.shopCartInfo[0] || {}
  }
}
// 在ShopCart中使用计算属性获取
computed: {
  ...mapGetters(["cartInfo"]),
  // 继续计算出要遍历的数组
  cartInfoList() {
    // 同样要避免假报错
    return this.cartInfo.cartInfoList || [];
  },
  // 计算已经选中的商品
  checkedNum() {
    // 第一个return是返回的值
    return this.cartInfoList.reduce((prev, item) => {  
      // 被选中为1,没有选中为0,就是false
      if (item.isChecked) {
        // 这个是reduce中满足条件的return
        prev += item.skuNum;
      }
      return prev
    }, 0);
  },
  // 计算总价
  allMoney() {
    return this.cartInfoList.reduce((prev, item) => {
      if (item.isChecked) {
        prev += item.skuNum * item.skuPrice;
      }
      return prev
    }, 0);
  },
  // 计算全选是否选中,这个选中是可以修改的,所以使用完整写法
  isCheckAll: {
    // 读方法
    get() {
      return this.cartInfoList.every((item) => {
        // 每一项都被选中的时候,则全选为true,只要有一项方法false,则结果为false
        return item.isChecked
      });
    },
    // 写方法
    set(){

    }
  },
},

修改购物车数据

购物车交互分析

  1. 用户购物车展示的数据都是从数据库获取的,在购物车页面修改信息,需要修改数据库的数据
  2. 数据库的数据修改之后,ShopCart组件重新发送请求,然后拿到新的数据,重新展示

注意:所以购物车的页面只要修改就要向后台发送请求

修改购物车商品数量

接口请求函数,这个接口请求函数已经写过了就是添加购物车的接口

  1. 接口传递skuNum是正数则代表的是增加的数量
  2. 接口传递skuNum是负数则代表的是减少的数量

要注意:

  1. 点击+或者-按钮,传递的值时变化的量
  2. 而直接在输入框输入,得到的是最终量

给按钮和输入框添加事件:

<li class="cart-list-con5">
  <a
    href="javascript:void(0)"
    class="mins"
    @click="changeCartNum(cartInfo, -1, true)"
    >-</a
  >
  <input
    autocomplete="off"
    type="text"
    :value="cartInfo.skuNum"
    minnum="1"
    class="itxt"
    @change="changeCartNum(cartInfo, $event.target.value * 1, false)"
  />
  <a
    href="javascript:void(0)"
    class="plus"
    @click="changeCartNum(cartInfo, 1, true)"
    >+</a
  >
</li>

数量修改的回调函数:

// 购物车数量的方法
// 第一个参数就是购物车展示的对象,disNum如果点击的是加号和减号则为1和-1,第三个参数标记是点击的还是输入的
// 如果点击按钮得到是变化的量,如果是失去焦点进来的则disNum是最终的数量
async changeCartNum(cartInfo, disNum, flag) {
  // 原来的值
  let originNum = cartInfo.skuNum;
  // 触发按钮进来的
  if (flag) {
    // 小于1的情况就是有1,然后点击了-1,然后比1小,就修正,传递过来的内容,显示的结果最终为1,就是originNum+disNum = 1
    if (originNum + disNum < 1) {
      disNum = 1 - originNum;
    }
  } else {
    // 用户输入进来的
    if (disNum < 1) {
      // 如果用户输入最终量小于1,就让最终量等1,那么disNum + originNum = 1,让输入的变成计算出的数字,最后的结果就是1
      disNum = 1 - originNum;
    } else {
      disNum = disNum - originNum;
    }
  }
  // 到这里disNum就是我们需要的增量,发送请求就跟添加到购物车是一样的,使用try-catch处理
  try {
    await this.$store.dispatch("addOrUpdateShopCart", {
      skuId: cartInfo.skuId,
      skuNum: disNum,
    });
    alert('修改成功')
    this.getShopCartInfo();
  } catch (error) {
    alert(error.message);
  }
},

修改购物车的选中状态单个

  1. 写请求接口函数
  2. 写Vuex发送请求
  3. 添加事件发送请求,根据原来的选中状态决定修改的选中状态

接口请求函数:

// 修改购物车的选中状态:/api/cart/checkCart/{skuID}/{isChecked},isChecked为0表是不选中,isChecked为1表示选中
export const reqUpdateCartIscheck = (skuId,isChecked)=>{
  return request({
    url:`/cart/checkCart/${skuId}/${isChecked}`,
    method:'get'
  })
}

Vuex中的发送请求:

// 修改购物车的选中状态
async updateCartIscheck({commit},{skuId,isChecked}){
  const result = await reqUpdateCartIscheck(skuId,isChecked)
  if(result.code === 200){
    return 'ok'
  }else{
    return Promise.reject(new Error('checked change failed'))
  }
}

点击选框的回调函数:

async updateOneCheck(cartInfo){
  const originIsChecked= cartInfo.isChecked
  // 以前是选中的就设置为0,以前不是选中的就设置为1,传递的参数0表示不选中,1表示选中
  const isChecked = originIsChecked ? 0 : 1
  try{
    await this.$store.dispatch('updateCartIscheck',{skuId:cartInfo.skuId,isChecked:isChecked})
    alert('修改成功')
    // 重新获取购物车请求
    this.getShopCartInfo()
  }catch(error){
    alert(error.message)
  }
}

修改购物车的选中状态多个(难点)

  1. 没有用于全选和全部选按钮的接口,所以这里借用单选的接口来实现
  2. 要使用的api是promise.all()

回顾Promise.all()

  1. 功能:批量处理多个promise对象
  2. 参数:promise对象的数组
  3. 返回值:返回一个新的promise对象,只有所有的promise都成功的才成功,只要有一个失败了就直接失败
    • 新的promise对象成功的结果:是参数promis对象数组当中每个promise对象成功的结果组成的数组
    • 新的promise对象的失败的原因:是参数paromise队形数组中第一个失败的promise对象的失败原因

全选按钮使用v-model收集了isCheckAll,当该属性被修改的时候会调用对应的set方法,所以在计算属性的set方法中完成:

// 计算全选是否选中,这个选中是可以修改的,所以使用完整写法
isCheckAll: {
  // 读方法
  get() {
    return this.cartInfoList.every((item) => {
      // 每一项都被选中的时候,则全选为true,只要有一项方法false,则结果为false
      return item.isChecked;
    });
  },
  // 通过这个方法进行全选操作
  async set(value) {
    // 第一个参数就是新的值
    try{
      // 接收到promise.all()返回的新的promise实例
      await this.$store.dispatch('updateCartIscheckAll', value ? 1 : 0)
      alert('修改成功')
      this.getShopCartInfo()
    }catch(error){
      console.log(error.message)
    }
  },
},

对应的Vuex,借用其他请求:

// 修改购物车的选中状态
async updateCartIscheck({commit},{skuId,isChecked}){
  const result = await reqUpdateCartIscheck(skuId,isChecked)
  if(result.code === 200){
    return 'ok'
  }else{
    return Promise.reject(new Error('checked change failed'))
  }
},
// 全选和全部选:这里使用promiseall来实现,采用对那个修改的接口去修改多个,但是真正不是这样的,真正应该使用一个修改多个的接口,但是现在没有
// 没有添加async updateCartIscheckAll返回的结果是Promise.all(promises)返回的新的promise
// 添加了async updateCartIscheckAll返回的是异步函数返回的promise,虽然返回的不是同一个promise但是最终的结果是一样的
// 一位内async函数返回的promise,最终成功或者失败看的是return的Promise.all()返回的promise
async updateCartIscheckAll({getters,dispatch},isChecked){
  const promises = [] 
  // 通过getters获取到所有购物车的信息
  getters.cartInfo.cartInfoList.forEach((item)=>{
    // 如果传递过来的和原来就是一样的,那么就不修改
    if(item.isChecked === isChecked) return
    // 借用单选的api去发送请求
    const promise = dispatch('updateCartIscheck',{skuId:item.skuId,isChecked:isChecked})
    promises.push(promise)
  })
  // 返回结果,如果都成功返回的就是一个promise实例,如果有一个失败就返回失败的promise实例
  return Promise.all(promises)
}

删除单个的购物车信息

原理跟修改单选框一样

  1. 请求接口函数
  2. Vuex中的异步请求
  3. 点击触发事件回发送请求进行删除

请求接口函数:

// 删除单个购物车信息/api/cart/deleteCart/{skuId},注意请求方式和参数
export const reqDeleteCart = (skuId)=>{
  return request({
    url:`/cart/deleteCart/${skuId}`,
    method:"delete"
  })
}

Vuex中的action:

// 删除单个的购物车信息
async deleteCart({commit},skuId){
  const result = await reqDeleteCart(skuId)
  if(result.code === 200){
    return 'ok'
  }else{
    return Promise.reject(new Error('delete failed'))
  }
}

事件的回调:

// 删除单个的购物车信息
async deleteOne(cartInfo){
  try{
    await this.$store.dispatch('deleteCart',cartInfo.skuId)
    alert('删除成功')
    this.getShopCartInfo()
  }catch(error){
    alert(error.message)
  }
}

删除选择中的购物车信息

原理跟全选和全部选一样

action中的代码:

// 删除选中的购物车信息
async deleteCartAll({getters,dispatch}){
  const promises = []
  getters.cartInfo.cartInfoList.forEach((item)=>{
    // 被选中为1,因该要删除,要执行,所以取反,没有白选中的return
    if(!item.isChecked) return
    const promise = dispatch('deleteCart',item.skuId)
    promises.push(promise)
  })
  return Promise.all(promises)
}

点击删除按钮触发的事件回调:

// 删除被选中的购物车信息
async deleteAll(){
  try{
    await this.$store.dispatch('deleteCartAll')
    alert('删除成功')
    this.getShopCartInfo()
  }catch(error){
    alert(error.message)
  }
}
「已注销」
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实战项目-电商商城前台-（学习尚硅谷的）尚品汇
drhrht的博客
07-31 6308
但是会出现卡顿现象。当微信支付弹窗弹出，就要持续发获取订单支付状态的请求（持续是因为并不知道用户什么时候支付，所以需要持续发请求，直到能获取到支付状态），若接收到支付成功，则路由跳转至支付成功页面。项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错，有了map文件就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。例如，为防止，不经过某路由就直接在地址栏输入本路由地址而跳转至本路由，导致本路由获取不到前面路由的某些数据，所以给本路由加路由独享守卫。...
学Vue，看这篇就够了-Vue个人学习笔记汇总(含资料代码项目地址)
m0_67402564的博客
03-06 337
注意 本人写的这些笔记以及源码无任何收益，一开始纯粹是为了自己学习才写的，又想着方便大家才公开的，所以禁止无礼貌白嫖还话多以及态度不友好交流 一、视频链接 视频链接 最全最新Vue、Vuejs教程，从入门到精通 此视频是Vue2教程，讲师coderwhy，很适合新手小白，知识点包括 vue基础指令 Webpack 组件化开发 Vue-cli vue-router es6 Promise 前端模块化 axios Vuex 项目实战 个人总结了超详细笔记，不看视频也能看懂的，由于笔记较多，在此做一
Vue.js实现的购物车功能详解
12-12
本文实例讲述了Vue.js实现的购物车功能。分享给大家供大家参考，具体如下： 使用计算属性，内置指令，方法等基础知识开发购物车。 需求分析：展示一个已经加入购物车的商品列表，包含商品名称、商品单价、购买数量和操作，以及最后确定是否选中商品的功能，总价格为选中商品的价格，够买数量可以增加减少，商品可以从购物车中移除。效果如图所示： ——实例来自《Vue.js实战》第五章 逻辑整理：vue实例定义一个数组list存放商品信息，定义方法与减少按钮，增加按钮等联系，动态改变商品数量，通过handleRemove()移除list中的值；利用each()遍历所\u6709type='checkbox'的input
尚硅谷Promise笔记
LQlove1的博客
12-15 628
主要笔记了Promise的api，和常见的关键问题，还有手写promise，和async和await的实战使用
第六阶段-尚硅谷书城案例-购物车模型用Session实现
CXY_C的博客
12-30 345
1.购物车 思路分析： 1.1、购物车模型的创建 1.1.1、创建购物车商品项 CartItem public class CartItem { private Integer id; private String name; private Integer count; private BigDecimal price; private BigDecimal totalPrice; } 1.1.2、创建购物车对象 Cart package com.aig
vue实现购物车功能
LinBM123的博客
05-10 299
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style> input[type="checkbox"]{ width: 18px; height: ...
Vue3 基础知识点汇总 自学笔记，记录难点 和 新知识点
艾米的猫儿的博客
07-31 300
vue3
vue学习笔记（超详细）
jiey0407的博客
03-09 5570
文章目录 一. Vue基础 认识Vue.js Vue安装方式 Vue的MVVM 二. Vue基础语法 生命周期 模板语法 创建Vue, options可以放什么 语法 综合 v-on v-for遍历数组 v-model表单绑定 v-model结合radio类型使用 v-model结合checkbox类型使用 v-model结合select类型使用 值绑定 修饰符 检测数组更新 计算属性 computed 计算属性setter和getter computed / meth
2022_黑马vue笔记
qq_43420617的博客
03-23 2805
vue2 vue插件 1.Vue Snippets 2.Vetur vue 的两个特性 数据驱动视图： 数据的变化会驱动视图自动更新 好处：程序员只管把数据维护好，那么页面结构会被 vue 自动渲染出来！ 双向数据绑定： 在网页中，form 表单负责采集数据，Ajax 负责提交数据。 js 数据的变化，会被自动渲染到页面上 页面上表单采集的数据发生变化的时候，会被 vue 自动获取到，并更新到 js 数据中 MVVM 数据驱动视图和双向数据绑定的底层原理是 MVVM（Mode 数据源
Vue.js实现开发购物车功能的方法详解
12-10
本文实例讲述了Vue.js实现开发购物车功能的方法。分享给大家供大家参考，具体如下： 购物车一般包含商品名称、单价、数量等信息，数量可以任意新增或减少，商品项也可删除，还可以支持全选或多选： 我们把这个小项目分为三个文件： index.html （页面） index.js （Vue 脚本） style.css （样式） 1 index.js 首先在 js 中初始化 Vue 实例，整体模板如下： var app = new Vue({ el: '#app', data: { ... }, mounted: function () { ... }, comput
Vue实现购物车功能
08-30
本篇文章主要分享了Vue实现购物车功能的实例代码。具有很好的参考价值。下面跟着小编一起来看下吧
在vue中实现一个简单的购物车思路
weixin_43950643的博客
05-26 1824
记录一下学习购物车的思路 首先把所需要的数据存入vuex中 ...mapState({cartFoods:'cartFoods',info:'info'}); //cartFoods表示购物车上面所显示的食物列表；info表示购物车下面显示的配送费和最低消费，即获取商家信息列表的数据 ...mapGetters({totalCount:'totalCount',totalPrice:'totalPrice'}) //totalCount表示购物车中的食物列表数量，totalPrice表示总价钱 其.
购物车下单实现思路【vue】
weixin_46738453的博客
03-05 1045
需要保存用户的选中状态，这个选中状态只是保存在vuex，并没有保存到后端，因为选中状态保存在前端所以购物车的数据都是从vuex中拿到的。1、当点击结算按钮的时候跳转到订单页面，将已经选择的商品的id去向后端发送网络请求拿到具体的信息。2、请求用户余额和返点余额，如果用户已经填写收货地址，就创建订单。3、如果用户的余额和返点余额抵扣后没有剩余需要支付的则直接生成订单。4、如果还有剩下需要支付的则弹出付款界面使用微信支付。这个方法用来修改购物车中的某个数据 如选中状态。
二、Vue实现购物车功能
sunnnnh的博客
03-11 304
根据表单的双向绑定，实现购物车的基本功能： 计算总价 商品增加 商品删除 全选 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title&g.
vue实现简单的购物车功能
灰海
12-05 199
请看代码： <div id="app"> <ul> <!-- 单个复选框的情形 --> <input type="checkbox" v-model="isCheckAll" @change="handler" /> 全选/全不选 <button @click="antiSelect">反选<
vue实现简单购物车功能
Crazy Taylor
12-23 390
vue购物车功能小白之作，大神勿喷初始效果图操作效果图HTML部分CSS部分JavaScript部分 小白之作，大神勿喷 小白之作，大神勿喷。这个小dome虽然不难，但还是有点不熟练。本次练习是本地模拟数据。废话不多说，上图上代码！ 初始效果图 操作效果图 HTML部分 <!DOCTYPE html> <html> <head> <meta...
尚硅谷Vue尚品汇项目-解决购物车刷新页面后数据渲染失败的问题
never_stop_study的博客
10-08 448
尚硅谷Vue尚品汇项目-解决购物车刷新页面后数据渲染失败的问题
Vue前端路由详解——以Ruoyi框架为案例学习
最新发布
警警的博客
09-03 1021
Ruoyi框架前端路由通过Vue Router实现，支持静态路由和动态路由的配置，通过路由守卫实现权限控制等需求，采用路由懒加载提高应用性能，并通过路由元信息存储自定义信息。这些特性共同构成了Ruoyi框架前端路由的完整体系，为开发者提供了灵活、强大的路由管理能力。
Vue电商项目实践：商品飞入购物车特效解析
项目使用了vue-cli3作为基础架构，并结合Vue全家桶（包括vue、vuex和vue-router）以及Vant UI框架，还引入了axios、fastclick、better-scroll、twix.js、pubsub.js、moment.js和vue-amap等多个实用的第三方库。项目...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值