在之前的文章中，我们介绍了准备阶段和组件结构的开始。在本教程中，我们将关注细节，编写那些对这个扩展至关重要的函数和文件，并让扩展开始工作，希望开始统一整个组件，并实现总体目标。

步骤 0：修复浓缩咖啡

今天你需要一杯浓咖啡。在本教程中，我们将介绍为在之前的教程中开始构建的 Lendr 组件系列所需的模型和视图的细节。如果你是刚刚加入这个系列，我建议阅读第一篇文章，然后阅读初始设置文章，再继续本教程。完成那些文章了吗？准备好继续了吗？请确保你已经准备好了，设置好系统，打开代码编辑器开始编写代码。别忘了你的浓缩咖啡。

步骤 1：模型文件细节与函数

现在我们已经创建了基础文件并开始编写模型，我们需要深入细节。首先要做的是整理我们将编写的模型和需要添加的函数。以下是对那些模型和函数的简要概述

所需的基本文件和函数

一旦我们定义了所需模型和功能的简要概述，我们就可以开始编写模型。在这个过程中牢记以下原则非常重要。我们的列表是灵活的，动态的。我们可以在需要时返回列表并添加或删除函数。在进步和评估事物时，不要害怕反复回顾这个列表。可能通过向特定模型添加一个函数来简化，或者可能需要重写一个更抽象的函数，然后将其添加到默认模型中。有一点是肯定的，我们不希望一遍又一遍地重写相同的代码，一旦我们发现我们正在走上这条道路，就到了考虑如何将代码抽象为通用模型的时候了。让我们开始编写我们的模型。

第二步：编写模型

这个Lendr组件由一些模型组成，但我们没有时间在这里全部写出来。我们将关注几个关键模型，以帮助展示组件的大部分功能，并将一些次要模型留给你在相关的GitHub仓库中自行查看。我们将从编写书籍模型开始。当我开始思考从哪里开始编码时，我决定从最具体的书籍模型开始，然后是图书馆模型，最后是个人资料模型。这样做的原因很简单。书籍是最小的单位，图书馆由书籍组成，而个人资料则包含图书馆。我相信这有助于你理解为什么我们从书籍模型开始，并从这里展开。我们将首先查看的模型将是默认模型。我们使用默认模型来存储我们希望在所有模型中都有的基本函数，因为我们编写面向对象的代码，我们不希望在每个模型中重复编写相同的函数。

模型文件

default.php

book.php

library.php

profile.php

第三步：整合额外资源

在编写这个组件的过程中，有些方面如果能整合第三方功能而不是重新发明轮子会更好。我们已经能够通过利用Joomla! 3中可用的Bootstrap类来简化我们的样式和布局。其他可用的实用资源包括Gravatar和Open Library。如果你不熟悉这些工具，你可以在它们各自的网站上了解更多信息。以下是对它们在Lendr中如何使用的简要说明。

Gravatar

Gravatar提供了一种简单的方法来检索与电子邮件地址关联的图片或头像。Lendr利用这一点以极其简单的方式显示个人资料图片。你将在下面的步骤中编写视图布局时看到实现它的代码。

Open Library

Open Library提供了一种获取特定于ISBN的书籍封面的大好方法。这使我们能够轻松地为每本书包含封面，而无需维护存储空间、图像上传等问题。Open Library有几个字段可以用来引用书籍封面并返回图像，Lendr利用的是下面找到的添加书籍表单中的ISBN。你将在下面的布局中找到代码。

第四步：开始编写视图布局和样式

我们首先要做的事情是回到组件的入口点。这是默认控制器，我们在根lendr.php文件中引用它。编写完我们的模型后，很明显我们需要更新用户开始的地方。我们在default.php控制器中更改了以下代码行

joomla_root/components/com_lendr/controllers/default.php

$layoutName   = $app->input->getWord('layout', 'list');

现在这将把用户发送到个人资料列表视图。这是我们将要查看的第一个视图。在我们的views文件夹中，有一个名为profile的文件夹，其结构如下

文件夹结构

profile
  tmpl
    _entry.php
    index.html
    list.php
    profile.php
  html.php
  index.html
  phtml.php

编写文件

我们首先查看html.php文件。这个文件是Joomla!默认引用的类型，也是当前的命名约定。我们已经在上一篇文章中看到了这些文件的基本结构。

单个文件

html.php

顺便说一句：由于我们已经调用了视图助手，现在值得回顾一下那个文件。

view.php

现在回到原始的html视图文件，我们可以看到传递给视图助手加载函数的参数。首先，我们告诉助手我们希望使用哪个视图文件夹，接下来是使用的布局，最后在这些情况下，我们返回页面格式类型。由于各种原因，我们创建了一个新文件，并将其命名为phtml.php，以表示部分html.php。我们之所以使用这个文件而不是标准的html视图，是因为html.php文件中当前正在调用各种附加功能。因为在大多数情况下，我们只想为部分模板提供一个基本的渲染函数，我们不希望有与标准html文件相关的开销。虽然还有其他处理此类问题的方法，但为视图使用不同的文件将有助于组织事物，并在必要时提供有关仅与部分模板相关的附加功能的易于查找的位置。

phtml.php

_entry.php

list.php

profile.php

剩余布局

我们已经审查了配置文件标签中的所有布局，但在过程中我们发现还有额外的视图在配置布局中被调用来渲染。为了本文的长度，我们不会列出每个视图及其中的代码。相反，您可以查看GitHub存储库中与每个视图相关的代码。

第5步：JavaScript和CSS

本文最后我们将查看与Lendr相关的JavaScript和CSS的起始部分。由于Lendr使用Bootstrap和jQuery，因此上一步中提到的添加新书时引用的模态窗口会自动包含，我们不需要编写任何特定的JavaScript函数来实现这一点。尽管如此，系统中的许多部分都需要编写特定的JavaScript代码，也将在某些时候需要特定的CSS样式。我们将添加以下辅助文件来解决样式和JavaScript问题。

joomla_root/components/com_lendr/helpers/style.php

<?php
// no direct access
defined('_JEXEC') or die('Restricted access');
 
class LendrHelpersStyle
{
  function load()
  {
    $document = JFactory::getDocument();
 
    //stylesheets
    $document->addStylesheet(JURI::base().'components/com_lendr/assets/css/style.css');
 
    //javascripts
    $document->addScript(JURI::base().'components/com_lendr/assets/js/lendr.js');
  }
}

在这里，我们将与我们的组件相关的任何CSS和JavaScript关联起来。这个辅助文件位于助手文件夹中，并且再次遵循组件的标准类命名约定。这个类根据在根lendr.php文件中定义的命名空间（加载器）自动包含。我们从同一根文件调用这个类，代码如下：

joomla_root/components/com_lendr/lendr.php

//Load styles and javascripts
LendrHelpersStyle::load();

现在我们已经包含了JavaScript和CSS文件，我们可以开始添加所需的函数。我们将添加的第一个函数与我们刚刚创建的用于添加图书的新模态框相关。

填写完添加图书表单后，用户会通过“添加”按钮提交表单。当点击此按钮时，将触发javascript动作addBook();

joomla_root/components/com_lendr/assets/js/lendr.js

//add a book
function addBook()
{
  var bookInfo = {};
  jQuery("#bookForm :input").each(function(idx,ele){
    bookInfo[jQuery(ele).attr('name')] = jQuery(ele).val();
  });
 
  jQuery.ajax({
    url:'index.php?option=com_lendr&controller=add&format=raw&tmpl=component',
    type:'POST',
    data:bookInfo,
    dataType:'JSON',
    success:function(data)
    {
      if ( data.success ){
        jQuery("#book-list").append(data.html);
        jQuery("#newBookModal").modal('hide');
      }else{
 
      }
    }
  });
}

在这个函数中，我们首先使用jQuery创建一个包含所有表单变量的bookInfo对象。一旦我们将这些变量放在一个表单中，我们开始创建一个ajax提交，再次使用jQuery。注意，我们指定了我们的URL详细信息，包括控制器、格式和tmpl（或模板类型）。这里有一些需要注意的地方。由于Lendr是Joomla! 3.x扩展，我们的控制器是单功能控制器，这意味着它们都只包含一个函数（执行）。格式用于只从控制器返回数据，而tmpl告诉Joomla!模板使用哪个文件（component.php或index.php）。然后我们描述了提交的类型，在这种情况下是POST。对于数据，我们分配了我们之前创建的bookInfo对象，对于类型，我们指定JSON。

控制器（在这种情况下为add.php）将处理表单提交，将其发布到正确的模型进行存储，然后返回结果。结果将是一个设置了success变量的JSON编码数组。以下是这个控制器：

joomla_root/components/com_lendr/controllers/add.php

<?php defined( '_JEXEC' ) or die( 'Restricted access' ); 
 
class LendrControllersAdd extends JControllerBase
{
  public function execute()
  {
 
    $return = array("success"=>false);
 
    $model = new LendrModelsBook();
    if ( $row = $model->store() )
    {
      $return['success'] = true;
      $return['msg'] = JText::_('COM_LENDR_BOOK_SAVE_SUCCESS');
 
      $bookView = LendrHelpersView::load('Book','_entry','phtml');
      $bookView->book = $row;
 
      ob_start();
      echo $bookView->render();
      $html = ob_get_contents();
      ob_clean();
 
      $return['html'] = $html;
    }else{
      $return['msg'] = JText::_('COM_LENDR_BOOK_SAVE_FAILURE');
    }
    echo json_encode($return);
  }
}

回到上面的JavaScript函数，我们现在可以检查AJAX POST的结果并解析响应。

if ( data.success )
  {
    jQuery("#book-list").append(data.html);
    jQuery("#newBookModal").modal('hide');
  }else{
    ...
  }

在这里，我们将渲染的HTML（我们在控制器中将其分配给html变量）添加到书籍列表表体中。我们还将成功后隐藏模态框。目前我们有一个空的“else”语句，稍后我们将用适当的消息填充它。这将是即将到来的系列文章中将要完成的部分。

结论

你是否已经成功完成？这篇文章比之前的文章更加详细和深入，但应该提供了一个相当全面的开发Joomla! 3商业级扩展的方法，使用既定的编码标准，并实现新的MVC功能以及Joomla! 3.x独有的其他功能。本系列教程的下一篇文章将继续填充模型和控制器、视图和JavaScript，以继续开发扩展。

我希望上面的内容对您创建自己的Joomla!组件有所帮助，如果您对上述任何内容有任何问题或评论，请与我们联系。上述文章的部分内容已被多次重写，以寻求最佳方法和最清晰的代码和布局格式。我意识到本步骤中的一些方面没有一步一步地讲解（例如，带有按钮的书籍_entry布局）。如果对此感兴趣并收到相关评论请求，我当然愿意提供有关这些项目的更小型的分步教程。我期待着本系列文章的下一篇文章，我们将继续添加组件的功能，并添加更多令人兴奋的功能！

访问完整的教程网站：http://lendr.websparkinc.com/

在下一篇文章中，我们将编写更多模型和控制器功能。