Vue에서 생성한 button과 function을 바인딩 해 보도록 하려고 한다
깃허브 소스는 링크로 첨부한다 → 링크
이전의 글에서 axios로 front와 back을 연동했다.
axios를 가지고 backend와 frontend에서 데이터를 서로 연동을 해 주었는데 이번에는 list 데이터를 받아 출력하고, 출력 해 주는 이벤트를 button에 할당 해 주려고 한다.
이전의 파일에서 핑크색으로 된 부분을 추가했다 → 랜덤으로 생성되는 데이터를 출력 해준다.
from flask import Flask, jsonify
from flask_cors import CORS
from my_util.my_logger import my_logger
import os,string
# instantiate the app
app = Flask(__name__)
# enable CORS
CORS(app, resources={r'/*': {'origins': '*'}})
# sanity check route
@app.route('/', methods=['GET'])
def test_router():
my_logger.info("hello this is root url!")
return jsonify('This is Docker Test developments Server!')
@app.route('/health_check', methods=['GET'])
def health_check():
my_logger.info("health check route url!")
return jsonify('good')
@app.route('/main_btn',methods=['GET'])
def main_btn():
my_logger.info("click Main Btn")
data = []
string_pool = string.ascii_lowercase
result_dict={}
for i in range(15):
result_val=''
for i in range(10):
import random
result_val += random.choice(string_pool)
result_dict['key'] = result_val
data.append(result_dict)
return jsonify(data)
if __name__ == '__main__':
app.run(host='0.0.0.0',port=os.getenv('FLASK_RUN_PORT'),debug=os.getenv('FLASK_DEBUG'))
<div class="col-md-12">
<h1>My Test</h1>
<button type="button" class="btn btn-success btn-sm">{{my_data}}</button>
<hr>
**<ul>
<li v-for="(msg,index) in ran_str" :key="index">
{{ msg.key }}
</li>
</ul>**
</div>
...
data() {
return {
...
ran_str: [],
...
},
},
...
methods:{
...
getRanStr(){
let path = "http://" + window.location.hostname + ":5000/main_btn";
axios.get(path).then((res) => {
this.ran_str = res.data;
console.log(res.data);
}).catch((error) => {
console.error(error);
});
},
...
},
...
이제 다시 button으로 돌아가서 getRanStr() 함수를 할당 해 주려고 한다.
<button type="button" class="btn btn-success btn-sm" v-on:click="getRanStr">{{my_data}}</button>
$ docker-compose up --build
위의 버튼을 누르면 생성이 된다