帖子列表和SerializerMixin注意事项

帖子序列化

继承SerializerMixin 即可调用to_dict()序列化
后端

class PostModel(db.Model, SerializerMixin):
    serialize_only = ("id", "title", "content", "create_time", "board", "author")
    __tablename__ = "post"
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    title = db.Column(db.String(200), nullable=False)
    content = db.Column(db.Text, nullable=False)
    create_time = db.Column(db.DateTime, default=datetime.now)
    board_id = db.Column(db.Integer, db.ForeignKey("board.id"))
    author_id = db.Column(db.String(100), db.ForeignKey("user.id"))
    # 这里关联了BoardModel 也会将其序列化   所以 BoardModel也需要继承SerializerMixin
    # 另外 序列化的时候会给BoardModel添加一个属性posts
    board = db.relationship("BoardModel", backref=db.backref("posts"))
    author = db.relationship("UserModel", backref=db.backref("posts"))

这里会出现一个循环序列化的问题
解决办法就是给BoardModel指定序列化字段

class BoardModel(db.Model, SerializerMixin):
    serialize_only = ("id", "name", "priority", "create_time")
    __tablename__ = "board"
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    name = db.Column(db.String(20), unique=True)
    priority = db.Column(db.Integer, default=1)
    create_time = db.Column(db.DateTime, default=datetime.now)

    #相当于这样  会循环序列化
    # posts = BoardModel

class PostModel(db.Model, SerializerMixin):
    serialize_only = ("id", "title", "content", "create_time", "board", "author")
    __tablename__ = "post"
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    title = db.Column(db.String(200), nullable=False)
    content = db.Column(db.Text, nullable=False)
    create_time = db.Column(db.DateTime, default=datetime.now)
    board_id = db.Column(db.Integer, db.ForeignKey("board.id"))
    author_id = db.Column(db.String(100), db.ForeignKey("user.id"))
    # 这里关联了BoardModel 也会将其序列化   所以 BoardModel也需要继承SerializerMixin
    # 另外 序列化的时候会给BoardModel添加一个属性posts
    board = db.relationship("BoardModel", backref=db.backref("posts"))
    author = db.relationship("UserModel", backref=db.backref("posts"))

@bp.get("/post/list")
def post_list():
    page = request.args.get('page', default=1, type=int)
    per_page_count = current_app.config['PER_PAGE_COUNT']
    start = (page-1)*per_page_count
    end = start + per_page_count
    query_obj = PostModel.query.order_by(PostModel.create_time.desc())
    total_count = query_obj.count()
    posts = query_obj.slice(start, end)
    # [PostModel(1),PostModel(2)]
    post_list = [post.to_dict() for post in posts]
    return restful.ok(data={
        'total_count': total_count,
        "post_list": post_list,
        "page": page
    })

前端

getPostList(page){
		const url = "/post/list?page=" + (page?page:1)
		return this.http.get(url);
	}

// 响应拦截    每次都要获取data之外的数据，可以在这里拦截直接获取data
		this.http.interceptors.response.use(response => {
			return response.data;
		})

 return {
      deletingIndex: 0,
      confirmDialogVisible: false,
      posts: [],
      total_count: 0,
      page: 1
    };


getPostList(page){
      this.$http.getPostList(page).then(result => {
        if(result['code'] == 200){
          let data = result['data'];
          this.posts = data['post_list'];
          this.total_count = data['total_count'];
          this.page = data['page'];
        }
      })
    },

deletePost(post_id){
		const url = "/post/delete"
		return this._post(url, {"id": post_id})

<template>
  <div>
    <el-space direction="vertical" :size="20">
      <h1>帖子管理</h1>
      <el-table :data="posts" style="width: 100%">
        <el-table-column label="标题">
          <template #default="scope">
            <a :href="$http.server_host + '/post/detail/' + scope.row.id" target="_blank">{{
              scope.row.title
            }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="发布时间" width="180" />
        <el-table-column prop="board.name" label="所属板块" />
        <el-table-column prop="author.username" label="作者" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              type="danger"
              circle
              size="mini"
              @click="onDeletePostClick(scope.$index)"
            >
              <el-icon><delete /></el-icon>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center;">
        <el-pagination 
          background 
          layout="prev, pager, next" 
          :total="total_count"
          :current-page="page"
          @current-change="onPageChanged"
        >
  </el-pagination>
      </div>
    </el-space>

    <!-- 删除轮播图确认对话框 -->
  <el-dialog
    v-model="confirmDialogVisible"
    title="提示"
    width="30%"
  >
    <span>如果删除帖子，该帖子下所有的评论也会被删除，您确定要删除吗？</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="confirmDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onConfirmDeletePostClick">确定</el-button>
      </span>
    </template>
  </el-dialog>
  </div>
</template>

<script>
import {Delete} from "@element-plus/icons";
import { ElMessage } from 'element-plus';
export default {
  name: "Post",
  data() {
    return {
      deletingIndex: 0,
      confirmDialogVisible: false,
      posts: [],
      total_count: 0,
      page: 1
    };
  },
  mounted() {
    this.getPostList(1);
  },
  methods: {
    getPostList(page){
      this.$http.getPostList(page).then(result => {
        if(result['code'] == 200){
          let data = result['data'];
          this.posts = data['post_list'];
          this.total_count = data['total_count'];
          this.page = data['page'];
        }
      })
    },
    onDeletePostClick(index) {
      this.confirmDialogVisible = true;
      this.deletingIndex = index;
    },
    onConfirmDeletePostClick(){
      let post = this.posts[this.deletingIndex];
      this.$http.deletePost(post.id).then(res => {
        if(res['code'] == 200){
          this.posts.splice(this.deletingIndex, 1);
          ElMessage.success("帖子删除成功！");
          this.confirmDialogVisible = false;
        }else{
          ElMessage.info(res['message']);
        }
      })
    },
    onPageChanged(current_page){
      this.getPostList(current_page);
    }
  },
  components: {
    Delete
  }
};
</script>

<style scoped>
.el-space {
  display: block;
}
</style>

删除后端

@bp.post("/post/delete")
@permission_required(Permission.POST)
def delete_post():
    post_id = request.form.get("id")
    try:
        post_model = PostModel.query.get(post_id)
    except Exception as e:
        return restful.params_error(message="帖子不存在！")
    db.session.delete(post_model)
    db.session.commit()
    return restful.ok()