flask-结合vue2小案例

公告

View Post

flask后端代码

先安装插件:flask-cors pip install flask-cors

app.py

from flask import Flask,jsonify,abort
from flask_cors import  cross_origin  
# cross_origin这个装饰器解决前后端跨域问题

app = Flask(__name__)
# 真实数据应该从数据库查询出来.这里测试数据.
jobs=[
    {'id':1,'post':'运维工程师','level':'教授'},
    {'id':2,'post':'产品经理','level':'初级'},]

# http://127.0.0.1:5000/api/v1.0/jobs
@app.route('/api/v1.0/jobs',methods=['get'])
@cross_origin()   #########
def get_jobs():
    return jsonify({'jobs':jobs})

# http://127.0.0.1:5000/api/v1.0/job/2
@app.route('/api/v1.0/job/<int:id>',methods=['get'])
@cross_origin()    #########
def get_job_byId(id):
    task=filter(lambda   t: t['id']==id,jobs)
    task=list(task)

    if len(task)==0:
        abort(404)
    return jsonify({'job':task})

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

前端vue2代码

用axios.get 获取后端接口返回给的数据

post_list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <button @click="getJobs">拉取</button>
    <h4>职位列表:</h4>
    <li v-for="job in jobs">
        编号:{{job.id}} --- 职位:{{job.post}} --- 级别:{{job.level}}
    </li>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {name: 'Yancy', jobs: []},
        methods: {
            getJobs: function () {
                var self = this
                axios.get('http://127.0.0.1:5000/api/v1.0/jobs').then(
                    function (response) {
                        self.jobs = response.data.jobs
                    }, function (error) {
                    }
                )
            }
        }
    })
</script>
</body>
</html>

结果

点拉取按钮就能从flask后端接口获取到职务列表数据.
然后通过vue2的循环v-for循环渲染到页面上.

职位列表:
编号:1 --- 职位:运维工程师 --- 级别:教授
编号:2 --- 职位:产品经理 --- 级别:初级

posted on 2023-03-27 11:08 Yancy00 阅读(111) 评论(0) 收藏举报

刷新页面返回顶部