Как использовать разработку Vue.JS на Python

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 Server. Мы будем использовать Microsoft SQL Server Express, который также бесплатен.

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

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

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

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

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

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

pip install blinker
pip install cryptography
pip install Flask
pip install Flask-Login
pip install Flask-SQLAlchemy pip install PyJWT
pip install pyodbc
pip install SQLAlchemy

pip install Werkzeug

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

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

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

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

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

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

# entities\userSession.py
# Автор: Андре Бальдо (http://github.com/andrebaldo/)# Определяет модель данных UserSession (сеанс входа в систему)
из flask_sqlalchemy Импорт SQLAlchemy из SQLAlchemy
import Столбец, ForeignKey, Целое число, Строка, DateTime, логическое значение

класс UserSession(SQLAlchemy(). Model):
__tablename__ = 'UserSession' # Имя таблицы в нашей базе данных
# Определение столбцов
userSessionId = Столбец(Целое число, primary_key=True)
userId = Столбец(Целое число, значение NULL=False)loginDate = Столбец(ДатаВремя, значение NULL=False)expireDate = Столбец(ДатаВремя, значение NULL=False)loggedOut = Столбец(логическое значение, значение NULL=Ложь)


jwToken = Столбец(Строка(4000), nullable=False)url = Столбец(Строка(4000), nullable=False)logoutDate = Столбец(DateTime, nullable=False)

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

# entities\databaseSessionManager.py
# Автор: Andre Baldo (http://github.com/andrebaldo/)
# Этот класс вернет сессию 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)

# create a Session
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 Create frontend

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

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

• Вавилон
• Поддержка прогрессивных веб-приложений (PWA)
• Маршрутизатор
• Vuex
• ЛИНТЕР/Форматер

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

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

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

Сервировка пряжи

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

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

Vue добавить Vuetify

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

npm install axios –save

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

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

<!–
frontend\src\components\Navbar.vue
Автор: Автор: Андре Бальдо (http://github.com/andrebaldo/) –><template><v-app-bar app color="indigo" dark><v-app-bar-nav-icon @click.stop="drawer = !drawer" />
<v-toolbar-title>Application</v-toolbar-title><v-spacer></v-spacer>



<v-btn
rounded
color="primary"to="login"v-if="

getIsUserLoggedIn == undefined ||getIsUserLoggedIn == false"><v-icon left>mdi-login-variant</v-icon>Login
</v-btn><v-btn rounded color="grey darken-2" to="/" v-if="getIsUserLoggedIn" @click="processLogout()"
>Logout <v-icon right>mdi-logout-variant</v-icon></v-btn>



</ v-app-bar><
/template>
<script>
import { mapGetters, mapActions } из "vuex";
export default {Name: "Navbar",
computed: {

... mapGetters(["getIsUserLoggedIn"])
},
methods: {
... mapActions(["logout"]),
processLogout(){this.logout({controllerReference:this}).then(function(ctrl){

ctrl.$router.push('login')})


}}}

;
</сценарий>

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

Раздел сценария сообщает Vue.js что произойдет.

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

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

<!–
frontend\src\App.vue
Автор: Автор: Андре Бальдо (http://github.com/andrebaldo/) –><template><v-app><Navbar/><v-content><router-view/></v-content></v-app></template>

<script>
import Navbar из './components/Navbar';
экспорт по умолчанию {имя: 'App',components: {

Navbar,},


};
</сценарий>

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

Здорово! Теперь у вас есть работающий SPA, который вы можете настроить и настроить по своему усмотрению.

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

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

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

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

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