用户登录

点击标签链接,可以显示一个标签页面,上面会显示当前打开的标签相关的一些文章内容 ... 先回到命令行 .. 创建一个资源控制器 ... adonis make:controller tag --resource

回到项目 .. 打开项目的路由 ...

这里添加一条新的资源路由 ... 资源是 tags .. 可以用一下 TagController 这个控制器来处理 ..

然后找到 TagController.js ... 在这里我们需要用到 Tag 模型 .. 添加一个 Tag .. 模型是 App/Models/Tag

再找到显示单个资源的处理方法 .. 就是这个 show ... 把 params 解构出来 ..

里面添加一个 tag .. await .. Tag find ... id 是 params.id ..

下面再添加一个 posts ... 它的值可以用一下 await tag 的 posts ... select .. 选择 id ,title 还有 content 字段 再用一个 fetch 方法 ..

这个 tag 模型上的 posts 关系我们得再去定义一下 .. 打开 Tag 模型 .. 里面添加一个方法 ... 名字是 posts ... 这个方法可以 return ... this.belongsToMany ... 模型是 App/Models/Post ..

再回到 TagController ... 找到 show 方法 .. 再把 view 解构出来 ..

让方法渲染一个视图 .. view.render .. 视图是 tag 里的 show ... 给视图传递点数据 .. 添加一个 tag ... 再添加一个 posts ... 对应的值用一下 posts 上的 toJSON() ..

视图

下面再去创建这个视图 .. 放在 resources ... views,tag 的下面,名字是 show.edge ..

让这个视图使用一个布局 .. 一个 layout ... 布局是 layouts 下面的 main ..

再设置一下 content 区域里的内容 ...

里面是一个 div ,加上 container ... 包装一个大标题 .. mt-5,mb-4,font-weight-light ... 绑定一个 tag 里的 title ..

下面用一组 if ,判断有没有 posts .. 显示一个 div 加上 my-5 ... 再用一组 each 循环输出标签相关的文章 .. post in posts

一个大标题 .. h3 ... mt-5, mb-4 font-weight-light .. 绑定 post.title ..

再用一个 div ... 里面绑定一个 post.content ... 显示文章的正文 ..

预览

再到浏览器上去预览一下 ... 打开一个文章内容 ... 点一下文章内容上面的标签链接 .. 这样会打开标签页面 ... 页面上会显示标签的标题 .. 还有标签相关的一个文章列表 ....

多对多关系:创建标签页面显示相关文章列表《 Node.js 应用:内容关系 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点