需求
主要用于运营部使用h5图片,又想自定义标题. 但是时不时找我很烦，就搞了这个东西给她用。nodejs还挺好玩的。
使用说明
原理,使用表单提交数据. 将数据用ejs渲染到模板上,然后保存成html.
安全码:是防止恶意提交做的一个小验证,写死在 routes/index.js:13 xxx123
运行 npm run start 默认端口是4001
pm2运行 pm2 start npm --name "h5-generator" -- run start
删除任务 pm2 delete h5-generator
生成的文件目录在 ./public/html
由于用在www.xxx.com
所以我nginx配置如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
location /generate/ {
proxy_pass http://127.0.0.1:4001/;
proxy_read_timeout 300s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location /h5 {
＃ public/html 绝对路径
alias /data/wwwroot/h5_generator/public/html;
}
|
h5生成器页面: https://www.xxx.com/generate/h5
生成的文件访问地址： https://www.xxx.com/h5/生成文件名.html
主要代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| var express = require('express');
const process = require('process');
const ejs = require('ejs')
const fs = require('fs');
var router = express.Router();
router.get('/h5', function(req, res, next) {
res.render('index', { title: 'H5 生成' });
});
router.post('/generate', function (req, res) {
if(req.body.password==='xxx123') {
ejs.renderFile('./templates/h5.ejs',req.body,{},function (err, str) {
if (err) {
console.log(err)
res.send('读取模板文件出错啦.')
} else {
const date = new Date();
const month = date.getMonth() + 1
const filename = ''+ date.getFullYear() + month + date.getDate() + req.body.filename.replace(/(^\s*)|(\s*$)/g, "")+'.html';
console.log('filename', filename)
fs.writeFile('./public/html/'+filename, str, (err) => {
if (err) {
res.send(err)
}else{
res.send('http://www.xxxx.com/h5/'+filename);
}
});
}
})
} else {
res.send('操作码错误')
}
});
module.exports = router;
|
h5 模板
1
2
3
4
5
6
7
8
9
10
11
12
13
| <!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<meta name="description" content="<%= description %>">
<meta name="keyword" content="<%= keyword %>">
<meta name="viewport" content="width=device-width">
</head>
<body>
<img src="<%= image_url %>" style="width: 100%" title="<%= title %>">
</body>
</html>
|
index 视图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<form action="./generate" method="post">
<p>网站标题</p>
<input type="text" name="title">
<p>关键词</p>
<input type="text" name="keyword">
<p>描述</p>
<input type="text" name="description">
<p>图片地址(h5图片地址)</p>
<input type="text" name="image_url">
<p>保存的html文件名(https://www.xxx.com/20191010-文件名.html)</p>
<input type="text" name="filename">
<p>确认码</p>
<input type="text" name="password">
<p><input type="submit"></p>
</form>
</body>
</html>
|
