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

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

javascript 复制代码
const express = require('express');  
const { createCanvas, Image } = require('canvas');  
const fs = require('fs');  
const path = require('path');  
const app = express();  
const port = 3000;  
const querystring = require('querystring');  


function createImageFromPath(req, res) {

  const imagePath = req.path;  
  const match = imagePath.match(/\/(\d+)x(\d+)\.jpg/);  
  if (match) {  
    const [, widthStr, heightStr] = match;  
    const width = parseInt(widthStr, 10);  
    const height = parseInt(heightStr, 10);  
  
    if (isNaN(width) || isNaN(height)) {  
      return res.status(400).send('Invalid image dimensions');  
    }  

   
  
    const canvas = createCanvas(width, height);  
    const ctx = canvas.getContext('2d');  
  
    // 生成随机背景颜色  
    const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);  
    ctx.fillStyle = randomColor;  
    ctx.fillRect(0, 0, width, height);  


    
  
    // 获取对比色  
    const contrastColor = getContrastColor(randomColor);  

      const queryParams = req.query.q;  
      console.log(queryParams);
        // 在图像上显示尺寸字样  
        const fontSize = 30; // 字体大小  
        let text = `${width}x${height}`; // 尺寸字样            
        if (queryParams) {  
          text = queryParams; // 如果查询参数不为空,使用查询参数的值  
        }  
        ctx.font = `${fontSize}px simsun`;  
        const metrics = ctx.measureText(text); // 测量文本尺寸  
        const x = (width - metrics.width) / 2; // 计算文本水平居中位置  
        const y = height / 2 + fontSize / 2; // 计算文本垂直居中位置  
    // 画描边  
   // ctx.strokeStyle = contrastColor;  
   // ctx.lineWidth = 10;  
   // ctx.strokeText(text, x, y);  
  
    // 画填充文本  
    ctx.fillStyle = contrastColor;  
    ctx.fillText(text, x, y);  
  
    // 画图像边框  
    ctx.strokeStyle = contrastColor;  
    ctx.lineWidth = 10; // 边框宽度  
    ctx.strokeRect(0, 0, width, height); // 画矩形边框  
  
    // 将canvas转换为Buffer对象  
    const buffer = canvas.toBuffer('image/jpeg');  
  
    // 设置响应头信息  
    res.setHeader('Content-Type', 'image/jpeg');  
    res.setHeader('Content-Disposition', 'inline; filename=generated.jpg');  
    res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');  
    res.setHeader('Pragma', 'no-cache');  
    res.setHeader('Expires', '0');  
  
    // 发送图片Buffer到响应中  
    res.send(buffer);  
  } else {  
    // 如果没有匹配到尺寸,则发送404错误  
    res.status(404).send('Not Found');  
  }  
}  
  
// 辅助函数:获取对比色  
function getContrastColor(color) {  
  // 将颜色字符串转换为RGB数组  
  const rgb = color.slice(1).match(/.{2}/g).map(byte => parseInt(byte, 16));  
  
  // 计算亮度  
  const luminance = (0.299 * rgb[0] + 0.587 * rgb[1] + 0.114 * rgb[2]) / 255;  
  
  // 根据亮度返回对比色  
  return luminance > 0.5 ? '#000000' : '#FFFFFF';  
}

  
  // 使用中间件处理所有以.jpg结尾的请求  
app.use(express.static(path.join(__dirname, 'public'))); // 假设你的静态文件在public文件夹中  
app.get(/\/(\d+)x(\d+)\.jpg/, createImageFromPath);  
app.get(/\*.jpg$/, (req, res) => {  
  res.status(404).send('Not Found');  
});  
  
  
app.get('/:filename', (req, res) => {  
  const fileName = req.params.filename;  
  const filePath = path.join(__dirname, `${fileName}.json`);  
  
  fs.readFile(filePath, 'utf8', (err, data) => {  
    if (err) {  
      if (err.code === 'ENOENT') {  
        // 文件不存在的错误  
        res.status(404).send('File not found');  
      } else {  
        // 其他类型的错误  
        res.status(500).send('Internal Server Error');  
      }  
      return;  
    }  
  
    res.setHeader('Content-Type', 'application/json');  
    res.send(data);  
  });  
});  
app.listen(port, () => {  
  console.log(`Server is running on port ${port}`);  
});

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

下面是一些程序的截图

相关推荐
m0_748254882 分钟前
DataX3.0+DataX-Web部署分布式可视化ETL系统
前端·分布式·etl
ZJ_.13 分钟前
WPSJS:让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
GIS开发特训营18 分钟前
Vue零基础教程|从前端框架到GIS开发系列课程(七)响应式系统介绍
前端·vue.js·前端框架·gis开发·webgis·三维gis
Cachel wood44 分钟前
python round四舍五入和decimal库精确四舍五入
java·linux·前端·数据库·vue.js·python·前端框架
学代码的小前端1 小时前
0基础学前端-----CSS DAY9
前端·css
joan_851 小时前
layui表格templet图片渲染--模板字符串和字符串拼接
前端·javascript·layui
m0_748236111 小时前
Calcite Web 项目常见问题解决方案
开发语言·前端·rust
Watermelo6172 小时前
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
开发语言·前端·javascript·算法·数据挖掘·数据分析·ecmascript
m0_748248942 小时前
HTML5系列(11)-- Web 无障碍开发指南
前端·html·html5
m0_748235612 小时前
从零开始学前端之HTML(三)
前端·html