Flask搭建应用实现前后端实践

最新推荐文章于 2025-06-07 07:49:26 发布

得克特

最新推荐文章于 2025-06-07 07:49:26 发布

阅读量498

点赞数

CC 4.0 BY-SA版权

分类专栏： Web 文章标签： flask ajax

本文链接：https://blog.youkuaiyun.com/weixin_40548136/article/details/99817878

Web 专栏收录该内容

4 篇文章

订阅专栏

文章目录

web应用搭建
前端搭建

web应用搭建

通过调用flask创建应用实例
Flask 扩展Bootstrap一般都在创建程序实例时初始化

from flask import Flask,render_template,request,json,jsonify
from flask_bootstrap import Bootstrap
from knowledge import test

app = Flask(__name__)  # 创建应用实例
bootstrap = Bootstrap(app)
app.config['JSON_AS_ASCII'] = False

@app.route('/')
def index():  # 视图函数，访问此路由时执行的函数
   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()

前端搭建

这里通过ajax构建了前端监听按钮点击，然后传送数据，服务端读取数据做出反馈。
这里关键是ajax的用法。参数可以查看AJAX的参数介绍。document对象表示当前页面，是整个dom树的根节点。

<!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">根据实体构建知识图谱</h2>
<p>
    <input type="text" id="entity">
    <button id="btn">搜索实体</button>
</p>
<hr>
<p>
<h2 style="color: #1f77b4">语义分析</h2>
    <input type="text" id="seg">
    <button id="valbtn">搜索句子</button>
    <br/>
    <br/>
    <input type="text" id="resfirst" value="分词结果" style="color: #1f77b4; width: 50px">
    <input type="text" id="participle" style="width: 200px">
    <br/>
    <input type="text" id="ressecond" value="词性标注" style="color: #1f77b4; width: 50px">
    <input type="text" id="wordpro" style="width: 200px">
    <br/>
    <input type="text" id="resthird" value="实体识别" 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){
        //这里我通过innerText赋值和取值发现都无效，可能与在$内有关系
        $("#participle").val(String(data["data"]["词法分析"]["中文分词"]));
        $("#wordpro").val(String(data["data"]["词法分析"]["词性标注"]));
        $("#entityreco").val(String(data["data"]["词法分析"]["实体识别"]));
      });
    });
});
$(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>

未完待续…