基於python flask的自動化測試平臺(一)--project的前後端實現

首先是想好了我們前端需要做成什麼效果的，所以我先製作的是前端頁面app/templates/project.html

{% extends "base.html" %}
{% block content%}
<head>
</head>
<div class="top_button">
    <input id="add_project" type="button" value="添加項目" class="btn btn-primary" onclick="open_win()">
</div>
<!--使用form表單提交項目數據到後臺，然後後臺經過處理將項目存入數據庫，再然後將數據庫的項目列表展示到前臺頁面-->
<!--添加窗口採用原本將其隱藏，當點擊添加項目或者編輯的時候通過js控制再將其顯示出來並進行添加或編輯，需要的元素也是通過js來控制就好-->
<form action="{{ url_for('add_project')}}" method="post" id="new_win" class="form-horizontal">
    <h2 id="own_title">添加項目</h2>
    <!--使用bootstrap的form-group與柵格系統來渲染form表單以是的這個表單更好看一點-->
    <div class="form-group">
        <label class="col-sm-2 control-label" id="id_num">編號</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" name="id_num">
        </div>
        <div class="col-sm-1"></div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">項目名稱</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" name="project_name">
        </div>
        <div class="col-sm-1"></div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">創建</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" name="creator">
        </div>
        <div class="col-sm-1"></div>
    </div>
    <div class="form-group" id="di_button">
        <div class="col-sm-offset-5 col-sm-7">
            <input type="submit" value="提交" class="btn btn-primary">
            <input type="button" value="關閉" class="btn btn-primary" onclick="close_win()">
        </div>
    </div>
</form>
<table border="2" class="table table-striped">
    <tr>
        <th>編號</th>
        <th>項目名稱</th>
        <th>創建者</th>
        <th>操作</th>
    </tr>
    <!--後端將projects傳入前端，然後通過遍歷projects展示出所有的項目列表-->
    {% for project in projects%}
    <tr>
        <td>{{ project.id}}</td>
        <td>{{ project.project_name}}</td>
        <td>{{ project.creator}}</td>
        <td>
            <input type="button" class="btn btn-primary" value="編輯" onclick="editor_project(this)">
            <input type="button" class="btn btn-warning" value="刪除" onclick="del_project(this)">
        </td>
    </tr>
    {% endfor %}
</table>
{% endblock %}

整個頁面就是一個按鈕加一個列表，再加上bootstrap的美化，實現起來也非常簡單，關鍵點就是在思路和js的控制了，什麼js框架我確實不會操作，所以就使用的原生js做一些簡單的頁面控制了。

因爲這一個頁面需要實現添加項目，然後將添加的項目傳給後端存入數據庫，然後還要將數據庫的項目列表傳回前端並在前端展示，所以添加窗口採用原本將其隱藏，當點擊添加項目或者編輯的時候通過js控制再將其顯示出來並進行添加或編輯，需要的元素也是通過js來控制就好，並使用form來提交表單。下面是css與js

app/static/css/page.css

.form-horizontal{
    width: 60%;
    height: 60%;
    font-size: 16px;
    border-radius: 5%;
    display: none;
    position: absolute;
    left: 25%;
    background: #BFDDE0;
}
#di_button> div> .btn{
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 50px;
}
.top_button> .btn{
    left: 20px;
    font-size: 18px;
    font-weight: bold;
}
.form-group> div> input{
    font-size: 16px;
}
table{
    table-layout: fixed;
    word-break: break-all;
    word-wrap: break-word;
}

app/static/css/page.js

function open_win() {
    document.getElementById('new_win').style.display='block';
    document.getElementById('id_num').style.display='none';
    document.getElementsByName('id_num')[0].style.display='none';
}
function close_win() {
    document.getElementById('new_win').style.display='none';
    window.location.reload()
}
function del_project(obj) {
    var cell1 = obj.parentNode.parentNode.children[0];
    var ids = cell1.innerHTML;
    var data = {'id_num':ids};
    $.ajax({
        type:'GET',
        url:'/delete_project',
        data:data,
        success:function (msg) {
            console.log(msg);
            window.location.reload()
        }
    })
}
function editor_project(obj) {
    document.getElementById('new_win').style.display='block';
    document.getElementsByName('id_num')[0].readOnly='readOnly';
    document.getElementById('new_win').action='/editor_project';
    var id_num = obj.parentNode.parentNode.children[0].innerHTML;
    var project_name = obj.parentNode.parentNode.children[1].innerHTML;
    var creator = obj.parentNode.parentNode.children[2].innerHTML;
    document.getElementsByName('id_num')[0].value = id_num;
    document.getElementsByName('project_name')[0].value = project_name;
    document.getElementsByName('creator')[0].value = creator;
    document.getElementById('own_title').innerHTML = '編輯項目';
}

這兩個css與js我做成而來共用的，所以需要在app/tenplates/base.html頁面引入，在base.html頁面增加

<script src="{{url_for('static',filename='js/page.js')}}"></script>
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/page.css')}}">

前端頁面完成之後就是後端實現了。

後端在app/views.py添加如下

@app.route('/project')
def project():
    if not session.get('logged_in'):
        return redirect(url_for('login'))
    else:
        projects = Project.query.all()
    return render_template('project.html', title='項目', projects=projects)
@app.route('/add_project', methods=['GET', 'POST'])
def add_project():
    if not session.get('logged_in'):
        return redirect(url_for('login'))
    else:
        if request.method == 'POST':
            creator = request.form['creator']
            project_name = request.form['project_name']
            new_sql = do_sql.Do_sql()
            new_sql.add_project(project_name,creator)
            return redirect(url_for('project'))
@app.route('/editor_project', methods=['GET', 'POST'])
def editor_project():
    if not session.get('logged_in'):
        return redirect(url_for('login'))
    else:
        if request.method == 'POST':
            id_num = request.form['id_num']
            creator = request.form['creator']
            project_name = request.form['project_name']
            new_sql = do_sql.Do_sql()
            new_sql.editor_project(id_num,project_name,creator)
            return redirect(url_for('project'))
@app.route('/delete_project', methods=['GET', 'POST'])
def delete_project():
    if not session.get('logged_in'):
        return redirect(url_for('login'))
    else:
        if request.method == 'GET':
            id = request.args.get('id_num')
            id_num = int(id)
            Project.query.filter_by(id=id_num).delete()
            db.session.commit()
            return '刪除成功'
        return redirect(url_for('project'))

由於對數據庫的處理比較多，所以我新建了一個文件類，主要用於處理數據庫的操作

新建app/test/commom/do_sql.py

from app.models import Case, Project, Module
from app import db
class Do_sql():
    def add_case(self,name,ways,request_method,data_type,data,check,creation_date,org_id,module_id,is_succ):
        category = Case(name,ways,request_method,data_type,data,check,creation_date,org_id,module_id,is_succ)
        db.session.add(category)
        db.session.commit()
    def editor_case(self,id_num,name,ways,request_method,data_type,data,check,project_name,module_name):
        org_id = db.session.query(Project.id).filter_by(project_name=project_name).first()[0]
        module_id = db.session.query(Project.id).filter_by(module_name=module_name).first()[0]
        Case.query.filter_by(id=id_num).update({Case.name: name,
                                                Case.ways: ways,
                                                Case.request_method: request_method,
                                                Case.data_type: data_type,
                                                Case.data: data,
                                                Case.check: check,
                                                Case.org_id: org_id,
                                                Case.module_id: module_id,
                                                Case.is_succ: '10',})
        db.session.commit()
    def value(self,id_num,arg):
        values = db.session.query(arg).filter_by(id=id_num).first()[0]
        return values
    def get_case(self,id_num):
        case_name = self.value(id_num, Case.name)
        ways = self.value(id_num, Case.ways)
        request_method = self.value(id_num, Case.request_method)
        data_type = self.value(id_num, Case.data_type)
        data = self.value(id_num, Case.data)
        check = self.value(id_num, Case.check)
        creation_date = self.value(id_num, Case.creation_date)
        org_id = self.value(id_num, Case.org_id)
        org_name = self.value(org_id,Project.project_name)
        module_id = self.value(id_num, Case.module_id)
        module_name = self.value(module_id, Module.module_name)
        is_succ = self.value(id_num, Case.is_succ)
        sql_case = {
            'id': id_num,
            'case_name': case_name,
            'ways': ways,
            'request_method': request_method,
            'data_type': data_type,
            'data': data,
            'check': check,
            'creation_date': creation_date,
            'org_name': org_name,
            'module_name': module_name,
            'is_succ': is_succ,
        }
        return sql_case
    def add_project(self, project_name, creator):
        category = Project(project_name, creator)
        db.session.add(category)
        db.session.commit()
    def editor_project(self, id_num, project_name, creator):
        Project.query.filter_by(id=id_num).update({Project.project_name: project_name,
                                                   Project.creator: creator})
        db.session.commit()
    def add_module(self, module_name, creator, org_id):
        category = Module(module_name, creator, org_id)
        db.session.add(category)
        db.session.commit()
    def editor_module(self, id_num, module_name, creator, project_name):
        org_id = db.session.query(Project.id).filter_by(project_name=project_name).first()[0]
        Module.query.filter_by(id=id_num).update({Module.module_name: module_name,
                                                  Module.creator: creator,
                                                  Module.org_id: org_id})
        db.session.commit()

編輯與添加的方法都在這一個類裏面了，視圖函數只需要引用這裏的方法就好了，這樣不會讓代碼看上去太冗餘、太繁重。

這是project頁面

添加項目界面

編輯界面

基本功能實現了我想要的，且界面也不是太醜

基於python flask的自動化測試平臺(一)--project的前後端實現

python實現任一均線選股

基於python flask的自動化測試平臺(一)--project的前後端實現

基於python flask的自動化測試平臺(一)--模板繼承與導航欄構造

基於python flask的自動化測試平臺(一)--登錄頁面的實現

基於python flask的自動化測試平臺(一)--創建數據庫

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結