Flask + Vue的一个示例

这里记录下一个Flask+Vue的一个示例

1.系统环境：Python3.7

sqlite3数据库，数据库名称：books.db

2.项目结构

3.app.py

import sqlite3
from flask import Flask
from flask import jsonify,render_template

app = Flask(__name__)

@app.route("/")
def home():
    return render_template("index.html",title='测试')

@app.route("/api/books")
def books():
    conn = sqlite3.connect("books.db")
    conn.row_factory = sqlite3.Row
    cur = conn.cursor()
    sql = "Select * from books"
    rows = cur.execute(sql).fetchall()
    rows = [dict(row) for row in rows]

    return jsonify(rows)

4.index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Flask Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
</head>
<body>
    <div id="app">
    <h1>Flask & Vue.js {{ title }}</h1>
    <table border="1" cellpadding=5 cellspacing=5>
        <tr>
            <td>ID</td>
            <td>标题</td>
            <td>作者</td>
            <td>定价</td>
        </tr>
        <tr v-for="book in books">
            <td>[[book.id]]</td>
            <td>[[book.title]]</td>
            <td>[[book.author]]</td>
            <td>[[book.price]]</td>
        </tr>
    </table>
    <script>
        var app= new Vue({
            el: "#app",
            data:{
               books:[]
            },
            delimiters:["[[","]]"],
            mounted:function(){
               this.fetchData();
            },
            methods:{
               fetchData(){
                  this.$http.get("/api/books").then(rsp=>{
                      this.books=rsp.body
                  },err=>{console.log('Error')});
               }
            }
        })

    </script>
    </div>
</body>
</html>

5.构造数据库语句

1.创建数据库
sqlite3 books.db

2.创建表
create table books(id int PRIMARY Key not null,title Text not null,author Text not null,price real not null);

3.插入记录
insert into books values(1,'Python','Eason',39.0);
insert into books values(2,'django','Eason',99.0);
insert into books values(3,'flask','Eason',129.0);
insert into books values(4,'Vuejs','Eason',50.0);

6.示例效果

1).

2).

posted on 2020-08-10 11:34 天道酬勤2016 阅读(1383) 评论(0) 编辑收藏举报