Vue-flask 展示小电影
显示小电影
前端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 展示小电影的更多相关文章
- vue 中展示PDF内容
vue 中展示PDF内容 不久前有个需要改的需求,以前是直接根据链接让用户下载对应pdf文件来查看,最主要是给用户查看,然而这种并不是很安全的,其他用户可以进行下载或者使用pdf链接分享给其他人,所以 ...
- vue项目向小程序迁移调研
概述 今天调研了一下vue项目怎么向小程序迁移,有些心得,记录下来,供以后开发时参考,相信对其他人也有用. 基本上vue项目向小程序迁移不外乎2种方法,一种是用小程序的web-view组件,另一种是用 ...
- 我的Windows日常——你的小电影藏好了吗？
Hello! everybody! 记得大三,第一次上我们某主任的课(我是计算机学部的),某主任上课的第一件事,点名,第二件事,忽悠我们. 具体忽悠步骤如下: 某:”同学们,这里有 ...
- 【阿里聚安全·安全周刊】女主换脸人工合成小电影|伊朗间谍APP苹果安卓皆中招
本周的七个关键词: 人工智能 丨 HTTP链接=不安全链接 丨 滑动验证码 丨 伊朗间谍APP 丨 加密挖矿 丨 Android应用测试速查表 丨 黑客销售签名证书 -1- [人工智能]女主换 ...
- vue 开发微信小程序
介绍 mpvue (github 地址请参见)是一个使用 Vue.js 开发小程序的前端框架.框架基于 Vue.js 核心,mpvue 修改了 Vue.js的 runtime 和 compiler 实 ...
- 学了这么久，vue和微信小程序到底有什么样的区别？
前言 写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别.相比之下,小程序的钩子函数要简单得多. 一.生命周期 先贴两张图: vue生命周期 小程序生命周期 相比之下 ...
- vue和微信小程序的区别、比较
链接:https://segmentfault.com/a/1190000015684864 一.生命周期 先贴两张图: vue生命周期 小程序生命周期 相比之下,小程序的钩子函数要简单得多. vue ...
- Vue+Flask看这篇就够了
一.项目目录结构 使用Vue+Flask搭建前后端分离的基础平台. my_project/ app/ //vue目录 static/ models/ remplates/ 404.html index ...
- .vue，跟小程序文件在sublime里面怎么实现代码格式化
.vue文件跟小程序的.wxml,.wxss用sublime的HTML/CSS/JS prettify插件也可以实现格式化代码的效果 首先你在sublime要已经安装好了HTML/CSS/JS pre ...
- Vue和微信小程序区别
一.生命周期 先贴两张图: vue生命周期 小程序生命周期 相比之下,小程序的钩子函数要简单得多. vue的钩子函数在跳转新页面时,钩子函数都会触发,但是小程序的钩子函数,页面不同的跳转方式,触发的钩 ...
随机推荐
- Python 初学者容易踩的坑
哈喽大家好,我是咸鱼. 今天咸鱼列出了一些大家在初学 Python 的时候容易踩的一些坑,看看你有没有中招过. 原文:https://www.bitecode.dev/p/unexpected-pyt ...
- vscode 智能提示 函数提示右侧有所在目录 Show Inline Details
vscode 智能提示 函数提示右侧有所在目录 Show Inline Details 有目录提示的 没有目录提示的 默认是有目录提示,我那个配置单啊~ "editor.suggest.sh ...
- 光感红外接近传感器AP3426调试总结
一 概念 AP3426是一个高度集成了红外,光感和接近角的传感器.该传感器凭借着高灵敏度广泛应用在可穿戴领域.笔者在一个产品上用了这个传感器.花了一些时间来调试和熟悉这个传感器,这里就做一个总结吧. ...
- 【Django】HTML如何显示富文本内容
一.背景 我采用的前端样式是 LayUI,通过它的富文本编辑器保存内容到数据库后,遇到了一个回显到页面的问题 二.方案 在不考虑使用 Vue 的情况下,有一种简单的方式 <div id=&quo ...
- 3DCAT荣获2021金陀螺“年度XR行业技术创新奖”“年度优秀VR行业应用奖”两项大奖
作为年度行业影响力大奖,第六届金陀螺颁奖典礼与2021未来商业生态链接大会(简称"FBEC2021")同期举办.金陀螺奖金陀螺奖旨在对优质作品/项目及优秀企业做出嘉奖,鼓励创业者. ...
- 云VR：虚拟现实专业化的下一步
传统的VR通常需要功能强大的计算机和其他高性能设备来提供良好的用户体验.但是,如果有一种方法可以从任何设备和任何地方处理VR内容呢?这就是云VR对VR用户的承诺.随着5G和其他网络的到来,VR技术的未 ...
- 【Leetcode】120. 三角形最小路径和
题目(链接) 给定一个三角形triangle ,找出自顶向下的最小路径和. 每一步只能移动到下一行中相邻的结点上.相邻的结点在这里指的是下标与上一层结点下标相同或者等于上一层结点下标 + 1的两个结点 ...
- Python 如何发送带Excel附件的邮件
import smtplib from email.mime.text import MIMEText from email.mime.multipart import MIMEMultipart f ...
- 替代 Redis 的开源项目「GitHub 热点速览」
近日,知名开源项目 Redis 宣布修改开源协议,从原来的「BSD 3-Clause 开源协议」改成「RSALv2 和 SSPLv1 双重许可证」.新的许可证主要是限制托管 Redis 产品的云服务商 ...
- JAVA 获取文件 MD5
private static final char[] hexCode = "0123456789ABCDEF".toCharArray(); // 文件类取MD5 public ...