2015-04-03 61 views
0

我知道這裏有幾個問題/答案,但沒有一個適用於我。我想在我的本地機器上張貼一個JQuery頁面,但是我無法使其工作。如何發佈到本地機器 - 查詢,node.exe

下面是一個示例,它只是將一些結果發佈到不存在的服務器上的一個頁面上,但我不知道如何讓它在本地機器上運行。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Example</title> 
    <script src="jquery-1.7.js" type="text/javascript"></script> 
    <script src="jquery.tmpl.js" type="text/javascript"></script> 
    <link rel="stylesheet" type="text/css" href="styles.css"/> 
    <script type="text/javascript"> 
     $(document).ready(function() { 

      var data = [ 
       { name: "Astor", product: "astor", stocklevel: "10", price: "2.99"}, 
       { name: "Daffodil", product: "daffodil", stocklevel: "12", price: "1.99"}, 
       { name: "Rose", product: "rose", stocklevel: "2", price: "4.99"}, 
       { name: "Peony", product: "peony", stocklevel: "0", price: "1.50"}, 
       { name: "Primula", product: "primula", stocklevel: "1", price: "3.12"}, 
       { name: "Snowdrop", product: "snowdrop", stocklevel: "15", price: "0.99"}, 
      ]; 

      var templResult = $('#flowerTmpl').tmpl(data); 
      templResult.slice(0, 3).appendTo('#row1'); 
      templResult.slice(3).appendTo("#row2"); 

     }); 
    </script> 
    <script id="flowerTmpl" type="text/x-jquery-tmpl"> 
     <div class="dcell">  
      <img src="${product}.png"/> 
      <label for="${product}">${name}: </label> 
      <input name="${product}" value="0" required /> 
     </div> 
    </script> 
</head> 
<body> 
    <h1>Jacqui's Flower Shop</h1> 
    <form method="post" action="http://node.jacquisflowershop.com/order"> 
     <div id="oblock">   
      <div class="dtable"> 
       <div id="row1" class="drow"> 
       </div> 
       <div id="row2"class="drow"> 
       </div>    
      </div> 
     </div> 
     <div id="buttonDiv"><button type="submit">Place Order</button></div>      
    </form> 
</body> 
</html> 

我在我的機器上運行node.exe,它正在監聽端口號 - 基本上聽什麼發佈。

有沒有什麼辦法可以發佈在我的本地機器上,我安裝了IIS但沒有任何工作。

編輯

有一個腳本,這個叫formserver.js去。我會用node.exe formserver.js運行它。我不知道如何發佈到本地機器?

var http = require('http'); 
var url = require('url'); 
var querystring = require('querystring'); 

http.createServer(function (req, res) { 
    console.log("Request: " + req.method + " to " + req.url); 

    if (req.method == 'OPTIONS') { 
     res.writeHead(200, "OK", { 
      "Access-Control-Allow-Headers": "Content-Type", 
      "Access-Control-Allow-Methods": "*", 
      "Access-Control-Allow-Origin": "*" 
      }); 
     res.end(); 

    } else if (req.method == 'POST') { 
     var dataObj = new Object(); 
     var contentType = req.headers["content-type"]; 
     var fullBody = ''; 

     if (contentType) { 
      if (contentType.indexOf("application/x-www-form-urlencoded") > -1) { 
       req.on('data', function(chunk) { fullBody += chunk.toString();}); 
       req.on('end', function() {    
        var dBody = querystring.parse(fullBody); 
        writeResponse(req, res, dBody, 
         url.parse(req.url, true).query["callback"]) 
       }); 
      } else { 
       req.on('data', function(chunk) { fullBody += chunk.toString();}); 
       req.on('end', function() { 
        dataObj = JSON.parse(fullBody); 
        var dprops = new Object(); 
        for (var i = 0; i < dataObj.length; i++) { 
         dprops[dataObj[i].name] = dataObj[i].value; 
        } 
        writeResponse(req, res, dprops); 
       }); 
      } 
     } 
    } else if (req.method == "GET") { 
     var data = url.parse(req.url, true).query;    
     writeResponse(req, res, data, data["callback"]) 
    } 

}).listen(8080); 
console.log("Ready on port 8080"); 

var flowerData = { 
    astor: { price: 2.99, stock: 10, plural: "Astors"}, 
    daffodil: {price: 1.99, stock: 10, plural: "Daffodils"}, 
    rose: {price: 4.99, stock: 2, plural: "Roses"}, 
    peony: {price: 1.50, stock: 3, plural: "Peonies"}, 
    primula: {price: 3.12, stock: 20, plural: "Primulas"}, 
    snowdrop: {price: 0.99, stock: 5, plural: "Snowdrops"}, 
    carnation: {price: 0.50, stock: 1, plural: "Carnations"}, 
    lily: {price: 1.20, stock: 2, plural: "Lillies"}, 
    orchid: {price: 10.99, stock: 5, plural: "Orchids"} 
} 

function writeResponse(req, res, data, jsonp) { 
    var jsonData; 
    if (req.url == "/stockcheck") { 
     for (flower in data) { 
      if (flowerData[flower].stock >= data[flower]) { 
       jsonData = true; 
      } else { 
       jsonData = "We only have " + flowerData[flower].stock + " " 
        + flowerData[flower].plural + " in stock"; 
      } 
      break; 
     } 
     jsonData = JSON.stringify(jsonData); 
    } else {  
     var totalCount = 0; 
     var totalPrice = 0; 
     for (item in data) { 
      if(item != "_" && data[item] > 0) { 
       var itemNum = Number(data[item]) 
       totalCount += itemNum; 
       totalPrice += (itemNum * flowerData[item].price); 
      } else { 
       delete data[item]; 
      } 
     } 
     data.totalItems = totalCount; 
     data.totalPrice = totalPrice.toFixed(2); 

     jsonData = JSON.stringify(data); 
     if (jsonp) { 
      jsonData = jsonp + "(" + jsonData + ")"; 
     } 
    } 
    res.writeHead(200, "OK", { 
     "Content-Type": jsonp ? "text/javascript" : "application/json", 
     "Access-Control-Allow-Origin": "*"});  
    res.write(jsonData); 
    res.end(); 
} 
+1

開始不斷變化的形式元素的action屬性。 – 2015-04-03 11:07:30

+0

要什麼?我正在嘗試localhost:但沒有得到任何地方 – Aindriu 2015-04-03 11:11:20

+1

服務器在監聽什麼端口?你是如何運行節點腳本(參數)的? – 2015-04-03 11:18:23

回答

1
<form method="post" action="http://localhost:8080"> 
+0

謝謝你的工作,但它沒有使用任何formserver.js(編輯部分的代碼) – Aindriu 2015-04-03 11:39:06

+1

你看到控制檯中的任何輸出? – 2015-04-03 11:44:53

+0

我在瀏覽器中獲得了一個帖子值 - {「astor」:「10」,「totalItems」:10,「totalPrice」:「29.90」}和cmd控制檯中的Get/Post。唯一的問題是它沒有使用任何格式 - 只有一行。但至少它的工作..謝謝! – Aindriu 2015-04-03 11:47:58

相關問題