NodeJs Form Post req.body empty – NodeJs Form Post 問題

在學習NodeJs時嘗試建立一個簡單的 Contact Form
Post DataBackend 之後便用 Email API 去Email Contact Form 的內容給自己
做了很多Research 都是取不到 Contact formparameters

好多教學都是這樣 define “body-parser” 便可以
我的NodeJs BackEnd 程式碼
希望收到資料之後 用nodeJsConsole把 收到的email 輸出來
用來debug. 去確保我程式碼真的做到想做的功能
可惜都是不成功

以下昰小弟最後的製成品..
希望有用吧

解決方法

E.g.

var express = require('express');

// Body Parser need to declare on app.js,
// tried to declare on the route and it does not work
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended : true}));
// my route for the contact form
    homeRouter.route('/contact')
        .get(function(req, res) {
            res.render('home/index', {
                title: 'ShareChiWai',
                nav: nav,
                content: 'contact'
            });
        })
// route for the function to sent email
  homeRouter.route('/emailSent')
    .post(function(req, res) {
      console.log("Begin");
      console.log(req.body.email);
      console.log("end");
    
      res.send(req.body.email);
    });

Full source code 可以參考我在GitHub上的程式碼
https://github.com/sharechiwai/NodeExpress
有時間希望可以一個full demo 只是for contact form.

Main Application
https://github.com/sharechiwai/NodeExpress/blob/master/app.js

Home Route
https://github.com/sharechiwai/NodeExpress/blob/master/src/routes/homeRoutes.js

Hope you find it useful

Windows Host File Location – Host 檔案路徑

和朋友嘗試建立一個比較完整的Development Environment
我們使用了Vagrant 來做我們的Server, 所有程式碼都會在裡面執行
這可以排除程式只在local version 可以成功執行的問題
為了環境一致

我們還建立了一個developmenthost name
朋友叫我在電腦上的 host file加入以下的句子

192.168.56.101    sharechiwai.dev

之後在browser上輸入sharechiwai.dev 便會自動map 到 這個IP 上
192.168.56.101

192.168.56.101 是vagrant的 default IP

如果想在同一IP address上 map 到不同的 host/domain 我們需要把所有的 hostname/domain 加在同一行
以空間分開

e.g.

192.168.56.101    sharechiwai.dev chi.dev

Host File Content
那麼在Windows 上的 Host file 儲存在那裡呢?
他是存在以下路徑的

C:\Windows\System32\drivers\etc

Windows Host file path
Hope you find it useful

NodeJS – ejs reference to root path – HTML reference to root Path for the JS/CSS/Image File

HTML reference to root Path for the JS/CSS/Image File
今天在學習NodeJS with Express 又遇到問題了
就是不知道怎樣可以reference 返D Javascript /CSS 檔案到 Root Path/ Root Directory
之前用 Codeigniter 可以使用 base_url()
ASP.Net MVC 可以用

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/jquery")

當我使用路徑”css/bootstrap.min.css“.. 在其他的path 便出現問題
<pre>
<link rel=”apple-touch-icon” href=”apple-touch-icon.png”>

<link rel=”stylesheet” href=”css/bootstrap.min.css”>
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}

</style>
<link rel=”stylesheet” href=”lib/bootstrap/dist/css/bootstrap-theme.min.css”/>
<link rel=”stylesheet” href=”css/main.css”>
<script src=”lib/jquery/dist/jquery.js”></script>
<script src=”lib/bootstrap/dist/js/bootstrap.min.js”></script>
</pre>
解決方法十分簡單..
只要在 路徑開頭加上 “/” 便可以了
e.g.
“/css/bootstrap.min.css

<pre>
<link rel=”stylesheet” href=”/css/bootstrap.min.css”>
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}

</style>
<link rel=”stylesheet” href=”/lib/bootstrap/dist/css/bootstrap-theme.min.css”/>
<link rel=”stylesheet” href=”/css/main.css”>
<script src=”/lib/jquery/dist/jquery.js”></script>
<script src=”/lib/bootstrap/dist/js/bootstrap.min.js”></script>
</pre>

hope you find it useful
如果有更好的解決方法..希望你可以和大家分享

Solve nodejs Access-Control-Allow-Origin header Issue 如果在NodeJS上解決”Access-Control-Allow-Origin header” 問題

之前在NodeJs寫了一個API 來方便自己去取資料..
誰不知當我在其他網頁用這個API 時出現了”Access-Control-Allow-Origin header” 的問題..

Origin file: not found in Access-control-Allow-Origin header.
Origin file: not found in Access-Control-Allow-Origin header

做了一會Research後 找到了解決方法了
我們只需要加入以下的”allowCrossDomain” 功能 便可以了
解決方法

var express = require('express');

var app = express();

// Code to solve the Access-Control-Allow-Origin header Issue
var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');

   // intercept OPTIONS method
    if ('OPTIONS' == req.method) {
      res.send(200);
    }
    else {
      next();
    }
};


app.use(allowCrossDomain);

Hope you find it useful

EntityFramework with MySQL DateTime Issue – Unable to convert MySQL date/time value to System.DateTime

很多時候都會在Database Table上建立一個有 DateTime Field用來記錄資料修改時間

現在幫另一間公司寫的 ASP.Net MVC With Entity FrameworkWeb Application
為了減低成本.. 這個Project 選用了MySQL
使用Entity Framework 使用MySQL 真是一個挑戰。。
有些的功能沒有直接的 inplementation
所以久不久便會遇到問題

今次遇到的錯誤信息如下
An exception of type ‘MySql.Data.Types.MySqlConversionException’ occurred in MySql.Data.dll but was not handled in user Code

Additional information: Unable to convert MySQL date/time value to System.DateTime
Unable to convert MySQL date/time value to System.DateTime
主要是當我嘗試load data時出現..
解決方法 十分簡單
我𠍒只需要在Web.config connection string上加上以下的設定便可以了

Convert Zero Datetime=true

E.g.
<add name=”ProjectTrackerContext”
connectionString=”Database=docker_dev;Data Source=192.168.99.100;User Id=root;Password=password;Convert Zero Datetime=true
providerName=”MySql.Data.MySqlClient” />

Hope you find it useful

Online cURL Proxy / API – bypass Origin file: not found in Access-Control-Allow-Origin header issue

很多時候找到一些有趣的API
我們可以直接把這個APIURLQuery String放在browser上而取得Data
但當我們使用Javascript E.G. JQuery $.get 時便會出現以下的錯誤信息
Origin file: not found in Access-Control-Allow-Origin header

XMLHttpRequest: Network Error 0x80700013, Could not complete the operation due to error 80700013.”
Origin file: not found in Access-control-Allow-Origin header.

解決方法
我們可以用cURL 來解決這個問題..
由於我久不久便有這個問題出現..
所以便用nodeJS 來起了一個功能和大家分享.
http://sharechiwainodeexpress.herokuapp.com/curl?url={URL-to-CURL}

E.g.
http://sharechiwainodeexpress.herokuapp.com/curl?url=http://blog.sharechiwai.com

可以用他當作proxy 吧

Hope you find it useful

how to check azure credit balance – 如何在Azure Portal 上檢查還有多小credit

自從Azura 有了新的Portal 之後…
便覺得有點不習慣..
對於像我這些又想在Azure上嘗試不同features
但是又不想用過credit的人..不能方便看到還有多小credit真的感到麻煩…
舊有的portal 在正上方便可以看到有多以 credit remain和這些Credit 還可以用多少天
https://manage.windowsazure.com
Old Azure Web portal

在新版本的Azure Portal 上便消失了
New / Preview Azure Management Portal

那麼如何在Azure Portal 上檢查還有多小credit呢

解決方法:
我們可以到以下網頁查看我們AzureSubscription 資訊
https://account.windowsazure.com/Subscriptions
之後選擇 想查詢的Azure Subscription
Azure Account Center

之後便可以看到 這個Azure Subscription上還有多小credit.和什麼時候到期
Azure Remaining Credit Information

Hope you find it useful