各个文件
根目录下的app.js文件中
const express = require('express')
const ejs = require('ejs');
const bodyParser = require('body-parser');
const app = express()
const port = 3000;
// 引入路由模块
const login = require('./routers/login')
//配置模板引擎
app.engine("html",ejs.__express)
app.set("view engine","html")
//配置静态web目录
app.use(express.static("static"))
//配置第三方中间件,此处配置的bodyParser是全局的配置，在下面的login中间件中是可以直接使用的
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
// 当访问/login路由时直接使用login路由模块
app.use('/login',login);
app.get('/', (req, res) => {
res.send('首页')
})
app.listen(port, () => console.log(`Example app listening on port ${port}!`))
在routers/login.js文件中
const express = require('express');
var router = express.Router();
router.get('/',(req,res)=>{
res.render('login',{})
})
router.post('/doLogin',(req,res)=>{
var body = req.body;
console.log(body);
res.send('用户名为: '+body.username)
})
module.exports = router;
此时在页面中访问的 /login 、/login/doLogin都会走routers/login.js中的逻辑
在views/login.html文件中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<title>Document</title>
</head>
<body>
<h2>post提交数据</h2>
<form action="/login/doLogin" method="post">
用户名：<input type="text" name="username" id="">
密码：<input type="password" name="pwd" id="">
<input type="submit" value="提交">
</form>
</body>
</html>
网友评论