.ejs 文件中的“无法发布/”表单数据

问题描述 投票:0回答:1

我是 node.JS 新手 我正在尝试发布 .ejs 文件中的表单数据,但是当我提交时,它显示“无法发布/” 我看过的教程适用于 HTML 文件。但我想发布来自提供 html 的 EJS 文件的数据。

(如果你不想看我网站的所有代码,而你想要主要问题,请转到我描述的末尾)

This is my website folder structure :

这是我运行整个服务器的 server.js :

// Basic server setup
const express = require("express");
const expressLayouts = require('express-ejs-layouts');
const path = require("path");
const { log } = require("console");
const app = express();
var con = require("./connection");
const bodyParser = require("body-parser");


// Static files
app.use(express.static('public'));
app.use('/stylesheets', express.static(__dirname + 'public/stylesheets'));
app.use('/javascripts', express.static(__dirname + 'public/javascripts'));
app.use('/images', express.static(__dirname + 'public/images'));

// Static Public folder 
app.use('/static', express.static('public'));

// Body parser
app.use(bodyParser.urlencoded({extended: true})); 

// Set Views
app.set('views', './views');
app.set('view engine', 'ejs');

// Layout default file
app.set('layout', './layouts/head');

// Homepage link to index.ejs
app.use(expressLayouts);
app.get('', (req, res) => {
    res.render('index');
});
app.get('/index', (req, res) => {
    res.render('index');
});

app.get('/cali-ppl', (req, res) => {
    res.render('cali-ppl');
});

app.get('/more', (req, res) => {
    res.render('more');
});

app.get('/stretch-mobility', (req, res) => {
    res.render('stretch-mobility');
});

app.get('/warmup', (req, res) => {
    res.render('warmup');
});

app.get('/weight-upper-lower', (req, res) => {
    res.render('weight-upper-lower');
});

app.get('/workout', (req, res) => {
    res.render('workout');
});

// If the requested page does not exist
app.get('*', function(request, response){
    response.send('Error 404, page not found');
})

// Telling us that the server is running when it starts
app.listen(2000, function(){
    console.log("Server is up at port 2000");
})

// Routing workout form data request
app.post('/cali-ppl', function(request, response, next){
    var caliPush1Ex = req.body.caliPush1Ex;
    var caliPull1Ex = req.body.caliPull1Ex;
    var caliPush2Ex = req.body.caliPush2Ex;
    var caliPull2Ex = req.body.caliPull2Ex;
    console.log(caliPush1Ex, caliPull1Ex, caliPush2Ex, caliPull2Ex);
})

这是将我的服务器连接到我的 SQL 数据库的 connection.js(它有效)

// MySQL database connection

const mysql = require('mysql');

const con = mysql.createConnection({
    host : 'localhost',
    port : 4306,
    database : 'websitedb',
    user : 'root',
    password : '',
});

con.connect(function(error){
    if(error){
        console.log('MySQL Database Connection Error');
    }
    else {
        console.log('Successfully connected to MySQL Database');
    }
});

module.exports = con;

包.json:

{
  "name": "ghwrot-server",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "^1.20.2",
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "ejs": "^3.1.9",
    "express": "^4.18.2",
    "express-ejs-layouts": "^2.5.1",
    "http-errors": "~1.6.3",
    "morgan": "~1.9.1",
    "mysql": "^2.18.1"
  }
}

所以基本上我正在尝试访问 cali-ppl.ejs 中的表单:

            <form method="POST" action="/">
                <div class="#">
                    <label>Exercice</label>
                    <input type="text" name="caliPush1Ex" id="cali_push_1_ex" class="#" />
                </div>
                <div class="#">
                    <label>Sets</label>
                    <input type="text" name="caliPull1Ex" id="cali_pull_1_ex" class="#" />
                </div>
                <div class="#">
                    <label>Repetitions</label>
                    <input type="text" name="caliPush2Ex" id="cali_push_2_ex" class="#" />
                </div>
                <div class="#">
                    <label>Kilograms</label>
                    <input type="text" name="caliPull2Ex" id="cali_pull_2_ex" class="#" />
                </div>
                <div class="#">
                    <input type="submit" name="submit_button" class="#" value="Add" />
                </div>
            </form>

我正在尝试使用 server.js 中的代码发布:

// Routing workout form data request
app.post('/cali-ppl', function(request, response, next){
    var caliPush1Ex = req.body.caliPush1Ex;
    var caliPull1Ex = req.body.caliPull1Ex;
    var caliPush2Ex = req.body.caliPush2Ex;
    var caliPull2Ex = req.body.caliPull2Ex;
    console.log(caliPush1Ex, caliPull1Ex, caliPush2Ex, caliPull2Ex);
})

这是路由问题吗? 我把 ('/cali-ppl') 放错了吗? 在本教程中,它使用 HTML 文件。是否可以使用 EJS 文件执行此操作?

谢谢!

我尝试了不同的教程。我不太了解 nodeJS,无法自己尝试不同的解决方案。

node.js express post
1个回答
0
投票

在 server.js 中

//post route for index
app.post('', (req, res) => { 
 res.send('index post route')

})
© www.soinside.com 2019 - 2024. All rights reserved.