别再只调API了！从零搭建一个带e签宝的Vue 3电子合同Demo（附完整前后端代码）

从零构建Vue 3电子合同系统e签宝全栈开发实战在数字化转型浪潮中电子合同已成为企业降本增效的刚需工具。本文将带您从零开始用Vue 3和Node.js构建一个完整的电子合同签署系统深度整合e签宝核心功能。不同于简单的API调用演示我们将构建包含用户认证、合同模板管理、签署状态跟踪等企业级功能的迷你全栈应用。1. 环境准备与项目初始化1.1 开发环境配置首先确保系统已安装以下基础环境Node.js 16推荐使用18 LTS版本npm 8或yarn 1.22Git版本控制工具验证安装node -v npm -v git --version1.2 前端项目脚手架使用Vite创建Vue 3项目相比传统Webpack方案Vite提供了更快的冷启动和热更新npm create vitelatest esign-demo --template vue-ts cd esign-demo npm install安装必要依赖npm install element-plus axios vue-router pinia提示使用TypeScript模板可获得更好的类型提示这对对接第三方SDK尤为重要2. e签宝服务配置2.1 开发者账号申请访问e签宝开放平台完成以下步骤注册企业开发者账号完成实名认证创建应用获取AppID和AppSecret申请电子合同相关权限2.2 安全凭证管理在项目根目录创建.env文件存储敏感信息VITE_ESIGN_APP_IDyour_app_id VITE_ESIGN_APP_SECRETyour_app_secret VITE_ESIGN_API_HOSThttps://openapi.esign.cn注意务必在.gitignore中添加.env防止密钥泄露3. 前端核心模块开发3.1 合同管理组件创建src/components/ContractManager.vuescript setup langts import { ref } from vue import { ElMessage } from element-plus interface Contract { id: string title: string status: draft | pending | signed signUrl?: string } const contracts refContract[]([ { id: 001, title: 劳动合同, status: draft } ]) const handleCreate async () { // 调用后端创建合同接口 } /script template div classcontract-manager el-button typeprimary clickhandleCreate 新建合同 /el-button el-table :datacontracts el-table-column proptitle label合同名称 / el-table-column label状态 template #default{ row } el-tag :typerow.status signed ? success : warning {{ row.status }} /el-tag /template /el-table-column /el-table /div /template3.2 签署页面集成创建src/components/SigningPage.vue实现签署功能template div classsigning-container iframe v-ifsignUrl :srcsignUrl classesign-iframe loadhandleIframeLoad / div v-else classempty-tip 请先选择需要签署的合同 /div /div /template script setup langts const signUrl ref() const handleIframeLoad () { // 监听e签宝回调事件 window.addEventListener(message, (event) { if (event.data.type ESIGN_CALLBACK) { console.log(签署状态变更:, event.data) } }) } /script style scoped .esign-iframe { width: 100%; height: 800px; border: 1px solid #eee; border-radius: 4px; } /style4. 后端服务开发4.1 Express服务搭建创建后端项目mkdir esign-server cd esign-server npm init -y npm install express axios body-parser cors dotenv基础服务器配置// server.js require(dotenv).config() const express require(express) const app express() app.use(express.json()) app.use(cors()) // 路由配置 app.use(/api/contract, require(./routes/contract)) app.listen(3001, () { console.log(Server running on http://localhost:3001) })4.2 e签宝服务封装创建services/esign.js封装核心APIconst axios require(axios) const crypto require(crypto) class ESignService { constructor() { this.host process.env.VITE_ESIGN_API_HOST this.appId process.env.VITE_ESIGN_APP_ID this.appSecret process.env.VITE_ESIGN_APP_SECRET } async createContract(templateId, signers) { const timestamp Date.now().toString() const nonce crypto.randomBytes(8).toString(hex) const response await axios.post(${this.host}/v1/contracts, { templateId, signers }, { headers: this._buildHeaders(timestamp, nonce) }) return response.data } _buildHeaders(timestamp, nonce) { const token crypto.createHash(sha256) .update(${this.appId}${timestamp}${nonce}${this.appSecret}) .digest(hex) return { X-Tsign-Open-App-ID: this.appId, X-Tsign-Open-Timestamp: timestamp, X-Tsign-Open-Nonce: nonce, X-Tsign-Open-Token: token } } } module.exports new ESignService()5. 全链路功能测试5.1 测试场景设计设计以下测试用例验证核心流程测试场景预期结果验证方式合同创建返回有效合同ID检查响应数据签署链接生成返回可访问的URL实际打开验证签署完成回调正确更新合同状态检查数据库记录5.2 联调技巧使用Postman先验证后端API前端开发时使用Mock数据逐步替换为真实接口调用利用Chrome开发者工具调试iframe通信// 前端mock示例 if (import.meta.env.DEV) { mock.onPost(/api/contract).reply(200, { id: mock_001, signUrl: https://example.com/mock-sign }) }6. 部署上线建议6.1 前端部署推荐使用Vercel或Netlify进行静态部署npm run build vercel --prod6.2 后端部署使用Docker容器化部署FROM node:18-alpine WORKDIR /app COPY package*.json ./ RUN npm install COPY . . EXPOSE 3001 CMD [node, server.js]构建并运行docker build -t esign-server . docker run -p 3001:3001 -d esign-server7. 进阶功能扩展在实际项目中你可能还需要考虑合同存证将签署完成的合同存档至区块链身份认证接入人脸识别或银行卡四要素验证模板引擎动态生成合同内容多签署方支持顺序签署和并行签署模式// 多签署方类型定义 interface Signer { name: string mobile: string idNumber: string signOrder?: number }整个项目开发过程中最大的挑战在于处理e签宝回调通知和各种异常状态。建议在正式环境中增加签署状态轮询机制作为回调通知的备用方案确保系统可靠性。