vue与后端交互(基础)

vue与后端交互

 # 向后端发送ajax请求----》jq的ajax方法
	-方案一：jq的ajax----》在vue中不推荐
    -方案二：js原始官方 fetch方法
    -方案三：axios 第三方
    
    
# django

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="handleClick">点我向后端发请求，获取用户信息</button>
    <br>
    用户名：{{name}}
    <br>
    年龄是：{{age}}
 
 
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            name: '',
            age: ''
        },
        methods: {
            // handleClick() {
            //     // 发送ajax请求  使用jq的ajax
            //     $.ajax({
            //         'url': 'http://127.0.0.1:5000/index',
            //         'type': 'get',
            //         success: data => {
            //             this.name = data.name
            //             this.age = data.age
            //         }
            //     })
            // }
 
            // handleClick() {
            //     // 发送ajax请求--使用原始的fetch
            //     fetch('http://127.0.0.1:5000/index').then(res => res.json()).then(res => {
            //         console.log(res)
            //         this.name = res.name
            //         this.age = res.age
            //     })
            //     // fetch('http://127.0.0.1:5000/index').then(function (res){return res.json()})
            // }
 
            handleClick() {
                // 发送ajax请求--使用axios
                axios.get('http://127.0.0.1:5000/index').then(res => {
                    console.log(res.data)
                    this.name = res.data.name
                    this.age = res.data.age
                })
            }
        }
    })
 
 
</script>
</html>

小电影案例

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
 
    <ul>
        <li v-for="item in film_data ">
            <h2>电影名字：{{item.name}}</h2>
            <p>电影介绍：{{item.synopsis}}</p>
            <img :src="item.poster" alt="" width="100px" height="300px">
        </li>
    </ul>
 
 
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            film_data:[]
        },
        created(){
              axios.get('http://127.0.0.1:5000/film').then(res => {
                    console.log(res.data)
                    this.film_data = res.data.data.films
                })
 
        }
    })
 
 
</script>
</html>

flask

 from flask import Flask, jsonify
import json
 
app = Flask(__name__)
 
 
@app.route('/index')
def index():
    res = jsonify({'name': '彭于晏', 'age': 99})
    res.headers['Access-Control-Allow-Origin'] = '*'
    return res
 
 
@app.route('/film')
def film():
    with open('./data.json', 'r', encoding='utf-8')as f:
        res = json.load(f)
 
    res=jsonify(res)
    res.headers['Access-Control-Allow-Origin'] = '*'
    return res
 
 
if __name__ == '__main__':
    app.run()

posted @ 2022-07-10 21:32 Mr_胡萝卜须阅读(493) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· vue01 vue简介第一个vue项目

· vue02 vue的基础使用

· Vue与后端交互

· Vue-与后端交互的三种方式、箭头函数、显示电影小案例

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球运作规律

公告

昵称： Mr_胡萝卜须
园龄： 3年
粉丝： 3
关注： 5

+加关注

2025年3月

日

一

二

三

四

五

六

Mr_胡萝卜须

vue与后端交互(基础)

vue与后端交互

公告

搜索

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

推荐排行榜

	# 向后端发送ajax请求----》jq的ajax方法
	-方案一：jq的ajax----》在vue中不推荐
	-方案二：js原始官方 fetch方法
	-方案三：axios 第三方


	# django

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="./js/vue.js"></script>
	</head>
	<body>
	<div id="app">
	<button @click="handleClick">点我向后端发请求，获取用户信息</button>
	<br>
	用户名：{{name}}
	<br>
	年龄是：{{age}}


	</div>
	</body>
	<script>
	new Vue({
	el: '#app',
	data: {
	name: '',
	age: ''
	},
	methods: {
	// handleClick() {
	// // 发送ajax请求使用jq的ajax
	// $.ajax({
	// 'url': 'http://127.0.0.1:5000/index',
	// 'type': 'get',
	// success: data => {
	// this.name = data.name
	// this.age = data.age
	// }
	// })
	// }

	// handleClick() {
	// // 发送ajax请求--使用原始的fetch
	// fetch('http://127.0.0.1:5000/index').then(res => res.json()).then(res => {
	// console.log(res)
	// this.name = res.name
	// this.age = res.age
	// })
	// // fetch('http://127.0.0.1:5000/index').then(function (res){return res.json()})
	// }

	handleClick() {
	// 发送ajax请求--使用axios
	axios.get('http://127.0.0.1:5000/index').then(res => {
	console.log(res.data)
	this.name = res.data.name
	this.age = res.data.age
	})
	}
	}
	})


	</script>
	</html>

	from flask import Flask, jsonify
	import json

	app = Flask(__name__)


	@app.route('/index')
	def index():
	res = jsonify({'name': '彭于晏', 'age': 99})
	res.headers['Access-Control-Allow-Origin'] = '*'
	return res


	@app.route('/film')
	def film():
	with open('./data.json', 'r', encoding='utf-8')as f:
	res = json.load(f)

	res=jsonify(res)
	res.headers['Access-Control-Allow-Origin'] = '*'
	return res


	if __name__ == '__main__':
	app.run()