帖子列表和SerializerMixin注意事项

这篇具有很好参考价值的文章主要介绍了帖子列表和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);
	}


帖子列表和SerializerMixin注意事项,Vue,python,前端

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

帖子列表和SerializerMixin注意事项,Vue,python,前端

帖子列表和SerializerMixin注意事项,Vue,python,前端

帖子列表和SerializerMixin注意事项,Vue,python,前端

 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>

帖子列表和SerializerMixin注意事项,Vue,python,前端

删除后端文章来源地址https://www.toymoban.com/news/detail-600403.html

@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()

到了这里,关于帖子列表和SerializerMixin注意事项的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app使用vue语法进行开发注意事项

    目录 uni-app 项目目录结构 生命周期 路由 路由跳转 页面栈 条件编译 文本渲染 样式渲染 条件渲染 遍历渲染 事件处理 事件修饰符 组件/标签 使用(类似)小程序 语法/结构 使用vue 具体项目目录如下: uni-app 支持如下应用生命周期函数: 函数名 说明 onLaunch 当 uni-app  初始化

    2024年02月13日
    浏览(51)
  • vue axios实现下载文件及responseType:blob注意事项

    需要使用axios和js-file-download组件 注意事项: responseType:blob表示服务器返回的响应类型是二进制流,一般用于文件、视频下载等场景。正常情况下后端返回二进制数据,当后端服务器出错时,往往会以json形式返回错误信息,例如{\\\"code\\\":500,\\\"msg\\\":\\\"未知异常\\\"}。因为设置了blob类型,

    2024年02月11日
    浏览(44)
  • Python函数的正确用法及其注意事项

    简单总结: 与类和实例无绑定关系的function都属于函数(function); 与类和实例有绑定关系的function都属于方法(method)。 首先摒弃错误认知:并不是类中的调用都叫方法 函数(FunctionType) 函数是封装了一些独立的功能,可以直接调用,能将一些数据(参数)传递进去进行处

    2024年01月20日
    浏览(45)
  • Python,cuda安装步骤及注意事项

    1、安装驱动精灵,查看显卡是否能被识别,如果没有需要安装显卡驱动 2、安装CUDA11,其中cuda中自带了英伟达的显卡驱动。直接安装cuda11就可以。选择精简安装模式。 3、安装完成后将《cudnn-11.1-windows-x64-v8.0.5.39》中的文件覆盖到cuda的安装路径中。 找到软件安装目录,将上面

    2024年04月27日
    浏览(41)
  • Vue2:用ref方式绑定自定义事件的注意事项

    我们知道绑定自定义事件可以用 ref 方式实现。 但是,这个方式,需要注意下,否则,实现不了我们的效果。 需求是这样的,我们通过 ref 绑定的事件,来给 App 的 data 块中的变量赋值。 基本写法: 父组件 App 中 methods 函数: 给 Student 组件绑定自定义事件 test 此处的 this 是谁

    2024年01月19日
    浏览(65)
  • h5跳转微信小程序方案及注意事项(vue方向)

    在正式开发工作之前,请优先熟读并查看微信开发文档。 需提前登录微信公众平台进入“公众号设置”的“功能设置”的“JS接口安全域名”、“业务域名”、“网页授权域名”内依次配置h5页面的相关域名地址(例如:www.baidu.com)这里不包含协议名称和端口,同时可在根目

    2024年02月09日
    浏览(95)
  • vue修改node_modules打补丁步骤和注意事项

    当我们使用 npm 上的第三方依赖包,如果发现 bug 时,怎么办呢? 想想我们在使用第三方依赖包时如果遇到了bug,通常解决的方式都是绕过这个问题,使用其他方式解决,较为麻烦。或者给作者提个issue,然后等待作者的修复,等待的时间不可控。那么这时候是不是就可以借助

    2024年02月04日
    浏览(56)
  • 新手下载python和anaconda3注意事项

    关于python下载其实很简单,直接在官网下载就行。 官网:Welcome to Python.org 当然,到了官网下载是默认最新版本,如果你需要旧版本,那就需要找一下了,这里提供一下windows的各版本的官网链接: Python Releases for Windows | Python.org 当然,在这里也可以切换mac版本 之后具体的安装

    2024年04月24日
    浏览(36)
  • vue3中Fragment特性的一个bug,需要留意的注意事项

    vue3中的Fragment 模版碎片特性是什么,简单的理解就是 template模板代码 不在像vue2中那样必须在根节点在包裹一层节点了。 vue2写法 vue3写法 vue3中Fragment特性的一个bug(需要留意的问题) 组件HelloWorld: 组件HelloWorld的使用 同时控制台waring : 利用开发者模式看dom结构, 发现v-show的

    2024年01月22日
    浏览(42)
  • Matlab转Python 画图pcolormesh的使用及一些注意事项

    今天想把matlab一段画图代码转为python,使用到了colormap,尝试了一下午,将结果以及一些注意事项记录下来,算作学习笔记了。 先上matlab原代码 结果如下: 注意: 在pcolormesh函数使用过后,就必须要设置xlim或者ylim,然后再使用colorbar的函数,否则设置ylim会导致语句无效,不

    2024年02月06日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包