前后端分离，后端flask，前端vue，nginx小示例--推荐使用

后端：

flask

后端一定要注意flask配置 跨域支持事项，否则获取不了数据信息

1.跨域支持的配置

from flask_cors import CORS, cross_origin  #跨域支持的配合
from flask import jsonify,render_template   


app=Flask(__name__)
CORS(app, supports_credentials=True)    #跨域支持

配置这些就是可以了，全局设置

 2.后端全部代码：“/api/books”

from flask import Flask

from flask_cors import CORS, cross_origin
from flask import jsonify,render_template   #跨域支持的配合
import sqlite3

app=Flask(__name__)
CORS(app, supports_credentials=True)    #跨域支持
# 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接口数据信息 ：

 

---

---

 前端vue2.x

步骤如下：

前提系统安装有node，配置淘宝源【提升下载速度】

1.配置步骤：

======================================
==========默认创建文件的方式============================
1.创建项目 #安装命令脚手架