nuxt jokes 页面结构开发
在这章节内容呢,我将带着大家使用bootstarpVue
来开发这个jokes
查询页面,这章内容呢,主要是编写我们的静态UI结构,
渲染上静态数据;好我们现在来使用<Banner>
编写这个顶部banner信息栏;
编写如下:
<Banner title="Jokes Page" para="this is a jokes search page." img="/images/banner_jokes.jpg"></Banner>
这里需要的图片是需要在刚开始的引入的static
中引入,路径为 /images/banner_jokes.jpg
- 接下来,我们继续编写这个搜索表单,1个搜索框,1个limit没有展示数量框,还有1个搜索按钮,我们可以使用
bootstarpVue
中的
一些表单组件来快速实现这个而效果:
<div class="search-box">
<b-input-group prepend="Search" class="mt-3">
<b-form-input placeholder="please enter joke's name"></b-form-input>
</b-input-group>
<b-input-group prepend="Limit" class="mt-3">
<b-form-input placeholder="please enter limit number " ></b-form-input>
</b-input-group>
<b-button block variant="info" class="mt-3">Click search jokes</b-button>
</div>
- 我们这里呢,可以给这个组建标签新增
mt-3
的类名,增加一些上边距,详细信息如下:
类是使用的格式命名{property}{sides}-{size}为xs和 {property}{sides}-{breakpoint}-{size}为sm,md,lg,和xl。
其中property一个是:
m - 用于设置margin的类
p - 用于设置padding的类
其中sides一个是:
t- 对于设置margin-top或的类padding-top
b- 对于设置margin-bottom或的类padding-bottom
l- 对于设置margin-left或的类padding-left
r- 对于设置margin-right或的类padding-right
x- 对于设置*-left和的两个类*-right
y- 对于设置*-top和的两个类*-bottom
空白 - 用于设置margin或padding在元素的所有4个边上的类
其中size一个是:
0 - 通过将其设置为消除边距或填充的类 0
1- (默认情况下)的类时,设置margin或padding以$spacer * .25
2- (默认情况下)的类时,设置margin或padding以$spacer * .5
3- (默认情况下)的类时,设置margin或padding以$spacer
4- (默认情况下)的类时,设置margin或padding以$spacer * 1.5
5- (默认情况下)的类时,设置margin或padding以$spacer * 3
- 再接着我们来编写下
jokes
的loading模块,用于请求还没有响应的时候显示:
<div class="loading-box" v-if="loading">
<h3>loading…</h3>
</div>
jokes
列表模块:
<!-- jokes list -->
<div class="jokes-list-box" v-if="!loading">
<b-list-group>
<b-list-group-item > joke </b-list-group-item>
</b-list-group>
</div>
- 最后剩下1个分页组件模块:
<div class="pagination-box">
<b-pagination
v-model="page"
:total-rows="rows"
:per-page="perPage"
first-text="First"
prev-text="<"
next-text=">"
last-text="Last"
align="center"
variant="info"
></b-pagination>
</div>
好,我们整个的页面UI模块都编写完成,接下来我们需要调用api接口,实现整个jokes
页面的表单,分页交互逻辑