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_胡萝卜须  阅读(492)  评论(0)  编辑  收藏  举报