Nifty Admin后台管理模板设计与实现指南

本文还有配套的精品资源，点击获取

简介：《Nifty Admin后台管理模板详解》详细解析了Nifty Admin模板的特点和功能。Nifty Admin基于Bootstrap框架，具备响应式设计、丰富的UI组件、多种预设样式和易于定制的特性。主要功能包括多级导航、数据可视化图表库、高效的数据处理表格组件、图标集、通知与提示机制、表单元素和模态对话框。本指南提供使用Nifty Admin构建后台管理系统的具体步骤，从下载解压、环境准备、资源引入、自定义配置到内容添加和测试优化，帮助开发者快速搭建和优化后台系统。

1. 响应式设计介绍与实践

在移动互联网时代，用户通过各种不同尺寸的设备访问网站，这给网站设计带来了挑战。响应式设计应运而生，它通过灵活的布局和可伸缩的组件，确保网站内容在不同屏幕尺寸和分辨率的设备上都能够适应并保持良好的用户体验。

1.1 响应式设计的基本概念

响应式设计主要依靠CSS媒体查询（Media Queries）、流式布局（Fluid Grids）和灵活的图片（Flexible Images）。媒体查询允许设计师根据不同的屏幕尺寸设置不同的CSS样式规则。流式布局根据视口（viewport）宽度使用百分比宽度，替代固定的像素宽度，使元素宽度能够适应屏幕。而灵活的图片则保证图片在任何尺寸下都能适应其容器。

1.2 响应式设计的重要性

拥有响应式设计的网站可以提升用户体验，并且对搜索引擎优化（SEO）也有正面的影响。由于移动设备的广泛使用，搜索引擎例如谷歌，会优先展示对移动设备友好的网站。因此，响应式网站设计不仅关系到视觉效果，更是关系到网站的可访问性和市场竞争力。

1.3 实际项目中的应用

在实际项目中实现响应式设计，需要遵循以下步骤：

• 创建布局原型 ：在不同的设备上测试网站布局，确保在所有设备上都能正常显示。
• 使用媒体查询 ：针对不同屏幕尺寸编写CSS样式，以实现不同布局的适配。
• 测试并迭代 ：使用各种设备或模拟器来测试网站的响应式表现，然后根据反馈进行调整优化。

响应式设计是一个持续的过程，需要开发者不断测试、评估和调整以确保最佳的用户访问体验。通过掌握响应式设计的原则和实践，开发者能够为用户提供无缝的跨设备体验，同时维护品牌的统一视觉和功能性。

2. Bootstrap框架深入应用

Bootstrap作为前端开发中广泛使用的一个开源工具包，极大地简化了网页设计和开发过程。它提供了一整套的HTML、CSS和JavaScript组件，用于开发响应式布局、表单、按钮、导航以及其它界面组件。本章将逐步深入Bootstrap的核心特性，并演示如何高效地将这些特性应用到具体的项目中。

2.1 基础组件和实用工具

2.1.1 栅格系统与布局

Bootstrap的栅格系统是响应式布局的基石，它基于12列布局，允许设计者创建不同的布局结构来适应各种屏幕尺寸。这个系统的使用非常简单，开发者只需要在 .container 或 .container-fluid 类的容器中使用 .row 来创建一行，并在其中使用 .col-{breakpoint}-{size} 来定义列。

下面是一个简单的栅格布局示例：

<div class="container">
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-8">.col-md-8</div>
    </div>
</div>

在这个例子中，我们定义了两列，第一列占据容器宽度的三分之一，第二列占据三分之二。在不同的断点，列宽会相应调整。 .col-md-4 和 .col-md-8 中的 md 表示中等屏幕尺寸， 4 和 8 表示相对于12列的比例。

2.1.2 常用的UI组件：按钮、导航、表单等

Bootstrap提供了大量预制的UI组件，比如按钮、导航栏、表单控件等，这些组件都内置了响应式特性，使得在不同设备上的显示效果都非常一致。例如，一个响应式的导航栏可以通过下面的HTML和CSS代码实现：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
  </div>
</nav>

在这个导航栏代码中， navbar-expand-lg 类表示导航栏在大屏幕尺寸时展开，在小屏幕时折叠。导航栏内的按钮和链接都进行了响应式设计，确保用户在不同设备上都能有良好的操作体验。

2.1.3 JavaScript插件和工具类

Bootstrap的JavaScript插件为页面元素添加了额外的功能，比如模态框、滑动门、警告框、轮播图等。同时，Bootstrap还提供了一系列的工具类，帮助我们快速实现各种排版和布局效果。例如， .text-center 类可以使文本居中显示。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

上述代码实现了一个基本的模态框，其中按钮触发了模态框的显示， .modal 类控制了模态框的样式。

2.2 高级主题定制与扩展

2.2.1 主题定制基础：变量和mixin

在Bootstrap中，Sass变量和mixin允许开发者自定义主题，它们是定制化和扩展Bootstrap主题的核心工具。Sass变量存储了颜色、间距、字体等主题相关的配置，而mixin则用于CSS规则的复用。

例如，以下代码展示了如何使用Sass变量来自定义一个按钮的颜色：

$primary: #007bff; // 自定义的颜色值
.btn-primary {
  color: #fff;
  background-color: $primary;
  border-color: $primary;
}

通过修改 $primary 变量的值，我们能够统一地改变所有与 .btn-primary 类相关联的样式。

2.2.2 创建自定义组件

Bootstrap的源码非常清晰，为我们提供了创建自定义组件的模板。开发者可以通过继承Bootstrap的类和组件，并添加自己特定的样式和行为，创建出符合需求的自定义组件。

例如，如果我们想要创建一个带有自定义颜色的按钮组，可以定义如下Sass代码：

.btn-custom-group {
  .btn {
    background-color: #custom-color;
    color: #fff;
    &:hover {
      background-color: darken(#custom-color, 10%);
    }
  }
}

这段代码将创建一个名为 .btn-custom-group 的类，任何带有 .btn 类的按钮都会应用这个自定义的样式。通过使用 darken() mixin，我们还为按钮的悬停状态添加了亮度降低的效果。

2.2.3 集成第三方库和框架

在某些复杂的项目中，可能需要集成第三方库和框架，如jQuery、Vue.js、React等。Bootstrap的设计允许和这些库无缝集成，从而在它们的基础上构建功能更为强大的应用。

例如，以下是如何在Bootstrap的轮播组件中使用jQuery来添加自定义行为：

$('#carouselExampleIndicators').carousel({
  interval: 2000,
  pause: 'hover'
});

这段代码配置了轮播组件的自动滚动间隔为2秒，并且当鼠标悬停在轮播组件上时暂停轮播。

通过以上章节的介绍，我们已经全面了解了Bootstrap框架的基础使用方法和一些高级应用技巧。在接下来的章节中，我们将进一步探索Bootstrap中的其他组件和主题定制技术，并分享在具体项目中应用的经验和最佳实践。

3. UI组件集成与运用

在现代Web应用开发中，UI组件的集成和运用是构建用户界面的关键。Bootstrap框架提供了一套完整的UI组件，使得开发者能够快速构建出美观且功能丰富的界面。本章将深入探讨Bootstrap框架中各种UI组件的集成与运用，帮助开发者了解组件的设计理念，并掌握在复杂项目中的实际应用技巧。

3.1 表单组件的高级应用

3.1.1 表单验证与反馈

表单是Web应用中最常见的交互元素之一，它用于收集用户输入的数据。Bootstrap提供了表单验证功能，可以帮助开发者确保数据的有效性。在Bootstrap 4及以后的版本中，可以通过内置的JavaScript验证插件来实现前端验证。

// HTML结构
<form id="myForm" novalidate>
  <div class="form-group">
    <label for="name">姓名</label>
    <input type="text" class="form-control" id="name" required>
    <div class="invalid-feedback">请输入您的姓名。</div>
  </div>
  <!-- 其他表单控件 -->
  <button type="submit" class="btn btn-primary">提交</button>
</form>

// JavaScript代码
document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault();
  if (this.checkValidity()) {
    // 表单数据提交逻辑
  } else {
    // 显示错误信息或进行其他处理
  }
});

在上述代码中，表单验证通过在输入控件上使用 required 属性来实现，同时， invalid-feedback 元素用于显示相应的错误提示信息。此外，通过监听表单的 submit 事件，可以在提交前进行更复杂的验证逻辑。

3.1.2 表单布局与定制

Bootstrap的表单布局能力非常强大，支持多种布局方式，包括水平、垂直和内联表单。开发者可以根据实际需求选择合适的布局，并通过类前缀如 form-row 、 form-inline 等来自定义布局。

<!-- 水平表单 -->
<form class="form-horizontal">
  <div class="form-group row">
    <label for="email" class="col-sm-2 col-form-label">邮箱</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="请输入邮箱">
    </div>
  </div>
  <!-- 其他表单控件 -->
</form>

<!-- 内联表单 -->
<form class="form-inline">
  <div class="form-group mb-2">
    <label for="username" class="sr-only">用户名</label>
    <input type="text" class="form-control" id="username" placeholder="用户名">
  </div>
  <button type="submit" class="btn btn-primary mb-2">登录</button>
</form>

在上述代码中， form-horizontal 类被添加到表单元素上以创建水平布局，而 form-inline 类则用于内联布局，使得表单控件在同一行显示，适用于移动端或者简单的表单页面。

3.2 导航与菜单系统

3.2.1 导航栏的设计与响应式适配

导航栏是网站导航的重要组成部分，Bootstrap的导航栏组件提供了响应式特性，能够适配不同屏幕尺寸的设备。开发者可以通过添加 navbar-expand{-sm|-md|-lg|-xl} 类来定义导航栏在不同断点的展开和折叠行为。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">导航栏</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">特性</a>
      </li>
      <!-- 其他导航项 -->
    </ul>
  </div>
</nav>

上述代码中， navbar-expand-lg 类定义了导航栏在大屏幕设备上完全展开，在更小的设备上则折叠。导航栏内包含了一个响应式切换按钮，以及一个折叠后的导航菜单。

3.2.2 下拉菜单、面包屑和分页的运用

Bootstrap的导航组件还包括下拉菜单、面包屑和分页等子组件，它们都具有良好的响应式特性，能够帮助开发者实现复杂的导航需求。

<!-- 下拉菜单 -->
<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    下拉菜单
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">菜单项1</a>
    <a class="dropdown-item" href="#">菜单项2</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">分割线</a>
  </div>
</div>

<!-- 面包屑 -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">首页</a></li>
    <li class="breadcrumb-item active" aria-current="page">当前页</li>
  </ol>
</nav>

<!-- 分页 -->
<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#" aria-label="Previous">
      <span aria-hidden="true">&laquo;</span>
      <span class="sr-only">上一页</span>
    </a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
    </li>
    <!-- 更多分页项 -->
    <li class="page-item"><a class="page-link" href="#" aria-label="Next">
      <span aria-hidden="true">&raquo;</span>
      <span class="sr-only">下一页</span>
    </a></li>
  </ul>
</nav>

在上述代码中，展示了如何使用下拉菜单、面包屑和分页组件。下拉菜单提供了在一个按钮上展开多个链接或菜单项的功能。面包屑导航显示当前位置，并允许用户快速跳转到上一级。分页组件提供了一种在多个页面间导航的方式，非常适合实现列表数据的分页展示。

通过本章节的介绍，您应该能够理解并掌握Bootstrap中表单和导航组件的高级应用，包括表单验证、布局定制、响应式导航栏的实现，以及下拉菜单、面包屑和分页的运用。接下来的章节将继续深入探讨Bootstrap框架中的其他组件和功能。

4. 个性化与优化策略

4.1 预设样式自定义方法

4.1.1 修改Sass变量以定制样式

在Bootstrap框架中，Sass变量提供了一种非常灵活的方式来定制样式。通过调整这些变量，我们可以快速改变主题的颜色、大小、间距等，从而满足个性化需求。

为了自定义这些Sass变量，首先需要设置一个Sass编译环境。常见的构建工具如Node.js配合Gulp或Webpack，可以方便地集成Sass编译任务。接下来，在Sass文件中，你可以覆盖默认变量值。例如，改变主题颜色从默认的蓝色改为红色，可以这样做：

// 自定义主题颜色
$primary: #dd4814; // 新的红色主题颜色

// 在这里可以添加更多Sass变量的自定义代码

// 引入Bootstrap的Sass源文件
@import "../node_modules/bootstrap/scss/bootstrap";

上述代码片段演示了如何将主题颜色变量从默认值更改为红色。请注意，当使用 @import 指令时，确保路径正确指向Bootstrap的Sass文件。此外，可能需要按照项目结构进行调整。

4.1.2 使用Less或CSS直接覆盖样式

除了Sass之外，Bootstrap也支持Less预处理器，以及纯CSS。如果你的项目更倾向于使用Less或直接编写CSS，也可以通过覆盖样式来实现个性化定制。

若使用Less，同样需要配置Less编译环境。覆盖Less变量和Sass的过程类似，但语法略有不同。例如，使用Less覆盖主题颜色：

// 自定义主题颜色
@primary: #dd4814; // 新的红色主题颜色

@import "bootstrap/less/bootstrap.less";

如果选择使用CSS，可以直接在你的样式表中添加自定义规则，用 !important 来确保这些样式有较高的优先级：

/* 使用CSS直接覆盖样式 */
.navbar {
  background-color: #dd4814 !important; /* 将导航栏背景色改为红色 */
}

/* 在这里可以添加更多CSS覆盖规则 */

在使用CSS覆盖时，虽然方法简单直接，但使用 !important 可能会导致样式难以维护。因此，推荐在其他方法不可行时，才考虑使用 !important 。

4.2 导航系统实现与优化

4.2.1 响应式导航栏的实现

在Bootstrap中，导航栏组件支持响应式设计，能够适应不同屏幕大小。在实现响应式导航栏时，可以利用Bootstrap的导航组件，结合栅格系统，实现跨设备的导航栏设计。

以下是一个基本的响应式导航栏实现示例：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
  </div>
</nav>

导航栏组件使用 navbar-expand-lg 类，使得在大屏幕设备上显示为水平导航栏，在小屏幕设备上切换为垂直导航栏。通过按钮触发导航栏的展开和折叠行为。

4.2.2 优化加载时间和用户体验的策略

响应式导航栏除了在视觉上要适应不同屏幕尺寸，还需要在性能上进行优化。为了提高加载速度和用户体验，可以采用以下策略：

1. 懒加载图像和组件 ：当用户浏览到导航链接对应的视图时，再加载图像或组件。

2. 使用CSS动画代替JavaScript ：动画效果使用CSS实现，因为CSS动画通常比JavaScript动画运行得更加流畅。

3. 减少HTTP请求 ：通过合并文件、压缩图片和使用CDN（内容分发网络）来减少资源加载时间。

4. 使用Bootstrap的异步组件 ：对于某些非关键组件，可以考虑异步加载，这样可以加快页面的初次加载速度。

5. 优化JavaScript和CSS文件 ：移除未使用的Bootstrap组件和功能，精简样式表和脚本。

通过实施这些策略，可以显著提高网站的性能和用户的体验。一个响应式的导航栏不仅提升了视觉效果，还通过优化策略确保了流畅的交互体验，对于任何依赖用户参与和满意度的网站来说，这一点至关重要。

5. 交互元素与功能集成

交互元素和功能是构建动态Web应用的核心。本章将介绍如何集成和优化Bootstrap中的图表、表格、通知等元素，以及如何创建自定义的模态对话框。我们将深入分析每个组件的应用场景、功能特点以及最佳实践。

5.1 图表库数据可视化应用

5.1.1 集成第三方图表库

在数据驱动的Web应用中，数据可视化是关键组成部分。通过集成第三方图表库，我们可以将复杂的数据集转换成易于理解和互动的图表。

// 引入Chart.js库
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

通过上面的代码，我们演示了如何使用Chart.js库创建一个条形图。开发者可以通过调整 labels 和 datasets 中的数据来适应自己的需求。

5.1.2 数据可视化的设计原则

设计数据可视化时，有几个关键原则需要遵循：

• 简洁性 ：避免图表过于复杂，专注于传达最重要的信息。
• 准确性 ：确保数据与可视化之间的一致性。
• 可用性 ：图表应易于理解和操作。
• 可访问性 ：为视觉障碍用户提供替代文本和适当的颜色对比。

5.2 表格组件功能与数据处理

5.2.1 表格的排序、搜索和分页

Bootstrap表格组件提供了排序、搜索和分页的功能，这使得处理大量数据变得简单。以下是一个表格组件的示例代码：

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">姓名</th>
      <th scope="col">电子邮件</th>
      <th scope="col">城市</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格行数据 -->
  </tbody>
</table>

对于排序和搜索功能，我们需要通过JavaScript进行扩展，而分页则可以通过引入分页插件实现。

5.2.2 大数据量表格的性能优化

处理大数据量的表格时，性能可能会受到显著影响。以下是一些优化建议：

• 虚拟滚动 ：仅渲染可视区域内的行，减少DOM操作。
• 懒加载 ：按需加载数据，而不是一次加载全部。
• 缓存 ：存储常见查询的结果，避免重复计算。
• 分页与分批加载 ：限制初始加载的数据量，减少单次请求的响应时间。

// 使用Datatables插件实现分页和搜索
$(document).ready(function() {
  $('#example').DataTable({
    "pagingType": "first_last_numbers",
    "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "所有"] ]
  });
});

5.3 表单元素及验证应用

5.3.1 高级表单布局设计

创建复杂的表单布局时，开发者可以利用Bootstrap提供的栅格系统和表单控件。这包括使用行和列来布局表单字段，以及利用自定义输入组、复选框和单选按钮等。

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom01">姓</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="姓" value="Mark" required>
      <div class="valid-feedback">
        很好！
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationCustom02">名</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="名" value="Otto" required>
      <div class="valid-feedback">
        很好！
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">提交表单</button>
</form>

5.3.2 客户端与服务器端验证的实现

在客户端和服务器端实施验证是确保数据准确性和完整性的关键。客户端验证可以即时反馈给用户，而服务器端验证则是安全性的保障。

// 使用jQuery进行客户端表单验证
$('form').submit(function(e) {
  if (!this.checkValidity()) {
    e.preventDefault();
    e.stopPropagation();
  }
  $(this).addClass('was-validated');
});

服务器端验证则需要在服务器接收表单数据后进行验证检查，这通常涉及后端编程语言如PHP、Node.js等的使用。

通过本章的介绍，读者应该能够理解Bootstrap交互元素的集成和优化方法，并在实际项目中有效地应用这些技术和策略。接下来的章节，我们将探讨如何利用Nifty Admin模板创建功能丰富的Web应用。

本文还有配套的精品资源，点击获取

简介：《Nifty Admin后台管理模板详解》详细解析了Nifty Admin模板的特点和功能。Nifty Admin基于Bootstrap框架，具备响应式设计、丰富的UI组件、多种预设样式和易于定制的特性。主要功能包括多级导航、数据可视化图表库、高效的数据处理表格组件、图标集、通知与提示机制、表单元素和模态对话框。本指南提供使用Nifty Admin构建后台管理系统的具体步骤，从下载解压、环境准备、资源引入、自定义配置到内容添加和测试优化，帮助开发者快速搭建和优化后台系统。

本文还有配套的精品资源，点击获取