前言

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

效果

制作思路

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

• 文章展示：显示文章的基本信息## 制作过程

  第一步：搭建数据模型

• 建立文章表，并建立相关字段，如文章标题、封面、内容和摘要等文章的基本信息

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

第二步：搭建文章发布页

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

• 发布按钮的行为绑定
  • 在按钮的交互栏绑定点击时行为—修改表数据—添加文章
  • 绑定相关字段数据文章标题、内容、摘要——输入框/文字输入

文章封面——输入框/图片选择器 账户_账户——当前用户数据/ID

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

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

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

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

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

第四步：搭建文章显示页

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

img	img

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