1小时原型开发：用vue-esign验证电子签约MVP-编程实验室

快速体验

打开 InsCode(快马)平台 https://www.inscode.net

输入框内输入如下内容：

快速开发一个电子签约MVP原型，包含：1.vue-esign签名组件 2.模拟合同PDF生成 3.用户手机号验证 4.邮件发送签名合同 5.简易管理后台查看记录 6.数据mock服务 7.基础CI/CD配置 8.使用说明文档。要求使用Vue 3 + Express.js技术栈，8小时内可完成全部开发部署。

点击'项目生成'按钮，等待项目生成完整后预览效果

最近需要验证一个电子签约产品的核心流程，包括签名采集、合同生成和邮件发送等功能。为了快速验证想法，我用Vue 3 + Express.js技术栈，在InsCode(快马)平台上搭建了一个最小可行产品(MVP)。整个过程不到8小时就完成了开发和部署，体验非常流畅。下面分享我的实现过程和经验总结。

1. 签名采集组件选型

首先需要解决电子签名的采集问题。经过调研，我选择了vue-esign这个开源的Vue签名组件。它支持手写签名、保存为图片、清除签名等功能，完全满足我们的需求。

在Vue 3项目中集成vue-esign非常简单，只需要安装依赖并导入组件即可。组件提供了丰富的配置选项，可以设置笔刷颜色、粗细等参数。签名完成后，可以轻松获取签名图片的base64数据，方便后续处理。

2. 合同PDF生成方案

有了签名图片后，下一步是生成包含签名的PDF合同。我使用Express.js作为后端服务，配合pdf-lib这个Node.js库来动态生成PDF。

具体流程是： 1. 前端将签名图片和用户信息发送到后端 2. 后端接收数据后，使用pdf-lib加载合同模板 3. 将签名图片嵌入到PDF指定位置 4. 生成最终的合同PDF文件

这个方案不需要额外的PDF服务，完全基于代码实现，非常适合原型开发阶段。

3. 用户手机号验证

为了确保签名的真实性，我添加了短信验证码验证功能。由于是原型阶段，我没有接入真实的短信服务，而是实现了一个mock方案：

前端输入手机号后，请求获取验证码
后端生成4位随机数作为验证码
在控制台打印验证码（方便测试）
用户输入验证码后，后端进行校验

这个mock方案既满足了验证需求，又避免了在原型阶段接入第三方服务的复杂性。

4. 邮件发送签名合同

合同生成后，需要发送给相关方。同样为了简化原型开发，我使用了nodemailer的测试账户功能。它允许我们在不配置真实SMTP服务器的情况下发送测试邮件。

邮件内容包含： - 生成的PDF合同附件 - 签约摘要信息 - 相关操作指引

虽然测试账户有发送限制，但对于验证流程完全够用。

5. 简易管理后台

为了查看签约记录，我开发了一个简易的管理后台。主要功能包括：

签约记录列表展示
按时间、用户筛选
查看详细签约信息
下载合同PDF

后台使用Vue 3 + Element Plus快速搭建，数据通过Express.js API获取。

6. 数据mock服务

在原型开发阶段，我使用Express.js实现了一个完整的数据mock服务。它提供了：

用户认证接口
验证码接口
合同生成接口
邮件发送接口
数据查询接口

这些接口完全模拟了真实业务场景，前端可以像调用真实服务一样使用它们。

7. 基础CI/CD配置

为了快速部署和迭代，我在项目中配置了基本的CI/CD流程：

代码推送到仓库后自动构建
运行单元测试
部署到测试环境
手动触发生产环境部署

这个配置确保了每次修改都能快速验证，大大提高了开发效率。

8. 使用说明文档

为了让其他团队成员也能快速上手，我编写了简洁的项目文档，内容包括：

项目结构说明
环境配置指南
接口文档
部署指南
常见问题

文档采用Markdown格式，直接放在项目仓库中，方便维护和更新。

经验总结

通过这次快速原型开发，我深刻体会到选择合适的工具和技术栈的重要性。Vue 3的响应式特性和组合式API让前端开发非常高效，Express.js则提供了轻量但强大的后端支持。特别是在InsCode(快马)平台上，一键部署功能让我可以专注于业务逻辑开发，完全不用操心服务器配置和环境搭建的问题。

整个项目从零开始到部署上线只用了不到8小时，验证了电子签约产品的核心流程。这种快速原型开发的方式非常适合初创团队验证产品想法，大大降低了试错成本。

如果你也需要快速验证产品想法，不妨试试这种开发模式。在InsCode(快马)平台上，从开发到部署的整个流程都非常顺畅，特别适合快速原型开发场景。

快速体验

打开 InsCode(快马)平台 https://www.inscode.net

输入框内输入如下内容：

快速开发一个电子签约MVP原型，包含：1.vue-esign签名组件 2.模拟合同PDF生成 3.用户手机号验证 4.邮件发送签名合同 5.简易管理后台查看记录 6.数据mock服务 7.基础CI/CD配置 8.使用说明文档。要求使用Vue 3 + Express.js技术栈，8小时内可完成全部开发部署。