Home 教學 Bootstrap NodeJS Node + Express 完全新手教學 - 4 [套用bootstrap + code分類 ]

Node + Express 完全新手教學 - 4 [套用bootstrap + code分類 ]

下午1:51:00
Read
下午1:51:00

前言:

Bootstrap 是一個很受歡迎的前端 template 詳細的介紹跟畫面 可以到 Bootstrap

這邊我們會調用網路上的CDN 把 Bootstrap 3 調用道我們的app上使用
(PS 現在目前有v4 bate板 有興趣的朋友可以去看看)

關於code:
我們前面在製作的部分如果再繼續寫下，將會越來越多東西都混在app.js 跟 default.ejs 裡面
， 所以我們開始把他拆開來，並且學習如何 include 近來使用.

首先一個網頁的基本組成可能會有 Navigation Bar Header Footer content 跟在 每頁固定會load 的CSS JavaScript 等等的，那我們把這些區塊分開後，在不同的頁面內就可以輕鬆的include 近來我們要的元素。

實作:
1. 先來教如何把Bootstrap 載入:
首先我們可以參考Bootstrap的官方網頁的教學 那我們把它套用到我們的 default.ejs 
 <!DOCTYPE html>  
 <html>  
 <head>  
  <meta charset="utf-8">  
  <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
 <title>實作EJS</title>   
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
 </head>  
 <body>  
 <h1><%= title %></h1>  
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quod, praesentium dolor velit culpa cupiditate odio nihil voluptates aliquid eum dolore eligendi quas nobis nam nesciunt odit pariatur minus cum.</p>  
 <ul>  
 <% for(var i=0; i<users.length; i++) {%>  
 <li><%= users[i] %></li>   
 <% } %>   
 </ul>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
 </body>



2.整理default.ejs:

我們來把head header footer 跟jsdefaults 分開 並且把它建立新的ejs 在 submenu/page底下

把default.ejs修改為 
 <!DOCTYPE html>  
 <html>  
 <head><% include submenu/page/head.ejs %></head>  
 <body class="<%= classname %>" >  
 <% include submenu/page/header.ejs %>  
 <div class="container">  
  <h1><%= pagetitle %><%= title %></h1>  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quod, praesentium dolor velit culpa cupiditate odio nihil voluptates aliquid eum dolore eligendi quas nobis nam nesciunt odit pariatur minus cum.</p>  
  <% if (typeof(users) !== 'undefined') { %>  
   <ul>  
    <% for(var i=0; i<users.length; i++) { %>  
     <li><%= users[i] %></li>  
    <% } %>  
   </ul>  
  <% } %>  
 </div><!-- container -->  
  <% include submenu/page/footer.ejs %>  
  <% include submenu/page/jsdefaults.ejs %>  
 </body>  
 </html>

這邊我們會看到 我把head 東西 JS原本的東西拿掉 其實是把它剪下來放到 \views\submenu\pagehead.ejs 裡面[可以下載下面的完成範例檔查看]

3.修改跟整理app.js

把原本在裡面的 app.get() [這些負責routes] 把這些code 放到 routes資料夾裡面
app.js
 var express = require('express');  
 var app = express();  
 var routes = require('./routes');  
 app.set('view engine', 'ejs');  
 app.locals.pagetitle = "第一個NodeJS的 ";  
 app.get('/', routes.index);  
 app.get('/about', routes.about);  
 app.get('*', function(req, res) {  
  res.send('沒有東西噢');  
 });  
 var server = app.listen(3000, function() {  
  console.log('Listening on port 3000');  
 });


routes/index.js
 exports.about = function(req, res) {  
  res.render('default', {  
   title: 'About Us',  
   classname: 'about'  
  });  
 }  
 exports.index = function(req, res) {  
  res.render('default', {  
   title: '首頁',  
   users: ['PanPan','Kai', 'aYen', 'Kyousuke'],  
   classname: 'homepage'  
  });  
 });



這時候我們再把app 開起來
會發現樣式也變得不同了


補充 或是你可以 來他的基本template頁面把你要的樣式套進去使用

可以變成像是








完成範例檔下載

一班的的 : [nodeJStest[04].zip]
starter-template : [nodeJStest[04-starter-template].zip]


Tags :
技術提供：Blogger.