使用 vue简单写的一个页面demo ,用jquery发送ajax请求，bootstrap 组件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QA</title>
<script src="js/vue.min.js"></script>
<script src="js/jquery.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<div class="container" style="margin-top:100px">
<div class="row">
<div class="col-md-6">
<div class="d-grid gap-2">
<label for="textarea1" class="form-label">
please input your question:
</label>
<textarea class="form-control" ref="question_textarea" rows="16"> {{question}} </textarea>
<button class="btn btn-primary" type="button" v-on:click="inference()">commit</button>
</div>
</div>
<div class="col-md-6">
<div class="d-grid gap-2">
<label class="form-label">
answer :
</label>
<p class="form-control" v-html="answer" :style="{'white-space': 'pre-line','height':`${p_height}px`}" rows="16" readonly > </p>
</div>
</div>
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
question: 'how are you?',
answer: '',
p_height: 396
},
methods:{
inference:function(){
var that = this
$.post('/inference',{'question':this.question},function(res){
ans_list=res.data
that.answer=new String(ans_list.join('<br/><br/>'))
})
}
},
mounted () {
this.height = this.$refs.question_textarea.clientHeight
}
})
</script>
</body>
</html>
python flask后台服务
from flask import Flask, render_template, request, send_file
import os
app = Flask(__name__)
app.jinja_env.variable_start_string = '<<'
app.jinja_env.variable_end_string = '>>'
@app.route("/")
def index():
return render_template("home.html")
@app.route("/inference", methods=["GET", "POST"])
def home():
json_obj = dict()
if request.method == "GET":
return render_template("home.html", base_dir=base_dir)
if request.method == "POST":
question = request.form['question']
return {'code':200,"data":question }
@app.route("/js/<filename>", methods=["GET"])
def js(filename):
return send_file(os.path.join('templates/js/', filename))
@app.route("/css/<filename>", methods=["GET"])
def css(filename):
return send_file(os.path.join('templates/css/', filename))
if __name__ == "__main__":
print("server is running .....")
app.run(host='0.0.0.0', port=5000)
版权声明：本文为july_young原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。