В этом руководстве рассказывается, как подключить ваше веб-приложение к базе данных MySQL, чтобы вы могли создавать, считывать, обновлять и удалять (CRUD) информацию в базе данных через веб-приложение Vaadin. Идея состоит в том, чтобы показать вам, как подключить шаблонный проект, загруженный с https://start.vaadin.com, к базе данных, чтобы вы могли скопировать его для своих собственных нужд. Речь идет не о передовых практиках (для Vaadin, Spring или MySQL), а о том, как помочь вам быстро начать работу.
Вы можете найти код, используемый в этом руководстве, из GitHub .
1. Начало работы с start.vaadin.com
Начните с загрузки проекта с https://start.vaadin.com . Для этого примера получите проект по умолчанию с представлением MasterDetail. Проект по умолчанию также имеет представление DashBoard. Не стесняйтесь добавлять новые представления по своему усмотрению, но убедитесь, что представление MasterDetail там. Загрузите проект с нужным именем и идентификатором группы Java.
В этом примере имя проекта — databasemysqlexample, а идентификатор группы Java — com.example.mysql. Используйте то же самое, если вы хотите скопировать и вставить код или целые классы, но это также хорошее упражнение, чтобы попытаться выяснить все самостоятельно. Для Технологического стека выберите Spring Boot. Это требуется в этом уроке.
Вы также можете прочитать:
Подключение Spring Boot с базами данных MySQL и Oracle
2. Откройте загруженный проект в вашей любимой IDE
Загрузите, разархивируйте и откройте проект в вашей любимой интегрированной среде разработки (IDE). Если у вас возникли проблемы с IDE или настройкой среды, ознакомьтесь с кратким руководством по началу работы на vaadin.com . У этого также есть список предпосылок Vaadin .
Есть также более подробные руководства для трех основных идентификаторов Java:
На данный момент, вы, вероятно, хотите, чтобы ваш новый проект Vaadin онлайн. Когда проект открыт в выбранной IDE, вы можете запустить его. Приложение Vaadin с Spring Boot можно запустить с помощью команды mvn spring-boot: run или как стандартное приложение Java. Если у вас установлен Maven, просто перейдите в корневой каталог проекта и введите mvn spring-boot:run.
В приведенных выше руководствах содержатся подробные инструкции о том, как это сделать в каждой из IDE (см. Заголовок «Запуск целей Maven»).
ПРИМЕЧАНИЕ. Прежде чем проверять эти учебные пособия, имейте в виду, что в этих учебниках цель Maven — это jetty: run, но, поскольку мы используем Spring Boot, цель Maven — это spring-boot: run, а не jetty: run. Следуйте инструкциям, но замените причал: бегите с пружинной загрузкой: бегите, и вы должны быть настроены на успех.
Когда вы запустите приложение в первый раз, приготовьтесь подождать некоторое время: Vaadin использует систему пакетов npm. Недостатком является то, что при первом запуске вам нужно загрузить довольно много кода из Интернета (из репозиториев npm и Maven). Если вам скучно во время загрузки, вы можете посмотреть, почему Vaadin использует npm здесь и здесь .
Теперь мы предполагаем, что все загружено и локальный веб-сервер запущен с вашим приложением. Консоль должна отображать текстовые строки следующим образом:
Джава
xxxxxxxxxx
1
INFO 8152 --- [ restartedMain] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat started on port(s): 8080 (http) with context path
2
3
INFO 8152 --- [ restartedMain] c.e.m.application.spring.Application : Started Application in 25.931 seconds (JVM running for 26.81)
Это означает, что веб-сервер Tomcat запущен и обслуживает ваше приложение по адресу http: // localhost: 8080 . Откройте веб-браузер и перейдите по этому адресу. Вы должны увидеть ваше заявление. Посмотрите, поищите, нажимайте на элементы списков и кнопки и смотрите, что происходит.
3. Менеджер баз данных и настройка базы данных
Чтобы подключить MySQL к вашему приложению, вам нужна база данных MySQL, работающая локально или работающая онлайн в облаке. MySQL — это продукт Oracle. MariaDB — это бесплатная замена MySQL с открытым исходным кодом. Вы также можете получить MySQL от Google или запустить в качестве дополнения в Heroku, чтобы упомянуть пару. Если вам нужна помощь в настройке сервера базы данных, посмотрите, например, здесь .
Прежде чем идти дальше, у вас должен быть запущен и запущен сервер базы данных MySQL (или соответствующая база данных, например MariaDB). Если вы используете базу данных локально, вам нужен менеджер баз данных, такой как HeidiSQL или Oracle MySQL Workbench . Использование командной строки для управления базами данных так же хорошо.
4. Подключение приложения Vaadin к базе данных
Давайте предположим, что все в порядке, и мы можем продолжить подключение базы данных к нашему приложению Vaadin. Сначала вы должны ввести адрес базы данных и учетные данные (имя пользователя / пароль) для базы данных. Не используйте root как пользователь. Это руководство не о лучших практиках, но использование пользователя root для доступа к базе данных просто неправильно, и его не следует делать никогда. Если вы решили проигнорировать это предупреждение и сделать это в любом случае, вы можете пропустить шаги, в которых мы создаем нового пользователя и предоставляем ему привилегии. Пользователь root уже имеет достаточно прав, чтобы что-либо сделать.
В вашей IDE выберите файл application.properties и откройте его. Добавьте адрес сервера MySQL и учетные данные в файл application.properties :
Джава
xxxxxxxxxx
1
spring.datasource.url = jdbc:mysql://localhost:3306/
2
spring.datasource.username =
3
spring.datasource.password =
В этом примере мы используем dummydata в качестве заполнителя для всего: базы данных, имени пользователя и пароля. Для свойства spring.datasource.url мы используем localhost с портом 3306. Это порт по умолчанию для MySQL (и MariaDB), но имейте в виду, что это может быть что-то еще. Это особенно актуально, если вы используете облачные экземпляры MySQL. Окончание / dummydata в адресе относится к имени базы данных, которую мы собираемся создать.
Джава
xxxxxxxxxx
1
spring.datasource.url = jdbc:mysql://localhost:3306/dummydata
2
spring.datasource.username = dummydata
3
spring.datasource.password = dummydata
Далее нам нужно убедиться, что проект содержит зависимости spring-boot-starter-jdbc и mysql-connector-java . Вот где Maven начинает действовать. Добавьте эти зависимости в ваш файл pom.xml под тегом element <dependencies> . После добавления вам может потребоваться обновить проект. Это можно сделать в Eclipse, щелкнув правой кнопкой мыши по проекту и выбрав Maven | Обновление проекта… Выберите ваш проект и нажмите ОК. Подождите, пока Maven загрузит зависимости, и все готово. Обычно это делается, когда вы запускаете приложение, но это не мешает делать все заранее.
Добавьте следующие зависимости в файл pom.xml:
org.springframework.boot spring-boot-starter-jdbc
mysql mysql-connector-java runtime
XML
xxxxxxxxxx
1
<dependency>
2
<groupId>org.springframework.boot</groupId>
3
<artifactId>spring-boot-starter-jdbc</artifactId>
4
</dependency>
5
<dependency>
6
<groupId>mysql</groupId>
7
<artifactId>mysql-connector-java</artifactId>
8
<scope>runtime</scope>
9
</dependency>
5. Подготовка базы данных
Если у вас уже есть база данных, пользователь с привилегиями, таблица со столбцами и данные, вы можете пропустить любой или все следующие шаги. После этого урока, когда вы начинаете создавать свои собственные новые представления с данными, вам нужна только таблица со столбцами и предоставление привилегий пользователю. Есть способ предоставить все права пользователю, но я не буду показывать, как это немного опасно, если вы когда-нибудь начнете работать с приложением. Делайте это на свой страх и риск.
Вам необходимо войти в выбранный вами менеджер баз данных (командную строку или графический интерфейс пользователя) с пользователем с правами на создание новых пользователей, баз данных и таблиц.
Войдите в менеджер баз данных как администратор или root. В менеджере баз данных создайте новую базу данных:
MySQL
xxxxxxxxxx
1
CREATE DATABASE dummydata;
В менеджере баз данных создайте нового пользователя с паролем:
MySQL
xxxxxxxxxx
1
CREATE USER 'dummydata'@'localhost' IDENTIFIED BY 'dummydata';
В диспетчере базы данных предоставьте пользователю dummyuser все права на базу данных dummydata:
MySQL
xxxxxxxxxx
1
GRANT ALL PRIVILEGES ON dummydata.* TO 'dummydata'@'localhost';
В менеджере баз данных создайте таблицу, содержащую поля для представления Masterdata в приложении. Masterdata использует класс Employee, который можно найти в файле Employee.java.
MySQL
xxxxxxxxxx
1
USE dummydata;
2
CREATE TABLE IF NOT EXISTS employees (firstname VARCHAR(1000), lastname VARCHAR(1000), title VARCHAR(1000), email VARCHAR(1000), notes VARCHAR(1000) );
В диспетчере базы данных вставьте пример данных о сотрудниках:
MySQL
xxxxxxxxxx
1
USE dummydata;
2
INSERT INTO employees VALUES ('Dev', 'Eloper', 'developer', 'dev.eloper@dontsendthis.org', 'Backend developer');
3
INSERT INTO employees VALUES ('Front', 'Ender', 'developer', 'front.ender@dontsendthis.org', 'Frontend developer');
4
INSERT INTO employees VALUES ('Wo', 'Manager', 'manager', 'wo.manager@dontsendthis.org', 'PO and team leader');
Шаги ниже являются необязательными и требуются только для проверки работоспособности.
- В диспетчере базы данных выйдите из системы с правами администратора или пользователя root.
- В диспетчере базы данных войдите как пользователь dummydata.
- В менеджере базы данных выберите все из таблицы сотрудников в базе данных dummydata:
MySQL
xxxxxxxxxx
1
SELECT * FROM dummydata.employees
Если вы видите список сотрудников, вставленных на шаге выше, вы готовы с базой данных.
6. Подключение базы данных к приложению
До сих пор мы занимались в основном настройками. Теперь мы можем начать кодирование. Сначала запустите приложение с инструкциями, приведенными выше (если вам нужно обновить память, посмотрите на шаг 2: «Откройте загруженный проект в вашей любимой IDE» в этом учебном пособии).
ПРИМЕЧАНИЕ . Вы можете использовать команду mvn spring-boot:runили запустить как приложение (mainclass: com.example.mysql.application.spring.Application в этом примере).
Если вы получили ошибку консоли, как это:
Приложение не удалось запустить
Описание :
Не удалось запустить соединитель Tomcat, настроенный на прослушивание через порт 8080. Возможно, порт уже используется или разъем неправильно настроен.
Действие :
Проверьте конфигурацию соединителя, определите и остановите любой процесс, который прослушивает порт 8080, или настройте это приложение на прослушивание другого порта.
Не волнуйся, еще не все потеряно; это просто означает, что какое-то приложение уже использует порт 8080. Возможно, вы запустили приложение и не запомнили его завершение. Итак, вам нужно найти вкладку Console, которая запускает ваше приложение, и завершить ее.
В Eclipse найдите красное поле — значок с подсказкой Terminate. Также есть кнопка с подсказкой Удалить все прекращенные запуски, которая удаляет вкладки консоли, на которых ничего не запущено. После нажатия этой кнопки вы можете найти вкладку «Консоль», которая фактически запускает приложение.
Когда приложение запустится, используйте браузер и откройте http: // localhost: 8080 / masterdetail . Вы должны увидеть список сотрудников и информацию о них. На данный момент список все еще заполняется из кода, а не из базы данных.
Выполните действия, чтобы подключить представление (точнее, компонент Grid) к базе данных:
Откройте файл MasterDetalView.java в IDE:
Найдите afterNavigation метод. В этом методе таблица (называемая сотрудниками) заполняется списком сотрудников. Список сотрудников в настоящее время выбирается из объекта службы BackendService .
Джава
xxxxxxxxxx
1
2
public void afterNavigation(AfterNavigationEvent event) {
3
employees.setItems(service.getEmployees());
4
}
Создайте файл с именем EmployeeService.java в том же пакете, что и файл BackendService.java . Мы также будем использовать уже существующие class Employee (из файла Employee.java ).
Сделайте следующие шаги:
- Добавьте аннотацию @Component перед объявлением класса EmployeeService.
Джава
xxxxxxxxxx
1
2
public class EmployeeService {
- Добавьте переменную jdbcTemplate в класс.
-
Добавьте аннотацию @Autowired перед объявлением переменной.
Джава
xxxxxxxxxx
1
2
private JdbcTemplate jdbcTemplate;
- Добавьте функцию, чтобы получить всех сотрудников из базы данных:
Джава
xxxxxxxxxx
1
public List findAll() {
2
try {
3
return jdbcTemplate.query("SELECT firstname, lastname, email, title FROM
4
employees", (rs, rowNum) -> new Employee(rs.getString("firstname"),
5
rs.getString("lastname"), rs.getString("email"),
6
rs.getString("title")));
7
} catch (Exception e) {
8
return new ArrayList();
9
}
10
}
Когда функция findAll вызывается, она использует переменную jdbcTemplate для выполнения запроса SELECT . Затем запрос возвращает найденные строки и для каждой из них и создает экземпляр класса Employee . Эти сотрудники добавляются в список и возвращаются вызывающей стороне. Большая часть работы выполняется JdbcTemplate . Вам просто нужно убедиться, что класс Employee имеет конструктор, сопоставляющий информационную выборку с запросом, и считывает его с помощью методов rs.get <>.
Примечание : Rowmapper (делает список сотрудников для вас) имеет такие методы, как getString, getDouble, getInt и getDate, которые отражают данные, полученные из базы данных. Например, если у вас есть поле datetime в базе данных, вам лучше использовать метод getDate () вместо getString ().
Теперь вернитесь к файлу MasterDetalView.java в IDE: добавьте переменную для вновь созданного класса EmployeeService . Вы можете посмотреть, как осуществляется реализация BackendService . Не забудьте аннотацию @Autowired .
Джава
xxxxxxxxxx
1
2
private EmployeeService employeeService;
На этом этапе вам лучше убедиться, что приложение все еще работает и работает нормально (как прежде, чем мы начали добавлять код). Проверьте инструкции, приведенные ранее в этом руководстве, если вам нужна помощь. Если все по-прежнему работает как прежде, мы можем продолжить работу в IDE с файлом MasterDetalView.java . Теперь мы изменим источник для списка, который заполняет элемент Grid в представлении MasterDetail .
Перейдите к afterNavigation методу (который мы уже рассмотрели) в файле MaterDetailView.java . Замените вызов service.getEmployees() метода на вызов только что созданного метода экземпляров EmployeeServiceemployeeService.findAll() . Вы можете увидеть оригинальную строку в комментариях ниже.
Джава
xxxxxxxxxx
1
//employees.setItems(service.getEmployees());
2
employees.setItems(employeeService.findAll());
Теперь сетка сотрудников должна быть заполнена данными из базы данных.
Обновите браузер и убедитесь, что это так. Теперь более длинный список следует заменить только тремя сотрудниками, которых мы добавили в базу данных. Выберите строку из списка. Элемент формы рядом со списком должен автоматически заполняться информацией о выбранном сотруднике. Теперь список сотрудников подключен к базе данных вместо жестко закодированного списка сотрудников. Вы можете проверить это, перейдя к менеджеру базы данных и добавив еще несколько строк с оператором INSERT, который вы уже использовали. Эти новые строки должны появиться на странице после обновления окна.
ПРИМЕЧАНИЕ . Если список не изменился, можно попытаться исправить его несколькими способами. Вернитесь в IDE и убедитесь, что вы сохранили все измененные файлы. Убедитесь (с точки зрения консоли), что сервер был перезапущен (это может занять некоторое время). Если приложение по-прежнему показывает старых сотрудников, остановите сервер и перезапустите приложение.
Спасибо за чтение части 1! Во второй части мы узнаем, как сохранять данные сотрудников и многое другое. Будьте на связи!