如何使用 nuxt.js 实现 CRUD 操作

Posted 2023-02-22

【中文标题】如何使用 nuxt.js 实现 CRUD 操作

【英文标题】：how to implement a CRUD operation with nuxt.js

【发布时间】：2019-12-15 17:45:38

【问题描述】：

请在 CRUD 操作方面遇到问题，任何可以帮助我使用 nuxt.js 实现 CRUD 操作的人，所看到的教程对我没有帮助

【问题讨论】：

请添加一些代码，显示您到目前为止所做的工作。

事实是我对此知之甚少或一无所知，如果您或任何人可以向我推荐有关如何使用 nuxt.js 实现 crud 的材料，我将不胜感激

【参考方案1】：

您可以在这里找到有关 Nuxt 中的 CRUD 操作：https://itnext.io/quickly-building-restful-uis-in-nuxtjs-782bce539440

以下是代码中的要点：

    var products = [
  id: 1, name: 'Angular', description: 'Superheroic javascript MVW Framework.', price: 100,
  id: 2, name: 'Ember', description: 'A framework for creating ambitious web applications.', price: 100,
  id: 3, name: 'React', description: 'A JavaScript Library for building user interfaces.', price: 100
];

function findProduct (productId) 
  return products[findProductKey(productId)];
;

function findProductKey (productId) 
  for (var key = 0; key < products.length; key++) 
    if (products[key].id == productId) 
      return key;
    
  
;

var List = Vue.extend(
  template: '#product-list',
  data: function () 
    return products: products, searchKey: '';
  ,
  computed : 
    filteredProducts: function () 
    var self = this;

      console.log(self.products, self.searchKey)
      if(!self.searchKey) 
        return self.products
      
    return self.products.filter(function (product) 
      return product.name.indexOf(self.searchKey) !== -1
    )
  

);

var Product = Vue.extend(
  template: '#product',
  data: function () 
    return product: findProduct(this.$route.params.product_id);
  
);

var ProductEdit = Vue.extend(
  template: '#product-edit',
  data: function () 
    return product: findProduct(this.$route.params.product_id);
  ,
  methods: 
    updateProduct: function () 
      var product = this.product;
      products[findProductKey(product.id)] = 
        id: product.id,
        name: product.name,
        description: product.description,
        price: product.price
      ;
      router.push('/');
    
  
);

var ProductDelete = Vue.extend(
  template: '#product-delete',
  data: function () 
    return product: findProduct(this.$route.params.product_id);
  ,
  methods: 
    deleteProduct: function () 
      products.splice(findProductKey(this.$route.params.product_id), 1);
      router.push('/');
    
  
);

var AddProduct = Vue.extend(
  template: '#add-product',
  data: function () 
    return product: name: '', description: '', price: ''
    
  ,
  methods: 
    createProduct: function() 
      var product = this.product;
      products.push(
        id: Math.random().toString().split('.')[1],
        name: product.name,
        description: product.description,
        price: product.price
      );
      router.push('/');
    
  
);

var router = new VueRouter(
  routes: [path: '/', component: List, name: 'root',
    path: '/product/:product_id', component: Product, name: 'product',
    path: '/add-product', component: AddProduct,
    path: '/product/:product_id/edit', component: ProductEdit, name: 'product-edit',
  path:   '/product/:product_id/delete', component: ProductDelete, name: 'product-delete'
]);

new Vue(
  el: '#app',
  router: router,
  template: '<router-view></router-view>'
);