Python Flask 框架跨域结合 ajax 实战留言板 (一)

项目简介

本次项目主要使用 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

接下来,手动往表里面添加一条数据,用于测试。

3.png

前端页面

这里我们使用 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">
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值