nodeJs + qr-image + express 生成二维码并在前台扫码案例

最新推荐文章于 2024-05-15 09:53:41 发布

孤身不觉晚

最新推荐文章于 2024-05-15 09:53:41 发布

阅读量1.4k

点赞数 3

本文链接：https://blog.csdn.net/qq_40043424/article/details/106333536

版权

话不多说，直接上代码，如有什么不懂之处请点击此处查询。

服务器端代码：

var  express = require('express');
var app = express();
var qr = require('qr-image');
// 解决跨域
app.all('/',(req,res,next)=>{
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type, Authorization');
    next();
});

app.post('/Code',(req,res)=>{
    let text = 'https://www.baidu.com';
    let svg_string = qr.imageSync(text, { type: 'svg' });
    res.send(svg_string);
})

var server = app.listen(3000,()=>{
    var host = server.address().address
    var port = server.address().port
    console.log('成功监听',host,port);
})

客户端代码：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>animate</title>
		<style type="text/css">
			.demo {
				display: flex;
				justify-content: center;
				line-height: 50vh;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<!-- <img src="/qr" alt="qrcode"> -->
		</div>
	</body>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$.ajax({
		      async:true,//布尔值，表示请求是否异步处理。默认是 true。
		      url:"http://127.0.0.1:3000/Code",//规定发送请求的 URL
		      type:'post',//请求的方式
		      success:function (backdata) {//请求成功后返回的数据会封装在回调函数的第一个参数中
		        //通过backdata来获取所需要的数据
				console.log(backdata);
				let div = document.createElement('div');
				div.innerHTML = backdata;
				div.style='width:150px;height:150px;'
				document.getElementsByClassName('demo')[0].appendChild(div);
		      },
		      error:function () {//响应不成功时返回的函数
		        console.log('请求失败！')
		      },
		      dataType:'text'//设置返回的数据类型
		    })
	</script>
</html>

运行服务器段代码，生成svg格式，传向前端展示效果如下：
在这里插入图片描述
成不成功你扫一下二维码就知道了哦！！

孤身不觉晚

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
nodeJs + qr-image + express 生成二维码并在前台扫码案例

话不多说，直接上代码，如有什么不懂之处请点击此处查询。服务器端代码：var express = require('express');var app = express();var qr = require('qr-image');// 解决跨域app.all('/',(req,res,next)=>{ res.setHeader('Access-Control-Allow-Origin', '*'); res.setHeader('Access-Control-Allo
复制链接

扫一扫