在express.js中过滤路径并创建html页面
我们添加了快速路由器来处理路由。一个路由器文件处理多个路由。
在App.js中为路由器添加路径 -
const http = require('http');
const express = require('express');
const bodyParser = require('body-parser');
const route = require('./routes');
const app = express();
app.use(bodyParser.urlencoded({extended: false}));
app.use('/test',route);
app.use((req, res,next)=>{
res.status(404).send('<h1> Page not found </h1>');
});
const server = http.createServer(app);
server.listen(3000);在路由器中间件中，我们使用路径-/p>
app.use('/test',route);路由器将处理所有以/test开头的路径，例如/test/add-username
我们必须在route.js文件中以表单形式更改操作-
router.get('/add-username', (req, res,next)=>{
res.send('<form action="/test/post-username" method="POST"> <input type="text" name="username"> <button type="submit"> Send </button> </form>');
});Routes.js文件-
const express = require('express');
const router = express.Router();
router.get('/add-username', (req, res,next)=>{
res.send('<form action="/test/post-username" method="POST"> <input type="text" name="username"> <button type="submit"> Send </button> </form>');
});
router.post('/post-username', (req, res, next)=>{
console.log('data: ', req.body.username);
res.send('<h1>'+req.body.username+'</h1>');
});
module.exports = router;这种为路由器添加过滤的机制有助于将常见的url处理程序放在一个部分中。
在vs代码编辑器中创建html5页面-
创建一个用于存储html页面的新文件夹，即views文件夹。创建一个新文件add-user.html。
在add-user.html文件中，如果我们键入html并按ctrl+空格，我们将获得用于为html5创建默认框架的选项。选择它，我们将在html5页面下方-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>我们可以在html正文中从route.js文件复制表单。
<form action="/test/post-username" method="POST"> <input type="text" name="username"> <button type="submit"> Send </button> </form>