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

学习PetShop3.0(4)购物车

终于到购物车了,在看这个之前应该已经明白了第三篇的那个模型,这样购物车基本也就明白了。 来看一下ShoppingCart.aspx这个页。 当你看好了一个宠物,比如可爱的Golden Retriever,嘿嘿,那就点add to cart按钮,这时就会跳到ShoppingCart.aspx,url里带了这个宠物的id号,根据该id号程序将该宠物放到cart里面。然后你可以再去挑别的宠物,比如一只猫(……),虽然这不是什么好主意。然后该宠物的id号又会被传到ShoppingCart.aspx,并添加到cart里面。在ShoppingCart.aspx里,你可以更改想要领养的宠物的数量,然后程序会根据你要求的数量来计算所需的钱以及该宠物是否还有剩余。在你做出决定后可以点proceed to checkout进入定单生成的环节。 上面是大体的流程。下面来看.net petshop是怎么实现这个cart的 基本的实现主要是BLL里的Cart和Model里的CartItemInfo,而Web.ProcessFlow的CartControler则负责具体的实现。想一想第三篇里的那个模型,具体到这里,每挑选一个宠物,就有一个CartItemInfo通过CartControler添加到了保存在Session里的Cart里面,最后生成定单的时候就从Session里把Cart的值取出来(CartControler有生成定单的方法,下一篇再说)。 来看一下ShoppingCart.aspx.cs里向Cart添加CartItemInfo的代码 // Create an instance of the cart controller ProcessFlow.CartController cartController = new ProcessFlow.CartController();

02

Vue状态管理——Vuex

前面我们已经介绍过父子组件之间的通信方式,父组件通过prop向子组件传递数据,子组件通过自定义事件向父组件传递数据。然而,在实际项目中,经常会遇到多个组件需要访问同一数据的情况,且都需要根据数据的变化做出响应,而这些组件之间可能并不是父子组件这种简单的关系。在这种情况下,就需要一个全局的状态管理方案。在Vue开发中,官方推荐Vuex。   Vuex是一个专门为Vue.js应用程序开发的状态管理模式。它采用集中式存储来管理应用程序中所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex也被集成到了Vue的官方调试工具vue-devtools中,提供了诸如零配置的time-travel调试、状态快照导入/导出等高级调试功能。 下图所示为Vuex的工作原理图

01

从零到部署:用 Vue 和 Express 实现迷你全栈电商应用(七)

在之前的六篇教程中我们已经基本实现了迷你全栈电商应用,相信大家对于一个全栈应用的开发已经有了一个全面的认知。但是一个追求完美的工程师是不会吝啬他的艺术创造,仅仅实现应用的功能还不能满足用户的高需求,应用的界面效果也是提高用户体验的关键因素。因此本篇教程将基于 element-ui 组件库重构项目的前端代码,改善迷你电商应用的界面效果,提高用户的体验感。虽然我们可以轻松地引入现成的组件库,但是与之对应的数据处理也值得我们注意,那我会在引入组件库的同时带大家一起踩一踩 element-ui 给我们挖的坑,毕竟踩坑才能成长嘛。

02
领券