SpringBoot 애플리케이션의 웹 화면을 Svelte로 생성

14784 단어 SpringBootSvelte

개요


  • (나) 최근 svelte가 떡으로 유명하다
  • (나) 그러나 평소 응용 프로그램은 SpringBoot에서 작동하기 때문에 npm 사용할 수 없습니다.
  • (후배군)template라든지 static 파일 만드는 곳까지 npm로 하면 돼요
  • (나)! ! !

    • 환경 및 버전


  • Mac (OS에 의존하는 곳은별로 없을 것 같습니다)
  • SpringBoot (2.4.0)
  • svelte (3.0.0)

    • 절차



    SpringBoot 프로젝트 만들기



    SpringBoot로 간단한 Controller를 만들어 둡니다.
    (여기는 은근히)
    <project root>
├── build.gradle
└── src
    ├── main
    │   ├── java
    │   │   └── rhirabay
    │   │       └── Application.java
    │   └── resources
    │       ├── application.yml
    │       ├── static
    │       └── templates
    │           └── index.html
    └── test
        └── java
            └── rhirabay
                └── ApplicationTest.java

    build.gradle
    ...

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-web'
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}

    Application.java
    @Controller
@SpringBootApplication
public class Application {
    public static void main(String[] args) {
        SpringApplication.run(Application.class);
    }

    @RequestMapping("/")
    public String index() {
        return "index";
    }
}

    index.html
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Svelte sample</title>
</head>
<body>
    <h1>Hello svelte !</h1>
</body>
</html>

    http://localhost:8080
    방문



    Svelte 소개



    svelte의 프로젝트를 src/하하에 작성
    (어디에서나 좋지만 일단 소스 코드가 포함되어 있기 때문에 src/부하인가)
    cd src/
npx degit sveltejs/template svelte
cd svelte
npm install

    이제 template가 배치됩니다.
    "rollup.config.js"만 손을 추가합니다.

    파일 부분만 src/main/resources/static으로 향한다.
    ...
export default {
    input: 'src/main.js',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
    file: '../main/resources/static/bundle.js'
    },
    ...
}

    무엇을 했는지 말하면,
    디폴트로 rollup이라는 툴을 사용해 모듈을 1개의 js/css에 출력해 주는데,
    그 출력처를 SpringBoot 어플리케이션으로부터 읽어들일 수 있도록 「resources/static」하하에 설정했습니다.

    그럼 실제로 rollup을 움직여 보겠습니다!
    npm run build

    이제 "resources/static"아래에 bundle.js 와 bundle.css 가 생성되었을 것입니다!
    덧붙여서 build를 실행했을 때의 동작은 「src/svelte/src/package.json」에 기술되어 있습니다

    (이 근처의 구조는 아무것도 모르기 때문에 이번 공부해 보자 😇)

    templates/index.html에서 bundle.js 및 bundle.css를로드하도록 수정
    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Svelte sample</title>

    <link rel='stylesheet' href='/bundle.css' th:href="@{/bundle.css}">
</head>
<body>
    <script defer src='/bundle.js' th:src="@{/bundle.js}"></script>
</body>
</html>

    bootRun!



    🙌 🙌 🙌

    ToDo 목록을 만들어보세요



    모처럼이므로 ToDo리스트를 만들어 사용감을 시험해 보았다.

    이런 구성
    svelte/src/
├── App.svelte
├── Form.svelte
├── ToDoList.svelte
├── main.js
└── store.js

    store.js
    import { writable } from 'svelte/store';

// TODOリストの初期リスト（空のリスト）
const initial = []

// storeをカスタマイズする
function createTodos() {
    const { subscribe, set, update } = writable(initial);

    return {
        subscribe,
        add: (todo) => update(todos => todos.concat(todo)),
        reset: set(initial)
    };
}
export const todos = createTodos();

    Form.svelte
    <script>
    import { todos } from './store.js';
    // letで宣言するだけで埋め込みに使用できる
    let todo = ''

    function addTodo() {
        todos.add(todo)
        todo = '';
    }
</script>
<!-- 変数は{}で埋め込める -->
<!-- bind:valueで入力値と変数を連動させられる -->
<input type="text" bind:value={todo} />
<!-- 関数も{}で埋め込める -->
<button on:click={addTodo}>Add</button>

    ToDoList.svelte
    <script>
    import { todos } from './store.js';

    let todoList = []
    // storeの値を読み込む場合はsubscribeで実装
    todos.subscribe(value => {
        todoList = value;
    })
</script>

<ul>
<!-- ループの記述の順番に注意！　 #each <配列> as <要素>, <番号>  -->
    {#each todoList as item, index}
        <li>{item}</li>
    {/each}
</ul>

    App.svelte
    <script>
    import Form from './Form.svelte';
    import ToDoList from "./ToDoList.svelte";
</script>

<h1>Hello svelte !</h1>

<!-- componentは読み込んだらそのままタグとして使える！ -->
<Form />
<ToDoList />

    main.js
    import App from './App.svelte';

const app = new App({
    // ここでbodyを指定しているから特にdivとかを書かなくて良い
    target: document.body,
});

export default app;

    다시 npm run build !
    뒤에 bootRun !



    작업을 추가하는 것만 큼 간단하지만 꽤 쉽게 만들 수있었습니다! ! ! !

    덤



    svelte의 build를 gradle task로



    로컬에서의 어플리케이션 기동과, build시에 자동으로 npm run build 하고 싶어졌으므로 구현해 보았습니다

    build.gradle
    task buildSvelte (type: Exec) {
    workingDir('src/svelte')
    commandLine 'npm', 'run', 'build'
}

bootRun.dependsOn buildSvelte
build.dependsOn buildSvelte
    SpringBoot 시작하기 2.gradle에서 실행 가능한 war 파일 만들기
    Query By Example을 사용하여 SQL을 작성하지 않고 공백 무시 검색

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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