Vue和Flask交互加载电影下案例

【一】Axios

【1】简介

① Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

② axios官网：http://www.axios-js.com/

【二】实例

【1】电影网址和解析Json网站

https://m.maizuo.com/v5/?co=mzmovie#/films/nowPlaying

https://www.json.cn/
  • flask
from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/') #根路径
def index():
    res=jsonify({
        'code':100,
        'msg':'成功',
        'userinfo':{'name':'张三', 'age':20}
    })
    res.headers['Access-Control-Allow-Origin']= '*'
    return res

if __name__ == '__main__':
    app.run()
  • vue
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue/vue.js"></script>
    <script src="./JS/axios.js"></script>

    <style>

    </style>
</head>
<body>
<div id="app">
    <h1>显示电影小案例</h1>
    <button @click="handleLoad">获取电影信息</button>
    <div v-for="item in filmList">
        <p>电影名：{{item.name}}</p>
        <p>简介：{{item.synopsis}}</p>
        <p>主演：
        <span v-for="actor in item.actors">
            {{item.name}} &nbsp;&nbsp;&nbsp;
        </span>
        </p>
        <p>图片： <img :src="item.poster" alt="" height="300px" width="150px"></p>
    </div>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            filmList: [],
        },
        methods: {
            handleLoad() {
                axios.get('http://127.0.0.1:5000/film')
                    .then(res => {
                        if (res.data.code == 0) {
                            this.filmList = res.data.data.films
                        } else {
                            alert(res.data.msg)

                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        }

    })

</script>
</html>

image-20240427121552474

posted @ 2024-04-29 19:58  -半城烟雨  阅读(22)  评论(0)    收藏  举报