EncryptionTool
This commit is contained in:
zhangxiaozhuozhuo
parent
249cfcd250
commit
fd85ba6eb8
|
|
@ -12,6 +12,7 @@
|
|||
"beautify": "^0.0.8",
|
||||
"clipboard": "^2.0.11",
|
||||
"core-js": "^3.6.5",
|
||||
"crypto-js": "^4.2.0",
|
||||
"cssbeautify": "^0.3.1",
|
||||
"echarts": "^5.3.2",
|
||||
"element-ui": "^2.15.8",
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1699342923644" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1483" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M823.383 434.5h-68.688V274.688C754.695 140.875 645.883 32 512.07 32c-133.89 0-242.765 108.875-242.765 242.688V434.5h-68.688c-33.125 0-59.938 26.813-59.938 59.938V932c0 33.188 26.813 60 59.938 60h622.828c33.125 0 59.875-26.813 59.875-60V494.438c0-33.125-26.812-59.938-59.937-59.938M545.695 724.625v95.563c0 4.25-3.5 7.875-7.875 7.875h-51.578c-4.313 0-7.875-3.625-7.875-7.875v-95.563c-24.188-12.375-40.938-37.188-40.938-66.25 0-41.188 33.375-74.625 74.563-74.625 41.203 0 74.578 33.438 74.578 74.625 0.125 29.063-16.625 53.875-40.875 66.25M661.57 434.5H362.492V278.625c0-82.438 67.188-149.563 149.641-149.563 82.375 0 149.438 67.125 149.438 149.563V434.5z" p-id="1484" fill="#1296db"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -0,0 +1,144 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<!--工具简介-->
|
||||
<div
|
||||
class="tools-intro"
|
||||
:style="{
|
||||
backgroundImage: 'url(' + require('../assets/banner-tools.png') + ')',
|
||||
}"
|
||||
style="background-size: 100% 100%"
|
||||
>
|
||||
<div style="width: 1600px; align-items: center; margin: 0 auto">
|
||||
<el-image
|
||||
style="width: 100px; height: 100px; float: left"
|
||||
:src="require('@/assets/icon/encryption.svg')"
|
||||
></el-image>
|
||||
<div style="position: relative; left: 40px">
|
||||
<p style="font-size: 25px; font-weight: 600">加密/解密工具</p>
|
||||
<p>加密/解密功能采用crypto-js插件实现</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 1600px; margin: 40px auto">
|
||||
<h3>操作区</h3>
|
||||
<el-button @click="encryption" type="primary">加密 ></el-button>
|
||||
<el-button @click="decrypt" type="success" style="margin-right: 30px;">解密 <</el-button>
|
||||
密钥：<el-input class="keyInput" v-model="secretKey" placeholder="请输入密钥" style="width: 160px;"> </el-input>
|
||||
</div>
|
||||
|
||||
<!--代码框-->
|
||||
<div style="width: 1600px; display: flex; justify-content: space-between">
|
||||
<div style="width: 49%">
|
||||
<h3>明文</h3>
|
||||
<el-input
|
||||
v-model="encryptionText"
|
||||
type="textarea"
|
||||
:rows="20"
|
||||
></el-input>
|
||||
</div>
|
||||
|
||||
<div style="width: 49%">
|
||||
<h3>密文</h3>
|
||||
<el-input v-model="decryptText" type="textarea" :rows="20"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: absolute; bottom: 0">
|
||||
<p>工具库 由 OSREDM.COM 所有</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CryptoJS from "crypto-js";
|
||||
|
||||
export default {
|
||||
name: "EncryptionTool",
|
||||
data() {
|
||||
return {
|
||||
encryptionText: "", // 加密文本
|
||||
decryptText: "", // 解密文本
|
||||
secretKey: "", // 自己定义密钥
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 加密
|
||||
encryption() {
|
||||
if(!this.secretKey){
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '密钥不能为空！',
|
||||
type: 'warning'
|
||||
});
|
||||
} else {
|
||||
this.decryptText = CryptoJS.AES.encrypt(
|
||||
this.encryptionText,
|
||||
this.secretKey
|
||||
).toString();
|
||||
}
|
||||
},
|
||||
// 解密
|
||||
decrypt() {
|
||||
if(!this.secretKey){
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '密钥不能为空！',
|
||||
type: 'warning'
|
||||
});
|
||||
} else {
|
||||
const bytes = CryptoJS.AES.decrypt(this.decryptText, this.secretKey);
|
||||
this.encryptionText = bytes.toString(CryptoJS.enc.Utf8);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: #fafcff;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tools-intro {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
box-shadow: 0px 0px 40px 0px rgb(217, 224, 234);
|
||||
}
|
||||
|
||||
::shadow .el-textarea__inner {
|
||||
font-family: sans-serif !important;
|
||||
}
|
||||
|
||||
::shadow .el-button.el-button--primary {
|
||||
background: #4154f1;
|
||||
}
|
||||
|
||||
::shadow .el-button.el-button--success {
|
||||
background: #28bd6c;
|
||||
}
|
||||
|
||||
|
||||
/* .keyInputDiv {
|
||||
width: 200px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.keyInputDiv .keyName {
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.keyInputDiv .keyInput {
|
||||
width: 160px;
|
||||
} */
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -58,9 +58,9 @@
|
|||
<p class="tools-text">CSS代码格式化工具</p>
|
||||
</div>
|
||||
|
||||
<div class="tools-card" @mouseover="changeImg(8)" @mouseout="resetImg(8)">
|
||||
<div class="tools-card" @mouseover="changeImg(8)" @mouseout="resetImg(8)" @click="openUtilsPage('/encryptionTool')">
|
||||
<img class="tools-img" :src="buttonImgList[8]" >
|
||||
<p class="tools-text">CSS代码格式化工具</p>
|
||||
<p class="tools-text">加密/解密工具</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,13 @@ let routes = [
|
|||
component: () => import("@/page/JsonTools"),
|
||||
name: 'JsonTools',
|
||||
},
|
||||
|
||||
{
|
||||
path: '/encryptionTool',
|
||||
component: () => import("@/page/EncryptionTool"),
|
||||
name: 'encryptionTool',
|
||||
},
|
||||
|
||||
// {
|
||||
// path: '/404',
|
||||
// component:() => import("@/components/404"),
|
||||
|
|
|
|||
Loading…
Reference in New Issue