当前位置:   article > 正文

简单mock server模拟用户请求给小程序提供数据

简单mock server模拟用户请求给小程序提供数据

整理小程序代码时发现一此小程序离开了mock-server基本上没有办法显示了,因此用node,express来满足给小程序提供演示数据的功能 

  1. const express = require('express');
  2. const { createCanvas, Image } = require('canvas');
  3. const fs = require('fs');
  4. const path = require('path');
  5. const app = express();
  6. const port = 3000;
  7. const querystring = require('querystring');
  8. function createImageFromPath(req, res) {
  9. const imagePath = req.path;
  10. const match = imagePath.match(/\/(\d+)x(\d+)\.jpg/);
  11. if (match) {
  12. const [, widthStr, heightStr] = match;
  13. const width = parseInt(widthStr, 10);
  14. const height = parseInt(heightStr, 10);
  15. if (isNaN(width) || isNaN(height)) {
  16. return res.status(400).send('Invalid image dimensions');
  17. }
  18. const canvas = createCanvas(width, height);
  19. const ctx = canvas.getContext('2d');
  20. // 生成随机背景颜色
  21. const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
  22. ctx.fillStyle = randomColor;
  23. ctx.fillRect(0, 0, width, height);
  24. // 获取对比色
  25. const contrastColor = getContrastColor(randomColor);
  26. const queryParams = req.query.q;
  27. console.log(queryParams);
  28. // 在图像上显示尺寸字样
  29. const fontSize = 30; // 字体大小
  30. let text = `${width}x${height}`; // 尺寸字样
  31. if (queryParams) {
  32. text = queryParams; // 如果查询参数不为空,使用查询参数的值
  33. }
  34. ctx.font = `${fontSize}px simsun`;
  35. const metrics = ctx.measureText(text); // 测量文本尺寸
  36. const x = (width - metrics.width) / 2; // 计算文本水平居中位置
  37. const y = height / 2 + fontSize / 2; // 计算文本垂直居中位置
  38. // 画描边
  39. // ctx.strokeStyle = contrastColor;
  40. // ctx.lineWidth = 10;
  41. // ctx.strokeText(text, x, y);
  42. // 画填充文本
  43. ctx.fillStyle = contrastColor;
  44. ctx.fillText(text, x, y);
  45. // 画图像边框
  46. ctx.strokeStyle = contrastColor;
  47. ctx.lineWidth = 10; // 边框宽度
  48. ctx.strokeRect(0, 0, width, height); // 画矩形边框
  49. // 将canvas转换为Buffer对象
  50. const buffer = canvas.toBuffer('image/jpeg');
  51. // 设置响应头信息
  52. res.setHeader('Content-Type', 'image/jpeg');
  53. res.setHeader('Content-Disposition', 'inline; filename=generated.jpg');
  54. res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
  55. res.setHeader('Pragma', 'no-cache');
  56. res.setHeader('Expires', '0');
  57. // 发送图片Buffer到响应中
  58. res.send(buffer);
  59. } else {
  60. // 如果没有匹配到尺寸,则发送404错误
  61. res.status(404).send('Not Found');
  62. }
  63. }
  64. // 辅助函数:获取对比色
  65. function getContrastColor(color) {
  66. // 将颜色字符串转换为RGB数组
  67. const rgb = color.slice(1).match(/.{2}/g).map(byte => parseInt(byte, 16));
  68. // 计算亮度
  69. const luminance = (0.299 * rgb[0] + 0.587 * rgb[1] + 0.114 * rgb[2]) / 255;
  70. // 根据亮度返回对比色
  71. return luminance > 0.5 ? '#000000' : '#FFFFFF';
  72. }
  73. // 使用中间件处理所有以.jpg结尾的请求
  74. app.use(express.static(path.join(__dirname, 'public'))); // 假设你的静态文件在public文件夹中
  75. app.get(/\/(\d+)x(\d+)\.jpg/, createImageFromPath);
  76. app.get(/\*.jpg$/, (req, res) => {
  77. res.status(404).send('Not Found');
  78. });
  79. app.get('/:filename', (req, res) => {
  80. const fileName = req.params.filename;
  81. const filePath = path.join(__dirname, `${fileName}.json`);
  82. fs.readFile(filePath, 'utf8', (err, data) => {
  83. if (err) {
  84. if (err.code === 'ENOENT') {
  85. // 文件不存在的错误
  86. res.status(404).send('File not found');
  87. } else {
  88. // 其他类型的错误
  89. res.status(500).send('Internal Server Error');
  90. }
  91. return;
  92. }
  93. res.setHeader('Content-Type', 'application/json');
  94. res.send(data);
  95. });
  96. });
  97. app.listen(port, () => {
  98. console.log(`Server is running on port ${port}`);
  99. });

整理一个o2o行业  洗衣小程序时添加了一些演示数据,这个洗衣程序, 有充值页面, 在地图搜索洗衣机, 拖动地图时, 可以实时加载洗衣机, 可以绑定洗衣, 没有后台, 只有简单的mock server, 看了一下这是一个未完成的项目, 感兴趣的话, 可以动手完善一下, 

下面是一些程序的截图

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/羊村懒王/article/detail/140944?site
推荐阅读
相关标签
  

闽ICP备14008679号