nodejs 动态返回html页面给浏览器

1.需求说明

做一个H5视频播放页面，根据手机扫不同的二维码进行播放对应的视频。

2.实现思路

用nodejs做后端服务，根据url传入的参数查找对应的视频，并且把设计好的网页返回给浏览器显示出来。

3.建立nodejs项目

安装好node之后，在D盘新建一个文件夹，命名为WebVideo，按着shift键点击右键，选择【在此处打开命令窗口】

下载 npm install express --save

下载 express 框架并全局安装 npm install express-generator -g

下载中间件 npm install express-static --save

下载完后，在项目根目录下新建一个文件夹，命名为mp4用于存放视频。

再在项目根目录下新建一个文件夹，命名为www用于存放H5网页 。
(H5开发请看这里：https://blog.csdn.net/weixin_38946164/article/details/116134231)

重点是这里，创建主文件 app.js

app.js代码

const express = require("express");
const fs = require('fs');
const path=require('path');
const app = express();

//域名,***要修改成自己的
var domainName = 'http://127.0.0.1:8080/';
//js文件路径，此文件保存有需要替换的网址，文件名pages-index-index.3ac195ae.js ***要修改为实际名称
var jsPath ='./www/static/js/pages-index-index.3ac195ae.js';

//主页文件路径
var htmlPath ='./www/index.html';
//新网址
var newUrl = '';

//设置www，mp4文件夹下的文件能够访问
app.use(express.static(path.join(__dirname,'www'))); 
app.use(express.static(path.join(__dirname,'mp4')));

app.get('/video',function (req,res) { 		
	var no = req.query.no; //req.query 解析前端传递过来的数据	
	var filePath = './mp4/' + no +'.mp4'; //拼接成视频在本地的路径
	
	//判断视频文件是否存在
	fs.exists(filePath,function(exists){ 
	    if(exists){
			console.log("文件存在")
			newUrl = domainName + no +'.mp4'; //拼接成视频网址 -- http://127.0.0.1:8080/1001.mp4
			wei() //调用方法
	    }
		if(!exists){
			console.log("文件不存在")
			//前端请求的视频文件不存在的时候播放默认视频
			newUrl = 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a450e3eb-029c-4568-83af-cd4160c8852e/18c07633-05da-4b3e-8f4d-d586cbfd5b1b.mp4';
			wei()
		}
	});
	
	//把旧网址替换成新网址之后，再把整个网页返回给前端显示出来
	function wei(){		
		fs.readFile(htmlPath, function (err, data) {
			if (err) {
				return console.log(err);				   
			} else {					
				fs.readFile(jsPath, function (err, data) {
					if (err) {
					   return console.log(err);
					} else {
						//console.log("js读取成功: " + data.toString());
						let str = data.toString();	
						//newUrl不为空才执行
						if (newUrl.trim()!=="") {	
							//用正则表达式查找原网址并替换成新网址
							str = str.replace(/(http|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/g,newUrl);
							fs.writeFile(jsPath,str,function(err){
							   if (err) {
								   return console.log(err)
								} else {
								   return console.log('url替换成功')			   
								};
							});
						};
					};		
				});
								
				res.sendFile(  __dirname + "/www/index.html" ) //把index.html返回给浏览器, 用这个方法加载页面会更快		
				
				//res.writeHead(200,{"Content-Type":"text/html"});
				//res.write(data.toString());  //把index.html返回给浏览器
			}				
			//res.end();
		});
	};
}); 

app.listen(8080,'127.0.0.1');
console.log('服务开启成功：127.0.0.1:8080');

4.启动服务

5.浏览器输入网址测试

http://127.0.0.1:8080/video/?no=1002

6.生成二维码

用草料二维码生成器把域名生成二维码，手机浏览器或者微信扫码就能打开视频。