Vue 商城的一些小demo(后台添加商品、前台购物车、本地存储的使用)

demo   商城后台,添加一种商品

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 引入vue.js -->
        <script src="js/vue.js"></script>
    </head>
    <body>

    <div id="app"></div>

    <script>

        new Vue({
            el:‘#app‘,
            template:`
                <div>
                    <form>
                        商品名称:<input type="text" v-model=‘goods_name‘/>  <!--双向绑定-->
                        商品价格:<input type="text" v-model=‘goods_price‘/>
                        <button @click=‘addGoods‘>添加商品</button>
                    </form>
                    <ul>
                        <li v-for=‘goods in goodsList‘>商品名称:{{goods.goods_name}}  -------  商品单价:{{goods.goods_price}}</li>
                    </ul>
                </div>
            `,
            data(){
                return{
                    goodsList:[  //商品列表,一个对象数组
                        {goods_name:‘桃子‘,goods_price:10},
                        {goods_name:‘梨子‘,goods_price:20},
                        {goods_name:‘李子‘,goods_price:30},
                        {goods_name:‘杏子‘,goods_price:40},
                    ],
                    goods_name:‘‘,
                    goods_price:‘‘
                }
            },
            methods:{
                addGoods(){
                    this.goodsList.push({goods_name:this.goods_name,goods_price:this.goods_price});  //添加商品。更新data中的变量时,v-for绑定的<li>也会同步更新
                    this.goods_name=‘‘;  //清空数据
                    this.goods_price=‘‘;
                }
            }

        })

    </script>        

    </body>
</html>
 

后台商品的添加、修改、下架操作都差不多。

vue是数据驱动的,页面使用vue是为了数据、视图的同步,

比如使用v-for将data中的一个对象数组绑定到一个无序列表,对象数组变化时,绑定的无序列表会自动同步变化;

无需我们写代码用js、jq操作dom,添加、修改、移除<li>,更加便捷。

demo   商城前台,添加商品到购物车、从购物车中删减商品

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 引入vue.js -->
        <script src="js/vue.js"></script>
    </head>
    <body>

    <div id="app"></div>

    <script>

        new Vue({
            el:‘#app‘,
            template:`
                <div>
                    <p>商品列表</p>
                    <!-- 商品列表 -->
                    <ul>
                        <li v-for=‘(goods,index) in goodsList‘>
                            商品id: {{goods.goods_id}}  ---
                            商品名称:{{goods.goods_name}}  ---
                            商品单价:{{goods.goods_price}}  ---
                            <button @click=‘addToCart(index)‘>添加到购物车</button>
                        </li>
                    </ul>

                    <p>购物车</p>
                    <!-- 展示购物车中商品 -->
                    <ul>
                        <li v-for=‘(goods,index) in cart‘>
                            商品id:{{goods.goods_id}}  ---
                            商品名称:{{goodsList.find(ele=>ele.goods_id==goods.goods_id).goods_name}} ---
                            商品单价:{{goodsList.find(ele=>ele.goods_id==goods.goods_id).goods_price}} ---
                            购买数量:{{goods.goods_amount}} ---
                            <button @click=‘removeFromCart(index)‘>从购物车中移除(-1件)</button>
                        </li>
                    </ul>
                </div>
            `,
            data(){
                return{
                    goodsList:[  //商品列表,一个对象数组
                        {goods_id:1,goods_name:‘桃子‘,goods_price:10},
                        {goods_id:2,goods_name:‘梨子‘,goods_price:20},
                        {goods_id:3,goods_name:‘李子‘,goods_price:30},
                        {goods_id:4,goods_name:‘杏子‘,goods_price:40},
                    ],
                    cart:[]  //购物车
                }
            },
            methods:{
                //添加到购物车
                addToCart(index){ //传入商品id
                    const goods=this.goodsList[index];
                    const result=this.cart.find(ele=>ele.goods_id==goods.goods_id);  //ele是一个临时变量,表示数组的一个元素,
                    if(result)  //如果不为null,说明购物车中已经有了此种商品
                        result.goods_amount+=1;  //数量+=1
                    else  //如果购物车中还没有这种商品
                        this.cart.push({goods_id:goods.goods_id,goods_amount:1}) //往购物车中添加一个对象
                },
                //从购物车中移除(该种商品减少1件)
                removeFromCart(index){  //传入商品id
                    const result=this.cart[index];
                    result.goods_amount-=1; //购物车中该种商品至少有1件,不用判断
                    if(result.goods_amount==0)
                        this.cart.splice(index,1);   //pop是弹出数组的最后一个元素,splice是弹出指定的元素。必须指定1,只弹出一个元素,不然会有bug
                }
            }

        })

    </script>        

    </body>
</html>

写在一个Vue对象中,看起来很乱,可以封装成多个组件,

比如商品的展示封装为一个组件,购物车封装为一个组件,引入组件即可,方便阅读、也好复用。

demo   本地存储

上面2个demo都有个问题,刷新页面,Vue对象销毁又重建,添加到商品列表的数据、购物车中的数据都会丢失。

用户不小心刷新了页面,数据都丢失了,重新弄,十分麻烦。

可以将数据存储在浏览器的本地存储中,刷新页面时数据还在,不会丢失。

就在上一个demo的基础上写

    watch:{
        cart:{ //监听cart变量
            handler(){
                window.localStorage.setItem(‘cart‘,JSON.stringify(this.cart));  //先使用JSON序列化购物车中的数据,再将数据存储到本地存储中
            },
            deep:true,  //深度监听
        }
    },
    created() {  //创建组件时(刷新页面)
        this.cart=JSON.parse(window.localStorage.getItem(‘cart‘));  //从本地存储中获取数据,反序列化,恢复数据
    }

看到购物车中的数据已经存储到浏览器的本地存储中。

还有个问题

添加的商品、购物车中的数据,这些数据变化都要传给后端,由后端持久化到数据库中;

视图需要的商品列表这些数据,也需要从后端获取(后端查询数据库,然后将数据传给视图)

vue如何与后端进行交互?后续再说。

原文地址:https://www.cnblogs.com/chy18883701161/p/12629636.html

时间: 2024-09-29 10:50:26

Vue 商城的一些小demo(后台添加商品、前台购物车、本地存储的使用)的相关文章

电商网站中添加商品到购物车功能模块2017.12.8

前言: 电商网站中添加商品到购物车功能模块实现: 根据前一篇博客的介绍,我们看到淘宝网站为了保证购物车数据的同步,直接是强制用户必须登录才可以将商品加入购物车.而京东网站是用户在未登录的状态下也可以将商品加入到购物车,此时这个是保存在了cookie中,然后用户登录后,根据商品的id判断商品是否存在,将两个购物车的商品合并,形成最终的购物车商品. 本篇文章分两个模块,分别看下这两个功能是如何实现的: 1.必须在用户登录的前提下,才可以将商品加入到购物车列表 我们今天先看下淘宝网站的状态下的添加商品

添加商品到购物车add_to_cart.php

<?php session_start();//启动session $goods_id = $_POST['goods_id'];//获取商品id $number = $_POST['num'];//获取商品数量 if(empty($_SESSION["gwc"])) { //1.购物车是空的,第一次点击添加购物车 $arr[$goods_id] =array( 'goods_id' => $goods_id, 'num' => $number ); $_SESSIO

webpack+vue+vueRouter模块化构建小demo实例超详细步骤(附截图、代码、入门篇)

说明:本demo使用yarn代替npm指令来下载一系列依赖,有详细指令说明:使用WebStorm下Terminal来输入指令: >开始(确认已经安装node环境和yarn包管理工具) 1.新建项目文件名为vuedemo 2.yarn add init  初始化项目 >安装项目依赖 3.yarn add vue 安装最新版vue 4.yarn add webpack webpack-dev-server  安装webpack,webpack-dev-server(是一个小型的Node.js Ex

关于新商家后台添加商品后,一体机上不显示分类问题解决流程

1.新后台有一.二级分类之分,老后台创建的分类默认是二级分类,一体机上显示商品不显示分类,首先查看后台商品是否绑定的是一级分类 2.一体机默认展示的是二级分类 最后同步数据,就能看到了 原文地址:https://www.cnblogs.com/yhbc-blibao/p/11106426.html

jQuery 特效之 添加商品到购物车

前台页面 <link href="MyCar.css" rel="stylesheet" /> <script src="../jquery.js"></script> <script> $(function () { $(".Car").click(function () { var path = $(".dh").attr("src")

【Selenium】利用Cookies登录京东并添加商品至购物车以及结算

import json import unittest from time import sleep from selenium import webdriver from selenium.webdriver.common.keys import Keys def get_JD_cookies(): browser = webdriver.Firefox() browser.maximize_window() browser.implicitly_wait(2) url = "https://

Yii 通过widget小物件生成添加表单

通过widget小物件创建添加商品的表单 视图里,表单以endWidget();?>结束 最终效果: 把表单提交过来的信息保存到数据库中去. 补充要点: 密码表单: <?php echo $form->passwordField(模型对象,’字段’); 单选表单: <?php echo $form->radioButtonList($user_model,'user_sex',$sex,array('separator'=>'&nbsp','labelOptio

Java Web学习(33): 阶段小项目使用MVC模型实现购物车效果

项目概述 前面的时候我写过一个商品浏记录的小例子,这一次我们使用实现购物车效果.前面的例子是: http://blog.csdn.net/erlian1992/article/details/52047258.这一次在此基础上来采用的是MVC三层模型实现 (JSP+Servlet+dao)来实现这个小项目. 三层架构: JSP视图层 Servlet控制层 dao模型层 DB数据库层 编码实现: 首先先来数据库脚本items.sql: /* Navicat MySQL Data Transfer

IOS之UI--小实例项目--添加商品和商品名(纯代码终结版)

*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } a { color: #4183C4; } a.absent { color: #cc0000; } a.anchor { display: block; padding-left: 30px; margin-left: -30px; cursor: pointer; position: absolute