javascript - 无法使用 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>

If you want your url looks like this: http://localhost:1001/profile?name=yourname then you only need to change method POST to GET, on your App.js and on your user.ejs form method.

📤更新:如果您希望您的网址如下所示: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, ' ') });
})

💡 If you're using that route obove, make sure, in your user.ejs still using GET method.

希望对你有帮助🙏。