개발새발

[2019.12.09] 본문

[Daliy]

[2019.12.09]

재래김유진 2019. 12. 9. 14:27
728x90
반응형

1) spring boot 에서 jsp 화면 띄우기

 

spring boot는 application.properties에서 설정을 다 해준다고 했다. 

 

  • spring boot에서 jsp를 사용하려면 dependency를 추가해줘야한다.

 

  • application.properties에 jsp파일을 넣어둘 경로를 지정해준다.

 

  • jsp파일을 만들고

 

  • Controller 만들어준 다음

 

  • [프로젝트 우클릭] - [run as] - [spring boot app]으로 돌린후 url에 localhost:8080/hello를 치면 

요로코롬 에러가 난다.

에러 : Error resolving template [hello], template might not exist or might not be accessible by any of the configured Template Resolvers 어쩌고 저쩌고 

 

  • application.properties에 spring.thymeleaf.enabled=false를 추가해준다.

깰꼼!

 

2) spring boot에 부트스트랩 적용

http://bootstrapk.com/

 

부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프론트엔드 프레임워크.

프리프로세서 부트스트랩은 평범한 CSS 로 제공합니다만, 그것의 소스코드는 2개의 인기있는 CSS 프리프로세서인 Less 와 Sass 를 사용합니다. 신속하게 프리컴파일된 CSS 로 시작하거나 소스를 빌드하세요. 하나의 프레임워크, 모든 기기. 부트스트랩은 웹사이트와 어플리케이션을 단일 코드 베이스로 CSS 미디어 쿼리를 이용하여 휴대폰에서부터 태블릿, 데스크탑까지 쉽고 효과적으로 크기를 조절합니다. 많은 기능들 부트스트랩과 함께, 보통의 HTML 요소들

bootstrapk.com

  • 요기서 부트스트랩을 다운받은 뒤 src/main/webapp/에 resources 폴더를 만들어서 다운받은 css, fonts, js 폴더를 추가해준다.

like this

 

  • 부트스트랩을 사용하려면 pom.xml에 dependency를 추가해줘야한다.

 

  • 그리고 application.properties에서 경로 설정해준 곳에서 jsp파일을 만들어준다. (login.jsp)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>테스트테스트 Login</title>
    <link rel="stylesheet" href="/webjars/bootstrap/4.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../resources/css/login.css">
</head>
<body class="my-login-page">
    <section class="h-100">
        <div class="container h-100">
            <div class="row justify-content-md-center h-100">
                <div class="card-wrapper">
                    <div class="brand">
                        <img src="../resources/css/logo.png">
                    </div>
                    <div class="card fat">
                        <div class="card-body">
                            <h4 class="card-title text-center text-dark">
                            Welcome to BASICIT
                            
                            <span class="badge badge-secondary">
                            v1.0
                            </span>
                            
                            </h4>
                            <form method="POST">
                             
                                <div class="form-group">
                                    <label for="id" class="text-secondary">Account</label>
                                    <input id="account" class="form-control" name="account" value="" required autofocus>
                                </div>
 
                                <div class="form-group">
                                    <label for="id" class="text-secondary">Password</label>
                                    <input id="password" type="password" class="form-control" name="password" required>
                                </div>
 
                                <div class="form-group no-margin">
                                    <button type="submit" class="btn btn-info btn-block">
                                        Login
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="footer">
                        Copyright © <a href="http://nemew.tistory.com" class="badge badge-info">basicit</a> 2019
                    </div>
                </div>
            </div>
        </div>
    </section>
 
    <script src="/webjars/jquery/3.3.1/jquery.min.js"></script>
    <script src="/webjars/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</body>
</html>
 
  

원래 부트스트랩 폴더 경로 ../resource/css/bootstrap.min~ 뭐 이렇게 잡아줬던거같은데 

pom.xml에 dependency 추가해줘서 

<link rel="stylesheet" href="/webjars/bootstrap/4.1.0/css/bootstrap.min.css">

이렇게 잡아주는거 같다.

 

  • login.jsp를  controller에서 mapping 해주고

 

  • [프로젝트 우클릭] - [run as] - [spring boot app]으로 돌린후 localhost:8080/를 치면

  • 부트스트랩으로 만들어진 jsp파일이 뜬다.

 

 

[스프링부트 부트스트랩 적용 참고링크]

https://nemew.tistory.com

 

7. 스프링부트(SpringBoot) 개발 - 부트스트랩(BootStrap) 연동

1. pom.xml 파일에 아래와 같은 디펜던시를 추가합니다. 각각의 버전은 글 작성시기 기준으로 최신 버전들을 사용했습니다. 보다 자세한 버전 및 디펜던시 정보는 아래 링크들을 참고해 주세요. BootStrap 4 (http..

nemew.tistory.com

 

 

db내용
list.jsp

 

[스프링부트 db연동 참고링크]

https://nemew.tistory.com

 

6. 스프링부트(SpringBoot) 개발 - DB 연동(2) (MyBatis+MySQL)

9. 마이바티스에서 SQL Query 를 제어하는 Mapper 파일을 작성하겠습니다. DataAccessConfig 파일에서 MapperLocation 을 다음과 같이 설정했었는데요, 설정대로 Resources 하위에 mapper 폴더와 *.xml 파일을 생..

nemew.tistory.com

*pom.xml에 dependency 추가할때 version 경고 뜨면 </version> 옆에 <!--$NO-MVN-MAN-VER$--> 요거 추가해주면 경고 무시

 

[db연동하면서 추가한 dependency들]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!-- JDBC -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
            <version>2.2.1.RELEASE</version><!--$NO-MVN-MAN-VER$-->
        </dependency>
    
        <!-- MyBatis -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.0.1</version>
        </dependency>
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.4.2</version>
        </dependency>
        <dependency>
          <groupId>org.mybatis</groupId>
          <artifactId>mybatis-spring</artifactId>
          <version>1.3.2</version>
        </dependency>
    
        <!-- MySQL -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.15</version><!--$NO-MVN-MAN-VER$-->
        </dependency>
    
        <!-- BootStrap -->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>4.1.0</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.3.1</version>
        </dependency>
 
        <!-- jsp -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
        </dependency>
         
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
            <scope>provided</scope>
        </dependency>
 
  

 

[오늘한일]

스프링부트 jsp파일 띄우기

스프링부트 부트스트랩 적용

db정보로 workbench db접속

**스프링부트랑 mysql db연동**

728x90
반응형

'[Daliy]' 카테고리의 다른 글

[2019.12.13]  (0) 2019.12.13
[2019.12.12]  (0) 2019.12.12
[2019.12.11]  (0) 2019.12.11
[2019.12.05]  (0) 2019.12.05
[2019.12.04]  (0) 2019.12.04
'[Daliy]' Related Articles more
Comments