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

一、绘制网站页面

我们看这些网站都是由两个输入框，中间加上选项组成的，比如下面这种：

我们可以用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 文件？

巴特西