无法使用 GET 方法获取个人资料页面？

Question

我正在使用 Expressjs，我想在表单提交后在 URL 中显示用户输入，并将用户呈现到带有 URL 中名称的配置文件页面，所以我使用 req.query 和 GET 方法。 这是 app.js

var express = require('express');
var morgan = require('morgan');
var path = require('path');
var bodyParser = require('body-parser');

var port = process.env.port || 1001;

var app = express();

app.engine('.ejs', require('ejs').__express);
app.set('view engine', 'ejs');

app.set('views', path.join(__dirname, 'views'));

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.use(morgan('dev'));


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

app.put('/profile', function(req,res){
    var name = req.query.name;
    res.render('profile/'+ name , { name: name });
});

app.post('/', function(req, res){
    var name = req.query.name;
    res.render('profile/:name' , { name: name});    
});


app.listen(port, function(err){ if(err) throw err; console.log('Server running On Port : ' + port)});

这是表单 user.js

<form action="/profile/<%= name %>" method="GET">
    <input type="text" name="name">
    <button><a>Add</a></button>
</form>

这是个人资料页面。

<h1>Hello <%= name %></h1>
<button><a href="/">Home</a></button>

Answer 1

?‍?也许你可以试试下面的代码：?

App.js

var express = require('express');
var morgan = require('morgan');
var path = require('path');
var bodyParser = require('body-parser');

var port = process.env.port || 3000;

var app = express();

app.engine('.ejs', require('ejs').__express);
app.set('view engine', 'ejs');

app.set('views', path.join(__dirname, 'views'));

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.use(morgan('dev'));

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

app.post('/profile', function(req,res){
    var { name } = req.body;
    res.render('profile', { name });
});

app.listen(port, function(err){ if(err) throw err; console.log('Server running On Port : ' + port)});

?‍? 现在您的user.ejs 将如下所示：?

user.ejs

<form action="/profile/<%= name %>" method="POST">
  <input type="text" name="name">
  <button><a>Add</a></button>
</form>

如果您希望您的 url 看起来像这样：http://localhost:1001/profile?name=yourname，那么您只需在 App.js 和 user.ejs 表单方法上将方法 POST 更改为 GET。

? 更新：如果您希望您的 url 看起来像这样：http://localhost:1001/profile/yourname，那么您可以使用以下代码更改您的 /profile 路由：

app.get('/profile', function(req,res){
  const { name } = req.query;
  res.redirect('/profile/' + name.replace(/ /g, '-') );
});

app.get('/profile/:name', (req, res) => {
  const { name } = req.params;
  res.render('profile', { name : name.replace(/-/g, ' ') });
})

?如果您使用上述路线，确保，在您的 user.ejs 中仍然使用 GET 方法。

希望对你有帮助?。