vte.cx의 백엔드 개발이 필요 없음(2. 데이터의 등록과 획득)

마지막 => vte.cx 백엔드 개발 필요 없음(1.Getting Started)

vte.cx의 단점 관리

이번에는 단점과 데이터의 로그인, 참조에 대해 설명합니다.
vte.cx는 임의의 단점을 만들 수 있고 그 아래에 데이터를 저장할 수 있다.
끝점 이름에는 영수 문자열과 밑줄()이 포함됩니다.탭
그렇다면 화면 관리 단점부터 시작해보자.
단점 관리 옵션 카드의 새 단점에foo의 단점을 만들어 보십시오.

잘 만들면 단점 일람표에 표시됩니다.

등록된 데이터 및 entry 정보

노드가 entry로 서버에 등록되었습니다.실제 브라우저에 다음 URL을 표시하여 확인다음에 d, 단점의/foo 다음에 ?e&x 인자를 지정합니다.(e는 entry이고 x는 xml이라는 뜻)

http://{サービス名}.vte.cx/d/foo?e&x

결과는 다음과 같습니다. entry는 XML로 표시됩니다.(※ 실제로 x 매개 변수를 취하면 JSON으로 반환되지만, 보안상의 이유로 브라우저에 JSON이 표시되지 않습니다. JSON은 JavaScript의 XHR 통신 등을 통해 얻을 수 있습니다.)

entry의 link href='/foo' rel='self' />href의 값(/foo)을 키라고 하는데 단점의 값을 포함한다.또한 entry는 유일한 id를 자동으로 분배합니다.id는 키 (단점) 와 Revision의 조합입니다.revision은 entry의 업데이트 횟수입니다.이것은 id에 포함되어 있기 때문에 업데이트할 때 낙관적으로 배타적으로 제어할 수 있습니다.(낙관적 배타적 통제에 대해서는 별도로 상세히 설명)<id>key,revision</id>

key:/foo

revision: 1

엔드포인트 아래에 데이터 등록

방금 등록한 단점/foo의 아래에서도 데이터를 등록할 수 있습니다.
VScode 항목 바로 아래에 데이터 폴더를 만들고 다음 XML을 만드십시오.파일 이름이 적당해도 괜찮지만 여기는foo1.xml입니다.

<entry>
<title>Hello</title>
<link rel="self" href="/foo/1" />
</entry>

그런 다음 npm run upload:data 명령을 사용하여 서버에 데이터를 보내십시오.
아래와 같이 {"feed" : {"title" : "Accepted."}}로 표시되면 성공합니다.

$ npm run upload:data

> [email protected] upload:data /Users/foo/tutorial
> npx vtecxutil upload:data

data/foo1.xml --> http://{サービス名}.vte.cx/foo1.xml
{"feed" : {"title" : "Accepted."}}

브라우저에서 서버가 정말 업데이트되었는지 확인하십시오.다음에 e 매개 변수를 f (feed) 로 설정하여 실행하십시오.

http://{サービス名}.vte.cx/d/foo?f&x

나는 아래와 같이 등록된 데이터를 보여 주고 싶다.
이 데이터는 /foo항의 아래/foo/1항이다.
/foo는 여러 개의 파일을 등록할 수 있기 때문에 entry가 아니라feed로 표시됩니다.등록된 데이터는 하나뿐이지만feed에는 entry 복수가 있습니다.

참고로 JSON 형식의 데이터도 로그인할 수 있습니다.
다음은 위의 XML과 같은 의미의 JSON입니다.
단, 링크의 속성으로 href와rel의 첫머리에 ___(밑줄 3개)가 첨부되어 있으니 주의하십시오.또한 전체를 수조[]로 묶어 주십시오.

[{
    "title": "Hello",
    "link": [
        {
            "___href": "/foo/1",
            "___rel": "self"
        }
    ]
}]

데이터를 가져오고 표시하는 프로그램

그럼 등록 데이터를 가져와 표시하는 프로그램을 만들어 보세요.
우선 버튼을 누르면 횟수를 표시하는 간단한 리액션 프로그램을 만들어보자.앞으로 서버와의 통신까지
index.다음 프로그램으로 tsx를 바꿔서 보여 주십시오.
index.tsx

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { useState } from 'react'

const App = () => {
  const [x, f] = useState(0)
  return (
    <div>
      <button onClick={() => { f(x+1) }}>
       {x} times
      </button>
    </div>
  )
}

ReactDOM.render(<App/>, document.getElementById('container'))

지난번에 배운 바와 같이 다음 명령을 통해 로컬 환경과 서버 환경을 동시에 반영하여 확인할 수 있다.

npm run serve:index

브라우저가 시작되면 0 times 단추가 성공적으로 표시됩니다.
버튼을 눌러 숫자를 확인하면 증가합니다.
다음은 서버 데이터를 실제로 가져와 봅시다.
다음처럼 코드를 수정하세요.
이것은 axios라는 통신 프로그램 라이브러리를 사용하여 /foo/1entry를 가져와 표시합니다.
실제로 GET 요청/d/foo/1?e이 있어야 하지만 브라우저가 보일 때와 달리 x 파라미터가 없기 때문에 JSON으로 entry를 얻습니다.
HTTP 헤더X-Requested-With: XMLHttpRequest에서는 안전을 위해서(CSRF 대책)지만, 여기서는 주문임을 명심하고 꼭 착용해야 한다.
index.tsx

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { useState,useEffect } from 'react'
import axios from 'axios'

const App = () => {
  const [x, f] = useState(0)

  const getdata = async () => {
    try {
      axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
      const res = await axios.get('/d/foo/1?e')
      alert(`res= ${res.data.title} `);
    } catch (e) {
      alert('error')
      console.log(e)
    }
  }

  useEffect(() => {
    getdata()
  })

  return (
    <div>
      <button onClick={() => { f(x+1) }}>
       {x} times
      </button>
    </div>
  )

}

ReactDOM.render(<App/>, document.getElementById('container'))

실행 결과 경고error가 표시됩니다.
Chrome의 개발자 도구 (기타 도구) 의 네트워크 옵션 카드에서 다음과 같이 403 Forbidden 되돌아오는 것을 확인하십시오.

실제로 /foo/1의 항목은 로그인 상태에서만 얻을 수 있습니다.
관리 화면에 엔드포인트가 만들어져도 일반 공개가 아니며, 기본적으로 ACL(Access Control List)은 로그인하지 않으면 액세스할 수 없도록 설정되어 있습니다.(ACL에 대해서는 별도로 자세히 설명)
그러면 로그인을 위해 콘솔 시작 중npm run serve:index을 잠시 중지하고 실행npm run serve:login을 대체하십시오.그리고 로그인 화면이 시작됩니다. 서비스에 로그인하십시오.로그인에 성공한 후 하얀 화면이 나타나면 정지npm run serve:login하고 다시 시작합니다npm run serve:index.
그럼 다음 화면이 나올 것 같아요.

실제 /foo/1조목의 타이틀을 읽었고Hello.
오늘은 여기까지.수고하셨습니다.
다음 기사
vte.cx 기반 백엔드 개발 필요 없음(3. 모델 정의와 유형 활용)