web-dev-qa-db-ja.com

Express.jsアプリケーションのバグ：フォームフィールドの値が保持されない

ブログアプリケーション（リンクをクリックしてGitHubリポジトリを表示）に Express 、- [〜＃〜] ejs [〜＃〜] およびMongoDB。

もちろん、[Add New Post]フォームがあり、コントローラーにaddPost()メソッドがあります。

_exports.addPost = (req, res, next) => {
    const errors = validationResult(req);
    const post = new Post();

    post.title = req.body.title;
    post.short_description = req.body.excerpt
    post.full_text = req.body.body;

    console.log(post);

    if (!errors.isEmpty()) {
        req.flash('danger', errors.array());
        req.session.save(() => res.render('admin/addpost', {
            layout: 'admin/layout',
            website_name: 'MEAN Blog',
            page_heading: 'Dashboard',
            page_subheading: 'Add New Post',
            post: post
        }));
    } else {
        post.save(function(err) {
            if (err) {
                console.log(err);
                return;
            } else {
                req.flash('success', "The post was successfully added");
                req.session.save(() => res.redirect('/dashboard'));
            }
        });
    }
}
_

フォームビュー：

_<form action="./post/add" method="POST" class="mb-0">

    <div class="form-group">
        <input type="text" class="form-control" name="title" value="<%= req.body.title %>" placeholder="Title" />
    </div>

    <div class="form-group">
        <input type="text" class="form-control" name="excerpt" value="<%= req.body.excerpt %>" placeholder="Excerpt" />
    </div>

    <div class="form-group">
        <textarea rows="5" class="form-control" name="body" placeholder="Full text">
            <%= req.body.title%>
        </textarea>
    </div>

    <div class="form-group mb-0">
        <input type="submit" value="Add Post" class="btn btn-block btn-md btn-success">
    </div>

</form>
_

必要なフォームフィールドのいくつかが提出されているが、すべてではないと仮定します。

フォームビューが再度レンダリングされ、空の必須フィールドのエラーメッセージが表示されます。ただし、空ではない必須フィールドはデータを保持する必要があります。しかし、そうではありません。

この構文を使用しても、console.log(post)行にコンソールでこれが表示されますが、_<input type="text" class="form-control" name="title" value="<%= post.title %>" placeholder="Title" />_は機能しません期待どおり：

_{
  updated_at: 2020-03-18T10:49:17.199Z,
  created_at: 2020-03-18T10:49:17.199Z,
  _id: 5e71fcbe7fafe637d8a2c831,
  title: 'My Great Post',
  short_description: '',
  full_text: ''
}
_

The title filed should hold the value "Title"

何が欠けていますか？

更新：

フォームの生成されたHTML：

_<form action="./post/add" method="POST" class="mb-0">
    <div class="form-group">
        <input type="text" class="form-control" name="title" value="" placeholder="Title">
    </div>

    <div class="form-group">
        <input type="text" class="form-control" name="excerpt" value="" placeholder="Excerpt">
    </div>

    <div class="form-group">
        <textarea rows="5" class="form-control" name="body" placeholder="Full text"></textarea>
    </div>

    <div class="form-group mb-0">
        <input type="submit" value="Add Post" class="btn btn-block btn-md btn-success">
    </div>
</form>
_
javascriptexpressejsmean-stack
4
Razvan Zamfir

コントローラーとビューで変更しなければならないことがいくつかあります。以下で両方の変更について説明しました

コントローラ上

exports.addPost = (req, res, next) => {
    var form = {
        titleholder: req.body.title,
        excerptholder : req.body.excerpt,
        bodyholder: req.body.body
    };
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
            req.flash('danger', errors.array())
            //req.session.save(() => res.redirect('../addpost'));
            res.render('admin/addpost',{
                layout: 'admin/layout',
                website_name: 'MEAN Blog',
                page_heading: 'Dashboard',
                page_subheading: 'Add New Post',
                form:form});
    } else {

それ以降のコードは既存のものと同じです。formオブジェクトを追加し、res.redirectをres.renderに変更しました

そして、これはあなたのビューのコードになります

<div class="col-sm-7 col-md-8 col-lg-9">
    <div class="card">
        <div class="card-header d-flex px-2">
            <h6 class="m-0"><%= page_subheading %></h6>
        </div>
        <div class="card-body p-2">
            <form action="./post/add" method="POST" class="mb-0">               
                <div class="form-group">
                        <input type="text" class="form-control" name="title" value="<%= typeof form!='undefined' ? form.titleholder : '' %>" placeholder="Title" />
                </div>

                <div class="form-group">
                        <input type="text" class="form-control" name="excerpt" value="<%= typeof form!='undefined' ? form.excerptholder : '' %>" placeholder="Excerpt" />
                </div>

                <div class="form-group">
                        <textarea rows="5" class="form-control" name="body" placeholder="Full text"><%= typeof form!='undefined' ? form.bodyholder : '' %></textarea>
                </div>

                <div class="form-group mb-0">
                    <input type="submit" value="Add Post" class="btn btn-block btn-md btn-success">
                </div>
        </form>
  </div>
    </div>
</div>

value属性の値が変更されました。 githubプロジェクトのプルリクエストも作成しました。

2
Luzan Baral

投稿を追加する完全な作業コードを以下に示します。

コントローラで：

exports.addPost = (req, res, next) => {

    var form = {
        titleholder: req.body.title,
        excerptholder: req.body.excerpt,
        bodyholder: req.body.body
    };

    const errors = validationResult(req);

    const post = new Post();
    post.title = req.body.title;
    post.short_description = req.body.excerpt
    post.full_text = req.body.body;

    if (!errors.isEmpty()) {
        req.flash('danger', errors.array())
        res.render('admin/addpost', {
            layout: 'admin/layout',
            website_name: 'MEAN Blog',
            page_heading: 'Dashboard',
            page_subheading: 'Add New Post',
            form: form
        });
    } else {
        post.save(function(err) {
            if (err) {
                console.log(err);
                return;
            } else {
                req.flash('success', "The post was successfully added");
                req.session.save(() => res.redirect('/dashboard'));
            }
        });
    }
}

ビューで：

<form action="/dashboard/post/add" method="POST" class="mb-0">
    <div class="form-group">
        <input type="text" class="form-control" name="title" value="<%= typeof form!='undefined' ? form.titleholder : '' %>" placeholder="Title" />
    </div>

    <div class="form-group">
        <input type="text" class="form-control" name="excerpt" value="<%= typeof form!='undefined' ? form.excerptholder : '' %>" placeholder="Excerpt" />
    </div>

    <div class="form-group">
        <textarea rows="5" class="form-control" name="body" placeholder="Full text">
            <%= typeof form!='undefined' ? form.bodyholder : '' %>
        </textarea>
    </div>

    <div class="form-group mb-0">
        <input type="submit" value="Add Post" class="btn btn-block btn-md btn-success">
    </div>
</form>
0
Razvan Zamfir