JavaScript заставляет мир вращаться. По состоянию на 2021 год он был самым распространенным языком программирования девятый год подряд.

Частично это связано с элегантной структурой JavaScript и детализированным синтаксисом с нюансами. Это также из-за обширного набора мощных инструментов и библиотек, которые делают многие распространенные приложения совершенно безболезненными.

Vue.js набирает популярность как одна из самых захватывающих и мощных сред JavaScript, доступных в настоящее время. Сегодня мы поговорим о разработке Vue.js с Python, еще одним из самых популярных языков программирования в современной среде разработки.

Разработка Vue.js с помощью Python

Лучший способ изучить разработку Vue.js с помощью Python — это сделать. Таким образом, вы сможете увидеть как Python , так иVue.js в действии, чтобы иметь более практическое представление о сильных сторонах каждого из них.

Чтобы проиллюстрировать веб-разработку с помощью Vue.js и Python, мы собираемся показать вам, как создать одностраничное приложение (SPA) с помощью Python и Vue.js. Vue.js поддерживает интерфейс, а Python — серверную часть, где он отвечает за вход в систему, выход из системы и регистрацию. Данные будут храниться на сервере Microsoft SQL.

Шаг 1. Установка

Для начала убедитесь, что у вас установлен Python. Если его еще нет в вашей системе, вы можете скачать последнюю версию здесь.

Если вы устанавливаете Python в первый раз, обязательно установите флажок, чтобы добавить Python в переменные среды. Это позволит вам запускать Python из любого каталога с помощью терминала.

Вам также понадобится текстовый редактор для написания кода. Мы рекомендуем Notepad++, так как он легкий, доступен для всех платформ и абсолютно бесплатный.

Вам нужно убедиться, что у вас установлен SQL-сервер. Мы будем использовать Microsoft SQL Server Express, который также бесплатен.

Вам также понадобится что-то для обслуживания вашего сервера после его установки. Мы рекомендуем Microsoft SQL Server Management Studio.

Шаг 2. Настройте инфраструктуру

Теперь вы собираетесь настроить инфраструктуру для вашего SPA в вашем программном каталоге. Для этого примера создайте каталог с именем Python SPA.

Затем внутри этого каталога создайте подкаталог и назовите его «бэкэнд».

Откройте Notepad++ и создайте новый файл. Здесь вы будете писать свой код.

Наконец, для этого примера требуются некоторые библиотеки. В Терминале выполните следующее:

pip install blinker
pip install cryptography
pip install Flask
pip install Flask-Login
pip install Flask-SQLAlchemy
pip install PyJWT
pip install pyodbc< br /> pip install SQLAlchemy
pip install Werkzeug

Эти библиотеки позволяют вам взаимодействовать с вашей базой данных. Чтобы сохранить эти данные, сначала создайте еще одну папку в подкаталоге бэкэнда. Назовите эту новую папку «сущности».

Шаг 3. Создайте предварительные файлы Python

Внутри папки объектов создайте новый файл с помощью Notepad++. Назовите его users.py, который является файлом Python, и введите следующее:

# entity\user.py
# Автор: Андре Бальдо (http://github.com/andrebaldo/)
# Определяет модель данных пользователя
из flask_sqlalchemy import SQLAlchemy
import flask_login

db = SQLAlchemy()
class User(db.Model, flask_login.mixins.UserMixin):
__tablename__ = 'User' # Имя таблицы в нашей базе данных
# Определение столбцов
userId = db.Column(db.Integer, primary_key=True)
имя пользователя = db.Column(db.String(80), unique=True, nullable=False)
пароль = db.Column(db.String( 120), unique=False, nullable=False)
mobilePhone = db.Column(db.String(80), unique=False, nullable=True)
def get_id(self):
return chr(self.userId)

Затем создайте еще один файл с именем «userSession.py:»

# entity\userSession.py
# Автор: Андре Бальдо (http://github.com/andrebaldo/)
# Определяет модель данных UserSession (сеанс входа в систему)
из flask_sqlalchemy import SQLAlchemy
из sqlalchemy import Column, ForeignKey, Integer, String, DateTime, Boolean

class UserSession(SQLAlchemy().Model):
__tablename__ = 'UserSession' # Имя таблицы в нашей базе данных
# Определение столбцы
userSessionId = Column(Integer, primary_key=True)
userId = Column(Integer, nullable=False)
loginDate = Column(DateTime, nullable=False)
expireDate = Column(DateTime, nullable=False)
loggedOut = Column (логическое значение, nullable=False)
jwToken = Column(String(4000), nullable=False)
url = Column(String(4000) , nullable=False)
logoutDate = Column(DateTime, nullable=False)

Наконец, создайте databaseSessionManager.py:

# entity\databaseSessionManager.py
# Автор: Андре Бальдо (http://github.com/andrebaldo/)
# Это class вернет сеанс базы данных SQLAlchemy,
# классы, которые хотят манипулировать данными, могут использовать его для манипулирования базой данных.

из sqlalchemy import create_engine
из sqlalchemy.orm import sessionmaker

SERVER = 'localhost'
DATABASE = 'project001'
DRIVER = 'SQL Server Native Client 11.0'
DATABASE_CONNECTION = f'mssql://{SERVER}/{DATABASE}?trusted_connection=yes&driver={DRIVER}'
engine = create_engine(DATABASE_CONNECTION, echo=True)

# создать сеанс
Session = sessionmaker(bind=engine)

класс SessionManager(object):
def __init__(self):
self.session = Session()

Сохраните каждый из этих файлов после ввода кода.

Вы сделаете то же самое для сервисов, а затем создадите само приложение. Глубокое рассмотрение Python и SQL в целом выходит за рамки этой статьи, поскольку оба являются глубокими и мощными языками программирования. Чтобы сэкономить время, проверьте этот репозиторий GitHub и скопируйте его структуру и содержимое его файлов.

В качестве альтернативы вы можете просто клонировать каталог внутри папки разработки, набрав:

клон git https://github.com/andrebaldo/python-vue-spa-boilerplate

Теперь давайте перейдем к Vue.js, чтобы вы могли увидеть, как Vue.Js и Python работают вместе.

Шаг 4. Начало работы с Vue.Js

Чтобы начать работу с Vue.Js, сначала вам нужно убедиться, что у вас установлен Node.js. Затем перейдите на Vuejs.org и следуйте этим инструкциям для установки.

После того, как все будет установлено, перейдите в корневой каталог вашего проекта. Выполните следующую команду:

vue создать интерфейс

Это запустит мастер установки. Выберите опцию «Выбрать функции вручную».

Когда вам будут представлены варианты, выберите следующее:

  • Вавилон
  • Поддержка прогрессивного веб-приложения (PWA)
  • Маршрутизатор
  • Вьюекс
  • Линтер/форматер

Затем вам будет предложено выполнить процесс Vuex, который позволит вам организовать данные, необходимые для внешнего интерфейса, в одном месте. Выбирать:

  • ESLint только с предотвращением ошибок
  • Линт при сохранении
  • В специальных конфигурационных файлах

Это создаст каталог с именем «frontend». Перейдите в эту папку и выполните следующую команду.

пряжа служить

Это запускает локальный сервер. Чтобы проверить, работает ли это, перейдите по адресу http://localhost:8080/.

Наконец, вы собираетесь настроить Vue.js, чтобы сделать его более полезным. Установите Vuetify — плагин, позволяющий создавать более привлекательные интерфейсы. Тип:

vue добавить vuetify

Наконец, мы собираемся установить последнюю зависимость, axios.js.

npm установить axios – сохранить

Шаг 5. Добавьте панель навигации

Теперь все готово для настройки вашего SPA по вашему желанию. Мы собираемся добавить панель навигации, чтобы показать вам Vue в действии. Внутри папки компонентов введите следующее:

‹!–
frontend\src\components\Navbar.vue
Автор: Автор: Andre Baldo (http://github.com/andrebaldo/) –›
‹template›
‹v-app-bar app color="indigo" dark›
‹v-app-bar-nav-icon @click.stop =”drawer = !drawer” /›
‹v-toolbar-title›Приложение‹/v-toolbar-title›
‹v- spacer›‹/v-spacer›
‹v-btn
круглый
color="primary" ”
to=”login”
v-if="getIsUserLoggedIn == undefined ||getIsUserLoggedIn == false"
›
‹v-icon left›mdi-login-variant‹/v-icon›Вход
‹/v- btn›
‹v-btn rounded color=”grey darken-2″ to=”/” v-if="getIsUserLoggedIn" @click="processLogout()"›
Выйти ‹v-icon right›mdi-logout-variant‹/v-icon›
‹/v-btn›
‹/v-app-bar›
‹/template›
‹script›
импорт { mapGetters, mapActions } из «vuex»;
экспорт по умолчанию {
Имя: «Navbar»,
вычислено: {
…mapGetters(["getIsUserLoggedIn"])
},
методы: {
…mapActions([“logout”]),
processLogout(){
this.logout({controllerReference:this})
.then(function(ctrl){
ctrl.$router.push(' логин')
})
}
}
};
‹/script›

Давайте закончим просмотром файла Vue, чтобы помочь вам лучше понять, что происходит. Первый раздел — это шаблон, который настраивает файл Vue аналогично файлу YAML.

Раздел script сообщает Vue.js, что произойдет.

Наконец, раздел «Стиль» позволяет вам дополнительно стилизовать и настроить ваше приложение.

Теперь вам просто нужно интегрировать панель навигации в файл App.vue. Найдите файл App.vue в каталоге /frontend/src. Замените код следующим:

‹!–
frontend\src\App.vue
Автор: Автор: Andre Baldo (http://github.com/andrebaldo/) –›
‹template›
‹v-app›
‹Navbar/›
‹v-content›< br /> ‹router-view/›
‹/v-content›
‹/v-app›
‹/template›

‹script›
импорт панели навигации из './components/Navbar';
экспорт по умолчанию {
название: «Приложение»,
компоненты: {
Панель навигации,
},
};
‹/script›

Сохраните файл и обновите локальный сервер.

Ну вот! Теперь у вас есть рабочий SPA, который вы можете настроить и настроить по своему вкусу.

Как видите, к использованию Vue.js с Python нужно немного привыкнуть, так как это подразумевает одновременное понимание JavaScript, Python и SQL.

Однако, если у вас есть опыт веб-разработки, вы поймете волнение и возможности, связанные с возможностью создать и развернуть веб-приложение за считанные минуты!

Хотите узнать больше о веб-разработке?

Разработка Vue.js с использованием Python — это лишь один из бесчисленных мощных инструментов, доступных предприятиям и разработчикам, стремящимся освоить цифровую сферу.

Хотите узнать больше о том, как веб-разработка может принести пользу вам и вашему бизнесу? Наймите опытного веб-разработчика сегодня, чтобы ускорить достижение ваших цифровых целей.

Первоначально опубликовано на https://programmers.io 24 января 2022 г.