无法将计算结果回发到服务器

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

单击按钮提交时出现问题。在网站上找不到404错误和“无法发布/索引”。我在代码上有逻辑问题还是在语法上出现问题

我正在尝试将数字发回服务器以进行计算,但不知道导致我无法执行发布功能的错误在哪里。如果我上传的文件未完成,请从我那里获取需求文件。

app.component.html我需要在HTML文件中添加一些内容来链接server.ts吗?还有什么我需要检查的问题吗?

    <!doctype html>
<html lang="en">
<head>
  <Title>Calculator</Title>
  <meta charset="utf-8">
  <title>Myapp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

</head>
<body>


  <h1 align="center">Angular Calculator</h1>
  <div class="container">
    <div class="card">
      <div class="card-body">

        <form action="index" method="POST">
        <input type="number" name="num1" class="form-control" placeholder="Number">
        <input type="number" name="num2" class="form-control" placeholder="Number">
        <select ng-model="operator" name="operator">
          <option>+</option>
          <option>*</option>
          <option>-</option>
          <option>/</option>
          </select>
        <button type="submit">Submit</button>
      </form>
      <p>Calculation Of the number is :{{ result }} </p>

      </div>
  </div>
  </div>

</body>
</html>

server.ts文件这是默认情况下由npm生成的服务器文件,对于我首次测试加法功能,我不确定代码的语法是否有任何问题。

    import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import * as bodyParser from 'body-parser';

import * as express from 'express';
import {join} from 'path';

// Express server
const app = express();

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist/browser');

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const {AppServerModuleNgFactory, LAZY_MODULE_MAP, ngExpressEngine, provideModuleMap} = require('./dist/server/main');

// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

app.set('view engine', 'html');
app.set('views', DIST_FOLDER);


app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
// Example Express Rest API endpoints
// app.get('/api/**', (req, res) => { });
// Serve static files from /browser
app.get('*.*', express.static(DIST_FOLDER, {
  maxAge: '1y'
}));

// All regular routes use the Universal engine
app.get('*', (req, res) => {
  res.render('/app.component.html', { req });
});
app.get('*', (req, res) => {
  res.status(404).send('data requests are not supported');
});

//have body-parser is a piece of express middleware that reads a form's 
//input and stores it as a javascript object accessible through
//can not to include body-parser but not to get the raw request, your body and header are not in the root object of request parameter
app.post('/',(req, res) => {
    //var num1 = req.body.operator
    var result=req.body;
    console.log(req.body);
    var operator = req.body.operator
        if (operator == "+")
        {
            res.render('/app.component.html', {
                result: parseInt(req.body.num1) + parseInt(req.body.num2),
            });
        } 



})
// Start up the Node server
app.listen(PORT, () => {
  console.log(`Node Express server listening on http://localhost:${PORT}`);
});
javascript angular post server-side-rendering
3个回答
0
投票

以下行表示您要发布到/index

<form action="index" method="POST">

要发布到快递服务(该服务托管在端口4000上,因此URL为http://localhost:4000),您必须在按钮上定义一个提交行为。检查this以供参考。


0
投票

我认为问题是您不包括

'angular-route.js'

在您的客户端代码中


0
投票

您无法发布索引<form action="index" method="POST">

您需要服务器端文件。像:<form action="form_process.php" method="POST">

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