API 없이 Adonis/Vue 앱 빌드

a previous post에서 프론트엔드와 백엔드 사이의 완벽한 통합 프로토타입을 만들었습니다.

기사를 읽지 않도록 하기 위해 요지는 다음과 같습니다.

No more fetch requests to the backend, no more setting up API routes, no need for controllers. Leaving you with what is essentially just calling a function (referred to as an action).

Under the hood, it creates the API routes automatically and turns backend imports on the frontend into network requests.

이번에는 같은 접근 방식을 취하고 좀 더 현실적인 것에 적용했습니다. 백엔드에서 Adonis.js를 사용하고 프론트엔드에서 Vue.js를 사용하는 앱입니다.

어떻게 생겼는지

Here은 작은 앱의 GitHub입니다. 여기에는 모든 사용자 가져오기, 사용자 생성 및 로그인과 같은 몇 가지 작업이 포함됩니다.

이 예제를 간단하게 유지하기 위해 모든 사용자 목록을 가져오는 방법을 살펴보겠습니다.

백엔드(Actions/user.js에서 추출)

const User = use('App/Models/User')

exports.getAllUsers = async function() {
  return User.all()
}

프론트엔드(App.vue에서 추출)

<template>
  <ul>
    <li v-for="user in users" :key="user.id">
      [{{ user.id }}] {{ user.email }}
    </li>
  </ul>
</template>

<script>
import { getAllUsers } from '../../api/app/Actions/user'

export default {
    data() {
        return { users: [] }
    },
    async mounted() {
        this.users = await getAllUsers()
    }
}
</script>

무심코 ;)

이전 프로토타입의 변경 사항

주로 모든 것을 함께 보유하는 새로운seamlesslyrc.json 파일이 있습니다. 백엔드는 생성된 모든 경로를 이 파일에 쓰고 프론트엔드는 이를 소비합니다.

이 파일을 사용하면 이전 프로토타입에 비해 많은 이점이 있습니다.

언어/프레임워크 구문 분석이 필요 없음

전체 API 생성에 대한 단일 정보 소스

API를 조회하는 데 사용할 수 있음

끝점 접두사(현재 항상 /api)와 같이 미래에 더 많은 것을 저장하는 데 사용할 수 있습니다.

POST 이외의 다른 HTTP 메소드를 사용하는 것이 훨씬 쉽습니다.

로더 및 API 생성기는 seamlessly 이라는 새 패키지 아래에 있습니다.

그리고 여기에서 위의 예에 대한 통합을 찾을 수 있습니다.

백엔드: https://github.com/MZanggl/adonis-vue-without-api/blob/master/api/start/routes.js

프론트엔드: https://github.com/MZanggl/adonis-vue-without-api/blob/master/ui/vue.config.js

아직 더 생각해야 할 부분이 있지만 다음 테스트에서는 JS가 아닌 언어를 백엔드로 사용하려고 합니다. 라라벨 🤔🤔🤔