flask+python+html+mongodb

佚名 / 2024-11-11 / 原文

 

python

运行此文件,跳转到index.html

from flask import Flask,render_template,request,jsonify,json,url_for,redirect
app = Flask(__name__)
@app.route('/', methods=['GET', 'POST'])
def index():
    return render_template('index.html')
if __name__ == '__main__':
    app.run()

html调用python中的方法,并返回数据给html

python

@app.route('/author', methods=['GET', 'POST'])
def result():
    if request.method == 'POST':     
        data = request.get_json()
        lingyu = data['lingyu']
        name = data['name']
        print(lingyu)
        print(name)
        mydb = myclient["Fields_authors"] 
        mycol = mydb[lingyu]
        cursor =mycol.find( {
            "pub_papers.displayName":{ "$regex": name} 
        })
        cursor2 =mycol.find( {
            "pub_papers.description":{ "$regex": name} 
        })
        res=[]
        for t in cursor:
            t.pop('_id')
            res.append(t) 
        for t2 in cursor2:
            t2.pop('_id')
            res.append(t2) 
        return res

html

var data = {
                'lingyu': document.getElementsByClassName('lingyu_click')[0].innerText,
                'name': document.getElementById('search_input').value//去掉开头,结尾的空格
            };
            var jsonData = JSON.stringify(data);
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/author', true);
            xhr.setRequestHeader('Content-type', 'application/json');
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    result = JSON.parse(xhr.responseText);
                    console.log("success", result);
                    hideLoading()
                    document.getElementById("search_item").hidden = false;
                    ul_add_li(result);
                    click_after();

                }
            };
            xhr.send(jsonData);

html点击按钮从index.html跳转到tt.html

python

@app.route('/tt')
def tt():
   
    # 获取作者相关信息
    myCCFgraph = myclient["CCFgraph"] 
    myAuthors = myCCFgraph['authors']
    myquery = { "id": int(request.args.get('id')) }
    mydata = myAuthors.find(myquery)
    res=[]
    for t in mydata:
        t.pop('_id')
        res.append(t) 
     # 获取主页参数
    response = {
        "username":request.args.get('username'),
        "user_id":request.args.get('id'),
        "lingyu":request.args.get('lingyu'),
    }
    #team= rangeepsilon(request.args.get('id'),request.args.get('lingyu'))
    return render_template('tt.html', author=response,author1=res)

index.html

var data = {
            'id': data.id,
            'displayName': data.displayName,
            'lingyu': lingyu
        };
        var url = '/tt?username=' + encodeURIComponent(data.displayName) + '&id=' + data.id + '&lingyu=' + encodeURIComponent(lingyu);

        // 跳转到构建的URL
        window.location.href = url;

tt.html接收参数

html可以直接使用

<span class="topdestext">作者:{{author.username}}</span>
            {% for row in author1 %}
            <span class="topdestext">单位:<span id="dept">{{row.institutions[0].displayName}}</span></span>
            <span class="topdestext">论文:<span id="paper">{{row.pub_papers[0].displayName}}</span></span>
            {% endfor %}

js中接收参数

  var paramData = {
        name: "{{ author.username }}",
        id: "{{ author.user_id }}",
        lingyu: "{{ author.lingyu }}",
    };