본문 바로가기

mvc 폴더설정

by Recstasy 2019. 4. 26.

 MVC  views 폴더 설정


1) views 폴더 아래, pages와 partials 폴더를 만든다.


2) pages 폴더 안에 error.ejs , index.ejs 파일을 넣는다.

 -> pages 폴더는 말 그대로 page에 해당되는 파일들을 정리해서 넣는다. 

 -> partials 폴더는 페이지 파일 내에서 부분에 해당하는 파일을 넣는다.


3) partials 폴더 아래 , stylesheet.ejs , javascript.ejs  파일을 생성한다.

 -> stylesheet.ejs 파일 안에는 bootstrap cdn을 링크로 걸어넣고, javascript 파일 안에는 jqeury cdn을 링크 걸어넣는다. 

 -> stylesheet.ejs 파일은 아래처럼 수정한다.



<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="/stylesheets/style.css"/>



 -> javascript.ejs 파일내용


<!-- Latest compiled and minified JavaScript -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>



4) header.ejs 파일을 생성한다.

<!--Fixed navbar -->

<div class='pos-f-t'>

<div class='collapse' id='navbar-header'>

<div class='container bg-inverse p-a-1'>

<h3>Collapse content</h3>

<p>토글 기능의 내비게이션 바</p>

</div>

</div>

<nav class="navbar navbar-light navbar-static-top">

<div class="container">

<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">Menu

</button>

<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">

<a class="navbar-brand" href="/">MVC App</a>


<ul class="nav navbar-nav navbar-right">

<li class="nav-item">

<a href="/login" class="nav-link">

Login

</a>

</li>

<li class="nav-item">

<a href="/signup" class="nav-Link">

Sign Up

</a>

</li>

<li class="nav-item">

<a href="/profile" class="nav-Link">

Profile

</a>

</li>

<li class="nav-item">

<a href="/comments" class="nav-Link">

Comments

</a>

</li>

</ul>

</div>

</div>

</nav>

</div>


5) footer.ejs 파일을 생성한다.


<footer class="footer">

<div class="container">

<span> &Copy 2017 MoGL 3D APP </span>

</div>

</footer>


6) index.ejs 파일을 수정한다.


<!DOCTYPE html>

<html>
  <head>
    <title><%= title %></title>
    <% include ../partials/stylesheet %>
  </head>

  <body>
  <% include ../partials/header %>
  <div class="container">
      <div class="page-header m-t-1">
          <h1><%=title%></h1>
      </div>
  </div>
    <p class="lead">Welcome to <%= title %></p>
          <% include ../partials/footer %>
        <% include ../partials/javascript %>
  </body>
</html>


7) error.ejs 파일을 수정한다.



<!DOCTYPE html>
<html>
<head>
<title> Error Page!!</title>
<% include ../partials/stylesheet %>
</head>
<body>
<% include ../partials/header %>
<div class="container">
<div class="page-header m-t-1">
<h1> Sorry: <%=message%> </h1>
<h2><%= error.stack %></h2>
<pre><% error.stack %></pre>
</div>
</div>
<% include ../partials/footer %>
<% include ../partials/javascript %>
</body>
</html>


8) app.js파일에서 view엔진 부분을 수정한다.

 -> 수정부분


app.set('views', path.join(__dirname, 'server/views/pages')); 




댓글

최신글 전체

이미지
제목
글쓴이
등록일