EJS模板
EJS是一个高效的嵌入式 JavaScript 模板引擎
可在前端页面嵌入后台数据
安装:npm install ejs
用法:
//前端嵌入数据
用户:<%=login.user%>,密码:<%=login.pws%>
//后台传递数据
const ejs = require('ejs');
let loginData = {username:'zhang',pwd:'123456'}
ejs.renderFile('./views/doLogin.ejs', { login: loginData }, (err, data) => {
res.writeHead(200, { 'Content-Type': `text/html;charset="utf-8"` });
res.end(data)
})
路由
前端通过网页浏览器访问的域名路径,携带post和get请求向后端传递交互数据
后端可根据访问的路径不同而获取不同交互数据,执行不同的数据处理
const url = require('url');
//获取路由
let routeName = url.parse(req.url, true).pathname
//获取/login的操作
if (routeName == '/login') {
//使用ESJ模板
let msg = {
user: 'zhang',
pws: '123456'
}
ejs.renderFile('./views/login.ejs', { login: msg }, (err, data) => {
res.writeHead(200, { 'Content-Type': `text/html;charset="utf-8"` });
res.end(data)
})
return
}
获取post、get传值
//后端
//req.method获取请求方式
//获取get传值
let loginData = '';
loginData=url.parse(req.url, true).query;
//获取post传值
//由于post传值以数据流的形式传递,则使用数据监听模式
req.on('data', (chunk) => {
loginData += chunk;
})
//数据传输完成
req.on('end', () => {
console.log(loginData);
})
模拟登录
后端创建server.js文件
const http = require('http');
const routes = require('./utility/route');
const path = require('path');
const url = require('url');
const ejs = require('ejs');
// console.log(http)
http.createServer(function (req, res) {
//获取路由
let routeName = url.parse(req.url, true).pathname;
if (routeName == '/doLogin') {
//获取post请求
let loginData = '';
//由于post数据以流的形式传递,使用数据监听模式
console.log(req.method);
if (req.method == 'POST') {
req.on('data', (chunk) => {
loginData += chunk;
})
req.on('end', () => {
console.log(loginData);
//渲染
ejs.renderFile('./views/doLogin.ejs', { login: loginData }, (err, data) => {
res.writeHead(200, { 'Content-Type': `text/html;charset="utf-8"` });
res.end(data)
})
})
return
}
//获取get请求
if (req.method == 'GET') {
loginData=url.parse(req.url, true).query;
console.log(loginData.title)
//渲染
ejs.renderFile('./views/doLogin.ejs', { login: loginData.title }, (err, data) => {
res.writeHead(200, { 'Content-Type': `text/html;charset="utf-8"` });
res.end(data)
})
return
}
}
res.writeHead(404, { 'Content-Type': `text/plain;charset="utf-8"` });
res.end('404')
}).listen(8888);
前端创建doLogin.ejs文件
<body>
<form action='./doLogin' method="POST">
用户名:<input type="text" name="username">
<br />
<br />
密 码:<input type="password" name="pwd">
<br />
<input type="submit" value="提交">
</form>
<%=login%>
</body>
访问本地服务下的/doLogin文件
http://127.0.0.1:8888/doLogin