vue + jquery+ bootstrap

july_young

已于 2023-05-22 16:58:24 修改

阅读量147

点赞数

文章标签： vue jquery bootstrap

于 2023-05-22 16:53:12 首次发布

本文链接：https://blog.csdn.net/july_young/article/details/130810640

版权

使用 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)