uniapp项目的文章详情页页面布局(day11)

322 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第18天,点击查看活动详情

Snipaste_2022-09-28_08-38-26.png

上一篇文章中我们完成了详情页的布局以及样式的展示,然后我们文章板块的内容就完成了,点击文字可以跳转到详情页,如果对这篇文字不感兴趣也可以点击下面的删除按钮减少该类文章的推荐。

  • 接下来将介绍一下答题模块的实现,答题模块的样式如下图所示:

image.png

  • 这里又会为大家介绍一个前端在线模拟数据的工具,fastmock,这个工具非常实用

  • fastmock的介绍:

  • fastmock可以让你在没有后端程序的情况下能真实地在线模拟ajax请求,你可以用fatmock实现项目初期纯前端的效果演示,也可以用fastmock实现开发中的数据模拟从而实现前后端分离。在使用fastmock之前,你的团队实现数据模拟可能是下面的方案中的一种或者多种

  • 本地手写数据模拟,在前端代码中产生一大堆的mock代码。

  • 利用mockjs或者canjs的can-fixture实现ajax拦截,本地配置必要的json规则。

  • 后端在Controller层造假数据返回给前端。

上面的方式中,不管哪一种方式,都会要求开发人员写一些跟项目本无任何关联的代码,第一个和第二个方式还会需要前端项目在本地引入不必要的js文件。

  • 官网的链接:www.fastmock.site/#/login ,使用这个工具我们就可以不用等后端完成接口自己编写虚假数据渲染到页面上了,我的项目的接口如下图所示:

image.png