сайт на java

Подключаем статические ресурсы к веб приложению. Простой сайт на Java часть 2.

Продолжаем писать наш сайт на Java и в этой части мы подключим статические ресурсы к нашему веб приложению: таблицы стилей (CSS), javascript, картинки. Если Вы еще не читали первую статью, вот ссылка. Для начала, откроем наш проект в таком виде, в которым мы его оставили в прошлый раз. Если проекта нет, можно скачать код с первой статьи: https://github.com/caligula95/simplewebapp и открыть его у себя в IDEE. Как это сделать читайте в статье «Как открыть мавен проект в Еклипс». Теперь нужно добавить в наш web.xml урл ресурсов и назначить сервлет, который будет ими управлять. Мы не зря используем Tomcat. У него есть так называемый дефолтный сервлет, который отвечает за обслуживание статических ресурсов. В нашем web.xml нужно так и прописать:

<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>/resources/*</url-pattern>
</servlet-mapping>

Полный вид нашего файла web.xml:

Код    
  1. <!DOCTYPE web-app PUBLIC
  2.  "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
  3.  "http://java.sun.com/dtd/web-app_2_3.dtd" >
  4.  
  5. <web-app>
  6.   <display-name>Archetype Created Web Application</display-name>
  7.   <servlet>
  8.     <servlet-name>HomeServlet</servlet-name>
  9.     <display-name>HomeServlet</display-name>
  10.     <description></description>
  11.     <servlet-class>com.javamaster.controller.HomeServlet</servlet-class>
  12.   </servlet>
  13.   <servlet-mapping>
  14.     <servlet-name>HomeServlet</servlet-name>
  15.     <url-pattern>/</url-pattern>
  16.   </servlet-mapping>
  17.   <servlet-mapping>
  18.   <servlet-name>default</servlet-name>
  19.   <url-pattern>/resources/*</url-pattern>
  20.   </servlet-mapping>
  21. </web-app>

Сохраняем и закрываем наш файл.

Далее нужно добавить папку с именем resources в наш каталог подключение ресурсов к веб приложению

Для того, чтобы посмотреть и убедиться, что мы все делаем правильно, предлагаю создать небольшой файл CSS. Кто не знает это таблица стилей для сайта, чтобы делать красивый и удобный дизайн. Назовем наш файл style.css и добавим в него небольшое свойство, которое делает заголовки первого уровня (h1 тег) красным цветом: 

Код    
  1. h1 {
  2.     color:red;
  3. }

И теперь, когда в нас есть статический ресурс style.css подключим его к нашем страничке welcome.jsp, так как именно там есть заголовок первого уровня. Подключаются стили как и в обычном HTML: <link href=«resources/css/style.css« rel=«stylesheet«>.

подключение ресурсов

Теперь осталось только запустить наше приложение и наслаждаться красивым дизайном, который мы прописали)).

запуск страницы с ресурсами

Конечно, таким сайтом никого не удивишь. Предлагаю поискать в Интернете бесплатные шаблоны страниц и попробовать залить их на наш проект. Бесплатных шаблонов очень много и Вам, как правило, в качестве платы нужно просто не удалять ссылку на автора внизу страницы. Я ввел в гугле: «simple site template free download» и получил массу шаблонов страниц. Мне понравился вот этот: страница главной

Я уже даже для удобства разметил, какой блок будет за что отвечать. Лишнее всегда можно удалить. С шаблоном шли ресурсы стилей, джаваскриптов и шрифты. Все это я заливаю в папку resources: для удобства можно просто копировать папки из каталога шаблона и вставлять в наш проект.

Теперь можно удалить наш файл welcome.jsp, а в index.jsp вставить содержимое скачанного шаблона. Теперь очень внимательно нужно найти все подключения ресурсов в шаблоне и немного изменить путь к файлам добавив в начало путь к нашей папке:

путь к ресурсам

Сохраняем, запускаем и получаем шаблон сайта у себя на сервере:

шаблон на сервере

Осталось только подключиться к базе данных и наполнить шаблон реальными данными и сайт будет почти готов.

Всегда перед тем, как делать что-то глобальное. Подключение ресурсов или базы данных, проверьте работает ли это вообще на простых примерах, как мы это делали с изменением цвета заголовка. Этот пример не занял много времени но, его было достаточно чтобы мы убедились что все работает и можно продолжать работать. На простых и небольших примерах легче отловить ошибку.

В следующей статье мы разберемся с принципом работы Servlet-ов и jsp. А потом продолжим работать с нашим проектом.

Как всегда видео на Youtube:

Код для проекта в описании к видео.

Добавить комментарий