项目简介
本次项目主要使用 flask
跨域处理数据,前端使用 ajax
发送请求给后端接口,通过实战留言板,完成对数据的增删改查。
在上一节的 cms
项目中,继续开发。
创建蓝图
首先,我们来创建一个接口蓝图 api_blue
,在 app
文件夹中,创建 api
包,并在该文件夹中创建 views.py
文件。
在 api/__init__.py
中,创建蓝图对象:
from flask import Blueprint
api_blue = Blueprint('api_blue', __name__) # 创建蓝图对象
from . import views # 导入当前模板
在 api/views.py
中,添加加载留言板首页数据的路由和方法:
from . import api_blue
@api_blue.route('/api')
def index():
print(123)
在 app/__init__.py
中注册蓝图:
# 留言板接口蓝图
from app.api import api_blue
app.register_blueprint(api_blue)
以上准备工作做好后,我们通过浏览器访问首页接口,在终端应该能看到 123 的输出!如下图:
创建模型类
在 app/models.py
中,创建留言表模型 chat
,结构如下:
class Chat(BaseModel, db.Model):
"""留言表"""
__tablename__ = "chat"
id = db.Column(db.Integer, primary_key=True) # 编号
type_id = db.Column(db.Integer, db.ForeignKey('type.id'), nullable=False) # 所属类型
title = db.Column(db.String(255), nullable=False) # 标题
content = db.Column(db.Text(), nullable=False) # 内容
is_show = db.Column(db.Integer, default=1, nullable=False) # 是否显示
def to_json(self):
return {
"type_id": self.type_id,
"title": self.title,
"content": self.content,
"is_show": self.is_show,
}
终端执行迁移命令,生成表:
python manage.py db migrate -m 'init_tables'
python manage.py db upgrade
接下来,手动往表里面添加一条数据,用于测试。
前端页面
这里我们使用 bootstrap 写一个简单的静态页
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>留言板</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">