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

news2024/10/5 21:17:42

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

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, 看了一下这是一个未完成的项目, 感兴趣的话, 可以动手完善一下, 

下面是一些程序的截图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1461962.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Sora横空出世!AI将如何撬动未来?

近日,OpenAI 发布首个视频生成“Sora”模型,该模型通过接收文字指令,即可生成60秒的短视频。 而在2022年末,同样是OpenAI发布的AI语言模型ChatGPT,简化了文本撰写、创意构思以及代码校验等任务。用户仅需输入一个指令&…

uni-app 经验分享,从入门到离职(四)——页面栈以及页面跳转的 API(开发经验总结)

文章目录 📋前言⏬关于专栏 🎯什么是页面栈🧩页面跳转方法📌 uni.navigateTo(OBJECT)📌 uni.redirectTo(OBJECT)📌 uni.reLaunch(OBJECT)📌 uni.switchTab(OBJECT)📌 uni.navigateBa…

WPF 启动项目 Grid、StackPanel 布局

WPF 启动项目 <!--x:Class"WPF_Study.App" 对应类&#xff1a;WPF_Study.App--> <!--xmlns:local"clr-namespace:WPF_Study" 命名空间&#xff1a;WPF_Study--> <Application x:Class"WPF_Study.App"xmlns"http://schema…

船运物流管理系统|基于springboot船运物流管理系统设计与实现(源码+数据库+文档)

船运物流管理系统目录 目录 基于springboot船运物流管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、管理员登录 2、货运单管理 3、公告管理 4、公告类型管理 5、新闻管理 6、新闻类型管理 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 …

WebServer -- 定时器处理非活动连接(上)

目录 &#x1f34d;函数指针 &#x1f33c;基础知识 &#x1f419;整体概述 &#x1f382;基础API sigaction 结构体 sigaction() sigfillset() SIGALRM, SIGTERM 信号 alarm() socketpair() send() &#x1f4d5;信号通知流程 统一事件源 信号处理机制 &#x…

政安晨:【示例演绎机器学习】(一)—— 剖析神经网络:学习核心的Keras API

打开这篇文章&#xff0c;相信您已经了解了TensorFlow的一些基础知识&#xff0c;可以用它从头开始实现一个简单模型。 如果您对这些概念还不是太清晰&#xff0c;可以浏览一下我这个栏目中的相关文章&#xff1a; 政安晨的机器学习笔记http://t.csdnimg.cn/DHcyL 尤其是其中…

Android进阶(二十九) 走近 IntentFilter

文章目录 一、什么是IntentFilter &#xff1f;二、IntentFilter 如何过滤隐式意图&#xff1f;2.1 动作测试2.2 类别测试2.3 数据测试 一、什么是IntentFilter &#xff1f; 如果一个 Intent 请求在一片数据上执行一个动作&#xff0c; Android 如何知道哪个应用程序&#xf…

ArcgisForJS如何访问Arcgis Server?

文章目录 0.引言1.准备ArcGIS相关工具2.创建含有ArcSDE地理数据库的MXD文件3.注册ArcSDE地理数据库4.发布数据到Arcgis Server5.ArcgisForJS访问ArcGIS Server数据 0.引言 ArcGIS API for JavaScript 是一个用于在Web和移动应用程序中创建交互式地图和地理空间分析应用的库。它…

OceanBase数据迁移-从MySQL导入数据到OceanBase

把MySQL中的数据导入到OceanBase&#xff0c;分两个步骤&#xff1a; 1.准备一份MySQL测试数据集2.使用mydumper工具导出数据3.使用myloader工具导入到OceanBase4.验证测试数据集在OceanBase下的执行情况 1.准备一份MySQL测试数据集 1.1.从github下载mysql测试数据集&#x…

【hoare基础版】快速排序算法(1)

目录 交换排序 QuickSort快速排序 Hoare整体思路 图解分析 ​ Hoare版本代码 总代码 时间复杂度 交换排序 基本思想&#xff1a;所谓交换&#xff0c;就是根据序列中两个记录键值的比较结果来对换这两个记录在序列中的位置&#xff0c;交换排序的特点是&#xff1a;将键…

安装unget包 sqlsugar时报错,完整的报错解决

前置 .net6的开发环境 问题 ? 打开unget官网&#xff0c;搜索报错的依赖Oracle.ManagedDataAccess.Core unget官网 通过unget搜索Oracle.ManagedDataAccess.Core查看该依赖的依赖 发现应该是需要的依赖Oracle.ManagedDataAccess.Core(>3.21.100)不支持.net6的环境 解…

代码随想录算法训练营第一天

● 今日学习的文章链接和视频链接 ● 自己看到题目的第一想法 1. 704二分法&#xff1a; 方法一&#xff1a; 整个数组是 左闭右闭区间 [ ] left指针指向数组开始下标&#xff0c; right 指针指向数组最后下表nums.size()-1, mid为 (leftright) /2循环条件 left<rightnu…

Django使用Celery异步

安装包 pip install celerypip install eventlet 1.在项目文件的根目录下创建目录结果 2. 在main.py文件中 # !/usr/bin/env python # -*-coding:utf-8 -*-""" # Author &#xff1a;skyTree # version &#xff1a;python 3.11 # Description&#…

浅谈maven的生命周期

正文: 在Maven中,生命周期定义了项目构建过程的不同阶段以及在每个阶段中执行的插件目标。Maven的生命周期是由一系列阶段组成的,每个阶段都有一个唯一的标识符。 Clean生命周期:用于清理项目的构建目录。它包含以下阶段: pre-clean:执行在清理操作之前的任何操作。clea…

Eclipse的Java Project的入口main函数

在使用Eclipse创建java project项目的时候&#xff0c;一个项目里面通常只有一个main&#xff0c;那么一个项目里面是否可以有多个main函数呢&#xff1f;其实可以的&#xff0c;但是运行java application的时候要选择执行哪个main函数。 下面举个例子&#xff1a; 1、创建一个…

二进制方式安装MySQL并备份数据库

一、openEuler二进制方式安装MySQL 8.0.28版本 1.1 获取软件包 [rootopenEuler3 ~]# wget -c https://mirrors.aliyun.com/mysql/MySQL-8.0/mysql-8.0.28-linux-glibc2.12-x86_64.tar.xz 1.2 解压软件包 [rootopenEuler3 ~]# dnf install -y tar xz [rootopenEuler3 ~]# t…

MKdocs添加顶部公告栏

效果如图&#xff1a; docs/overrides下新建main.html &#xff0c;针对main.html文件 树状结构如下: $ tree -a . ├── .github │ ├── .DS_Store │ └── workflows │ └── PublishMySite.yml ├── docs │ └── index.md │ └──overrides │…

Arthas—【学习篇】

1. Arthas官网 arthas 2. 下载 从 Maven 仓库下载 最新版本&#xff0c;点击下载&#xff1a;​编辑在新窗口打开 点击这个 mavrn-central 即可显示下面的图片 ​​ #从 Github Releases 页下载 Releases alibaba/arthas GitHub 3. 解压 将压缩包复制到一个位置&…

el-table同时固定左列和右列时,出现错误情况

最近遇到一个问题,就是需求是要求表格同时固定序号列和操作列,我们用的是饿了么组件库的el-table,如下图,出现了错误情况: 解决方法就是使用doLayout方法: 如果使用了keep-alive,可以在activated里执行doLayout方法: activated() {this.$nextTick(() => {this.$ref…

Linux篇:开发工具yum/vim/gcc/g++/Makefile/gdb

一. yum&#xff1a;软件包管理器 什么是软件包&#xff1f; 在Linux 下安装软件 , 一个通常的办法是下载到程序的源代码 , 并进行编译 , 得到可执行程序 . 但是这样太麻烦了, 于是有些人把一些常用的软件提前编译好 , 做成软件包 (可以理解成windows 上的安装程序) 放在…