水门车险的开发记录(前端)
前言
这个文档记录了水门车险前端模块开发过程中的部分功能实现方法。
内容是基于区块链技术开发的一个车险系统,关于区块链的的概念详见其他 Markdown;
这个系统并没有往实际使用的方向开发,纯粹是应付毕业设计所准备的,因此可能存在很多不合理的设计或者是奇奇怪怪的 bug,总之,一切努力只为能够通过毕设考核。
整个项目暂定分成三个模块,前端、后端、区块链。
D:. |
- 架构设计
go ~ go ~ go!
准备工作
需要安装node.js
PS D:\study_test\Minato_Sys\vue-Minato> node --version |
安装和部署
# 选择一个你喜欢的包管理器 |
使用 Element-plus 的方法请参考官方文档,写得非常详细,我觉得完全没必要多此一举再写一遍:https://element-plus.org/zh-CN
同时,您还需要准备一个Metamask
钱包,用以对接接受支付和接受赔偿金的环节
页面设计
src
下的目录大概像这样,其中经常复用的如侧边栏、顶栏、页脚被写进了components
文件夹
//很多页面的 UI 都是”借鉴“了各大网页的,包括了Mozilla
、中国平安等等等等
|-- App.vue |
理赔申报
用户需要填写表单并且上传文件
上传文件使用的是ElementPlus
中的el-upload
,这里上传的文件会直接以 POST 的方法传到 http://localhost:8080/update,后端需要对这个文件进行接收
<el-form-item |
后端接收文件,这里以Gin
为例
func (f FileController) Updatefile(ctx *gin.Context) { |
申报需要对用户提交的内容进行验证
这里我们尽量在前端将这些都完成,避免无用表单对后端造成压力
首先在 el-form 中添加规则
<el-form ref="claimFormRef" :rules="rules"></el-form> |
接着引入数据类型,也可以在当前页面直接定义,不过因为这个和表单提交部分复用了,所以我单独写了一个接口,方便之后使用
//引入ClaimForm的钩子 |
定义响应式,初始化和接收数据
// 初始化各项数据,其中insuranceid不论怎么写最终读取都是字符串格式 |
定义验证规则
const rules = reactive<FormRules<ClaimForm>>({ |
其中,身份证校验需要单独写一份正则表达式加以验证:
//这部分来自网上,下方有链接
// 有关身份证校验码 |
同时,我们还需要在提交表单前,手动确认表单,也就是在点击提交按钮后执行一次表单验证
const formcheck = async ( |
提交表单
async function submitClaimForm() { |
但是,el-update 提交的表单不能修改文件名,始终会显示变量只读,我也不知道怎么修改
所以我换了一个思路,在前端拿到文件的时候,将文件名存储在一个数组中,同时记录对应的申报 id,也就是claimid
,将这些内容打包发送至后端,由后端接受并对保存的文件进行改名。
//上传前会对文件进行检查,只允许jpg格式的文件上传至后端 |
至此,用户申报部分就完成了,整个背后的流程分别是:
用户填写表单/存储表单文件名=>表单验证=>表单提交=>表单文件验证=>表单文件提交=>表单文件名数组+表单号提交
区块链交互
区块链的交易需要使用用户私钥,如果完全由我们执行的话,但是对于区块链而言,账户私钥基本上算是把钱包权限完全交出去了,不仅我们需要花费资源和精力妥善保管,一不小心可能还有被篡改的风险。
因此,在水门车险中我们使用Metamask
来完成这一点,Metamask
算是一个比较成熟的钱包,由它来负责保管用户的私钥。就好比我们使用支付宝进行支付一样,我们无需在商店门口一个一个输入自己的银行卡号和密码,只需要支付宝轻轻一扫。
但是在使用前我们需要在前端验证浏览器有没有安装Metamask
插件,这里我们使用ethers-5.7.esm.min.js
,可以自己下载也可以npm安装。但是具体使用方法要看版本号以及对应的文档。
import { ethers } from "@/scripts/ethers-5.7.esm.min.js" |
接着我们需要实例化一个合约钱包,用以调用钱包中的方法,在那之前我们需要将合约的信息封装起来
//constant.ts |
接着实例化
import { ethers } from "@/scripts/ethers-5.7.esm.min.js" |
接着我们使用这个实例化后的钱包调用合约中的方法
//Minatosys.ts |
其中,关于引入的updateAddress
//updateAddress.ts |
在封装好方法之后,我们需要调用它
const open = () => { |
这样就大功告成了,效果如下:
静等片刻得到如下回复(当然你也可以再掏一笔燃气费用于加速交易)
F
- 标题: 水门车险的开发记录(前端)
- 作者: LRay-iu
- 创建于 : 2024-05-06 16:08:00
- 更新于 : 2024-12-08 09:34:11
- 链接: https://www.lray-iu.ink/2024/05/06/minatosys_FrontEnd_note/
- 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。