服务端生成二维码并上传到云服务器 第一篇

前段时间老大提了一个需求,根据用户ID生成二维码跳转到不同的页面;开始以为这不是很简单嘛!随着需求的细化,并没有开始想的那么简单 : ①. 根据用户的userId生成不同的二维码;②. 可批量生成二维码并上传到又拍云上;

个人感觉的难点 : 1. 首先要有一个后端服务吧; 2. 生成二维码,但是前端页面生成的二维码不能保存成图片,也不方便后台存储; 3. 怎么上传到又拍云;
最后上网各种找,终于找到了 qr-image 这个服务端生成二维码的包,和服务端上传又拍云的包 upyun;

现在一切就绪,开干!

---

首先搭建一个简单的服务,我们可以利用webstorm编辑器快速创建一个node+express服务;打开webstorm 编辑器,如图一所示创建新项目;

图一

进入图二 New Project 界面; ①: 选择node+express项目, ②: 项目目录, ③: 当前使用的node版本, ④: express版本, ⑤: 默认template 模板类型是Pug(没接触过,所以我们不选), ⑥: 选择我们的老朋友html作为浏览器渲染模板,⑦: 创建

图二

等待一段时间后生成如图三所示的项目,①: 运行www这个文件就可以开启服务了,默认端口3000;

图三

如图四我们新建几个文件①: 在public文件夹下创建qrpage/index.html,用于展示我们的二维码;②: 创建二维码生成的路由qr.js;④: 在app.js引入qr.js路由;⑤: 个人习惯将 bin/www下监听端口操作移到 app.js中;

图四

先准备一个qrpage/index.html文件,用于显示二维码

routes/qr.js 引入qr-image npm 包,生成二维码;

var express = require('express');
var router = express.Router();
var fs = require("fs");
var qr = require("qr-image");
/* GET qr listing. */
router.get('/create', function(req, res, next) {
    var code = qr.image('http://wangyueguang.cn', { type: 'png' });
    res.setHeader('Content-type', 'image/png');  //向客户端发送二维码图像
    code.pipe(res);
});
module.exports = router;

①: 在package.json 文件中配置②: start: "node app" ;③: 使用命令 npm install qr-image 下载qr-image包;④: npm start 启动服务;⑤:服务开启成功

图五

在浏览器地址栏输入 http://127.0.0.1:3333/qrpage/ 图六就是我们最终生成的二维码了,现在小伙伴可以拿起你的手机扫一扫了!

图六

到此我们的简易服务就搭建好了,并且我们也测试了qr-image简单的API,二维码生成图片文件和又拍云上传文件我将在《服务端生成二维码并上传到云服务器 第二篇》进行详细讲解