在本章中，我們能學(xué)到：

1. Element 中的輸入框、按鈕、消息提示組件的使用
2. axios 發(fā)送異步數(shù)據(jù)的操作
3. 用 Flask 框架開(kāi)發(fā)一個(gè)完成的后端接口

公眾號(hào)《帥帥的Python》回復(fù)《數(shù)據(jù)加密》獲取源碼

我們?cè)诰W(wǎng)上搜索md5加密，會(huì)出來(lái)很多的網(wǎng)站，但是都是關(guān)于單個(gè)字符的的加密，其中加密算法有md5和sha加密。但是當(dāng)我有1萬(wàn)條數(shù)據(jù)，如何加密，總不能一條一條的復(fù)制粘貼過(guò)去加密，這很不現(xiàn)實(shí)。

小凡決定先參考這些網(wǎng)站做一個(gè)簡(jiǎn)單的字符串加密網(wǎng)站，然后再做關(guān)于Excel文件的加密網(wǎng)站。

一、繪制網(wǎng)站頁(yè)面

我們看這些網(wǎng)站都是由兩個(gè)輸入框，中間加上選項(xiàng)組成的，比如下面這種：

2.1.png

我們可以用element中的組件繪制出這樣的頁(yè)面：

1.1 繪制輸入框

繪制輸入字符串的文本框：

<el-input type="textarea" :rows="10" placeholder="請(qǐng)輸入內(nèi)容" 
          v-model="textareaEncryForm.input_textarea"
>
</el-input>

<el-input type="texttarea"></el-input> 定義一個(gè)文本輸入框

:row="10" Vue語(yǔ)法中的動(dòng)態(tài)綁定數(shù)據(jù)，表示高度 10px

v-model="textareaEncryForm.input_textarea" Vue語(yǔ)法中的數(shù)據(jù)綁定，表示將文本輸入框中的文字賦值給textareaEncryForm中的input_textarea變量

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

<el-input type="textarea" :rows="10" placeholder="加密后的內(nèi)容"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 表單中的數(shù)據(jù)綁定到該變量

<el-form-item></el-form-item> 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>

<el-select></el-select> 下拉框組件

<el-option></el-option> 下拉框中的選項(xiàng)

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-radio-group></el-radio-group> 單選框

<el-radio></el-radio> 單選框中的選項(xiàng)

按鈕：

<el-button type="primary" v-if="textareaEncryForm.input_textarea" @click="textareasubmitForm('textareaEncryForm')">
提交
</el-button>
<el-tooltip class="item" v-else effect="dark" content="填寫需要加密的內(nèi)容"
placement="top-start">
<el-button type="danger">提交</el-button>
</el-tooltip>
<el-button @click="textarearesetForm()">重置</el-button>

<el-button></el-button> 按鈕組件

type="primary" 表示按鈕的顏色為 藍(lán)色

這里使用 v-if 和 v-else 語(yǔ)法，當(dāng)沒(méi)有輸入文字時(shí)，不會(huì)請(qǐng)求后端地址，減少接口的訪問(wèn)

@click="textareasubmitForm('textareaEncryForm')" 點(diǎn)擊時(shí)觸發(fā)該方法

二、flask后端接口

后端我們用flask寫一個(gè)接口， 這個(gè)接口就是用來(lái)將前端輸入的字符串發(fā)送給加密的函數(shù)，我們需要開(kāi)發(fā)一個(gè) http://127.0.0.1:5000/encryption 地址，使用POST方法，并且接受傳遞的參數(shù)。

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")
    # 函數(shù)字典
    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]
    # 返回結(jié)果
    return encry_result if encry_style == "小寫" else encry_result.upper()


@app.route("/encryption",methods=["POST"])
def encryption():
    # 獲取 post 方式提交的數(shù)據(jù)
    r_json = request.json
    encry_content = r_json["encryContent"]
    # 加密的算法
    encry_model = r_json["encryModel"]
    # 加密類型（大小寫）
    encry_style = r_json["encryStyle"]
    # 返回?cái)?shù)據(jù)
    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 方式傳入的數(shù)據(jù)

使用 jsonify 將Python的字典類型轉(zhuǎn)為 json 數(shù)據(jù)

三、前后端數(shù)據(jù)交互

我們用 axios 組件進(jìn)行前后端數(shù)據(jù)交互，常用的寫法：

async func(arg){

const {data:res} = await this.$http.post(url)

}

this.$message() 組件，用來(lái)提示消息

<!-- 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>
<!--導(dǎo)入 axios 獲取數(shù)據(jù)-->
<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>

啟動(dòng)后端服務(wù)，即可訪問(wèn)到網(wǎng)站。

小凡不滿足于只能加密字符串，接下來(lái)，小凡要思考如何加密 Excel 文件？