在 Ruby on Rails 和 JS Web 应用程序中更新和创建问题

大佬教程收集整理的这篇文章主要介绍了在 Ruby on Rails 和 JS Web 应用程序中更新和创建问题，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决在 Ruby on Rails 和 JS Web 应用程序中更新和创建问题？

开发过程中遇到在 Ruby on Rails 和 JS Web 应用程序中更新和创建问题的问题如何解决？下面主要结合日常开发的经验，给出你关于在 Ruby on Rails 和 JS Web 应用程序中更新和创建问题的解决方法建议，希望对你解决在 Ruby on Rails 和 JS Web 应用程序中更新和创建问题有所启发或帮助；

我无法保存创建和更新的新运动鞋。以下是我在我的运动鞋控制器.rb 中的内容：

class API::V1::sneakersController < ApplicationController

    def index
      sneakers = Sneaker.all
        
      render Json: sneakerserializer.new(sneakers)
    end
    
    def create
      sneaker = Sneaker.new(sneaker_params)

      if sneaker.save
        render Json: sneakerserializer.new(sneaker),status: :accepted
      else
        render Json: {errors: sneaker.errors.full_messages}
      end
    end

    def show
      sneaker = Sneaker.new(sneaker_params)

      if sneaker
        render Json: sneakerserializer.new(sneaker)
      else
        render Json: {errors: sneaker.errors.full_messages},status: :unprocessible_entity
      end
    end

    def update
      sneaker = Sneaker.find(params[:ID])
      if sneaker.update(sneaker_params)
        render Json: sneakerserializer.new(sneaker),status: accepted
      else
        render Json: {errors: sneaker.errors.full_messages}
      end
    end

    def destroy
      sneaker = Sneaker.find(params[:ID])
      sneaker.delete
      render Json: sneakerserializer.new(sneaker)
    end
    
    private
    
    def sneaker_params
      params.require(:sneaker).permit(:name,:description,:image_url,:quantity,:shoe_size,:category_ID)
    end

end

以下是我目前在 index.Js 文件中的内容：

const endPoint = "http://localhost:3000/API/v1/sneakers"

document.addEventListener('DOMContentLoaded',() => {
  // fetch and load sneakers
  console.log("DOM is Loaded");
  getsneakers()

  const createSneakerForm = document.querySELEctor("#create-sneaker-form")

  createSneakerForm.addEventListener("submit",(E) => createFormHandler(E))

  const sneakerContainer = document.querySELEctor('#sneaker-container')
  // render edit form once its clicked
  sneakerContainer.addEventListener("click",e => {
    
    const ID = parseInt(e.target.dataset.ID);
    const sneaker = Sneaker.findByID(ID);

   if (e.target.dataset.action === 'edit') {
     console.log('you pressed edit')
     const editSneaker = document.querySELEctor('#sneaker-container')
     editSneaker.INNERHTML = sneaker.renderupdateForm();
      
   } else if (e.target.dataset.action === 'delete') {
     console.log('you pressed delete')

     deleteSneaker(sneaker)

   }

  });

   
  document.querySELEctor('#sneaker-container').addEventListener("submit",(E) => updateFormHandler(E))
  const sneakerEl = document.getElementByID('create-button')

  const sneakerdiv = document.getElementByID('create-message')

  const onSneakerClick = function() {
    sneakerdiv.textContent = "You've Created a New Sneaker,Please look at the newly added Sneaker on your List below!"
  }

  sneakerEl.addEventListener("click",onSneakerClick)
});


function updateFormHandler(E) {
  e.preventDefault();
  const ID = parseInt(e.target.dataset.ID)
  const sneaker = Sneaker.findByID(ID)
  const name = e.target.querySELEctor('#input-name').value
  const description = e.target.querySELEctor('#input-description').value
  const imageUrl = e.target.querySELEctor('#input-url').value
   
  const quantity = e.target.querySELEctor('#input-quantity').value
  const shoeSize = e.target.querySELEctor('#input-shoeSize').value
  const categoryID = parseInt(e.target.querySELEctor('#input-categorIEs').value)

  patchSneaker(sneaker,name,description,imageUrl,quantity,shoeSize,categoryID)
}

function patchSneaker(sneaker,categoryID) {
  const bodyJsON = { name,categoryID }
  fetch(`http://localhost:3000/API/v1/sneakers/${sneaker.ID}`,{
  
    method: "PATCH",headers: {
      "Content-Type": "application/Json","Accept": "application/Json",},body: JsON.Stringify(bodyJsON),})
    .then(response => response.Json())
    
    .then(sneaker => {
      console.log(sneaker)
      deBUGger
      let updatedSneaker = new Sneaker(sneaker.data,sneaker.data.attributes)

      let sneakerContainer = document.querySELEctor('#sneaker-container') 

     sneakerContainer.INNERHTML += updatedSneaker.renderSneakerCard();
      LOCATIOn.reload(endPoint)
    })
    // LOCATIOn.reload(endPoint)
}

function getsneakers() {
  fetch(endPoint)
  .then(response => response.Json())
  .then(sneakers => {

    const mappedsneakers = sneakers.data.map( e => E)
    mappedsneakers.sort( (a,b) => {
      
      if ( a.attributes.name < b.attributes.name ){
        return -1;
      }
      if ( a.attributes.name > b.attributes.name ){
        return 1;
      }
      return 0;
    })

    // deBUGger

    console.log(`sneakers.data are equal? ${sneakers.data == mappedsneakers}`)
  
    mappedsneakers.forEach(sneaker => {

        let newSneaker = new Sneaker(sneaker,sneaker.attributes)

        let sneakerContainer = document.querySELEctor('#sneaker-container')

        sneakerContainer.INNERHTML += newSneaker.renderSneakerCard();

    })
  })
}


function deleteSneaker(sneaker) {

  fetch(`http://localhost:3000/API/v1/sneakers/${sneaker.ID}`,{

    method: "deletE",})
  .then(response => response.Json());

LOCATIOn.reload(endPoint) 
}


function createFormHandler(E) {
  e.preventDefault()
  const nameinput = document.querySELEctor('#input-name').value
  const descriptioninput = document.querySELEctor('#input-description').value
  const imageinput = document.querySELEctor('#input-url').value
  const quantityinput = document.querySELEctor('#input-quantity').value
  const shoeSizeinput = document.querySELEctor('#input-shoeSize').value
  const categoryID = parseInt(document.querySELEctor('#categorIEs').value)

  postsneaker(nameinput,descriptioninput,imageinput,quantityinput,shoeSizeinput,categoryID)
}

function postsneaker(name,categoryID) {
  // confirm these values are coming through properly
  // build body object

  const bodyData = {name,categoryID}

  fetch(endPoint,{
    // POST request
    method: "POST",headers: {"Content-Type": "application/Json"},body: JsON.Stringify(bodyData)
  })
  .then(response => response.Json())
  .then(sneaker => {
     

    let newSneaker = new Sneaker(sneaker.data,sneaker.data.attributes)

    let sneakerContainer = document.querySELEctor('#sneaker-container')
       
    sneakerContainer.INNERHTML += newSneaker.renderSneakerCard();  
  })
}

以下是从放置在我的补丁请求中的调试器记录的控制台记录，当我控制台记录运动鞋时，我收到以下错误：

errors: Array(1)
0: "category must exist"
length: 1

index.Js:78 Uncaught (in promisE) TypeError: CAnnot read property 'attributes' of undefined
    at index.Js:78

任何帮助将不胜感激！

P.S 我在下面添加了我的架构文件：

ActiveRecord::scheR_395_11845@a.define(version: 2020_06_15_203829) do

  # these are extensions that must be enabled in order to support this database
  enable_extension "plpgsql"

  @R_772_4421@able "categorIEs",force: :cascade do |t|
    t.String "name"
    t.datetiR_395_11845@e "created_at",precision: 6,null: false
    t.datetiR_395_11845@e "updated_at",null: false
  end

  @R_772_4421@able "sneakers",force: :cascade do |t|
    t.String "name"
    t.String "description"
    t.String "image_url"
    t.Integer "quantity"
    t.Integer "shoe_size"
    t.datetiR_395_11845@e "created_at",null: false
    t.bigint "category_ID",null: false
    t.index ["category_ID"],name: "index_sneakers_on_category_ID"
  end

  add_foreign_key "sneakers","categorIEs"
end

解决方法

大佬总结

以上是大佬教程为你收集整理的在 Ruby on Rails 和 JS Web 应用程序中更新和创建问题全部内容，希望文章能够帮你解决在 Ruby on Rails 和 JS Web 应用程序中更新和创建问题所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。