這里記錄下一個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).
