Adonis 및 Vue를 사용하여 fullstack Javascript 애플리케이션 구축

32818 단어 vue laravel node adonis

Originally posted at michaelzanggl.com. Subscribe to my newsletter to never miss out on new content.

오늘 우리는 자바스크립트만으로 깨끗한 응용 프로그램을 구축할 수 있도록 두 가지 놀라운 프레임워크를 결합시키고 싶다.
Adonis는 Laravel의 계발을 받은 노드 웹 프레임워크로 Laravel의 많은 기능을 계승했다. 예를 들어 SQL ORM, 신분 검증, 이전, mvc 구조 등이다.
Vue는 단일 페이지 응용 프로그램(SPA)이나 일반적인 상호작용이 필요한 응용 프로그램을 구축하는 데 사용되는 전방 웹 프레임워크이다.React와 같이, 이것은 당신이 사고하고 디자인하는 앞부분의 방식을 바꾸었습니다.
당신은 여기서 이 강좌의 코드를 찾을 수 있습니다.

회사 명 / adonis vue 데모

Adonis/Vue 프로젝트 데모 및 청사진

Adonis Vue 데모

이것은 AdonisJs와 Vue의 풀 스택 템플릿/청사진/프레젠테이션입니다.설정 방법을 확인하십시오.

옮기다

다음 명령을 실행하여 마이그레이션을 시작합니다.

adonis migration:run

응용 프로그램 시작

npm run dev

View on GitHub

프로젝트 설정

Adonis CLI 설치

npm install -g @adonisjs/cli

Adonis 프로젝트 만들기

adonis new fullstack-app
cd fullstack-app

웹 패키지

파일 구조

여기에서 모든 프런트엔드 JavaScript 및 Vue 파일resources/assets/js을 만들고자 합니다.웹 패키지는 이 내용을 전송하여 그 안에 넣을 것이다public/js.
필요한 디렉터리와 파일을 만듭시다

mkdir resources/assets/js -p
touch resources/assets/js/main.js

// resources/assets/js/main.js

const test = 1
console.log(test)

패키지 시작

라라빌의 배경에서 온 사람들은 익숙할 것이다Laravel-Mix.좋습니다. Adonis 프로젝트에서도 Laravel Mix를 사용할 수 있습니다.그것은 웹 패키지의 많은 설정 지옥을 없애고 80/20 용례에 있어서 매우 좋다.
우선 의존 항목을 설치하고 프로젝트의 루트 디렉터리로 복사합니다.

npm install laravel-mix --save
cp node_modules/laravel-mix/setup/webpack.mix.js .

webpack.mix.js는 우리가 모든 설정을 하는 곳이다.구성합시다.

// webpack.mix.js

let mix = require('laravel-mix');

// setting the public directory to public (this is where the mix-manifest.json gets created)
mix.setPublicPath('public')
// transpiling, babelling, minifying and creating the public/js/main.js out of our assets
    .js('resources/assets/js/main.js', 'public/js')



// aliases so instead of e.g. '../../components/test' we can import files like '@/components/test'
mix.webpackConfig({
    resolve: {
        alias: {
            "@": path.resolve(
                __dirname,
                "resources/assets/js"
            ),
            "@sass": path.resolve(
                __dirname,
                "resources/assets/sass"
            ),
        }
    }
 });

또한 충돌을 피하기 위해 기존 예시를 삭제해야 합니다

mix.js('src/app.js', 'dist/').sass('src/app.scss', 'dist/');

필요한 스크립트 추가

자산을 전송하기 위해 webpack.mix.js 에 스크립트를 추가합니다.package.json 내에 추가하여 내려가다.

// package.json

"assets-dev": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"assets-watch": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"assets-hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"assets-production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"

우리는 개발 기간에 우리의 파일을 감시할 수 있다.이 명령을 실행하려면 scripts 및 npm run assets-watch 두 개의 파일을 생성해야 합니다.팀에서 작업할 때 많은 합병 충돌이 발생할 수 있기 때문에 생성된 파일을 무시하는 것이 좋습니다.

경로

SPA를 구축하고 있으므로 Adonis는 접두사 public/mix-manifest.json 의 라우팅만 처리해야 합니다.모든 다른 루트는 vue로 전송되고 vue는 클라이언트의 루트를 책임집니다.
들어가기 public/js/main.js 다음 코드 세그먼트 추가

// start/routes.js

// all api routes (for real endpoints make sure to use controllers)
Route.get("hello", () => {
    return { greeting: "Hello from the backend" };
}).prefix("api")
Route.post("post-example", () => {
    return { greeting: "Nice post!" };
}).prefix("api")

// This has to be the last route
Route.any('*', ({view}) =>  view.render('app'))

이 줄을 봅시다. /api별표는 start/routes.js를 나타낸다.그래서 중요한 것은 이것이 마지막으로 선포할 노선이다.Route.any('*', ({view}) => view.render('app'))everything that has not been declared before의 매개 변수는 SPA의 시작점입니다. 여기에서 이전에 생성한 view.render 파일을 불러옵니다.Adonis는 블레이드와 매우 유사한 테두리 템플릿 엔진을 사용합니다.보기를 만듭니다.

touch resources/views/app.edge

// resources/views/app.edge

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Adonis & Vue App</title>
</head>
<body>
    <div id="app"></div>
    {{ script('/js/main.js') }}
</body>
</html>

전역 app 함수는 main.js 의 파일을 찾고 스크립트 태그를 자동으로 만듭니다.

Vue 설정

vue 및 vue 라우터를 설치합니다.

npm install vue vue-router --save-dev

script 에서 vue 초기화

// resources/assets/js/main.js

import Vue from 'vue'
import router from './router'
import App from '@/components/layout/App'

Vue.config.productionTip = false


new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

이 점을 실현하기 위해서 우리는 반드시 창설해야 한다resources/assets.레이아웃과 관련된 모든 것을 여기에 두어라. 우리는 단지 공유기만 포함하여 일시적으로 매우 간단하게 유지할 뿐이다.

mkdir resources/assets/js/components/layout -p
touch resources/assets/js/components/layout/App.vue

// /resources/assets/js/components/layout/App.vue

<template>
    <router-view></router-view>
</template>

<script>
export default {
  name: 'App'
}
</script>

클라이언트 라우터 구성도 만들어야 합니다.

mkdir resources/assets/js/router
touch resources/assets/js/router/index.js

// resources/assets/js/router/index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
    mode: 'history', // use HTML5 history instead of hashes
    routes: [
        // all routes
    ]
})

다음은 공유기를 테스트하기 위해 내부resources/assets/js/main.js에 두 개의 테스트 구성 요소를 만듭니다.

touch resources/assets/js/components/Index.vue
touch resources/assets/js/components/About.vue

// resources/assets/js/components/Index.vue

<template>
    <div>
        <h2>Index</h2>
        <router-link to="/about">To About page</router-link>
    </div>
</template>

<script>
export default {
    name: 'Index',
}
</script>

두 번째는요?

// /resources/assets/js/components/About.vue

<template>
    <div>
        <h2>About</h2>
        <router-link to="/">back To index page</router-link>
    </div>
</template>

<script>
export default {
    name: 'About',
}
</script>

색인 구성 요소는about 페이지로 방향을 바꾸는 링크가 있습니다. 반대로도 마찬가지입니다.
공유기 설정으로 돌아가서 이 두 구성 요소를 루트에 추가합시다.

// resources/assets/js/router/index.js

// ... other imports
import Index from '@/components/Index'
import About from '@/components/About'

export default new Router({
    // ... other settings
    routes: [
        {
            path: '/',
            name: 'Index',
            component: Index
        },
        {
            path: '/about',
            name: 'About',
            component: About
        },
    ]
})

발사하다

응용 프로그램을 시작해서 우리가 무엇을 얻었는지 봅시다.실행 확인App.vue 및 부팅 Adonis 서버 사용

adonis serve --dev

기본적으로 Adonis는 포트 3333을 사용하므로 resources/assets/js/components 로 이동하면 인덱스와about 페이지 사이를 탐색할 수 있습니다.npm run assets-watch로 이동하면 다음과 같은 JSON 응답이 제공됩니다.localhost:3333.

보너스

우리는 곧 완성할 것이다. 모든 것이 순조롭게 진행되기 위해서, 우리는 단지 몇 가지 사소한 일을 할 수 있을 뿐이다.

CSRF 보호

캐시 파괴

배포(Heroku)

CSRF 보호

무상태(JWT) 인증을 사용하지 않았기 때문에 POST, PUT 및 삭제 요청을 보호해야 합니다.이전에 작성한 POST 라우팅을 가져옵니다.devtools에서 이 작업을 수행할 수 있습니다.

fetch('/api/post-example', { method: 'post' })

CSRF 토큰이 추가되지 않았기 때문에 응답은 localhost:3333/api/hello 과 유사합니다.Adonis는 이 영패를 쿠키에 저장하기 때문에 npm 모듈을 설치하여 검색을 도와줍니다.

npm install browser-cookies --save

npm 모듈을 설치하려면 Adonis 서버를 닫는 것이 좋습니다.
다음으로 다음 코드를 추가합니다{ greeting: "Nice post!" }.

// resources/assets/js/main.js

// ... other code

import cookies from 'browser-cookies';

(async () => {
    const csrf = cookies.get('XSRF-TOKEN')
    const response = await fetch('/api/post-example', {
        method: 'post',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'x-xsrf-token': csrf,
        },
    });

    const body = await response.json()

    console.log(body)
})()

이것은 콘솔에서 우리에게 필요한 결과를 제공할 것이다.나는 그것을 모듈로 추출할 것을 건의한다.물론,axios와 유사한 라이브러리를 사용할 수 있습니다.

CSRF 보호 캐시 파괴

는 우리의 방문객이 우리가 제공한 최신 자산을 시종일관 얻을 수 있도록 확보하는 방식이다.
활성화하려면 다음 코드를 추가하십시오POST http://127.0.0.1:3333/api/post-example 403 (Forbidden)

// webpack.mix.js

mix.version()

재부팅main.js하면 webpack.mix.js 내부의 변경 사항을 볼 수 있습니다.

// public/mix-manifest.json

{
    "/js/main.js": "/js/main.js?id=e8f10cde10741ed1abfc"
}

해시 값은 npm run assets-watch 를 변경할 때마다 변경됩니다.이제 뷰에서 이 JSON 파일을 읽을 수 있도록 갈고리를 만들어야 합니다.

touch start/hooks.js

const { hooks } = require('@adonisjs/ignitor')
const Helpers = use('Helpers')

const mixManifest = require(Helpers.publicPath('mix-manifest.json'))

hooks.after.providersBooted(async () => {
    const View = use('View')
    View.global('versionjs', (filename) => {
        filename = `/js/${filename}.js`
        if (!mixManifest.hasOwnProperty(filename)) {
            throw new Error('Could not find asset for versioning' + filename)
        }

        return mixManifest[filename]
    })

    View.global('versioncss', (filename) => {
        filename = `/css/${filename}.css`
        if (!mixManifest.hasOwnProperty(filename)) {
            throw new Error('Could not find asset for versioning' + filename)
        }

        return mixManifest[filename]
    })
})

우리가 보기에, 이것은 두 가지 전체적인 방법을 만들 것이다.가다mix-manifest.json 및 교체

{{ script('/js/main.js') }}

가지다

{{ script(versionjs('main')) }}

이것이 바로 캐시 파괴의 모든 내용이다.

캐시 파괴 배치

Heroku에 Adonis 응용 프로그램을 배치했습니다 .우리는 같은 프로젝트에서 우리의 자산을 가지고 있기 때문에, 배치가 순조롭게 실행될 수 있도록 한두 가지 일을 추가해야 한다.main.js 내의 resources/assets/views/app.edge 아래 코드 추가

// package.json

"heroku-postbuild": "npm run assets-production"

이것은 Heroku가 배치 기간에 우리의 자산을 전송하는 것을 알려준다.Heroku를 사용하지 않으면 다른 서비스에서 유사한 해결 방안을 제공할 수 있습니다.
만약 배치가 실패한다면...
Heroku 응용 프로그램을 설정하여 개발 종속성을 동시에 설치해야 할 수도 있습니다.다음 명령을 실행하여 구성할 수 있습니다

heroku config:set NPM_CONFIG_PRODUCTION=false YARN_PRODUCTION=false

또는 Heroku 웹 사이트에 직접 설정을 설정할 수 있습니다.
그게 다야.
모든 설정을 건너뛰려면

adonis new application-name --blueprint=MZanggl/adonis-vue-demo

등록 루트와 컨트롤러, vuetify 레이아웃, vue 상점 등을 포함하는 청사진에 관심이 있으시면 저에게 알려주십시오.
만약 이 글이 당신에게 도움이 된다면, 저는 창작 소프트웨어를 간소화하는 것에 대한 힌트가 많습니다an article.

Reference

이 문제에 관하여(Adonis 및 Vue를 사용하여 fullstack Javascript 애플리케이션 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/michi/build-fullstack-javascript-apps-with-adonis-and-vue-3edc

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

회전 현수막을 만들어 보세요.

텍스트 Expander JS(jQuery)의 짧은 시간

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다