在本章中，我们能学到：
1.Element 中的输入框、按钮、消息提示组件的使用
2.axios 发送异步数据的操作
3.用 Flask 框架开发一个完成的后端接口
项目源码地址：https://gitee.com/myrensheng/encryption
我们在网上搜索md5加密，会出来很多的网站，但是都是关于单个字符的的加密，其中加密算法有md5和sha加密。但是当我有1万条数据，如何加密，总不能一条一条的复制粘贴过去加密，这很不现实。
小凡决定先参考这些网站做一个简单的字符串加密网站，然后再做关于Excel文件的加密网站。
一、绘制网站页面
我们看这些网站都是由两个输入框，中间加上选项组成的，比如下面这种：
我们可以用element中的组件绘制出这样的页面。
1.1 绘制输入框
绘制输入字符串的文本框：
<el-input type="textarea" :rows="10" placeholder="请输入内容"
v-model="textareaEncryForm.input_textarea"
>
</el-input>
定义一个文本输入框
:row=“10” Vue语法中的动态绑定数据，表示高度 10px
v-model=“textareaEncryForm.input_textarea” Vue语法中的数据绑定，表示将文本输入框中的文字赋值给textareaEncryForm中的input_textarea变量
同理，我们可以绘制出加密后的文本框：
<el-input type="textarea" :rows="10" placeholder="加密后的内容"v-model="output_textarea">
</el-input>
1.2 绘制表单
form表单：
<el-form label-width="80px" :modle="textareaEncryForm">
<el-form-item></el-form-item>
</el-form>
label-width=“80px” 表示 el-form-item 中的 label 文字的宽度
:modle=“textareaEncryForm” 表示 form 表单中的数据绑定到该变量
form表单中的子组件，可以是单选框、下拉框等
下拉框，选择加密的方式：
<el-form-item label="加密算法">
<el-select v-model="textareaEncryForm.encryModel">
<el-option label="md5_32" value="md5_32"></el-option>
<el-option label="md5_16" value="md5_16"></el-option>
<el-option label="sha1" value="sha1"></el-option>
<el-option label="sha224" value="sha224"></el-option>
<el-option label="sha256" value="sha256"></el-option>
<el-option label="sha512" value="sha512"></el-option>
</el-select>
</el-form-item>
下拉框组件
下拉框中的选项
v-model=“textareaEncryForm.encryModel” 将 el-option 中的 value 值绑定到textareaEncryForm中的 encryModel变量中
单选框：
<el-form-item label="大写小写">
<el-radio-group v-model="textareaEncryForm.encryStyle">
<el-radio label="小写"></el-radio>
<el-radio label="大写"></el-radio>
</el-radio-group>
</el-form-item>
单选框
单选框中的选项
按钮：
<el-button type="primary" v-if="textareaEncryForm.input_textarea" @click="textareasubmitForm('textareaEncryForm')">
提交
</el-button>
<el-tooltip class="item" v-else effect="dark" content="填写需要加密的内容"
placement="top-start">
<el-button type="danger">提交</el-button>
</el-tooltip>
<el-button @click="textarearesetForm()">重置</el-button>
按钮组件
type=“primary” 表示按钮的颜色为 蓝色
这里使用 v-if 和 v-else 语法，当没有输入文字时，不会请求后端地址，减少接口的访问
@click=“textareasubmitForm(‘textareaEncryForm’)” 点击时触发该方法
二、flask后端接口
后端我们用flask写一个接口， 这个接口就是用来将前端输入的字符串发送给加密的函数，我们需要开发一个 http://127.0.0.1:5000/encryption 地址，使用POST方法，并且接受传递的参数。
from flask import Flask,render_template,request,jsonify
import hashlib
app = Flask(__name__)
def encryption_str(string, encry_model="md5_32", encry_style=True):
# 加密为 utf-8 编码
utf_8_str = str(string).encode("utf8")
# 函数字典
param_dict = {
"md5_32": hashlib.md5(utf_8_str),
"md5_16": hashlib.md5(utf_8_str),
"sha1": hashlib.sha1(utf_8_str),
"sha224": hashlib.sha224(utf_8_str),
"sha256": hashlib.sha256(utf_8_str),
"sha512": hashlib.sha512(utf_8_str)
}
encry_result = param_dict[encry_model].hexdigest()
if encry_model == 'md5_16':
encry_result = encry_result[8:-8]
# 返回结果
return encry_result if encry_style == "小写" else encry_result.upper()
@app.route("/encryption",methods=["POST"])
def encryption():
# 获取 post 方式提交的数据
r_json = request.json
encry_content = r_json["encryContent"]
# 加密的算法
encry_model = r_json["encryModel"]
# 加密类型（大小写）
encry_style = r_json["encryStyle"]
# 返回数据
res = {
"status":200,
"output_textarea": encryption_str(encry_textarea, encry_model=encry_model, encry_style=encry_style),
"msg": "加密成功！"
}
return jsonify(res)
if __name__ == "__main__":
app.run(debug=True,port=5000)
flask 中用 request.json 获取前端 post 方式传入的数据
使用 jsonify 将Python的字典类型转为 json 数据
三、前后端数据交互
我们用 axios 组件进行前后端数据交互，常用的写法：
async func(arg){
? const {data:res} = await this.$http.post(url)
}
this.$message() 组件，用来提示消息
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!--导入 axios 获取数据-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script>
new Vue({
el:'#app',
data:function(){
output_textarea:null,
textareaEncryForm:{
encryModel: "md5_32",
encryStyle: '小写',
input_textarea:null,
encryContent:'textarea'
},
},
methods:{
async textareasubmitForm(textareaEncryForm){
const {data:res} = await this.$http.post("http://127.0.0.1:5000/encryption",this.textareaEncryForm)
if (res.status==200){this.$message({
showClose:true,message:res.msg,center:true,type:'success'
})} else {this.$message({
showClose:true,message:res.msg,center:true,type:'error'
})}
},
textarearesetForm(){
this.textareaEncryForm.encryModel = "md5_32";
this.textareaEncryForm.input_textarea = null;
this.textareaEncryForm.encryStyle = "小写";
this.output_textarea = null;
}
}
})
</script>
启动后端服务，即可访问到网站。
小凡不满足于只能加密字符串，接下来，小凡要思考如何加密 Excel 文件？