在節點j上路由時不應用引導

我現在試圖通過節點服務器上的get和post指定路徑。當html打開時，bootstrapping運行良好。但是通過路由運行將在沒有引導的情況下運行。在節點j上路由時不應用引導

我該怎麼辦？

// 켈린더 메인 메뉴 
 
$(function() { 
 
    // Easy pie charts 
 
    var calendar = $('#calendar').fullCalendar({ 
 
\t header: { 
 
\t \t left: 'prev,next', 
 
\t \t center: 'title', 
 
\t \t right: 'month,basicWeek,basicDay' 
 
\t }, 
 
\t theme: true, 
 
    selectable: true, 
 
    selectHelper: true, 
 
    select: function(start, end, allDay) { 
 
     var title = prompt('Event Title:'); 
 
     if (title) { 
 
      calendar.fullCalendar('renderEvent', 
 
       { 
 
        title: title, 
 
        start: start, 
 
        end: end, 
 
        allDay: allDay 
 
       }, 
 
       true // make the event "stick" 
 
      ); 
 
     } 
 
     calendar.fullCalendar('unselect'); 
 
    }, 
 
    droppable: true, // this allows things to be dropped onto the calendar !!! 
 
    drop: function(date, allDay) { // this function is called when something is dropped 
 

 
     // retrieve the dropped element's stored Event Object 
 
     var originalEventObject = $(this).data('eventObject'); 
 

 
     // we need to copy it, so that multiple events don't have a reference to the same object 
 
     var copiedEventObject = $.extend({}, originalEventObject); 
 

 
     // assign it the date that was reported 
 
     copiedEventObject.start = date; 
 
     copiedEventObject.allDay = allDay; 
 

 
     // render the event on the calendar 
 
     // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/) 
 
     $('#calendar').fullCalendar('renderEvent', copiedEventObject, true); 
 

 
     // is the "remove after drop" checkbox checked? 
 
     if ($('#drop-remove').is(':checked')) { 
 
      // if so, remove the element from the "Draggable Events" list 
 
      $(this).remove(); 
 
     } 
 

 
    }, 
 
\t editable: true, 
 
\t // US Holidays 
 
\t events: 'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic' 
 

 
\t }); 
 
}); 
 

 
// 켈린더 사이드 메뉴 
 
$('#external-events div.external-event').each(function() { 
 

 
    // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/) 
 
    // it doesn't need to have a start or end 
 
    var eventObject = { 
 
     title: $.trim($(this).text()) // use the element's text as the event title 
 
    }; 
 

 
    // store the Event Object in the DOM element so we can get to it later 
 
    $(this).data('eventObject', eventObject); 
 

 
    // make the event draggable using jQuery UI 
 
    $(this).draggable({ 
 
     zIndex: 999999999, 
 
     revert: true,  // will cause the event to go back to its 
 
     revertDuration: 0 // original position after the drag 
 
    }); 
 

 
});

#external-events { 
 
    float: left; 
 
    width: 150px; 
 
    padding: 0 10px; 
 
    border: 1px solid #ccc; 
 
    background: #eee; 
 
    text-align: left; 
 
    } 
 
    
 
#external-events h4 { 
 
    font-size: 16px; 
 
    margin-top: 0; 
 
    padding-top: 1em; 
 
    } 
 
    
 
.external-event { /* try to mimick the look of a real event */ 
 
    margin: 10px 0; 
 
    padding: 2px 4px; 
 
    background: #3366CC; 
 
    color: #fff; 
 
    font-size: .85em; 
 
    cursor: pointer; 
 
    z-index: 99999999; 
 
    } 
 
    
 
#external-events p { 
 
    margin: 1.5em 0; 
 
    font-size: 11px; 
 
    color: #666; 
 
    } 
 
    
 
#external-events p input { 
 
    margin: 0; 
 
    vertical-align: middle; 
 
    }

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Time Matrix Scheduling System</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <!-- jQuery UI --> 
 
    <link href="https://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css" rel="stylesheet" media="screen"> 
 

 
    <!-- Bootstrap --> 
 
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
 
    <link href="vendors/fullcalendar/fullcalendar.css" rel="stylesheet" media="screen"> 
 
    <!-- styles --> 
 
    <link href="css/styles.css" rel="stylesheet"> 
 

 
    <link href="css/calendar.css" rel="stylesheet"> 
 

 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
 
    <!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> 
 
    <![endif]--> 
 
</head> 
 

 
<body> 
 
    <div class="header"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-md-5"> 
 
      <!-- Logo --> 
 
      <div class="logo"> 
 
      <h1><a href="index.html">Time Matrix Scheduling System</a></h1> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-5"> 
 
      <div class="row"> 
 
      <div class="col-lg-12"> 
 
       <div class="input-group form"> 
 
       <input type="text" class="form-control" placeholder="Search..."> 
 
       <span class="input-group-btn"> 
 
\t       <button class="btn btn-primary" type="button">Search</button> 
 
\t      </span> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-2"> 
 
      <div class="navbar navbar-inverse" role="banner"> 
 
      <nav class="collapse navbar-collapse bs-navbar-collapse navbar-right" role="navigation"> 
 
       <ul class="nav navbar-nav"> 
 
       <li class="dropdown"> 
 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Account <b class="caret"></b></a> 
 
        <ul class="dropdown-menu animated fadeInUp"> 
 
        <li><a href="profile.html">Profile</a></li> 
 
        <li><a href="login.html">Logout</a></li> 
 
        </ul> 
 
       </li> 
 
       </ul> 
 
      </nav> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="page-content"> 
 
    <div class="row"> 
 
     <div class="col-md-2"> 
 
     <div class="sidebar content-box" style="display: block;"> 
 
      <ul class="nav"> 
 
      <!-- Main menu --> 
 
      <li><a href="index.html"><i class="glyphicon glyphicon-home"></i> Dashboard</a></li> 
 
      <li class="current"><a href="calendar.html"><i class="glyphicon glyphicon-calendar"></i> Calendar</a></li> 
 
      <li><a href="stats.html"><i class="glyphicon glyphicon-stats"></i> Statistics (Charts)</a></li> 
 
      <li><a href="tables.html"><i class="glyphicon glyphicon-list"></i> Tables</a></li> 
 
      <li><a href="buttons.html"><i class="glyphicon glyphicon-record"></i> Buttons</a></li> 
 
      <li><a href="editors.html"><i class="glyphicon glyphicon-pencil"></i> Editors</a></li> 
 
      <li><a href="forms.html"><i class="glyphicon glyphicon-tasks"></i> Forms</a></li> 
 
      <li class="submenu"> 
 
       <a href="#"> 
 
       <i class="glyphicon glyphicon-list"></i> Pages 
 
       <span class="caret pull-right"></span> 
 
       </a> 
 
       <!-- Sub menu --> 
 
       <ul> 
 
       <li><a href="login.html">Login</a></li> 
 
       <li><a href="signup.html">Signup</a></li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-10"> 
 

 
     <div class="content-box-large"> 
 
      <div class="panel-body"> 
 
      <div class="row"> 
 
       <!-- <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t \t <div id='external-events'> 
 
\t          <h4>Draggable Events</h4> 
 
\t          <div class='external-event'>My Event 1</div> 
 
\t          <div class='external-event'>My Event 2</div> 
 
\t          <div class='external-event'>My Event 3</div> 
 
\t          <div class='external-event'>My Event 4</div> 
 
\t          <div class='external-event'>My Event 5</div> 
 
\t          <div class='external-event'>My Event 6</div> 
 
\t          <div class='external-event'>My Event 7</div> 
 
\t          <div class='external-event'>My Event 8</div> 
 
\t          <div class='external-event'>My Event 9</div> 
 
\t          <div class='external-event'>My Event 10</div> 
 
\t          <div class='external-event'>My Event 11</div> 
 
\t          <div class='external-event'>My Event 12</div> 
 
\t          <div class='external-event'>My Event 13</div> 
 
\t          <div class='external-event'>My Event 14</div> 
 
\t          <div class='external-event'>My Event 15</div> 
 
\t          <p> 
 
\t          <input type='checkbox' id='drop-remove' /> <label for='drop-remove'>remove after drop</label> 
 
\t          </p> 
 
            </div> 
 
\t \t \t \t \t \t \t \t </div> --> 
 
       <div class="col-md-7"> 
 
       <div id='calendar'></div> 
 
       <hr> 
 
       <p>test line</p> 
 
       <table width="100%" border="1"> 
 
        <tr> 
 
        <th>id</th> 
 
        <th>title</th> 
 
        <th>place</th> 
 
        <th>start_time</th> 
 
        <th>end_time</th> 
 
        </tr> 
 
        <% data.forEach(function(item, index){ %> 
 
        <tr> 
 
         <td><%= item.id%></td> 
 
         <td><%= item.title%></td> 
 
         <td><%= item.place%></td> 
 
         <td><%= item.start_time%></td> 
 
         <td><%= item.end_time%></td> 
 
        </tr> 
 
        <% }); %> 
 
       </table> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 

 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <footer> 
 
    <div class="container"> 
 

 
     <div class="copy text-center"> 
 
     Copyright 2014 <a href='#'>Website</a> 
 
     </div> 
 

 
    </div> 
 
    </footer> 
 

 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
    <script src="https://code.jquery.com/jquery.js"></script> 
 
    <!-- jQuery UI --> 
 
    <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
 
    <script src="bootstrap/js/bootstrap.min.js"></script> 
 

 
    <script src="vendors/fullcalendar/fullcalendar.js"></script> 
 
    <script src="vendors/fullcalendar/gcal.js"></script> 
 
    <script src="js/custom.js"></script> 
 
    <script src="js/calendar.js"></script> 
 
</body> 
 

 
</html>

-----------------------添加源服務器----------- ---------------------------

var express = require('express'); 
var mysql = require('mysql'); 
var ejs = require('ejs'); 
var router = express.Router(); 
var dbconfig = require('./config/db_config.js'); 
var connection = mysql.createConnection(dbconfig); 
var bodyParser = require('body-parser'); 
var cookieParser = require('cookie-parser'); 
var fs = require('fs'); 
var path = require('path'); 

var app = express(); 

app.use(cookieParser()); 
app.use(bodyParser.urlencoded({ 
    extended: false 
})); 
app.use(express.static(path.join(__dirname, 'public'))); 

app.set('port', process.env.PORT || 3000); 

app.get('/', function(req, res) { 
    fs.readFile('calendar.html','utf8', function(err, data) { 
    if (err) { 
     console.log('readefile error'); 
    } else { 
     connection.query('select * from datework', function(err, results) { 
     if (err) { 
      console.log('error : ', err.message); 
     } else { 
      // res.send(data.toString()); 
      res.send(ejs.render(data,{ 
      data: results 
      })); 
      // var datatest = JSON.parse(data); 
      // res.json(dayatest[req.params.start_time]); 
     } 
     }); 
    } 
    }); 
});

enter image description here

來源

2017-06-11 Taehyeon

所以，你在做什麼？ – xsami

我只是想通過節點服務器在html中表達它。我試圖將引導程序應用於html，但我沒有引導程序UI ... 但是，如果您只運行html而不是通過服務器，則引導程序UI將得到很好的應用。有這麼多的代碼，它會很麻煩上傳... – Taehyeon

的快速文檔here解釋如何爲靜態文件。這是爲什麼您可以靜態查看引導而不是在Express服務時最有可能的原因。

app.use(express.static('public'))

，其中「公」是牽着你的客戶端文件的目錄名。

您提供給express.static函數的路徑與啓動節點進程的目錄相關。如果從另一個目錄中運行的應用程序明確，它的安全使用要服務目錄的絕對路徑：

app.use(express.static(path.join(__dirname, 'public')))

來源

2017-06-11 15:26:47 Sky

我仍然看不到UI .... – Taehyeon

我不得不創建一個公用文件夾，並把js和引導文件。謝謝！ – Taehyeon

在節點j上路由時不應用引導

回答

相關問題