如何将动态生成的 vuejs 数组发布到 mysql 数据库

Posted 2023-02-22

【中文标题】如何将动态生成的 vuejs 数组发布到 mysql 数据库

【英文标题】：How to post dynamically generated vuejs array to mysql database

【发布时间】：2017-06-30 12:02:36

【问题描述】：

我在我的 LARAVEL 项目中使用此代码

http://jsfiddle.net/teepluss/12wqxxL3/

商品在 cart_items 数组中动态生成。

我想知道如何遍历生成的项目并将其发布到数据库或如何将其传递给控制器​​并从那里保存。

我该怎么做呢

这是我的脚本

var app = new Vue(

http: 
  root: '/root',
  headers: 
    'X-CSRF-TOKEN': document.querySelector('#token').getAttribute('value')
  
,

el: '#wrapper',
data: 
    cart_items: [],
,

created() 

    this.$http.get('http://localhost:8000/api/ice', function(ice) 
    //console.log(ice);
    this.articles = ice;
.bind(this));

    ,

        computed: 
            count: function() 
                return this.cart_items.length;
            ,
            total: function() 
                return _.reduce(this.cart_items, function(n, cart_item) 
                    return cart_item.price * cart_item.qty + n;
                , 0).toFixed(2);
            ,

            filteredArticles: function() 
            var articles_array = this.articles,
                searchString = this.searchString;


            if (!searchString) 
                return articles_array;
            

            searchString = searchString.trim().toLowerCase();

            articles_array = articles_array.filter(function(item) 
                if (item.title.toLowerCase().indexOf(searchString) !== -1) 
                    return item;
                
            )

            return articles_array;;
        

        ,
        methods: 

            notInCart: function(article) 
                var ids = _.pluck(this.cart_items, 'id');
              return !_.contains(ids, article.id);
            ,

            addToCart: function(product) 
            var cart = Vue.util.extend(, product);
            var ids = _.pluck(this.cart_items, 'id');

                    if (!_.contains(ids, product.id)) 
              cart.qty = 1;       
                        this.cart_items.push(cart);
                    
            ,


            addQty: function(product) 
                product.qty = product.qty +1;
            ,

            decQty: function(product) 
                product.qty -= 1;
                if (product.qty <= 0) 
                    this.cart_items.$remove(product);
                
            ,

            clearall:function()
                 this.cart_items = [];
            ,

            UserOrder: function()
                 var order = this.cart_items;
                 var output = JSON.parse(JSON.stringify(order));
                 // I am able to see the output in the dev console here
                // How should go about posting this to the mysql database. 
                 console.log(output);          
            

        
    );

这里还有项目设置

Laravel - 5.4 Vue - 1.0.12 vue 资源 - 0.1.17

我是新手。任何帮助将不胜感激

【参考方案1】：

所以你只是想发布它？

methods: 
  ...
  postData: function() 
    this.http.post('your/endpoint',  items: this.cart_items )
      .then( (response) =>  // your server response  )
      .catch( (error) =>  // error callback  )
  
  ...

这将发布到您的 api 端点，以便从那里通过 $request->get('items') 循环到 laravel 控制器并将其持久化到 DB。

【讨论】：

您好，感谢您的回复。我试过你的代码，我在 Grammar.php 第 135 行收到以下错误 FatalThrowableError：类型错误：传递给 Illuminate\Database\Grammar::parameterize() 的参数 1 必须是数组类型，给定字符串，在 D 中调用： \bitbucket\money\6df\vendor\laravel\framework\src\Illuminate\Database\Query\Grammars\Grammar.php 在第 681 行这里是我的控制器公共函数 order(Request $request) $order = new Order(); $order->orders = $request->get('items'); $订单->保存（）；

我也想发帖和检索

这个我帮不了你，因为我必须更多地了解数据库设计和模型关系。对不起。但至少你知道 vue 部分是正确的。祝你好运。