这是信息系统安全课的某作业用Vue实现的（原创，单个文件，有代码，可直接拿去）
精简版效果：
精简版代码如下：
使用方法：
- 复制下面的代码
- 新建一个叫xxx.html的文件
- 粘贴保存
- 用浏览器打开该文件（不支持部分旧版的IE）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ADFGVX加解密机_10195102443_王梓同</title>
<!-- cdn引入ElementUI样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-main>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="选择模式" prop="radio">
<el-col :span="18">
<el-radio-group v-model="ruleForm.radio" @change="changetip">
<el-radio label="1">加密模式</el-radio>
<el-radio label="2">解密模式</el-radio>
</el-radio-group>
</el-col>
</el-form-item>
<el-form-item label="明密文本" prop="input">
<el-col :span="18">
<el-input :placeholder=ruleForm.mingmi v-model="ruleForm.input"
@keyup.native="ruleForm.input=ruleForm.input.replace(/[^a-zA-Z0-9_ ]/g,'')">
</el-input>
</el-col>
</el-form-item>
<el-form-item label="棋盘密钥" prop="qipan">
<el-col :span="18">
<el-input placeholder="请输入36位棋盘密钥(如ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789)"
v-model="ruleForm.qipan"
@keyup.native="ruleForm.qipan=ruleForm.qipan.replace(/[^a-zA-Z0-9]/g,'')">
</el-input>
</el-col>
</el-form-item>
<el-form-item label="移位密钥" prop="yiwei">
<el-col :span="18">
<el-input placeholder="请输入移位密钥(关键字密钥)(如CARGO)" v-model="ruleForm.yiwei"
@keyup.native="ruleForm.yiwei=ruleForm.yiwei.replace(/[^a-zA-Z0-9]/g,'')">
</el-input>
</el-col>
</el-form-item>
<el-form-item>
<el-col :span="18">
<el-button type="primary" round @click="start('ruleForm')">开始</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-col>
</el-form-item>
</el-form>
<el-input type="textarea" :autosize="{ minRows: 2}" placeholder="结果输出区域" v-show="ifshow" v-model="res">
</el-input>
</el-main>
<el-footer>Copyright©2022 ZiTong Wang (10195102443). All Rights Reserved</el-footer>
</div>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript">
const vm = new Vue({ // 配置对象 options
// 配置选项(option)
el: '#app', // element: 指定用vue来管理页面中的哪个标签区域
data: {
ruleForm: {
input: '',
qipan: '',
yiwei: '',
radio: '1',
mingmi: '请输入需要加密的文本,如attackatonce',
yangli: '填写明文样例',
},
res: "",
ifshow: false,
rules: {//输入限制校验
input: [
{ required: true, message: '不能为空', trigger: 'change' },
],
qipan: [
{ required: true, message: '不能为空', trigger: 'change' },
{ min: 36, max: 36, message: '必须36个字符', trigger: 'change' }
],
yiwei: [
{ required: true, message: '不能为空', trigger: 'change' },
{ min: 2, message: '必须大于一个字符，不然没有意义', trigger: 'change' }]
,
}
},
methods: {
changetip() {
this.ifshow = false
this.ruleForm.input = ""
this.ruleForm.qipan = ""
this.ruleForm.yiwei = ""
if (this.ruleForm.radio == '1') {
this.ruleForm.mingmi = '请输入需要加密的文本,可点击右侧一键填写明文样例'
this.ruleForm.yangli = '填写明文样例'
}
else if (this.ruleForm.radio == '2') {
this.ruleForm.mingmi = '请输入需要解密的文本,补位字符请使用下划线_表示!!可点击右侧一键填写密文样例'
this.ruleForm.yangli = '填写密文样例'
}
},
start(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.ruleForm.input = this.ruleForm.input.toUpperCase()//大写
this.ruleForm.qipan = this.ruleForm.qipan.toUpperCase()
this.ruleForm.yiwei = this.ruleForm.yiwei.toUpperCase()
var arr = new Array(); //二维数组存放6*6棋盘
for (var i = 0; i < 6; i++) { //一维
arr[i] = new Array();
for (var j = 0; j < 6; j++) { //二维
arr[i][j] = this.ruleForm.qipan[i * 6 + j];
}
}
for (var i = 0; i < 6; i++) { //判断棋盘中任意[i][j]与[p][q]是否重复
for (var j = 0; j < 6; j++) {
for (var p = 0; p < 6; p++) { //判断棋盘中任意[i][j]与[p][q]是否重复
for (var q = 0; q < 6; q++) {
if (arr[i][j] == arr[p][q] && (i != p || j != q)) {//重复
this.$message({ message: "棋盘中有字符重复！重复字符为" + arr[i][j], type: 'error' })
return false
}
}
}
}
}
for (var i = 0; i < this.ruleForm.yiwei.length; i++) { //判断移位(关键字)密钥中是否有重复
for (var j = i + 1; j < this.ruleForm.yiwei.length; j++) {
if (this.ruleForm.yiwei[i] == this.ruleForm.yiwei[j]) {//重复
console.log(this.ruleForm.yiwei[i], this.ruleForm.yiwei[j])
this.$message({ message: "移位密钥(关键字密钥)中有字符重复！重复字符为" + this.ruleForm.yiwei[i], type: 'error' })
return false
}
}
}
//console.log(arr)
dicstr = "ADFGVX"
if (this.ruleForm.radio == '1') {
//////////////////////////加密模式///////////////////////////
this.$message({ message: "加密中..." })
var input = this.ruleForm.input
input = input.replace(/\s*/g, "")//删除空格
this.ruleForm.input = input
console.log(input)
var tmpsec = "" //存放棋盘加密后的密文
var x = -1, y = -1;
for (var i = 0; i < input.length; i++) {//对于明文中的每个字符
for (var p = 0; p < 6; p++) {
for (var q = 0; q < 6; q++) {//遍历棋盘找到第x行第y列
if (arr[p][q] == input[i]) {
x = p
y = q
}
}
}
tmpsec += dicstr[x] + dicstr[y]
}
console.log("棋盘加密后的初步密钥：", tmpsec)
var yiwei = this.ruleForm.yiwei
while (tmpsec.length % yiwei.length) {
tmpsec += "_"
}
console.log("补位后的初步密钥：", tmpsec)
var tmplist = []
for (let i = 0; i < tmpsec.length; i += yiwei.length) {
tmplist.push(tmpsec.slice(i, i + yiwei.length))
}
console.log("移位前", tmplist)
var dic = {}
for (var ind = 0; ind < yiwei.length; ind++) {//放入列表
dic[yiwei[ind]] = ""
for (var row = 0; row < tmpsec.length / yiwei.length; row++) {
dic[yiwei[ind]] += tmplist[row][ind]
}
}
console.log("dic", dic)
console.log("移位密钥", yiwei)
yiweisort = yiwei.split("").sort()
console.log("移位密钥排序", yiweisort)
var res = ""
for (var i = 0; i < yiweisort.length; i++) {
res += dic[yiweisort[i]] + " "
}
console.log(res)
this.res = "加密结果：\n" + res
this.ifshow = true
this.$message({ message: "加密成功！", type: "success" })
}
else if (this.ruleForm.radio == '2') {
//////////////////////////解密模式///////////////////////////
this.$message({ message: "解密中..." })
var input = this.ruleForm.input
input = input.replace(/\s*/g, "")//删除空格
console.log(input)
var yiwei = this.ruleForm.yiwei
console.log("移位密钥", yiwei)
yiweisort = yiwei.split("").sort()
console.log("移位密钥排序", yiweisort)
var dic = {}
for (var i = 0; i < yiweisort.length; i++) {
dic[yiweisort[i]] = input.slice(i * (input.length / yiwei.length), (i + 1) * (input.length / yiwei.length))
}
console.log(dic)
var restmp = ""
for (var i = 0; i < input.length / yiwei.length; i++) {
for (var j = 0; j < yiwei.length; j++) {
if (dic[yiwei[j]][i] != '_')
restmp += dic[yiwei[j]][i]
}
}
console.log(restmp)
var res = ""
tmpdic = { 'A': 0, 'D': 1, 'F': 2, 'G': 3, 'V': 4, 'X': 5 }
for (var i = 0; i < restmp.length; i = i + 2) {
if (arr[tmpdic[restmp[i]]][tmpdic[restmp[i + 1]]])
res += arr[tmpdic[restmp[i]]][tmpdic[restmp[i + 1]]]
}
console.log(res)
this.res = "解密结果：\n" + res
this.ifshow = true
this.$message({ message: "解密成功！", type: "success" })
}
else {
//////////////////////////报错///////////////////////////
this.$message({ message: "遇到了奇怪的错误,请刷新网页后正确输入,不要乱填!", type: 'error' })
return false;
}
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
})
</script>
<style>
</style>
</body>
</html>您可以在这个版本上进行改造，好看的样子：
