vue2.0+axios+bootstrap+php+mysql编写购物车

最新推荐文章于 2024-07-19 11:39:44 发布

等不回天亮等时光

最新推荐文章于 2024-07-19 11:39:44 发布

阅读量1.3k

点赞数

分类专栏： vue php

本文链接：https://blog.csdn.net/Only_ruiwen/article/details/81086595

版权

vue 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

php

9 篇文章 0 订阅

订阅专栏

最近想加强一下vue的学习,毕竟是现在最火的前端框架嘛。那么,我们这次通过一个购物车的效果,让大家了解一下vue2.0中指令的基本用法。首先先看效果

这里写图片描述

我这里的服务器不采用vue-cli的脚手架生成,直接通过xmapp的apache环境。
这里写图片描述

在头部引入bootstrap.css,vue.js和axios,

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    </head>

然后添加HTML结构,
HTML

<div class="container" id="app">
            <table class="table table-bordered text-center table-hover">
                <tr>
                    <td>
                        编号
                    </td>
                    <td>
                        商品名称
                    </td>
                    <td>
                        价格
                    </td>
                    <td>
                        数量
                    </td>
                    <td>
                        购买操作
                    </td>
                    <td>
                        总计
                    </td>
                    <td>
                        操作
                    </td>
                </tr>
                <tr v-for="(data,index) in tableList">
                    <td>
                        {{data.id}}
                    </td>
                    <td>
                        {{data.name}}
                    </td>
                    <td>
                        {{data.price}}
                    </td>
                    <td>
                        {{data.number}}
                    </td>
                    <td>
                        <button class="btn" @click="add(index)">+</button>
                        <button class="btn" @click="reduce(index)">-</button>
                    </td>
                    <td>
                        {{data.price*data.number}}
                    </td>
                    <td>
                        <button class="btn btn-primary" @click="del(index)">删除</button>
                    </td>
                </tr>
                <tr>
                    <td colspan="7">
                        总计金额:<span>{{sum}}</span>
                        总计数量:<span>{{count}}</span>
                    </td>
                </tr>


            </table>
        </div>

开始编写js

            new Vue({
                el:"#app",
                data:{
                    tableList:[]
                },
                methods:{
                    add:function(i){
                        this.tableList[i].number++
                        this.tableList[i].sum = parseInt(this.tableList[i].number)*parseInt(this.tableList[i].price)
                        console.log(parseInt(this.tableList[i].price))
                    },
                    reduce:function(i){
                        var num = this.tableList[i].number--
                        if(num<=0){
                            this.tableList[i].number = 0
                        }
                        this.tableList[i].sum = parseInt(this.tableList[i].number)*parseInt(this.tableList[i].price)
                    },
                    del:function(i){
                        //这个地方是个大坑
                        var _this = this
                        var a = this.tableList[i].id
                        //这个地方是个大坑
                        var params = new URLSearchParams();
                        params.append('id', a);
                        //这个地方是个大坑
                        axios.post('static/del.php',params)
                        .then(function(res){

                            _this.tableList.splice(i,1)
                        })
                        .catch(function(res){
                            alert(2)
                        })
                    }
                },
                computed:{
                    sum:function(){
                        var all = 0
                        for (var i=0;i<this.tableList.length;i++) {
                            all += parseInt(this.tableList[i].sum)
                        }
                        return all
                    },
                    count:function(){
                        var all = 0
                        for (var i=0;i<this.tableList.length;i++) {
                            all += parseInt(this.tableList[i].number)
                        }
                        return all

                    }
                },
                mounted:function(){
                    var _this = this
                    axios.get('static/table.php')
                      .then(function (response) {
                        if(response.status==200){
                            _this.tableList = response.data
                            console.log(response.data)

                        }
                      })
                      .catch(function (error) {
                        console.log(error);
                      });
                }
            })

大家要注意,如果你是用axios发起post请求,传递参数的时候要千万小心了,你如果按照文档的方式来做就坑爹了，要注意加上以下几行代码:

                        var params = new URLSearchParams();
                        params.append('id', a);
                        axios.post('static/del.php',params)
                        .then(function(res){

                            _this.tableList.splice(i,1)
                        })
                        .catch(function(res){
                            alert(2)
                        })

我们来看下数据库结构:

这里写图片描述

看下php接口怎么写,
del.php

<?php
    $conn = mysqli_connect("localhost", "root","","axios");
    if(!$conn){
        echo "连接失败了";
    }
    $id = $_POST["id"];
    mysqli_set_charset($conn,"utf8"); 
    $sql = "delete from table_list where id='$id'";
    $res = mysqli_query($conn, $sql);

    if($res){
        echo 1; //删除成功
    }else{
        echo 2;//删除失败
    }



?>

数据加载接口,table.php

<?php
    $conn = mysqli_connect("localhost", "root","","axios");
    if(!$conn){
        echo "连接失败了";
    }
    mysqli_set_charset($conn,"utf8"); 
    $sql = "select * from table_list";
    $res = mysqli_query($conn, $sql);
    $data = array();
    while($row = mysqli_fetch_assoc($res)){
        $data[] = $row;
    }
    echo json_encode($data,JSON_UNESCAPED_UNICODE);
?>