简介
前端主要做了几个简单的表单页面，做的过程中主要做了数字借条生成的全过程。
在开发的过程中我发现我们的初代方案，仅仅是填写借东西双方的姓名、学号等信息还是不够可靠，无法满足后续验证借款的需要。我从传统借条中获得灵感，加入了手写签字部分，将签名通过canvas放到图片信息上，这样可以使之获得法律效力，之后手写签名在后端经过加密后同时会传到区块链上，能够更好的提高校园借售平台的可靠性。同时这里我想到了将上传的内容从枯燥的数据改为借款图片会更加的符合现实场景，于是设计了借条图案和格式。最终手写签字和图片生成都是依靠小程序的Canvas库实现的，前端生成可以节省后端数据流量和处理流程，加快系统流畅度。
项目源码：https://download.csdn.net/download/weixin_43973089/86742758
小程序开发主要使用微信开发者工具。
- 文件结构：
效果展示
-
借条表单
借款人信息部分是左右滑块，右边是出借人信息。这一部分在点击下一步时会进行身份校验，确保学号姓名匹配。 -
借条预览
点击手写签名进入手写签名部分 -
手写签名
这一部分使用canvas实现 -
借条生成
此处生成的是图片，生成的同时上传区块链保存 -
个人中心
个人中心提供了基础的登录、绑定、解绑、查看借条等功能。学号等信息存储在后端数据库中，因此上面的多数操作需要与后端进行交互。
总的来说前端还是很简单的，但其中小程序的跳转、带信息的跳转以及缓存、异步上传等操作需要注意；同时为了提高用户的体验，需要多加入交互操作（如上传信息等待时的转圈、操作完成后的反馈、弹窗提醒等等）。
前端在逻辑上非常简单，但在做的过程中确实最耗时的，因为有很多的细节需要考虑。