Article directory
web application architecture
- Create an application instance by calling flask
- Flask extension Bootstrap is usually initialized when creating program instances
from flask import Flask,render_template,request,json,jsonify from flask_bootstrap import Bootstrap from knowledge import test app = Flask(__name__) # Create application examples bootstrap = Bootstrap(app) app.config['JSON_AS_ASCII'] = False @app.route('/') def index(): # View function, the function executed when accessing this route return render_template('index.html') @app.route('/entity/', methods=['GET', 'POST']) def my_form_post(): # params1 = request.args.to_dict() params = request.form entity_name = params.get('entity') print(entity_name) entity_dict = test.KG_View(entity_name) return jsonify(entity_dict) # return render_template('entity.html', entity_list=entity_dict) @app.route('/seg/', methods=['GET', 'POST']) def my_seg_post(): params = request.form seg_name = params.get('seg') # print(seg_name) seg_json = test.SEG_View(seg_name) return jsonify(seg_json) if __name__ == '__main__': app.run()
Front-end building
Here, through ajax, we build a front-end monitor button to click, then transmit data, and the server reads the data to give feedback.
The key here is the use of ajax. Parameters can be viewed AJAX Introduction of parameters. The document object represents the current page and is the root node of the entire dom tree.
<!DOCTYPE html> <meta charset="utf-8"> <style>.link { fill: none; stroke: #666; stroke-width: 1.5px;}#licensing { fill: green;}.link.licensing { stroke: green;}.link.resolved { stroke-dasharray: 0,2 1;}circle { fill: #ccc; stroke: #333; stroke-width: 1.5px;}text { font: 12px Microsoft YaHei; pointer-events: none; text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;}.linetext { font-size: 12px Microsoft YaHei;}</style> <body> <h2 style="color: #1f77b4">Constructing Knowledge Map Based on Entities</h2> <p> <input type="text" id="entity"> <button id="btn">Search entity</button> </p> <hr> <p> <h2 style="color: #1f77b4">semantic analysis</h2> <input type="text" id="seg"> <button id="valbtn">Search for sentences</button> <br/> <br/> <input type="text" id="resfirst" value="Segmentation result" style="color: #1f77b4; width: 50px"> <input type="text" id="participle" style="width: 200px"> <br/> <input type="text" id="ressecond" value="Part of speech tagging" style="color: #1f77b4; width: 50px"> <input type="text" id="wordpro" style="width: 200px"> <br/> <input type="text" id="resthird" value="Entity recognition" style="color: #1f77b4; width: 50px"> <input type="text" id="entityreco" style="width: 200px"> </p> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script> <script> $(document).ready(function(){ $("button:last").click(function(){ var seg = {}; seg["seg"] = $("#seg").val(); $.post("/seg/",seg, function(data){ //Here I found that both innerText assignments and values were invalid, possibly related to within $ $("#participle").val(String(data["data"]["lexical analysis"]["Chinese word segmentation"])); $("#wordpro").val(String(data["data"]["lexical analysis"]["Part of speech tagging"])); $("#entityreco").val(String(data["data"]["lexical analysis"]["Entity recognition"])); }); }); }); $(document).ready(function(){ $("button:first").click(function(){ var ent = {}; ent["entity"] = $("#entity").val(); $.post("/entity/",ent, function(data){ //location.reload(true); drawbyd3(data["source"]) }); }); }); </script>
To be continued.