Vue.js не распознается в шаблоне fastapi (Vue.js в fastapi)

Я хочу использовать Vue.js с cdn в приложении, которое обслуживается fastApi.

Я сделал прототип без быстрого API, только cdn vue в index.html и app.js. Обе комбинации работают хорошо, подсчет увеличивается при нажатии кнопки.

Затем я перехожу к проектам fastApi и использую в сотрудничестве с его механизмом шаблонов. app.js кажется загруженным.

Но кажется, что vue не загружается, потому что переменное сообщение и счетчик не распознаются (и не отображаются на html-странице), а нажатие кнопки не добавляет значение счетчика.

Любое предложение, что не так с моим подходом? заранее спасибо.

Структура проектов.

/static
-/js
--/myapp.js
/templates
-/index.html
my_app.py

содержание index.html

<head>
    <meta charset = "UTF-8">
    <title>Learning Vue</title>
    <script src = "https://unpkg.com/vue@3/dist/vue.global.js"></script>
    </script>
</head>
<body>
    <div id = "app">
        {{ count }} = {{message}}
        <h1>Hello, Vue :) </h1>
        <button @click = "push_button"> ok </button>
    </div>
    <script type = "module"  src = "{{ url_for('static', path='/js/app.js') }}"></script>
</body>

myapp.js

const app = Vue.createApp({
        data() {
            return {
                count: 100, message: "Hallo"
            }
        },
        methods: {
            push_button() {
                this.count++
            }
        }
    })
;

app.mount("#app")

my_app.py

app = FastAPI()

app.mount("/static", StaticFiles(directory = "static"), name = "static")

templates = Jinja2Templates(directory = "templates")

@app.get("/", response_class=HTMLResponse)
async def get(request: Request):
    return templates.TemplateResponse("index.html", {"request": request})

Вместо изменения разделителей, как показано ниже, если URL-адрес — это единственное, что вам нужно расширить в вашем шаблоне, подумайте о том, чтобы просто жестко закодировать его (или разрешить его в своем контроллере) и использовать вместо этого HTMLResponse. Изменение разделителей заставит весь ваш код Vue выглядеть иначе, чем у других разработчиков, и отличаться от любого другого ресурса, который вы используете с Vue.

— 24.04.2023 09:48

vue.js fastapi

23.04.2023 15:24

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это происходит потому, что разделители шаблонов, используемые Jinja2, такие же, как и Vue во внешнем интерфейсе. Вы можете изменить разделители интерполяции в своем приложении vue следующим образом:

Внутри myapp.js:

app.config.compilerOptions.delimiters = ['[[', ']]']
app.mount("#app")

И обновите index.html

<head>
    <meta charset = "UTF-8">
    <title>Learning Vue</title>
    <script src = "https://unpkg.com/vue@3/dist/vue.global.js"></script>
    </script>
</head>
<body>
    <div id = "app">
        [[ count ]] = [[message]]
        <h1>Hello, Vue :) </h1>
        <button @click = "push_button"> ok </button>
    </div>
    <script type = "module"  src = "{{ url_for('static', path='/js/app.js') }}"></script>
</body>

23.04.2023 19:17

Другие вопросы по теме

Разница FastAPI между `json.dumps()` и `JSONResponse()`

Установка приложения Flask в FastAPI вызывает ответ об ошибке 404 Not Found

Безопасный маршрут в FastAPI

Выполнение фоновой задачи fastAPI занимает до 100 раз больше времени, чем прямой вызов функции

"GET/HTTP/1.1" 405 Метод не разрешен

Как перенаправить с конечной точки POST на конечную точку GET в FastAPI без изменения кода состояния ответа?

Локальный сервер FastAPI: каждый запрос использует другой порт -> ошибка использования порта

Как указать только один из нескольких необязательных параметров в FastAPI?

Как одновременно запускать циклы операций блокировки с помощью асинхронного python?

Как настроить ответные сообщения для документации ReDoc OpenAPI в FastAPI?

Vue.js не распознается в шаблоне fastapi (Vue.js в fastapi)

Ответы 1

Другие вопросы по теме

Похожие вопросы