欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Vue前后端交互

程序员文章站 2022-06-06 19:54:23
...

Vue前后端交互

文章目录

引入：Vue前后端交互

一般在项目中结合async/await语法使用axios调用接口

一、基于jQuery的ajax前后端交互模式

前端

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="./js/vue.js"></script>
</head>

<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3" style="margin-top: 20px">

            <div id="app">
                <button @click="handle_load">点我加载数据</button>
                <hr>
                拿回来的数据是：{{name}}
            </div>
        </div>
    </div>
</div>
</body>

<script>

    var vm = new Vue({
        el: '#app',
        data: {
            name:'lqz'
        },
        methods: {
            handle_load(){
                $.ajax({
                    url:'http://127.0.0.1:5000/',
                    type:'get',
                    success:data=> {
                        this.name=data
                    }
                })
            }
        },
        mounted() {
            //跟后端交互，写在这，而不要使用button
            console.log('当前状态：mounted')
            this.handle_load()
        },
    })
</script>

后端

from flask import Flask, make_response

app = Flask(__name__)


@app.route('/')
def index():
    res = make_response('hello world')
    # 运行所有域向我发请求(解决跨域问题)
    res.headers['Access-Control-Allow-Origin']='*'
    return res
if __name__ == '__main__':
    app.run()

二、使用fetch前后端交互

更加简单的数据获取方式，功能更强大、更灵活，可以看做是的升级版

fetch基本用法与请求参数

fetch基本用法

语法结构

fetch(url).then(fn2)
		  .then(fn3)
		  ...
		  .cach(fn)

基本用法

fetch('/abc').then(data=>{
	return data.text();
}).then(ret=>{
	//这里得到的才是最终的数据
	console.log(ret);
})
fetch请求参数

常用配置选项

method（String）：HTTP请求方法，默认为GET（GET、POST、PUT、DELETE）

body（String）：HTTP的请求参数

headers（Object）：HTTP的请求头，默认为{}

fetch前后端交互

前端

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="./js/vue.js"></script>
</head>
<body>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3" style="margin-top: 20px">

            <div id="app">
                <ul>
                    <li v-for="film in films_list">
                        <img :src="film.poster" alt="" width="60px" height="80px">
                        <span>{{film.name}}</span>
                        <hr>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            films_list: []
        },
        methods: {
            handle_load() {
                fetch('http://127.0.0.1:5000/home').then(data => data.json()).then(data => {
                    console.log(data)
                    if (data.status == 0) {
                        this.films_list = data.data.films
                    } else {
                        alert('加载出错')
                    }
                })
            }
        },
        mounted() {
            //跟后端交互，写在这，而不要使用button
            console.log('当前状态：mounted')
            this.handle_load()
        },
    })
</script>

后端

from flask import Flask, make_response

app = Flask(__name__)


@app.route('/')
def index():
    res = make_response('hello world')
    # 运行所有域向我发请求(解决跨域问题)
    res.headers['Access-Control-Allow-Origin']='*'
    return res
if __name__ == '__main__':
    app.run()

三、前后端交互之axios

axios的响应结果

  • data：实际响应回来的数据
  • headers：响应头信息
  • status：响应状态码
  • statusText：响应状态信息

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./js/vue.js"></script>

</head>
<body>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3" style="margin-top: 20px">

            <div id="app">
                <ul>
                    <li v-for="film in films_list">
                        <img :src="film.poster" alt="" width="60px" height="80px">
                        <span>{{film.name}}</span>
                        <hr>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

</body>

<script>

    var vm = new Vue({
        el: '#app',
        data: {
            films_list: []
        },
        methods: {
            handle_load() {
                axios.get('http://127.0.0.1:5000/home').then(data => {
                    //data.data才是后端响应的数据
                    console.log(data)
                    if (data.data.status == 0) {
                        this.films_list = data.data.data.films
                    } else {
                        alert('加载出错')
                    }
                })

            }
        },
        mounted() {
            //跟后端交互，写在这，而不要使用button
            console.log('当前状态：mounted')
            this.handle_load()
        },
    })
</script>

</html>

后端

from flask import Flask, make_response

app = Flask(__name__)


@app.route('/')
def index():
    res = make_response('hello world')
    # 运行所有域向我发请求(解决跨域问题)
    res.headers['Access-Control-Allow-Origin']='*'
    return res
if __name__ == '__main__':
    app.run()

参考资料

相关标签： 前端学习笔记

上一篇： web入门篇html---讨论a标签的几个作用

下一篇： ThinkPHP使用smarty模板引擎的方法_PHP

推荐阅读