显示小电影
前端Vue
<body>
<div id="app">
<button @click="handleLoad">点我加载小电影</button>
<hr>
<ul>
<li v-for="item in dataList" style="list-style-type: none">
<img :src="item.poster" alt="" height="300px">
<p>电影名字：{{item.name}}</p>
<p>导演：{{item.director}}</p>
<p>电影介绍：{{item.synopsis}}</p>
</li>
</ul>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
dataList: []
},
methods: {
handleLoad() {
axios.get('http://127.0.0.1:5000/films')
.then(res => {
console.log(res.data)
this.dataList = res.data.data.films
})
.catch(error => {
console.log(error);
});
}
}
})
</script>
后端flask
from flask import Flask, jsonify
import json
app = Flask(__name__)
@app.route('/films')
def films():
with open('./filme.json','rb') as f:
res = json.load(f)
res = jsonify(res)
# 前后端分离后，一定会出现跨域--->后面要解决的重点
# 在响应头中加入，Access-Control-Allow-Origin ，就可以解决跨域
res.headers = {'Access-Control-Allow-Origin':'*'}
return res
if __name__ == '__main__':
app.run()
