项目简要说明：
本项目采用flask，vue2，axios，sqlite3实现一个前后端分离【api接口】，获取后端的资源的小示例：
项目目录结构：
一数据信息准备：
1.准备数据库：字段以及插入的数据信息
sql插入数据库的语句：
insert into books(title,author,price) values('中国历史','中国人',99.99),('java','tom',199.99),('golang','地鼠先生',89.99),('python','jerry',100.99)
二.flask后台代码：
from flask import Flask
from flask import jsonify,render_template
import sqlite3
app=Flask(__name__)
# sqlite3 row_factory ,python推出了Cursor.Row对象。其实就是列名和值做了个映射，可以通过字符索引来获取值。很方便
# conn.row_factory = sqlite3.Row
@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",title="ht API")
if __name__ == '__main__':
app.run()
初步数据验证，也就是"/api/books"，测试是否可以获取到数据库的信息
三.前端代码的编写
这里选择的是调取离线的vue-js，axios离线的版本实现的调取
关注：离线调取的方式 url-for事项
前端全部代码：
Flask API
{url_for('static',filename='vue-resource1.5.1.min.js')}}">-->
Flask &api &Vuejs&{{title}}
| # | 标题 | 作者 | 定价 |
| [[book.id]] | [[book.title]] | [[book.author]] | [[book.price]] |
效果展示：
后端没有改变，前端再次优化，采用“element”组件优化下界面信息，不然太难看了
饿了么UI地址：
https://element.eleme.cn/#/zh-CN
本次只是优化下前端界面信息：
引入离线的饿了么组件
修改饿了么UI代码的重点地方：
代码：
Flask API
{url_for('static',filename='vue-resource1.5.1.min.js')}}">-->
{{title}}
{title}}-->
展示下效果：
比以前好看多了
