Vue-flask 展示小电影-526互联

显示小电影

前端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()

小电影vue-flask flask vue