2017-05-22 9 views
0

POST를 사용하여 ajax 요청을 RxJS.ajax.post으로하는이 서사시 관찰 가능 서사시가 있으며 내 Elixir 백엔드에서 아무 일도 일어나지 않아 내 Elixir 라우터를 제대로 공격하지 않는다고 생각합니다. 나는 엘 릭실 라우터의 다른 경로를 올바르게 밟을 수 있도록 올바르게 카테고리를 가져 오는 요청을 받고 있습니다. 문제는 내 프론트 엔드가 아닌 백엔드 엘 릭시 코드와 함께 할 것으로 기대합니다. 내 경로를 router.ex으로 변경해야 할 수도 있습니다.Ajax POST 요청이 Elixir 라우터 경로에 부딪치지 않는다

내가 프론트 엔드의 버튼을 누르면,이 객체가 불로 불사의 영약 백엔드로 전송됩니다 것입니다 (이것은 페이로드로 제품에이 작업을 전달 아래 REDUX-관찰 서사시 히트) :

onPress = {() => { 
    props.uploadProduct({ 
    name: props.name, 
    brand: props.brand, 
    description: props.description, 
    image: props.image 
    }) 

서사시 ​​:

import { ajax } from 'rxjs/observable/dom/ajax' 
import { Observable } from 'rxjs' 

export const uploadProductEpic = action$ => 
    action$.ofType(UPLOAD_PRODUCT) 
    .mergeMap(action => { 
     ajax.post('http://localhost:4000/products/', action.payload) 
    }) 
    .map(response => uploadProductFulfilled(response)) 
    .catch(error => Observable.of(
     uploadProductRejected(error)) 
    ) 

만능 라우터 :

defmodule Api.Router do 
    use Plug.Router 

    if Mix.env == :dev do 
    use Plug.Debugger 
    end 
    plug :match 
    plug :dispatch 

    get "/categories/" do 
    Api.Repo.getCategories(conn) 
    end 

    post "/products/:product" do 
    IO.puts inspect conn 
    Api.Repo.insertProduct(conn, product) 
    end 
end 

,아무것도 기록하지 않습니다. 따라서 내 Elixir 라우터 경로 post "/products/:product" do에 POST 요청이 적용되지 않습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

def insertProduct(conn, product) do 
    product = %Api.Product{name: product.name, brand: product.brand, description: product.description, image: product.image, rating: 0, numberOfVotes: 0} 
    changeset = Api.Product.changeset(product) 
    errors = changeset.errors 
    valid = changeset.valid? 
    case insert(changeset) do 
     {:ok, product} -> 
     conn 
      |> put_resp_content_type("application/json") 
      |> send_resp(200, Poison.encode!(%{ 
       successs: "success" 
      })) 
     {:error, changeset} -> 
     conn 
      |> put_resp_content_type("application/json") 
      |> send_resp(500, Poison.encode!(%{ 
       failure: "Errors" 
      })) 
    end 
    end 

나는 프론트 엔드 개발자입니다 너무 어떤지도와 인내에 감사드립니다 비약로 얻을려고 :

이것은 내가 내 데이터베이스에 제품을 삽입 희망 repo.ex의 불로 불사의 영약 기능입니다. 감사.

+0

JS 코드가/products/: product가 아닌'/ products'에 게시됩니다. – Dogbert

+0

감사합니다. 내가 백엔드의 제품 객체를 얻을 수있는 방법이 있나요의'router.ex' 파일에서, product' : 그래서'를 제거하면? – BeniaminoBaggins

답변

1

데이터가없는 URL에 요청의 본문에 전송되므로 경로가 있어야한다 :

또한 plug :matchplug :dispatch 전에 JSON 파서를 연결해야합니다
post "/products" 

, Plug.Router의 문서에 매개 변수 구문 분석 절에 설명 된대로 :

plug :match 
plug Plug.Parsers, parsers: [:json], 
        pass: ["application/json"], 
        json_decoder: Poison 
plug :dispatch 

JSON 데이터 이제 함수에 보낼 수있는, conn.body_params에 존재합니다 :

이 점 대신에 액세스하는 브래킷 구문을 사용할 필요가 있으므로 6,
post "/products" do 
    Api.Repo.insertProduct(conn, conn.body_params) 
end 

그리고 마지막으로, JSON의 키는 문자열 될 것이다 :

product = %Api.Product{name: product["name"], brand: product["brand"], description: product["description"], image: product["image"], rating: 0, numberOfVotes: 0} 

잘 모르겠어요 방법을 'Api.Product.changeset을 정의했습니다,하지만 기본 피닉스 규칙은 cast를 호출하고지도 자체에서 데이터를 추출하는 2 인수에 대응 기능을 정의합니다. 동일한 작업을 수행하는 경우 대신 다음을 수행 할 수 있습니다.

changeset = Api.Product.changeset(%Api.Product{}, product) 
+0

감사합니다. 아직 내 라우터를 공격 표시되지 않습니다. 나는 라우터에 IO.puts을 추가하려고 나는 아무것도 로깅을 얻을. 예 : '포스트 "/ 제품" IO.puts이 CONN CONN Api.Repo.insertProduct (CONN를 검사 할.body_params) end' – BeniaminoBaggins

+0

코드'ajax.post ('http : // localhost : 4000/products /''가 실행 중인지 여부를 JS 콘솔에서 볼 수 있습니까? Chrome의 DevTools에서 네트워크 탭. – Dogbert

+0

하지만 아약스 POST를 만드는 코드 줄을 실행 중이라는 것을 알고 있습니다.이 줄의 코드는 '.catch (error => Observable.of ( uploadProductRejected)) )' – BeniaminoBaggins