首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【畅购商城】购物车模块之添加购物车

    购物车数据2种形态:         登录态:保存到服务器端的redis         没登录:保存在浏览器端 localStorage  搭建购物车服务:8095 步骤一:创建changgou4...= null){ //如果有,将json字符串转换购物车对象 cart = JSON.parseObject( cartStr , Cart.class)...} else { //默认为1 this.buyCount = 1; } }, 步骤三:检查+和-已完成功能 前端实现 步骤一:修改 api.js...,完成“添加到购物车”方法 //添加到购物车 addToCart : ( params ) => { return axios.post("/cart-service/carts",...Goods.vue,完成addToCartFn功能 未登录:保存到sessionStorage 登录:保存到redis 待完善功能:用户登录时,将sessionStorage保存的商品信息合并到redis

    2.2K20

    【畅购商城】购物车模块之查看购物车

    用户如果登录了,购物车存放在redis,以Cart对象字符串方式存储。...步骤二:修改CartController,添加queryCartList 方法,仅返回购物车的数据 步骤一:修改CartService,添加 queryCartList 方法, /** * *...如果没有创建一个 return JSON.parseObject(cartString, Cart.class); } 步骤三:修改CartController,添加queryCartList 方法,仅返回购物车的数据...步骤一:修改api.js 查询购物车信息 步骤二:页面加载成功后,获得购物车信息(如果登录从后端获取,如果没有登录从浏览器端获得) 步骤三:遍历显示购物车信息, 步骤四:通过计算属性,计算总价格 步骤一...:修改apiclient.js 查询购物车信息 //查询购物车 getCart : () => { return axios.get("/cart-service/carts") }

    1.2K20

    黑马瑞吉外卖之购物车功能开发(添加购物车购物车数据展示)

    黑马瑞吉外卖之购物车功能 前端界面分析 后台购物车功能逻辑实现 前端界面分析 当我们点击选择规格的时候,数据参数item会传入按钮绑定的方法 我们点击到这个按钮的时候,那么就会绑定到这个方法...这个方法会将数据给这个窗体的数据项赋值。这个diaglogFlavor其实就是定义初始化在vue的data里面。其实是可以看作一个列表。...然后整个框的下面应该就是加入购物车的选择。当我们点击机器如购物车的时候就应该是一个按钮绑定方法,这个方法一定会向后端提交数据请求。那么就是走到这里的这个方法。...最终我们就来到了实际的js里面缩写的据具体的发送请求数据的接口。 然后就是这样啦!前端后面当然会接收数据,然后根据后端返回的数据做出响应即可。...,因为这个购物车表中会添加很多的数据,我们需要按照片不同的用户来区分不同的用户的购物车,当然没非常重要的就是,如果用户登录到前台页面,所展示也就是他的id下面所关联到的购物车数据。

    1.1K20

    Vue实际的应用开发【分页效果与购物车

    }} @click.stop 阻止事件冒泡 @click.prevent 阻止事件的默认行为, <script src="vue.<em>js</em>...<em>购物车</em>组件 <em>购物车</em>组件,是做项目不可少的,面试也是,动不动就叫我上机写个<em>购物车</em>的组件,写就写咯,<em>购物车</em>时做商城项目不可少的,写好<em>购物车</em>组件会很方便,简书代码的重复性。...那么想想<em>购物车</em>组件有什么内容呢? <em>购物车</em>,是不是有:商品名称,单价,增加删减单品的数量呢?还有就是订单总金额数呢?这些是必不可少的哦!!! ?...file <em>购物车</em>组件不知道有什么也是可以去看看别人的先,看看有什么,<em>购物车</em>组件一般包含显示商品的名称,单价,购买的数量以及订单总金额,通过增加或减少商品的购买的数据,并同步更改订单的总金额。...emit方法派发的input事件,父组件监听input事件<em>中</em>传递的value值,并存储在父组件data<em>中</em>,然后父组件通过prop的形式传递给子组件value值,在子组件<em>中</em>绑定Input的value属性。

    1.1K30

    jsfind的用法_jsfind函数

    今天我们要说的是结合ES6新特性谈一下js里面的一个很好用的方法-find() 现在的前端和过去的不一样,过去的前端只要会画页面就行了,但是现在仅仅会画页面已经远远不够了,现在前端还需要会处理数据,而且还要会将数据分析分类处理...下面我们讲怎么用前端处理这块的逻辑 首先我们拿到了所有的数据这里我直接放到一个测试用的js里面存放, 要实现之前说的效果,就需要使用我们今天的主角find()方法。 find()是用来做什么的呢?...find()方法返回数组符合测试函数条件的第一个元素。否则返回undefined 在本文章需要注意的几个点: ①、第一个元素 ②、测试函数 那么如何使用呢?.../find_testcodes.js" type="text/javascript" charset="utf-8">

    11.7K30
    领券