0

私はここで初心者です。私は現在、Twitter ブートストラップ (html、css、js)、サーバー側の node.js、no-sql dbs の mongodb を使用しています。私はたくさんのことを見ていて、フォーム、つまりユーザーアカウント登録をhtml側に記入する方法についての答えや方向性を探しています（すでにこれを行っています）

<code> 
<form class="validateForm" id="registerform" method="POST" action=""  accept-charset='UTF-8'>
    <fieldset>
        <legend>Register</legend> <br>
            <input type="text" name="firstName" id="firstName" placeholder="First Name"     maxlength="20" value=""/> <br>
            <input type="text" name="lastName" id="lastName" placeholder="Last Name" maxlength="20" value=""/> <br>
            <input type="text" name="email" id="email" placeholder="Email" maxlength="30" value=""/> <br>
            <input type="password" name="password" id="password" placeholder="Password" value=""/> <br>
            <input type="password" name="confirmPassword" id="confirmPassword"placeholder="Confirm Password" value=""/> <br>
            <input type="text" name="phoneNumber" id="phoneNumber" placeholder="Phone Number" maxlength="10" value=""/> <br>
            <input type="date" name="birthday" id="birthday" placeholder="Birthday" value=""/>    
            <br>
            <label id="legalConfirm" for="agree"><input type="hidden" name="agree" value="0"  />
            <input type="checkbox" name="agree" id="agree" value="1" checked="checked" /> By clicking join you confirm that you accept our <a href="/privacy.html">Privacy Policy</a> and <a href="/terms.html">Terms of Service</a>.</label>
                <input class="btn btn-primary" type="submit" name="create" value="Join"/>
                <a href="/"><button type="button" class="btn">Cancel</button></a>
            </fieldset>
        </form>

これは、twitter ブートストラップを使用して js 側で検証する私のフォームです。ただし、アクションに参加するためのサポートが何であるかはわかりません。

ページは、ルーターを介して node.js によって提供されています。

<code>
exports.signUp = function(req, res){
  res.render('signUp');
};

これは routes フォルダーにあり、server.js ファイルで require('./routes/home.js) として呼び出されます。

package.json ファイルの依存関係として mongoose があり、それに関するドキュメントをさらに見つけようとしましたが、かなり混乱しています。

私のビュー エンジンは (jade や ejs ではなく) html を使用していますが、いずれかを使用しても構わないと思っていますが、非常に理解しやすいものです。

私は自分のコンピューターから直接mongoを実行していますが、物事を少し簡単にするためにmongohqを調べていました。

基本的に、誰かがフォームに記入する方法について助けたり、指示を与えたりして、情報をmongoのデータベースに入れ(POST)、mongoから引き出して(GET)、ユーザープロファイルとしてページに提供できる場合。

明確にする必要があるかもしれないもう 1 つのことは、マイ プロファイル ページなどの新しいページに表示するために GET する方法です (テンプレート/ページを作成する必要がありますか、またはアカウントを作成するために保存された情報をどのようにリンクしますか?マイ プロフィール ページに移動します)。

HTML、JS (jQuery、JSON)、Node.Js、および Mongodb を使用して、POST (フォーム) および GET (新しいページへ) を含む、クライアント側からサーバー側へのフォーム プロセス全体のガイド。

アップデート

だからここで私はPOSTのためにこれを試したので、今は動作していますが、htmlモジュールが見つからないというエラーが発生しています。

これが私のserver.jsファイルのコードです。

<code>
  var express = require('express')
  , home = require('./routes/home.js')
  , path = require('path')
  , http = require('http')
  , mongoose = require('mongoose');

 mongoose.connect('mongodb://localhost/test');


app.post('/signUp', home.signUpUser);

----これが私のhome.js（別名ルーターjsファイル）です

<code>
var mongoose = require('mongoose');

var conn = mongoose.connection;
exports.index = function(req, res){
  res.render('index');
};

exports.signUp = function(req, res){
  res.render('signUp');
};

exports.about = function(req, res) {
    res.render('about');
};


exports.signUpUser = function (req, res, next) {
if (req.body && req.body.email && req.body.password === req.body.confirmPassword) {
    var obj = {
        firstName: req.body.firstName || 'na',
        lastName: req.body.lastName || 'na',
        email: req.body.email,
        password: req.body.password,
        phone: req.body.phoneNumber || '555-555-555',
        birthday: new Date(req.body.birthday) || new Date()
    };
    conn.collection('users').insert(obj, function (err) {
        if (!err) {
            res.redirect('/about.html');
        } else {
            next(err);
        }
    });
} else {
    next(new Error('Incorrect POST'));
}
};
4

1 に答える 1

0

あなたのフォームでは、「アクション」はリクエストを行う必要があるURLですaction="/signup"。

res.render私はあなたが（呼び出しから）あなたの例でエクスプレスを使用していると推測しています。

bodyParserExpress では、次のようにミドルウェアをミドルウェア スタック に追加する必要があります。 app.use(express.bodyParser());

この後、投稿のルートが必要です。 app.post('/signup', routes.postedSignup);

は次のroutes.postedSignupようになります。

exports.postedSignup = function (req, res, next) {
    if (req.body && req.body.email && req.body.password === req.body.confirmPassword) {
        var obj = {
            firstName: req.body.firstName || 'na',
            lastName: req.body.lastName || 'na',
            email: req.body.email,
            password: bcrypt.hashSync(req.body.password, 8),
            phone: req.body.phoneNumber || '555-555-555',
            birthday: new Date(req.body.birthday) || new Date()
        };
        db.userCollection.insert(obj, function (err) {
            if (!err) {
                res.redirect('/login');
            } else {
                next(err);
            }
        });
    } else {
        next(new Error('Incorrect POST'));
    }
};

ここで はdbデータベース ドライバーで、パスワードをランダムなソルトでハッシュするためbcryptのbcryptモジュールです。

データベースからこのデータを取得するには、そのためのルートを作成します。 app.get('/profile/:email', routes.getProfile);

このルートは次のようになります (ユーザーがログインしていて、有効なセッションがあり、ユーザー データが として保存されていると仮定していますreq.session.user)。

exports.getProfile = function (req, res, next) {
    if (req.session.user && req.session.user.email === req.params.email || req.session.user.admin) {
        db.userCollection.findOne({ email: req.params.email }, function (err, result) {
            if (!err && result) {
                res.locals.user = result;
                res.render('userprofile');
            } else {
                var errorMessage = err || new Error('no user found');
                next(errorMessage);
            }
        });
    } else {
        next(new Error('Insufficient permissions'));
    }
};

からのデータをres.locals.user使用できるようにするには、ある種のテンプレートを使用して にデータを挿入する必要がありますres.render。に設定されたres.locals(またはレンダー呼び出しにオブジェクトとして渡された) 値は、テンプレートで使用できます。この場合、アクセスする var は と呼ばれuserます。

呼び出しは、エラーをエラーハンドラーに配信します。これnext()は、最後のミドルウェアとしてミドルウェアにあると推測しています。そうでない場合は、こちらをお読みください。

クライアント側のテンプレートを使用して状況を処理することもできるため、ルートから json のみを返し、テンプレートをレンダリングしません。そのためには、テンプレート名を json として送信するオブジェクトに置き換えるだけres.renderですres.json。

実際のアプリケーションでは、これをもう少し具体化する必要があります。たとえば、同じメールアドレスを持つユーザーがいないことを確認するなどです。サインアップはいくつかの異なる機能に分割できるため、他の機能をユーザーの編集に再利用できます。プロファイル。

express.csrfcsrf 攻撃からユーザーを保護するために、ミドルウェアにも含めます。

うまくいけば、これでうまくいくでしょう。

于 2013-05-24T07:30:47.283 に答える