회원가입, 로그인, 게시판 백엔드 실습( main 화면 )

Spring 에서 회원가입 , 로그인 , 게시판 백엔드 실습을 진행해보자.

 : html 템플릿 등을 활용해서 브라우저에 나타나는 요소들을 꾸며주고, mySql을 데이터베이스로 연결해서

백엔드 작업을 진행해보자.

 

목표

 - Spring을 활용해서 MVC 구조로 작업을 처리하는 웹 페이지를 만들어보자.

 - jsp 파일에 html 템플릿을 적용 , css, javascript 파일을 연결

 - tomcat 8.5 버전으로 local 서버를 구축하고 페이지를 이동할 수 있게 만든다.

 - spring에 연동되 있는 java 프로그램을 이용해 Controller, Mapper, Model, Service 클래스들을 생성하고

데이터베이스와 연동할 수 있게 만든다.

 - mySQL 을 활용하여 웹 페이지에서 입력한 데이터를 저장하고, 데이터베이스에 저장되 있는 데이터들을

브라우저에 나타낼 수 있게 만든다.

---

1. 템플릿 적용 및 HomeController 생성

 - 템플릿을 적용해서 main 페이지 작성

 - 무료 HTML 템플릿을 다운받아 새로 생서한 프로젝트에 적용하고 css, js 파일의 링크 경로를 변경했다.

 

 - css, javascript 같은 정적 리소스를 html 에 링크하기

 - 파일의 링크 경로는 src --> servlet-context.xml 파일에서 변경할 수 있다.

<resources mapping="/resources/**" location="/resources/" />

-> 이 명령어는 HTTP GET 요청을 처리하고 ${webappRoot}/resources 디렉터리에서 정적 리소스를
효율적으로 제공하기 위해 정적 파일을 서비스 하는 것을 지원한다.
css나 js 파일을 해당 경로에 놓고 연결해서 사용할 수 있다.

 따라서 link 태그의 href 경로를 /resources/** 형태에 맞게 변경했다.

 

 - main 페이지에서 로그인, 회원가입, 게시판으로 이동할 수 있게 만들기

 - 가장 먼저 구현하고자 하는 기능이 로그인, 회원가입, 게시판이기 때문에 각각의 기능을 이용할 수 있도록

a 태그로 링크를 걸어뒀다.

메인 페이지에 나타나는 a 태그들

 

 - HomeContoller 작성하기

 - Domain 이름 뒤에 아무 것도 없는 localhost:8080/ 일 때 views 폴더 내부의 home.jsp 파일을 불러오는 것으로

main 화면을 구성했다.