【Python成長之路】基於Flask開發網站 -- 基於重定向實現搜索功能

原創

鹏哥贼优秀

2020-07-08 06:35

哈嘍大家好，我是鵬哥。

今天繼續上週的內容，仍然講基於Flask開發網站，不過這次的控件是 ——基於重定向實現搜索功能。

~~~上課鈴~~~

Silver Scrapes(As Featured In the ESPN "This Is College GameDay" Spot)Danny McCarthy - Silver Scrapes (As Featured in the ESPN "This Is College GameDay" Spot)

1

寫在前面

話不多說，在上週的批量刪除功能基礎上再新增一個搜索功能。因爲在實現搜索功能過程中，關於界面重定向問題阻塞了我蠻長一段時間，並且在網上查找資料也無法快速解決我的問題。因此記錄下我自己的解決方法，至少也算是一種頁面重定向的實現方法。

2

效果展示

3

知識串講（敲黑板啦）

1、flask重定向的坑：flask.redirect()

一般在百度查找重定向，多數帖子都是用redirect()方法。然後遇到仍然無法跳轉的情況，就加上urf_for()，所以我開始的代碼是這樣的：

@app.route('/search', methods=['get','post'])def search_result():    content = request.args.get("search_content")    …… # 數據庫查詢代碼省略    return redirect(url_for('test.html', content=content, labels=labels))

至少我認爲寫的沒毛病，但是界面死活無法跳轉到搜索結果的展示效果。（當然肯定是哪裏寫的不對，如果有大神知道的話，麻煩告知下）

2、通過window.location.href實現重定向

這裏實現界面跳轉的方式就不一樣了，之前是通過Flask框架中的redirect方法，這裏是在html的javascript方法中直接跳轉到新界面，連獲取request.args.get("search_content")的步驟都省略了。

<!--新增搜索功能--><script>    (function(){      $('input[id="search"]').on('click', function(){                var content = document.getElementById("search_content").value;                var data = {                    "search_content":content                };                $.ajax({                    type: "get",                    url: "/",                    data: data,                    dataType: "json",                    success:window.location.href="search_result/"+content                    });        });        })();</script>

這是搜索功能的html代碼，與之前方法的不同之處在於最後一句：success:window.location.href="search_result/"+content，即在點擊搜索按鈕後直接跳轉網頁到http://xx.xx.xx.xx/search_result/content。

然後對應的在flask框架中進行新界面的實現。

4

示例代碼

1、html代碼有2部分：搜索輸入框和按鈕的實現、搜索功能方法的實現（見上面）。

其中搜索輸入框和按鈕的實現示例代碼如下：

 <td><input type="text" placeholder="請輸入設備IP" id="search_content">      <input type="button" value="開始搜索" id="search"> </td>

2、Flask部分的python代碼

@app.route('/search_result/<content>', methods=['get','post'])def search_result(content):    sql = "select * from material_table where 網絡IP='{}'".format(content)    cur = con.cursor()    cur.execute(sql)    content = cur.fetchall()    labels = [tuple[0] for tuple in cur.description]    return render_template('test.html', content=content, labels=labels)

這裏有個小細節，app.route()路由中獲取變量值是通過<>來獲取，而在html中是通過{}來獲取，這裏容易搞混。

如果想要完整代碼，可以直接在github上獲取：

https://github.com/yuzipeng05/flask_test.git