氣勢(shì)的信心

計(jì)算機(jī)/健身愛(ài)好者

10 人贊了該文章

最近工作中用到Vue.js加上一直在用的Flask,所以準(zhǔn)備寫個(gè)小小的demo鞏固下。

ps：之前一直用unpkg的各種包，發(fā)現(xiàn)會(huì)出問(wèn)題，所以demo中將所有需要用到的js包放在本地當(dāng)中。

項(xiàng)目使用到Flask+flask_jsglue+vue.js+element-ui+data-table.js+axios.js

demo很簡(jiǎn)單，最基本的flask應(yīng)用加上幾個(gè)api方法

index.py:

app = Flask(__name__)
jsglue = JSGlue()
jsglue.init_app(app) # 讓js文件中可以使用url_for方法
@app.route('/')
def index():
    return render_template('index.html')
@app.route('/get_data')
def get_base_data():
    return jsonify({'results': results})
@app.route('/add', methods=['POST'])
def add():
    name = request.json.get('name')
    results.append({'name': name, 'index': str(uuid1())})#uuid讓index不唯一，實(shí)際開(kāi)發(fā)中可以通過(guò)數(shù)據(jù)庫(kù)的id來(lái)代替
    return jsonify({'message': '添加成功！'}), 200
@app.route('/update', methods=['PUT'])
def update():
    name = request.json.get('name')
    index = request.json.get('index')
    for item in results:
        if item['index'] == index:
            item['name'] = name
            break
    return jsonify({'message': '編輯成功！'}), 200
@app.route('/delete', methods=['DELETE'])
def delete():
    name = request.args.get('name')
    index = request.args.get('index')
    results.remove({'name': name, 'index': index})
    return jsonify({'message': '刪除成功！'}), 200
if __name__ == '__main__':
    app.run(debug=True)

template

<script type="text/x-template" id="tabel-detail-template">
    <div>
        <data-tables :data='tableData' :actions-def="getActionsDef()"
                     :pagination-def="getPaginationDef()"
                     :row-action-def="getRowActionsDef()"
                     action-col-width="80">
            <el-table-column label="關(guān)鍵詞" min-width="400">
                <template scope="scope">
                    <a :href="scope.row.url" target="_blank" v-text="scope.row.name"></a>
                </template>
            </el-table-column>
        </data-tables>
        <el-dialog :title="formTitle" :visible.sync="dialogFormVisible">
            <el-form :model="form" @submit.native.prevent>
                <el-form-item label="數(shù)據(jù)">
                    <el-input ref="valueInput" v-model.trim="form.name" auto-complete="off"
                              @keyup.enter.native="createOrUpdate"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="createOrUpdate">確 定</el-button>
            </div>
        </el-dialog>
    </div>
</script>

index.js

getActionsDef: function () {
            let self = this;
            return {
                width: 5,
                def: [{
                    name: '添加數(shù)據(jù)',
                    handler() {
                        self.formType = 'create';
                        self.formTitle = '添加數(shù)據(jù)';
                        self.form.name = '';
                        self.form.index = '';
                        self.dialogFormVisible = true;
                    },
                    icon: 'plus'
                }]
            }
        },
        getPaginationDef: function () {
            return {
                pageSize: 10,
                pageSizes: [10, 20, 50]
            }
        },
        getRowActionsDef: function () {
            let self = this;
            return [{
                type: 'primary',
                handler(row) {
                    self.formType = 'edit';
                    self.form.name = row.name;
                    self.form.index = row.index;
                    self.formTitle = '編輯數(shù)據(jù)';
                    self.dialogFormVisible = true;
                },
                name: '編輯'
            }, {
                type: 'danger',
                handler(row) {
                    if (row.flag === 'true') {
                        self.$message.success("該信息不能刪除！")
                    } else {
                        self.$confirm('確認(rèn)刪除該數(shù)據(jù)?', '提示', {
                            confirmButtonText: '確定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(function () {
                            let url = Flask.url_for("delete", {name: row.name, index: row.index});
                            axios.delete(url).then(function (response) {
                                self.getCategories();
                                self.$message.success("刪除成功！")
                            }).catch(self.showError)
                        });
                    }
                },
                name: '刪除'
            }]
        },
        getCategories: function () {
            let url = Flask.url_for("get_base_data");
            let self = this;
            axios.get(url).then(function (response) {
                self.tableData = response.data.results;
            });
        },
        createOrUpdate: function () {
            let self = this;
            if (self.form.name === '') {
                self.$message.error('數(shù)據(jù)不能為空！');
                return
            }
            if (self.formType === 'create') {
                let url = Flask.url_for("add");
                axios.post(url, {
                    name: self.form.name
                }).then(function (response) {
                    self.getCategories();
                    self.dialogFormVisible = false;
                    self.$message.success('添加成功！')
                }).catch(self.showError);
            } else {
                let url = Flask.url_for("update", {});
                axios.put(url, {
                    name: self.form.name,
                    index: self.form.index
                }).then(function (response) {
                    self.getCategories();
                    self.dialogFormVisible = false;
                    self.$message.success('修改成功！')
                }).catch(self.showError);
            }
        }
}

因?yàn)閐emo比較簡(jiǎn)單，數(shù)據(jù)存在內(nèi)存中，僅僅用于展示，讀者可自行結(jié)合數(shù)據(jù)庫(kù)

代碼請(qǐng)戳github

發(fā)布于 2017-09-18