分别使用Vue和原生JS实现完整功能购物车

我们今天将实现两种方式来比较VUE语言和原生JS 之间的差距 从而更好的理解javascript语言

首先使用node的express构造购物车数据

var express = require('express')
var app = new express;
app.use('/public',express.static('./public'))

app.all('*', function (req, res, next) {
    //设为指定的域   解决跨域
    // Access-Control-Allow-Origin
    res.header('Access-Control-Allow-Origin', "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header('Access-Control-Allow-Credentials', true);
    res.header("X-Powered-By", ' 3.2.1');
    next();   //进行下一步
});


app.get('/carlist',function(req,res){
    let carlist = [
        {
            id:1,
            name: 'OnePlus 7T Pro 芳纶纤维全包保护壳',
            imgUrl: "http://127.0.0.1:8081/public/images/quanbao.png",
            price:110,
        },
        {
            id:2,
            name: 'OnePlus 7T 芳纶纤维半包保护壳',
            imgUrl: "http://127.0.0.1:8081/public/images/banbao.png",
            price:159,
        },
        {
            id:3,
            name: 'OnePlus 7T Pro 芳纶纤维全包保护壳',
            imgUrl: "http://127.0.0.1:8081/public/images/one7Tquanbao.png",
            price:159,
        },
        {
            id:4,
            name: 'OnePlus 7T Pro 芳纶纤维全包保护壳',
            imgUrl: "http://127.0.0.1:8081/public/images/one7Tquanbao.png",
            price:159,
        },
        {
            id: 5,
            name: 'OnePlus Type-C转3.55mm转接线',
            price: 32,
            imgUrl: 'http://127.0.0.1:8081/public/images/oneTC.png'
        },
         {
            id: 6,
            name: '一加Warp 闪充 Type-C 数据线',
            price: 63,
            imgUrl: 'http://127.0.0.1:8081/public/images/TYC.png'
        },
        {
            id: 7,
            name: 'OnePlus 6T 芳纶纤维保护壳',
            price: 39.90,
            imgUrl: 'http://127.0.0.1:8081/public/images/oneP6Txianwei.png'
        }, 
        {
            id: 8,
            name: 'OnePlus 6T 硅胶保护壳（红色）',
            price: 38.90,
            imgUrll: 'http://127.0.0.1:8081/public/images/oneP6Tguijiao.png'
        }, 
        {
            id: 9,
            name: 'OnePlus 6T 尼龙全包保护壳（黑色）',
            price: 39.90,
            imgUrl: 'http://127.0.0.1:8081/public/images/oneP6nilong.png'
        }, 
        {
            id: 10,
            name: 'OnePlus 6T 黑檀全包保护壳',
            price: 49.90,
            imgUrl: 'http://127.0.0.1:8081/public/images/oneP6heitan.png'
        }
    ]
    res.send(carlist)
})
var server = app.listen(8081);

其中app.all 是解决跨域问题的重要代码 以后可能多次用到
于网页中打开 网址 “http://127.0.0.1:3000/carlist” 得到想要的数据

node 模拟后台数据成功
我们首先使用Vue 框架语言 构造购物车框架

 new Vue({
                el:'#app',
                data(){
                    return {
                         num:1,
                         carList:[]
                    }
                },
                created(){
                       this.getData()
                },
                mounted(){

                },
                methods:{
                   async getData(){
                       let {data} = await axios.get('http://127.0.0.1:8081/carlist')
                       console.log(data)
                        data.forEach( item => {
                           item.checked = false
                       });
                       this.carList = data
                   }
                }
            })

这里要注意一点 我们需要给数组每个值添加属性 checked 为 false
应用到input checkbox上面就是选中状态
如图 =>

如此就可以接收到了购物车数据 将其循环到table里面 如图

给 table 设置一些样式 令其适中 美观 大方 如图
下面我们来进行每日单选框和全选框的操作
既然每个数据都有个checked 我们就可以进行操作了

                      <input type="checkbox" 
                       name="carlist"
                       v-model="item.checked"
                       @click="item.checked = !item.checked"
                       class="checkbox"
                        >

全选框亦如是

                <input type="checkbox"
                class="checkbox"
                @click="AllChecked = !AllChecked"
                v-model="AllChecked"
                >全选

两边都是相同的操作 值得说明的是 全选框绑定的是全局变量 AllChecked
监听 这个 AllChecked 变量

                        AllChecked(val){
                        console.log(this.AllChecked)
                        if(val){
                         this.carList.forEach((item)=>{
                        //    console.log(111)
                           item.checked = true
                        })
                        }else{
                         this.carList.forEach((item)=>{
                        //    console.log(111)
                           item.checked = false
                        })
                        }
                      }

经检测 全选功能实现
下面比较重要的是 加减的实现
给数据绑定个属性 num 为 1 是购物车的数量
加号 的点击效果就是 item.num ++
减号 的点击效果就是 item.num - -
关键点在于 给减法一个函数 方法 minus

                    minus(item){
                       item.num--;
                       if(item.num<1) {
                           return item.num = 1
                       }
                   }

购物车的数量不可以小于0的
下一步我们来计算小计

                  <td>
                      {{Subtotal(i)}}
                  </td>

函数值return 一个数值就好 将购物车的i 传进去

                   Subtotal(i){
                       return "￥" + (this.carList[i].price *this.carList[i].num).toFixed(2)
                   }

共选择购物车的数量 使用计算属性

                computed:{
                      totalnum(val){
                        return this.carList.length
                    }
                },

最后两个 总数 和 总价格 可以使用计算属性 得出

                    selectNum(val){
                       return  this.carList.filter(item=>item.checked===true).length
                    },

                    selectPrice(){
                        let num =0;
                         for (let i = 0; i < this.carList.length; i++) {
                             if(this.carList[i].checked === true){
                                  num += this.carList[i].price * this.carList[i].num
                             }
                             
                         }
                         return num.toFixed(2)
                    }

vue 实现完整购物车功能 可以说已经完成 vue 实现很方便 相比于原生js 的话

原生js 请敬请期待