Day7 ---- 前后端分离与接口编写

昨日回顾

1.单表查询常用方法有哪些?
2.SQLAlchemy中分页排序如何实现?
3.SQLAlchemy中逻辑运算与聚合如何使用?
4.一对多, 多对多关系如何创建?
5.关系查询如何实现?
6.Flask-SQLAlchemy如何执行自定义SQL语句?

今日内容

1. 前后端分离项目的创建

2. 学生管理系统案例 — 模型创建与迁移

3. 学生管理系统案例 — 增删改查实现

4. 前端页面编写与接口测试

---

1. 前后端分离项目

1.1 项目的创建

创建项目的目录结构。

• flask项目创建

fproject
	utils # 通用工具
	app.py # 应用主文件
    settings.py  # 配置文件
    run.py # 开发运行文件
    manage.py # 模型类迁移文件

# settings.py  实现配置文件
import pymysql
	
pymysql.install_as_MySQLdb()
SQLALCHEMY_DATABASE_URI = 'mysql://root:root@127.0.0.1:3306/fproject'
SQLALCHEMY_TRACK_MODIFICATIONS = False # 不追踪更新
SQLALCHEMY_ECHO = True # 记录标准输出


# app.py中实现
import settings
from flask import Flask
from flask_sqlalchemy import SQLAlchemy


# db = SQLAlchemy(app)
db = SQLAlchemy()

# 工厂函数
def creat_flask_app(config): # 配置
    # 实例化app对象
    app = Flask(__name__)
    # 配置
    app.config.from_object(config)
    # db对象 绑定app
    db.init_app(app)
    # 绑定蓝图...
    # 创建api...
    return app

# 创建app对象
app = creat_flask_app(settings)
# 创建所有的表
db.create_all()


# run.py
from app import app
from flask_cors import CORS


if __name__ == "__main__":
	CORS(app, supports_credentials=True, origins=["*"], 
	methods=["GET", "PUT", "POST", "DELETE", "OPTIONS"], 
	allow_headers=['x-requested-with', 'content-type', 'authorization'])
	app.run(host='localhost', port=5050, debug=True)

• Vue项目创建

# 安装vue 脚手架
npm install @vue/cli 
# 创建项目
vue create myProject
# 安装依赖包 （对一个前端项目，安装已配置的包npm install）
npm install -s axios # 发送请求
npm install -s element-ui # ui界面
npm install -s vue-router@3 # 路由管理 for vue2
npm install -s vuex@3  # 集中状态管理
npm install -s uuid

1.2 跨域配置

Flask跨域配置需要借助flask-cors扩展来实现。

# 安装
pip install flask-cors

# 全局配置跨域
from flask_cors import CORS

# 全局跨域
CORS(app, supports_credentials=True, 
    origins=["http://localhost:8080",], 
    methods=["GET"