发布文章

前言

文章发布和展示多适用于公众号或论坛等项目，是较为基础和常见的功能。

效果

制作思路

• 发布文章：填写文章的基本信息
• 文章展示：显示文章的基本信息

制作过程

第一步：搭建数据模型

1. 建立文章表，并建立相关字段，如文章标题、封面、内容和摘要等文章的基本信息。
2. 文章标题、内容和摘要等文本信息选择文本类型，封面为图片类型。
3. 建立账户表与文章表的 1:N 关系，一个用户可发布多篇文章。

第二步：搭建文章发布页

• 搭建 UI：
  • 用文字组件构成文章标题、摘要、封面和内容
  • 用文字输入组件构成文章文本信息的填写
  • 用图片选择器组件构成文章封面的输入
  • 用按钮组件控制文章的发布

• 发布按钮的交互绑定：
  • 在按钮的交互栏绑定点击时行为—修改表数据—添加文章
  • 绑定相关字段数据：文章标题、内容、摘要——输入框/文字输入
  • 文章封面——输入框/图片选择器
  • 账户_账户——当前用户数据/ID

第三步：链接文章发布和文章显示页

思路：点击发布按钮，发布成功后跳转到文章展示页，显示刚才发布成功的文章。 数据思路：点击发布按钮，将文章添加到后台，得到文章 id，将文章 id 传递给文章展示页，文章展示页用远程数据去后台中查询文章信息。

• 链接数据：
  • 在文章展示页添加链接数据，命名为 articleid，类型为整数，用于传递文章 id。

• 结果数据：
  • 在文章发布页的交互栏，修改表数据—添加文章的成功时行为中添加跳转—文章展示行为
  • 在链接数据 articleid 的参数中填写结果数据（第二步发布按钮—添加文章表）中的文章 id

• 远程数据：
  • 在文章展示页创建远程数据 article，数据表选择文章，请求类型选择查询，数据限额为 1
  • 过滤条件选择 ID=链接数据/articleid

第四步：搭建文章显示页

• 搭建 UI：
  • 用文字组件构成文章标题、摘要和内容的显示
  • 用图片组件构成文章封面的显示

文章显示页配置1	文章显示页配置2

• 文字组件的内容栏绑定远程数据/article/文章标题等，文章摘要和内容的文字组件绑定也类似。
• 图片组件的内容栏中图片源选择数据绑定，绑定远程数据/article/文章封面。