flask-vue-sqlite3-->api接口示例：
代码组成信息：
最终项目组织截图
一数据信息准备：
1.准备数据库：字段以及插入的数据信息
2.数据库数据插入语句：
insert into books(title,author,price)
values('中国历史','中国人',99.99),
('java','tom',199.99),
('golang','地鼠先生',89.99),
('python','jerry',100.99)
insert into books(title,author,price) values('中国历史','中国人',99.99),('java','tom',199.99),('golang','地鼠先生',89.99),('python','jerry',100.99)
二.flask的配置信息：
app.py
from flask import Flask
from flask import jsonify,render_template
import sqlite3
app=Flask(__name__)
@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()
rowsdics=[dict(row) for row in rows]
return jsonify(rowsdics)
@app.route("/")
def home():
return render_template("index.html",titl="ht API")
if __name__ == '__main__':
app.run()
初步数据验证，也就是"/api/books"，测试是否可以获取到数据库的信息
三.前端的代码的编写
3.0用互联网文件实现
index.html文件内容：
Flask API
Flask &api &Vuejs&{{title}}
| # | 标题 | 作者 | 定价 |
| [[book.id]] | [[book.title]] | [[book.author]] | [[book.price]] |
3.1前端代码的优化0---实现离线文件的使用：[]flask --static静态文件的获取
实现调用本地文件的vuev2.6.14.js文件以及vue-resource1.5.1.min.js的事项，
重点实现步骤：
具体实现代码：
Flask API
Flask API
Flask &api &Vuejs&{{title}}
| # | 标题 | 作者 | 定价 |
| [[book.id]] | [[book.title]] | [[book.author]] | [[book.price]] |
补充知识：
默认情况下,Flask 在程序根目录中名为 static 的子目录中寻找静态文件。因此,我们一般在应用的包中创建一个叫static的文件夹,并在里面放置我们的静态文件,我们这里使用了
‘url_for’，调用静态文件
