вступление
Этот учебник проведет вас, как создать полностью рабочий веб-сайт Cinema с репертуаром. Мы достигнем это с помощью Python Рамки – Казонит , что позволяет нам легко и быстро развертывать сайты. Он поставляется с командой «Craft», простые миграции базы данных и многое другое, что вы можете прочитать больше об этом на их странице GitHub. Этот учебник будет легко понять – мы постараемся сделать его легко следовать, объяснив код, добавляя скриншоты и предоставив дополнительные ссылки на другие источники.
Давайте начнем
Поскольку вся документация о том, как установить Masonite и создать новый проект здесь Мы пропустим этот шаг. Если все прошло успешно, ваш новый проект должен выглядеть так в файле дерева:
Вот как наш новый проект выглядит в Pycharm.
Наш проект в конце будет включать в себя:
- Главная страница с графиком
- Подстраивает подробную информацию о фильмах
- Регистрация и логин
- Способность администраторов добавлять новые фильмы
Мы начнем с изменение основных вещей в конфигах. Ну, возможно, мы не хотим, чтобы наш проект имел шаблон, верно? Итак, пойдем в config/application.py и откройте этот файл.
Вот как это должно выглядеть так:
Найти Имя Переменная. Это должно быть на вершине. Там вы можете позволить вашему воображению работать и назвать ваше творение. В нашем случае мы назвали это «тутоцинема».
- NAME = env('APP_NAME', 'Masonite 2.2')
+ NAME = env('APP_NAME', 'TutoCinema')
После изменения имени мы собираемся создавать первую страницу. Давайте отправимся в Хранение/статическое – Это место, где хранятся все наши файлы, которые являются статическими, такие как изображения, CSS, JS и т. Д.
Статический контент – это любой контент, который может быть доставлен к конечному пользователю, не должен быть сгенерирован, модифицирован или обработан. Сервер обеспечивает один и тот же файл каждому пользователю, создавая статический контент один из простейших и наиболее эффективных типов контента для передачи через Интернет.
источник
Теперь давайте почистите это место немного и удалите файлы шаблонов из хранения:
Хранение/статическое/SassХранение/компиляция
После этого мы создаем отдельную папку Хранение/статический/стиль Где мы разместим файлы CSS для наших страниц.
Далее мы должны сделать новый взгляд на наш проект. Представления являются HTML-файлами или «шаблонами», которые будут отображаться. Подробнее о том, что рендеринг о том, будет позже. Благодаря этому у нас будет наша главная страница с графиком. Чтобы создать его, мы должны ввести в CMD (откройте его в папке проекта, если вы этого еще не сделали):
craft view mainpage
После этого мы должны получить подтверждение, что наш взгляд был успешно создан. Также в нашей папке Ресурсы/шаблоны/ Должен быть новый файл mainpage.html.
Давайте откроем этот файл и код копирования с ниже.
TutoCinema
ЗАМЕТКА: Мы удалили ссылки на источники изображения, поэтому есть пустые фоновые изображения: URL ()
Тогда давайте создадим другой файл – Main.csss в Хранение/статический/стиль/ , где мы собираемся вставить этот CSS:
body { background: #fafafa; }
pre { font-family: "Roboto Mono", monospace; font-size: 16px; }
.box { font-family: "Sulphur Point", sans-serif; position: relative; display: flex; justify-content: center; max-width: 1200px; margin: 0 auto 20px auto; border: 1px solid #aaa; height: 480px; }
.box-left-a { width: 66.66%; }
.box-left { height: 100%; position: relative; }
.box-right { width: 33.33%; height: 100%; position: relative; }
.box-back { width: 100%; height: 100%; background-size: cover; background-position: center; }
.box-right-small { position: relative; height: 50%; width: 100%; }
.box-bar { background: linear-gradient(to bottom, transparent, rgba(40, 40, 40, 0.75)); position: absolute; bottom: 0; left: 0; width: 100%; height: 30%; display: flex; flex-direction: column; justify-content: flex-end; align-items: baseline; }
.box-right-small .box-bar .box-title { font-size: 22px; }
.box-left .box-bar .box-title { font-size: 40px; }
.box-title { padding: 5px 10px; color: white; text-shadow: 0 1px black; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; box-sizing: border-box; }
.box-right-small:hover .box-back, .box-left:hover .box-back { filter: brightness(110%); }
.box-premiere { position: relative; background: rgb(20, 20, 20); color: white; padding: 2px 5px; border-radius: 5px; text-shadow: 0 1px black; margin: 0 10px; letter-spacing: 1px; font-size: 14px; }
.toolbar { position: relative; margin: 10px auto 10px auto; max-width: 1200px; }
.logo { font-family: "Sulphur Point", sans-serif; font-size: 40px; font-weight: bold; letter-spacing: 3px; }
.schedule { position: relative; margin: 10px auto 10px auto; max-width: 1200px; }
.schedule-title { font-size: 30px; font-family: "Sulphur Point", sans-serif; font-weight: bold; letter-spacing: 3px; }
.schedule-table { width: 100%; margin-top: 10px; }
.schedule-table-r { font-weight: normal; font-size: 18px; text-align: left; font-family: "Sulphur Point", sans-serif; display: flex; }
.schedule-table-r div, .schedule-table-r pre { margin: 0 10px; vertical-align: top; box-sizing: border-box; color: #333; }
.schedule-table-r:nth-child(1) div { border-bottom: 1px dashed #777; margin-bottom: 5px; font-size: 22px; color: black; }
.schedule-table-mov { width: calc(30% - 20px); }
.schedule-table-type { width: calc(10% - 20px); text-align: center; }
.schedule-table-date { width: calc(60% - 20px); }
.schedule-table-r a { display: flex; width: 100%; text-decoration: none; }
.schedule-table-r:not(:nth-child(1)) { padding: 5px 0; border-bottom: 1px solid #ddd; transition: 0.2s background; }
.schedule-table-r:not(:nth-child(1)):hover { background: #eee;}
@media (max-width: 767px) and (min-width: 120px) {
.box { height: 720px; flex-direction: column; }
.box-left-a { width: 100%; height: 240px; }
.box-right { width: 100%; height: 480px; }
.box-bar { height: auto; }
.box-title { font-size: 30px !important; }
.schedule-table-type, .schedule-table-mov, .schedule-table-date { font-size: 14px; }
}
Таким образом, у нас будет простая главная страница. Однако мы еще не увим его, потому что у нас нет распадается это еще. Сделать это, мы должны пойти в маршруты/web.py
Показать наше Вид Мы должны «маршрутить» это, Таким образом, в зависимости от того, какой клиент пишет как URL, он будет отображать то, что мы хотим. И потому что мы создали главную страницу, мы хотим маршрутизировать '/' URI. С помощью Контроллеры Мы сделаем это на работу. Смотри на Маршруты Список – есть Получать() Функция, которую мы изменим, потому что она оставалась от шаблона нового проекта. Получить является одним из HTTP глагол , больше об этом здесь Отказ Первый аргумент в Get () – это адрес URL, который мы будем «маршрутизацией» (в нашем случае это '\' ). Второй аргумент – это контроллер, к которому мы будем ссылаться. Также .имя () В конце Получить () Функция позволяет нам изменить имя нашего маршрута, потому что:
Это хорошая конвенция для названия ваших маршрутов, поскольку маршрут URI может измениться, но имя всегда должно оставаться прежним.
источник
Мы изменим имена контроллера, к которому мы создадим через некоторое время ( Mainpagecontroller ) и измените имя маршрута в Главная страница Отказ Так что это будет выглядеть так:
- Get('/', 'WelcomeController@show').name('welcome'),
+ Get('/', 'MainPageController@show').name('mainPage'),
Теперь нам придется создать Mainpagecontroller Набрав в CMD:
craft controller MainPage
Вновь созданный контроллер должен быть найден в Приложение/HTTP/Контроллеры/ , Также в этот момент мы можем избавиться от неиспользованного Welcomecontroller.py Отказ Давайте откроем Mainpagecontroller.py где мы должны увидеть этот код:
Теперь давайте найдем Показать () Метод, который в настоящее время не делает ничего особенного, но он оказывает нашу главную страницу, изменив эту строку:
- pass
+ return view.render('mainpage')
Главная страница – это название нашего взгляда.
Теперь, чтобы немного подобрать в нашем прогрессе, давайте вводить в консоль:
craft serve
А потом, под http://127.0.0.1:8000. Мы должны быть представлены нашей странице!
Как мы уже говорили, ссылка на изображения была удалена в файле .html, поэтому не волнуйтесь, если вы ничего не видите
Система аутентирования
Теперь мы собираемся работать над регистрацией и входом в систему. Начнем, набрав в CMD
craft auth
Это создаст важные файлы для системы AUTH.
Теперь мы снова изменим конфиги, чтобы создать базу данных, которая будет сохранять данные пользователя и информацию нашей фильма. Итак, мы должны открыть .env.env. который находится в корне проекта.
Тогда измените App_name на имя вашего проекта
- APP_NAME=Masonite 2.2 + APP_NAME=TutoCinema
И впоследствии мы заинтересованы в переменных с префиксом Db_ Отказ Мы собираемся использовать SQLite Потому что нам не нужно будет сохранять большие данные. Изменить Db_connection к sqlite. И название как-то ваша база данных, в нашем случае – Cinema.db.
- DB_CONNECTION=mysql + DB_CONNECTION=sqlite DB_HOST=127.0.0.1 DB_PORT=3306 - DB_DATABASE=masonite + DB_DATABASE=cinema.db
А также После этого типа в CMD
craft migrate
Так что наша база данных будет мигрировать Для создания необходимых данных для системы аутентирования. Теперь мы собираемся проверить, работает ли все как задумано, повернув наш сервер с
craft serve
и пойти в http://127.0.0.1:8000/register Отказ Заполните форму случайными значениями для регистрации. Затем он должен отображать приборную панель.
Однако мы не хотим видеть приборной панели. Что мы хотим, это перенаправить на главную страницу. Итак, чтобы сделать это, нам нужно открыть три контроллера RecisterController.py. , Logincontroller.py , Commancontroller.py и Ресурс/шаблоны/auth/base.html Отказ Во всех этих файлах измените все '/Главная' к '/' Отказ
Кстати, удалить HomeContoller.py и Ресурс/шаблоны/auth/home.html Отказ Также в маршруты/web.py Удалить эту строку
- Get().route('/home', 'HomeController@show').name('home'),
Все те из них не нужны.
Если мы хотим после выхода из-за перенаправления на главную страницу вместо формы входа в систему, нам нужно изменить строку Logincontroller.py в Выход () функция.
def logout(self, request: Request, auth: Auth):
auth.logout()
- return request.redirect('/login')
+ return request.redirect('/')
Таким образом сделали возможность зарегистрироваться и входить в систему пользователей. Единственная проблема в том, что у нас нет кнопок, чтобы сделать это. Итак, мы собираемся добавить их прямо сейчас.
Давайте добавим к нашему Main.csss Новые строки, которые стилируют ваши кнопки для регистрации, логин и страниц выхода.
.login { position: absolute; top: 5px; right: 0; font-family: "Sulphur Point", sans-serif; font-size: 24px; color: black; }
.register { position: absolute; top: 35px; right: 0; font-family: "Sulphur Point", sans-serif; color: black; }
.logout-text { position: absolute; top: 5px; right: 0; font-family: "Sulphur Point", sans-serif; font-size: 24px; color: black; text-transform: capitalize; }
.logout { position: absolute; top: 35px; right: 0; font-family: "Sulphur Point", sans-serif; font-size: 14px; color: #777; }
Наконец, мы должны добавить эти кнопки в mainpage.html Отказ Masonite использует Jinja2 оказывать виды, так что о нем можно найти Masonite Documentation Отказ Мы можем проверить, будет ли пользователь войти в систему с AUTH () функция. Если они вход в систему, это функция вернет объект пользователя с пользовательскими данными. Чтобы получить их прозвище, нам просто нужно написать {{auth (). Имя}} Отказ Использовать его правильно в mainpage.html. Мы должны добавить этот код
Таким образом, мы завершили базовый вход и регистрироваться с помощью Masonite.
Вот как выглядит главная страница, когда пользователь войти в систему
И вот когда нет
ЗАМЕТКА: Masonite дает возможность создавать только базовую систему AUTH, поэтому, например, она не проверяет, если пользователь только входит в систему уже, ни если новый зарегистрированный пользователь имеет то же самое почту, что и другой пользователь. В этом руководстве мы считаем, что ваш логин и регистрация работают как предназначено.
Расписание
Давайте сейчас сосредоточиться на том, как наши фильмы хранятся в базе данных. У каждого фильма есть:
- заглавие
- Тип: Dubbing или субтитры
- дата проектирования
- описание
- Это премьера
- Цена билетов
- плакат
Masonite позволяет создавать новую модель, которая улучшит нашу работу в случае миграции без баз.
Masonite использует Oritor, который является активной рекордной реализацией ORM.
источник
Мы собираемся сделать нашими собственными Фильм Отказ Для этого нам нужно ввести в CMD
craft model Movie
Это создаст новую модель под названием Фильм , где мы можем взглянуть на это здесь – app/foin.py. . Однако у нас еще нет таблицы в базе данных, которая сохранит наши фильмы. Чтобы создать один, нам нужно использовать команду миграции
craft migration create_movies --create movies
где create_movies это название миграции и Фильмы это имя таблицы. Важно суффиксировать имя таблицы с «-S» по сравнению с именем модели. Созданная миграция появится в Базы данных/миграции , где он будет префиксирован с датой создания.
Давайте откроем эту миграцию.
Отсюда мы видим, что наш стол имеет ID Поле, которое увеличится каждый раз, мы добавляем новую запись. Поля, которые мы хотим добавить, будут иметь эти типы:
- Название – строка
- Тип: Дубинг или субтитры – Bool
- Дата проекции – текст
- Описание – текст
- Это премьера – Bool
- Цена на билеты – строка
- плакат (ссылается на файл, который должен быть изображением) – строка
Подробнее о типах Вы можете найти здесь Отказ В вашем файле миграции вы только что создали, добавьте это:
def up(self):
with self.schema.create('movies') as table:
table.increments('id')
+ table.string('title')
+ table.text('description')
+ table.string('coverart')
+ table.text('whenPlayed')
+ table.string('price')
+ table.boolean('premiere')
+ table.boolean('type')
table.timestamps()
После этих изменений мы должны ввести в CMD
craft migrate
Чтобы снова мигрировать нашу базу данных и создать нашу таблицу данных.
Давайте вернемся к нашему Кино Модель. Откройте app/movie.py И добавьте то, что мы хотим заполнить таблицу:
class Movie(Model):
+ __fillable__ = ['title', 'description','coverart','whenPlayed','price','premiere','type']
pass
Теперь нам нужно как-то сделать новую запись. В нашем случае – новый фильм. Из-за этого нам нужно добавить в нашу форму главной страницы, что позволит нам добавить ее. В этом руководстве мы не покажем, как удалить запись, как это его добавить.
Давайте создадим форму в HTML, которая отправит сообщение Post после заполнения его до CreateMovie со всеми данными из заполненных полей. Затем он добавит новую запись в базу данных.
Во-первых, мы должны добавить новые строки на наше Main.csss который добавлю стиль в нашу форму.
.newmovie { position: relative; margin: 20px auto 50px auto; padding-top: 10px; border-top: 1px dashed #555; max-width: 1200px; }
form { font-family: "Sulphur Point", sans-serif; }
Во-вторых, мы должны добавить этот код до в mainpage.html :
{% if ((auth()) and (auth().name == "root")) %}
Create New Movie
{% endif %}
Так что здесь происходит сейчас? Во-первых, проверьте, будет ли пользователь входить в систему, и если они названы root Отказ Если да, то весь код между прилагаемыми в HTML на нашей странице добавляется кронштейн. После нажатия формы отправки отправим данные, используя метод Post для адреса /CreateMovie , который мы будем работать через некоторое время и где все будет спасено. Стоит отметить, что наше изображение отправляется в качестве файла. Мы сохраним его на сервере диска, а его имя будет сохранено в базе данных. Таким образом, мы сэкономьте некоторое пространство в таблице данных. Там также появляется {{csrf_field}} , который:
Masonite поставляется с защитой CSRF, поэтому нам нужен токен для рендеринга с помощью поля CSRF.
источник
Мы сосредоточимся сейчас на /CreateMovie . Мы собираемся использовать тот же контроллер, что и раньше – Mainpagecontroller.py Поскольку мы используем этот же HTML шаблон ( Mainpage.html ). Так в Mainpagecontroller.py Мы добавим новую функцию Def Store (Self, Запрос: Запрос, загрузка: Загрузить) . С этой функцией мы будем сохранять в нашей базе данных новую запись, используя данные, которые мы прошли через почтовый запрос. Использование Загрузить объект Мы сохраним изображение на серверный диск.
Вы помните нашу модель фильма? Используя Movie.create () Функция мы можем создать новый объект с данными, переданными в аргументах и с Upload.driver («Диск»). Store () Наше изображение будет сохранено (что мы пройдем здесь Store () Метод).
Наша функция должна выглядеть так:
from app.Movie import Movie
from masonite import Upload
# Code in between...
def store(self, request: Request, upload: Upload):
upload.driver('disk').store(request.input('imagecover'), filename=request.input('title').replace(" ", "")+".jpg", location='storage/imagecover')
Movie.create(
title = request.input('title'),
description = request.input('description'),
whenPlayed = request.input('playTime'),
premiere = request.input('ispremiere'),
type = request.input('isdubbing'),
price = request.input('price'),
coverart = request.input('title').replace(" ", "")+".jpg"
)
return request.redirect("/")
ЗАМЕТКА: Создать папку imagecover в хранилище/или наших изображениях не будет загружать
В mainpage.html мы используем Имя = "" атрибут в входных тегах. Мы можем получить доступ к тому, что данные здесь с request.Input (<имя>) . После создания нашего нового кино объекта мы должны перенаправить себя обратно на главную страницу.
В маршруты/web.py Мы добавляем новый маршрут в Маршруты список:
ROUTES = [
Get('/', 'MainPageController@show').name('mainPage'),
+ Post('/createMovie', 'MainPageController@store').name('createMovie')
]
Пост, потому что мы отправляем данные через Опубликовать запрос
Таким образом, мы можем проверить наш следующий товар в нашем контрольном списке!
ЗАМЕТКА: На данный момент мы добавили 3 пример видео в базу данных, ниже вы можете увидеть одну из заполненных форм
Отображение наших фильмов
Чтобы отобразить наши сохраненные фильмы в качестве Shedule на нашем mainpage.html. , нам нужно посмотреть на этот фрагмент этого кода:
В нашем HTML-коде мы повторяем это 3 раза статическими данными, которые мы добавили в качестве примеров. Давайте изменим его на шаблон с помощью синтаксиса Jinja2:
Я использовал переменные имена из нашего объекта фильма, но мы все еще не ссылаемся ни на кого из них. Нам нужно внести изменения в Показать () Функция в Mainpagecontroller.py пройти фильмы для рендеринга.
def show(self, view: View):
+ moviess = Movie.all()
+ return view.render('mainpage', {'movies': moviess})
- return view.render('mainpage')
Movie.all () Возвращает все объекты фильма, которые мы сохранили. Добавляя {«Фильмы»: Moviess} как дополнительный аргумент в Визуализация () Мы передаем эти фильмы как Фильмы Переменная, которую можно использовать в mainpage.html с jinja2. Давайте вернемся к mainpage.html Отказ
Найти И удалить все наши примеры, которые мы сделали, нам не понадобится им, когда мы собираемся поменять его с шаблоном, мы показали ранее.
{% for mov in movies %}
{{mov.title}}
{{mov.type}}
{{mov.whenPlayed}}
{% endfor %}
Здесь мы использовали Jinja2 для создания для петля, чтобы пройти через наш Фильмы что мы только что прошли, и каждый объект можно использовать с мов переменная между для петли кронштейны. Как так, мы использовали это, например, в {{mov.title}} Отказ
Сохраните его и включите сервер (с Craft Service ). Если вы добавили несколько фильмов, вы должны увидеть приятную таблицу расписания. На нашем ПК это выглядит так:
О нет, наш mov.type Возвращает 0 или На (1), потому что это лол. Нам нужно создать логику, чтобы вместо этого вернуться Dubbing Если правда и Субтитры Если false. Вот фиксированный код:
{% for mov in movies %}
{{mov.title}}
{% if mov.type %}
Dubbing
{% else %}
Subtitles
{% endif %}
{{mov.whenPlayed}}
{% endfor %}
Витрина
Мы предполагаем, что в базе данных в базе данных не менее 3 фильмов. Таким образом, мы можем изменить жесткодируемую витрину для динамического с нашими данными.
Посмотрите на одну из наших витринных коробок:
Нам нужно изменить 3 элемента здесь: Премьера , Название и image.jpg Для соответствующего поля от кино объекта. Так что это должно выглядеть так:
Наша самая большая коробка в витрине предназначена для видео индекса 0, а 2 меньшими предназначены для индекса 1 и 2. Так что если Фильмы Это наш список объектов фильма, используя Фильмы [0] мы можем извлечь первый объект фильма, Фильмы [1] Во-вторых и так далее. Итак, давайте изменим все в витрине к этому:
А вот результаты нашей работы:
Последнее предложение Добавить – Детали фильма страница
Когда мы нажимаем на нашей главной странице в любом фильме, мы должны быть перенаправлены на соответствующую страницу с подробной информацией об этом фильме, когда она прогнозируется, какова цена билетов для нее и т. Д. Мы не будем показывать, как сделать систему для билетов, она может быть достигнута с использованием 3-го вечеринок решений, но мы добавим купить билет Кнопка, так что ее можно продлить в будущем.
Давайте начнем с добавления нового представления с именем фильм (Не смешивайте его с помощью модели фильма)
craft view movie
Мы готовим шаблон для нашего фильма, который мы хотим показать – его название, описание и т. Д. Предполагая, что мов Это наш фильм объект:
{{ mov.title }}{% if mov.premiere %}Premiere{% endif %} {% if mov.type %}Dubbing{% else %}Subtitles{% endif %}{{ mov.description }}{{ mov.whenplayed }}{{ mov.price }}Buy Ticket
Все должно быть понятно, так как мы используем именно то, что мы ранее делали в других разделах. Откройте наш вновь созданный HTML-шаблон: Ресурсы/шаблоны/фильм .HTML И скопируйте-вставьте этот код. У него уже есть наш шаблон для деталей фильма.
TutoCinema
{{ mov.title }}
{% if mov.premiere %}
Premiere
{% endif %}
{% if mov.type %}
Dubbing
{% else %}
Subtitles
{% endif %}
{{ mov.description }}
{{ mov.whenplayed }}
{{ mov.price }}
Buy Ticket
Также нам нужно создать CSS для наших movie.html. так в Хранение/статический/стиль/ Создать новый файл movie.css И скопируйте-вставьте этот код:
body { background: #fafafa; }
.toolbar { position: relative; margin: 10px auto 10px auto; max-width: 1200px; }
.logo { font-family: "Sulphur Point", sans-serif; font-size: 40px; font-weight: bold; letter-spacing: 3px; }
.login { position: absolute; top: 5px; right: 0; font-family: "Sulphur Point", sans-serif; font-size: 24px; color: black; }
.register { position: absolute; top: 35px; right: 0; font-family: "Sulphur Point", sans-serif; color: black; }
.logout-text { position: absolute; top: 5px; right: 0; font-family: "Sulphur Point", sans-serif; font-size: 24px; color: black; text-transform: capitalize; }
.logout { position: absolute; top: 35px; right: 0; font-family: "Sulphur Point", sans-serif; font-size: 14px; color: #777; }
.video { position: relative; max-width: 1200px; min-height: 500px; padding: 0 0 30px 0; margin: 10px auto; }
.video-back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; filter: brightness(40%) }
.video-back-grad { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to left, transparent 50%, rgba(0, 0, 0 ,0.5) 75%, black) }
.video-title { position: relative; color: white; font-size: 26px; max-width: 400px; font-family: "Sulphur Point", sans-serif; padding: 20px 0 0 20px; }
.video-label { font-family: "Sulphur Point", sans-serif; padding: 0 20px; max-width: 400px; color: #8edbcc; font-size: 14px; position: relative; margin-top: 10px; }
.video-label-big { font-family: "Sulphur Point", sans-serif; padding: 0 20px; max-width: 400px; color: #ff6262; font-size: 20px; position: relative; }
.video-text { font-family: "Sulphur Point", sans-serif; padding: 0 20px; max-width: 400px; color: #ccc; font-size: 16px; position: relative; margin: 5px 0 20px 0; white-space: pre-wrap; word-wrap: break-word; }
.video-buy-ticket { position: relative; background: linear-gradient(125deg,#3f8e3f,#1f511f); padding: 10px 15px; font-size: 20px; margin: 5px 20px; display: inline-block; font-family: "Sulphur Point", sans-serif; color: #c5e1cb; border-radius: 5px; background-size: 300%; transition: 0.2s background-size }
.video-buy-ticket:hover { background-size: 100%; }
Мы закончили создать наш новый шаблон HTML, теперь нам нужно создать новый контроллер фильма с
craft controller movie
Откройте его (это в App/http/Controllers/ ) и Маршруты/Web.py Отказ
Во-первых, в маршруты/web.py Мы добавляем еще один маршрут, но на этот раз это будет немного отличаться в URI:
ROUTES = [
Get('/', 'MainPageController@show').name('mainPage'),
Post('/createMovie', 'MainPageController@store').name('createMovie'),
+ Get('/movie/@id', 'movieController@show').name('displayMovie')
]
Как вы можете видеть, мы добавили @id в конце URI. Когда клиент будет что-то написать в этом месте, мы сможем использовать это как ID Переменная в нашем контроллере, как это:
+ from app.Movie import Movie
// Some code...
def show(self, view: View):
+ mov = Movie.find(self.request.param('id'))
+ return view.render('movie', {'mov': mov})
- pass
С <Название модели> .find () Мы можем найти фильм по этому идентификатору от таблицы данных. Мы сохраняем это здесь, чтобы mov переменная, которую мы будем проходить через Визуализация () Отказ Теперь после запуска сервера ( Craft подают ) и отправиться в http://127.0.0.1:8000/movie/1. Мы должны увидеть нашу страницу
Последнее, что нам нужно добавить, это ссылки на эту страницу в нашем mainpage.html , что довольно легко. Вместо того, чтобы иметь этот код в расписании:
{% for mov in movies %}
{{mov.title}}
{% if mov.type %}
Dubbing
{% else %}
Subtitles
{% endif %}
{{mov.whenPlayed}}
{% endfor %}
Мы собираемся быть:
{% for mov in movies %}
{% endfor %}
Также в нашем витринном коде нам нужно добавить вручную фильм/1. , фильм/2 и фильм/3 в пустой Теги. Таким образом, мы полностью создали рабочий сайт для кинотеатра, которые могут быть расширены в будущем с дополнительными функциями.
Послесловия
Masonite действительно простая структура, но мощная. Он быстро растет на Github, и он становится все более популярным каждый день. У нас не было предыдущего опыта с любым из кадров Python, поэтому было приятно сюжем, насколько легко следовать документации и понять логику позади этого. Мы полностью рекомендуем его для новичков, а также для профессиональных разработчиков, которые хотят попробовать новые рамки на работе.
~ Мишель ( @bthefw. ) и ник ( @holosiek. )
Оригинал: “https://dev.to/holosiek/cinema-website-tutorial-using-masonite-framework-4a38”