MongoDB+NodeJS表单数据无法存入数据库且无报错求助

核心问题1：提交按钮无法触发表单提交 #

你的PUG模板里提交按钮的type设为了button，这只是普通按钮，不会触发表单提交行为。必须将按钮类型改为submit才能让表单正常提交。

修改PUG中的按钮代码：

button(type="submit" class="btn")
    |   Submit

同时注意：PUG属性名需用小写class而非Class，虽然浏览器兼容大写写法，但这属于不规范用法，建议统一修正。

核心问题2：电话字段类型不匹配 #

MongoDB Schema中phone字段定义为Number类型，但表单提交的电话是字符串格式（可能包含区号、空格等），直接存入Number会导致类型转换失败，进而无法保存数据。

修改Schema中的phone字段类型：

const contactSchema = new mongoose.Schema({
    name: String,
    phone: String, // 从Number改为String
    email: String, 
    address: String,
    desc: String
});

额外优化建议 #

1. 添加MongoDB连接错误处理
   当前连接代码无错误反馈，无法确认数据库是否连接成功，建议补充状态监听：

   mongoose.connect('mongodb://127.0.0.1:27017/contactus')
   .then(() => console.log('MongoDB连接成功'))
   .catch(err => console.error('MongoDB连接失败:', err));
   

2. 优化表单提交后的用户反馈
   当前提交后返回纯文本提示，用户体验较差，可改为重定向回表单页面并携带状态参数：

   app.post('/contact', (req, res) => {
       const mydata = new Contact(req.body);
       mydata.save().then(() => {
           res.redirect('/contact?success=1');
       }).catch((err) => {
           console.error('保存失败:', err);
           res.redirect('/contact?error=1');
       });
   })
   

   随后在contact.pug中根据参数显示提示：

   block content
       div.contactcontainer 
           h1 Contact Us 
           if success
               p.success 提交成功！
           if error
               p.error 提交失败，请重试！
           form(action="/contact", method="post", class="myForm") 
               //- 原有表单内容不变
   

3. 移除冗余依赖
   Express 4.16+已内置express.urlencoded()，无需单独安装body-parser，可删除const bodyParser = require('body-parser');这一行。

总结 #

先修正按钮类型和phone字段类型，这两个是导致表单无响应、数据无法保存的直接原因。再根据需求补充连接错误处理和提交反馈优化，即可解决问题。

内容的提问来源于stack exchange，提问作者Usman Rafiq