时间戳

首页 > 解决方案 > 我正在编写代码以使用 ExpressJS 将表单输入从用户上传到 Mysql 数据库，但出现无法发布的错误

javascript - 我正在编写代码以使用 ExpressJS 将表单输入从用户上传到 Mysql 数据库，但出现无法发布的错误

问题描述

我正在使用带有 Express JS 的 Node JS 来获取表单中的输入，并使用 Mysql 将这些输入插入到名为“signup”的表中，但是当我按下提交按钮时，本地主机上会显示“Cannot POST”。谁能指出我正在犯的错误？

我的 HTML 代码

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Registration Form</title>
    <link href = "styles.css" rel = "stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Merriweather|Montserrat|Sacramento&display=swap" rel="stylesheet">
  </head>
  <body style="color: #40514E; font-size: 20px; font-family: 'Merriweather', serif; background-color: #EAF6F6;">
    <h2 style="font-family: 'Sacramento', cursive; font-size: 4rem; text-align: center;">Sign Up</h2>
    <form method = "post" enctype = "multipart/form-data" >
      <div class = "container" styles="max-width: 1350px; width: 100%; margin: 50px; height: auto; display: block;">
          <div class = "form_group" style="padding: 10px; display: block;">
            <label style="float: left; padding-right: 50px; line-height: 10%; display: block; width: 208px;">First Name:</label>
            <input type = "text" name = "FirstName" value = "" required/>
          </div>
          <div class = "form_group" style="padding: 10px; display: block;">
            <label style="float: left; padding-right: 50px; line-height: 10%; display: block; width: 208px;">Middle Name:</label>
            <input type = "text" name = "MiddleName" value = "" required />
          </div>
          <div class = "form_group" style="padding: 10px; display: block;">
            <label style="float: left; padding-right: 50px; line-height: 10%; display: block; width: 208px;">Last Name:</label>
            <input type = "text" name = "LastName" value = "" required/>
          </div>
          <div class = "form_group" style="padding: 10px; display: block;">
            <label style="float: left; padding-right: 50px; line-height: 10%; display: block; width: 208px;">Phone Number:</label>
            <input type = "number" name = "PhoneNumber" value = "" required/>
          </div>
            <button type="submit" name="submit" >Submit</button>
          </div>
      </div>
    </form>
  </body>
</html>

我的 NodeJS 代码

//jshint esversion:6

const express =require("express");
var mysql= require('mysql')
const bodyParser=require("body-parser");
const app= express();
app.use(bodyParser.urlencoded({extended: false}))

app.listen(3000, function(){
  console.log("Server started on port 3000")
});

app.get("/", function(req, res){
   res.sendFile(__dirname + "/index.html");
});

var connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '',
  database: 'signup'
})

connection.connect(function(err){
  if(err) throw err;
  console.log("Connected..");
})

app.post("/submit", function(req, res){
   var sql="insert into signup values('"+ req.body.FirstName +"','"+ req.body.MiddleName +"','"+ req.body.LastName +"',"+ req.body.PhoneNumber +"  )";
    connection.query(sql, function(err){
      if(err) throw err;
      res.render("index", {title: 'Data Saved', message: 'Submission Successfull' })
    })

   connection.end();
})

我有一个具有以下属性的 MySql 数据库表 此图像具有名为“signup”的表的属性

标签： javascriptmysqlnode.jsexpress

解决方案

您缺少<form>action 属性，例如：

<form action="/submit"

此外，您的 SQL 查询很容易发生 SQL 注入。如果您的驱动程序支持参数或转义值，请使用参数。

推荐阅读