Question

我正在尝试在我的应用中实现一个简单的edit功能。在我的profile.handlebars文件中，我有一个edit按钮。点击后，我希望用户的信息显示在表单的文本输入字段中，以便用户编辑其现有信息。

现在，他们必须重新输入所有信息（由于我已经实施的验证，表格中的每个字段都需要填写），点击Submit，他们的个人资料就可以了得到更新。这可能不使用框架（如Angular）？例如，在LinkedIn中，用户可以将鼠标悬停在其个人资料的一部分上，从而使编辑按钮突出显示，然后单击一个编辑按钮，他们立即处于编辑模式。对于我的目的来说，这可能过于先进，但最终，我喜欢拥有这样的功能。

我的路线文件中有一个post请求，用于处理用户向其个人资料发布信息的信息：

router.post('/add', function(req, res) {
  req.checkBody({
    'city': {
      errorMessage: 'Please enter your city'
    },
    'state': {
      errorMessage: 'Please enter your state',
      notEmpty: true
    },
    'zip': {
      errorMessage: 'Please enter your zip code',
      notEmpty: true
    },
    'about': {
      errorMessage: 'Please briefly describe yourself',
      notEmpty: true
    }
  });
  console.log("req.user " + req.user);

  var errors = req.validationErrors();

  if (errors) {
    res.render('profile', {
      errors: errors
    });
  } else {
    var user_info = new User_Info({
      city: req.body.city,
      state: req.body.state,
      zip: req.body.zip,
      about: req.body.about,
      user_name: req.user.username
    });
    user_info.save(function(err, user_info) {
      if (err) throw err;
    });
    res.redirect('profile/' + req.user.username)
  }
})

然后，我有profile.handlebars文件：

{{#if errors}}
Uh oh!  Something went wrong.  Please review the below errors, and try again.<br><br>
<ul>
{{# each errors }}
    <li style="color: red">{{this.msg}}</li>
{{/each}}
</ul>
{{else}}

<h3 align="center">Profile ({{user_name.name}})</h3>

<div class="row">
    <div class="col-md-4 col-md-offset-4">
        <div class="thumbnail" style="border-radius: 12px">
            <div class="caption">
                <p>City: {{# each information }} {{this.city}} {{/each}}</p>
                <p>State: {{# each information }} {{this.state}} {{/each}}</p>
                <p>Zip: {{# each information }} {{this.zip}} {{/each}}</p>
                <p>About: {{# each information }} {{this.about}} {{/each}}</p>
                <div class="btn-group">
                <a href=""><button type="Edit" class="btn btn-danger dropdown-toggle deleteLocation" data-id="{{this.id}}">Edit</button></a>
                </div>
            </div>
        </div>
    </div>
</div>

<br>
<center>
<form method="POST" action="/users/add">
    <input type="text" name="city" placeholder="City" style="text-align: left">
    <br><br>
    <input type="text" name="state" placeholder="State" style="text-align: left">
    <br><br>
    <input type="text" name="zip" placeholder="Zip" style="text-align: left">
    <br><br>
    <textarea name="about" placeholder="About You" style="text-align: left; resize: both;" rows="5" cols="50"></textarea>
    <br><br>
    <div class="btn-group">
        <button type="submit" class="btn btn-success dropdown-toggle" aria-haspopup="true" aria-expanded="false">Submit</button>
    </div>
    <br><br>
</form>
</center>

{{/if}}

如果您需要其他信息来帮我解决此问题，请与我们联系。谢谢！

Answer 1

you can use this code for node for editing the parameters , city,state,zip and about.   
 router.post('/add', function (req, res) {
        var users = req.Collection;
        var city = req.body.city;
        var state = req.body.state;
        var zip = req.body.zip;
        var about = req.body.about;
        var user_id = req.body.user_id;
        if (city && state && ) {
            users.findOneAndUpdate({_id: user_id}, {$set: {city: city, state: state, zip: zip, about:about}}, function (err, user) {
                if (err) {
                    res.json({status: 0, message: err});
                }
                if (!user) {
                    res.json({status: 0, msg: "not found"});
                } else {
                    res.json({status: 1, city: city, state: state, zip: zip, about:about, message: " edit success"});
                }
            })
        } else {
            res.json({status: 0, msg: "Invalid Fields"});
        }
    });

在节点js中编辑页面上的文本

1 个答案: