用Flask+Element+Vue搭建md5、sha加密网站

在本章中，我们能学到：

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 文件？