166 lines
5.5 KiB
HTML
166 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<!--删除苹果默认的工具栏和菜单栏，默认为no显示工具栏和菜单栏。-->
|
||
<meta name="apple-mobile-web-app-capable" content="yes"/>
|
||
<!--QQ强制全屏-->
|
||
<meta name="x5-fullscreen" content="true">
|
||
<!--UC强制全屏-->
|
||
<meta name="fullscreen" content="yes">
|
||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
|
||
<title></title>
|
||
<link rel="stylesheet" href="/static/cdn/element-ui/2.15.1/theme-chalk/index.min.css">
|
||
<script src="/static/cdn/vue/2.6.11/vue.min.js"></script>
|
||
<script src="/static/cdn/element-ui/2.15.1/index.js"></script>
|
||
<script src="/static/cdn/jquery/3.6.0/jquery.min.js"></script>
|
||
|
||
<script src="/static/js/functions.js?v=0.6.9"></script>
|
||
<link rel="icon" href="/static/images/favicon.ico">
|
||
<style>
|
||
.chatCenter{
|
||
max-width: 600px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="app" class="chatCenter">
|
||
<template>
|
||
<el-input
|
||
type="textarea"
|
||
autosize
|
||
placeholder="AES key"
|
||
v-model="aesKey">
|
||
</el-input>
|
||
<div style="margin: 20px 0;"></div>
|
||
<el-input
|
||
type="textarea"
|
||
:autosize="{ minRows: 2, maxRows: 4}"
|
||
placeholder="加密前内容"
|
||
v-model="aesContent">
|
||
</el-input>
|
||
<div style="margin: 20px 0;"></div>
|
||
<el-input
|
||
type="textarea"
|
||
:autosize="{ minRows: 2, maxRows: 4}"
|
||
placeholder="加密后内容"
|
||
v-model="aesContent2">
|
||
</el-input>
|
||
<div style="margin: 20px 0;"></div>
|
||
<el-button type="primary" @click="encrypt">AES加密</el-button>
|
||
<el-button type="primary" @click="decrypt">AES解密</el-button>
|
||
<div style="margin: 20px 0;"></div>
|
||
<el-input
|
||
type="textarea"
|
||
autosize
|
||
placeholder="公钥"
|
||
v-model="publicKey">
|
||
</el-input>
|
||
<div style="margin: 20px 0;"></div>
|
||
<el-input
|
||
:autosize="{ minRows: 2, maxRows: 4}"
|
||
type="textarea"
|
||
autosize
|
||
placeholder="私钥"
|
||
v-model="privateKey">
|
||
</el-input>
|
||
<div style="margin: 20px 0;"></div>
|
||
<el-input
|
||
:autosize="{ minRows: 2, maxRows: 4}"
|
||
type="textarea"
|
||
:autosize="{ minRows: 2, maxRows: 4}"
|
||
placeholder="加密前内容"
|
||
v-model="rsaContent">
|
||
</el-input>
|
||
<div style="margin: 20px 0;"></div>
|
||
<el-input
|
||
type="textarea"
|
||
:autosize="{ minRows: 2, maxRows: 4}"
|
||
placeholder="加密后内容"
|
||
v-model="rsaContent2">
|
||
</el-input>
|
||
<div style="margin: 20px 0;"></div>
|
||
<el-button type="primary" @click="encryptRsa">RSA公钥加密</el-button>
|
||
<el-button type="primary" @click="decryptRsa">RSA私钥解密</el-button>
|
||
|
||
<el-button type="primary" @click="signRsa">RSA2私钥签名</el-button>
|
||
<el-button type="primary" @click="checkSignRsa">RSA2验证签名</el-button>
|
||
</template>
|
||
</div>
|
||
</body>
|
||
|
||
|
||
<script>
|
||
|
||
new Vue({
|
||
el: '#app',
|
||
delimiters:["<{","}>"],
|
||
data: {
|
||
aesKey:"",
|
||
aesContent:"",
|
||
aesContent2:"",
|
||
publicKey:"",
|
||
privateKey:"",
|
||
rsaContent:"",
|
||
rsaContent2:"",
|
||
},
|
||
methods: {
|
||
encrypt(){
|
||
var _this=this;
|
||
$.get("/other/aesEncrypt",{content:this.aesContent,key:this.aesKey},function (res) {
|
||
_this.aesContent2=res.result;
|
||
})
|
||
|
||
},
|
||
decrypt(){
|
||
var _this=this;
|
||
$.get("/other/aesDecrypt",{content:this.aesContent2,key:this.aesKey},function (res) {
|
||
_this.aesContent=res.result;
|
||
})
|
||
},
|
||
|
||
encryptRsa(){
|
||
var _this=this;
|
||
$.get("/other/rsaEncrypt",{content:this.rsaContent,
|
||
publicKey:this.publicKey,
|
||
privateKey:this.privateKey,
|
||
},function (res) {
|
||
_this.rsaContent2=res.result;
|
||
});
|
||
|
||
},
|
||
decryptRsa(){
|
||
var _this=this;
|
||
$.get("/other/rsaDecrypt",{content:this.rsaContent2,
|
||
publicKey:this.publicKey,
|
||
privateKey:this.privateKey,
|
||
},function (res) {
|
||
_this.rsaContent=res.result;
|
||
});
|
||
},
|
||
signRsa(){
|
||
var _this=this;
|
||
$.post("/other/signRsa",{content:this.rsaContent,
|
||
publicKey:this.publicKey,
|
||
privateKey:this.privateKey,
|
||
},function (res) {
|
||
_this.rsaContent2=res.result;
|
||
});
|
||
},
|
||
checkSignRsa(){
|
||
var _this=this;
|
||
$.post("/other/checkSignRsa",{
|
||
source:this.rsaContent,
|
||
sign:this.rsaContent2,
|
||
publicKey:this.publicKey,
|
||
privateKey:this.privateKey,
|
||
},function (res) {
|
||
alert(res.result)
|
||
});
|
||
}
|
||
},
|
||
created: function () {
|
||
}
|
||
})
|
||
</script>
|
||
</html>
|