第二章：用element、flask、vue开发一个数据加密网站

在本章中，我们能学到：

1. Element 中的输入框、按钮、消息提示组件的使用
2. axios 发送异步数据的操作
3. 用 Flask 框架开发一个完成的后端接口

公众号《帅帅的Python》回复《数据加密》获取源码

我们在网上搜索md5加密，会出来很多的网站，但是都是关于单个字符的的加密，其中加密算法有md5和sha加密。但是当我有1万条数据，如何加密，总不能一条一条的复制粘贴过去加密，这很不现实。

小凡决定先参考这些网站做一个简单的字符串加密网站，然后再做关于Excel文件的加密网站。

一、绘制网站页面

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

2.1.png

我们可以用element中的组件绘制出这样的页面：

1.1 绘制输入框

绘制输入字符串的文本框：

定义一个文本输入框

:row="10" Vue语法中的动态绑定数据，表示高度 10px

v-model="textareaEncryForm.input_textarea" Vue语法中的数据绑定，表示将文本输入框中的文字赋值给textareaEncryForm中的input_textarea变量

同理，我们可以绘制出加密后的文本框：

1.2 绘制表单

form表单：

label-width="80px" 表示 el-form-item 中的 label 文字的宽度

:modle="textareaEncryForm" 表示 form 表单中的数据绑定到该变量

form表单中的子组件，可以是单选框、下拉框等

下拉框，选择加密的方式：

下拉框组件

下拉框中的选项

v-model="textareaEncryForm.encryModel" 将 el-option 中的 value 值绑定到textareaEncryForm中的 encryModel变量中

单选框：

单选框

单选框中的选项

按钮：

提交


提交

重置

按钮组件

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() 组件，用来提示消息

启动后端服务，即可访问到网站。

小凡不满足于只能加密字符串，接下来，小凡要思考如何加密 Excel 文件？