显示小电影

前端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 展示小电影的更多相关文章

  1. vue 中展示PDF内容

    vue 中展示PDF内容 不久前有个需要改的需求,以前是直接根据链接让用户下载对应pdf文件来查看,最主要是给用户查看,然而这种并不是很安全的,其他用户可以进行下载或者使用pdf链接分享给其他人,所以 ...

  2. vue项目向小程序迁移调研

    概述 今天调研了一下vue项目怎么向小程序迁移,有些心得,记录下来,供以后开发时参考,相信对其他人也有用. 基本上vue项目向小程序迁移不外乎2种方法,一种是用小程序的web-view组件,另一种是用 ...

  3. 我的Windows日常——你的小电影藏好了吗？

    Hello!           everybody! 记得大三,第一次上我们某主任的课(我是计算机学部的),某主任上课的第一件事,点名,第二件事,忽悠我们. 具体忽悠步骤如下: 某:”同学们,这里有 ...

  4. 【阿里聚安全·安全周刊】女主换脸人工合成小电影|伊朗间谍APP苹果安卓皆中招

    本周的七个关键词: 人工智能 丨 HTTP链接=不安全链接 丨  滑动验证码 丨 伊朗间谍APP 丨 加密挖矿 丨  Android应用测试速查表 丨 黑客销售签名证书 -1-   [人工智能]女主换 ...

  5. vue 开发微信小程序

    介绍 mpvue (github 地址请参见)是一个使用 Vue.js 开发小程序的前端框架.框架基于 Vue.js 核心,mpvue 修改了 Vue.js的 runtime 和 compiler 实 ...

  6. 学了这么久，vue和微信小程序到底有什么样的区别？

    前言 写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别.相比之下,小程序的钩子函数要简单得多. 一.生命周期 先贴两张图: vue生命周期 小程序生命周期   相比之下 ...

  7. vue和微信小程序的区别、比较

    链接:https://segmentfault.com/a/1190000015684864 一.生命周期 先贴两张图: vue生命周期 小程序生命周期 相比之下,小程序的钩子函数要简单得多. vue ...

  8. Vue+Flask看这篇就够了

    一.项目目录结构 使用Vue+Flask搭建前后端分离的基础平台. my_project/ app/ //vue目录 static/ models/ remplates/ 404.html index ...

  9. .vue，跟小程序文件在sublime里面怎么实现代码格式化

    .vue文件跟小程序的.wxml,.wxss用sublime的HTML/CSS/JS prettify插件也可以实现格式化代码的效果 首先你在sublime要已经安装好了HTML/CSS/JS pre ...

  10. Vue和微信小程序区别

    一.生命周期 先贴两张图: vue生命周期 小程序生命周期 相比之下,小程序的钩子函数要简单得多. vue的钩子函数在跳转新页面时,钩子函数都会触发,但是小程序的钩子函数,页面不同的跳转方式,触发的钩 ...

随机推荐

  1. Git 系列：简介安装以及配置管理

    目录 简介安装 简介 Centos安装 配置管理 git help 概要 选项 示例 git-doc git config 概要 选项 变量 示例 初始化配置 简介安装 简介 https://git- ...

  2. 3 - 任务调度算法 & 同步与互斥 &队列

    之前的都是按照优先级不同允许抢占(不讲道理),不管你在做什么,轮到优先级最高的任务,直接抢占执行 怎样才能讲道理呢?稍微等等嘛,等我做完活你再做   1 支持抢占,0不支持抢占  同优先级任务是否交替 ...

  3. 正则表达式 <h2>kk</h2> 替换为 <h2 id="kk">kk</h2>

    `<h2>kk</h2><h2>k333k</h2>`.replace(/\<h2>(.*?)<\/h2>/g, `<h2 ...

  4. linux 环境 打包 失败，一次解决过程

    发现打包失败 测试发现 npm run build 打包失败 发现问题1 node_modules 库 没装 rm -rf node_modules 进行 npm install 安装失败 发现lin ...

  5. day09-数据格式化&验证以及国际化

    数据格式化&验证以及国际化 1.数据格式化 1.1基本介绍 说明:在我们提交数据(比如表单时),SpringMVC 是怎样对提交的数据进行转换和处理的 基本数据类型可以和字符串之间自动进行转换 ...

  6. [.NET项目实战] Elsa开源工作流组件应用（一）： Elsa工作流简介

    Elsa工作流简介 工作流是什么? 引用维基百科中对工作流的解释: 是对工作流程及其各操作步骤之间业务规则的抽象.概括.描述.工作流建模,即将工作流程中的工作如何前后组织在一起的逻辑和规则在计算机中以 ...

  7. .Net Core 你必须知道的source-generators

    源生成器是 C# 9 中引入的一项功能,允许在编译过程中动态生成代码. 它们直接与 C# 编译器集成(Roslyn)并在编译时运行,分析源代码并根据分析结果生成附加代码. 源生成器提供了一种简化的自动 ...

  8. vue,vuex,element实现无限tab页效果

    直接撸代码 ?满足你 码云地址 效果图 tab页由来 甲方爸爸的更改需求,无力反抗 分析代码 懒的写,直接撸就行 参考文章 点我

  9. go语言漏桶算法思路简单实现

    package main import ( "fmt" "time" ) // 桶 type LeakBucket struct { capacity int ...

  10. 算法学习笔记【1】| LCA（最近公共祖先）

    LCA(最近公共祖先) Part 1:逐步上跳 假设u,v是所求的两点,先把深度大的点逐步上移直到深度相同. 然后两者同时上移,直到第一次遇到相同的点为止. 时间复杂度: O(n)<script ...