nuxt jokes页面UI模块结构开发

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页面的表单，分页交互逻辑