使用这款基于 Java 的框架创建在线商店

图片来源：

Opensource.com

您是否想要在线销售产品或服务，但找不到合适的软件，或者认为定制成本太高？ Scipio ERP 可能正是您所需要的。

Scipio ERP 是一个基于 Java 的开源电子商务框架，带有大量应用程序和功能。该项目于 2014 年从 Apache OFBiz 分叉而来，明确专注于更好的定制和更现代化的外观。电子商务组件非常广泛，可在多店铺设置、国际化以及各种产品配置中工作，并且还与现代 HTML 框架兼容。该软件还为许多其他业务用例提供标准应用程序，例如会计、仓库管理或销售队伍自动化。这一切都高度标准化，因此易于定制，如果您不仅仅想要一个虚拟购物车，这将非常棒。

该系统也很容易跟上现代 Web 标准。所有屏幕都使用系统的“模板工具包”构建，这是一个易于学习的宏集，可将 HTML 与所有应用程序分离。因此，每个应用程序都已经核心标准化。听起来很confusing？其实不然——它看起来很像 HTML，但您编写的代码要少得多。

初始设置

在您开始之前，请确保您已安装 Java 1.8（或更高版本）SDK 和 Git 客户端。明白了吗？太棒了！接下来，从 GitHub 检出 master 分支

git clone https://github.com/ilscipio/scipio-erp.git
cd scipio-erp
git checkout master

要设置系统，只需运行 ./install.sh 并从命令行选择任一选项。在整个开发过程中，最好坚持使用开发安装（选项 1），这也将安装一系列演示数据。对于专业安装，您可以修改初始配置数据（“种子数据”），以便它自动为您设置公司和目录数据。默认情况下，系统将使用内部数据库运行，但它也可以配置为使用各种关系数据库，例如 PostgreSQL 和 MariaDB。

图片来源：

^{按照设置向导完成您的初始配置，}

使用 ./start.sh 启动系统，然后访问 https://:8443/setup/ 完成配置。如果您安装了演示数据，则可以使用用户名 admin 和密码 scipio 登录。在设置向导期间，您可以设置公司资料、会计、仓库、产品目录、在线商店和附加用户资料。暂时保留产品商店配置屏幕上的网站条目。该系统允许您运行具有不同底层代码的多个网上商店；除非您想这样做，否则最好坚持使用默认设置。

恭喜您，您刚刚安装了 Scipio ERP！试用屏幕一两分钟，感受一下功能。

快捷方式

在您开始定制之前，这里有一些方便的命令可以帮助您。

创建商店覆盖：./ant create-component-shop-override
创建新组件：./ant create-component
创建新主题组件：./ant create-theme
创建管理员用户：./ant create-admin-user-login
各种其他实用程序功能：./ant -p
安装和更新插件的实用程序：./git-addons help

另外，请记住以下位置

将 Scipio 作为服务运行的脚本：/tools/scripts/
日志输出目录：/runtime/logs
管理应用程序：https://:8443/admin/
电子商务应用程序：https://:8443/shop/

最后，Scipio ERP 在以下五个主要目录中组织所有代码

框架：与框架相关的源文件、应用程序服务器、通用屏幕和配置
应用程序：核心应用程序
插件：第三方扩展
主题：修改外观和感觉
热部署：您自己的组件

除了少数配置外，您将在 hot-deploy 和 themes 目录中工作。

网店定制

要真正使系统成为您自己的系统，请开始考虑组件。组件是一种模块化方法，用于覆盖、扩展和添加到系统。将组件视为自包含的 Web 模块，用于捕获有关数据库（实体）、函数（服务）、屏幕（视图）、事件和操作以及 Web 应用程序的信息。借助组件，您可以添加自己的代码，同时保持与原始源的兼容性。

运行 ./ant create-component-shop-override 并按照步骤创建您的网店组件。将在 hot-deploy 目录中创建一个新目录，该目录扩展并覆盖原始的电子商务应用程序。

图片来源：

^{典型的组件目录结构。}

您的组件将具有以下目录结构

config：配置
data：种子数据
entitydef：数据库表定义
script：Groovy 脚本位置
servicedef：服务定义
src：Java 类
webapp：您的 Web 应用程序
widget：屏幕定义

此外，ivy.xml 文件允许您将 Maven 库添加到构建过程中，而 ofbiz-component.xml 文件定义了整体组件和 Web 应用程序结构。除了显而易见的之外，您还会在 Web 应用程序的 WEB-INF 目录中找到 controller.xml 文件。这允许您定义请求条目并将它们连接到事件和屏幕。对于屏幕，您还可以使用内置的 CMS 功能，但首先要坚持核心机制。在引入更改之前，请先熟悉 /applications/shop/。

添加自定义屏幕

还记得模板工具包吗？您会在每个屏幕上找到它。将其视为一组易于学习的宏，用于构建所有内容。这是一个示例

<@section title="Title">
    <@heading id="slider">Slider</@heading>
    <@row>
        <@cell columns=6>
            <@slider id="" class="" controls=true indicator=true>
                <@slide link="#" image="https://placehold.it/800x300">Just some content…</@slide>
                <@slide title="This is a title" link="#" image="https://placehold.it/800x300"></@slide>
            </@slider>
        </@cell>
        <@cell columns=6>Second column</@cell>
    </@row>
</@section>

不太难，对吧？同时，主题包含 HTML 定义和样式。这会将权力移交给您的前端开发人员，他们可以定义每个宏的输出，并在其他方面坚持使用自己的构建工具进行开发。

让我们快速尝试一下。首先，在您自己的网店上定义一个请求。您将为此修改代码。内置 CMS 也可在 https://:8443/cms/ 上使用，它允许您以更有效的方式创建新模板和屏幕。它与模板工具包完全兼容，并附带可以根据您的偏好采用的示例模板。但是，由于我们正在尝试了解此处的系统，因此让我们首先采用更复杂的方式。

打开您商店的 webapp 目录中的 controller.xml 文件。控制器跟踪请求事件并相应地执行操作。以下代码将在 /shop/test 下创建一个新请求

<!-- Request Mappings -->
<request-map uri="test">
     <security https="true" auth="false"/>
      <response name="success" type="view" value="test"/>
</request-map>

您可以定义多个响应，如果需要，您可以在请求中使用事件或服务调用来确定您可能想要使用的响应。我选择了“view”类型的响应。“view”是呈现的响应；其他类型是请求重定向、转发等。系统带有各种渲染器，允许您稍后确定输出；为此，请添加以下内容

<!-- View Mappings -->
<view-map name="test" type="screen" page="component://mycomponent/widget/CommonScreens.xml#test"/>

将 my-component 替换为您自己的组件名称。然后，您可以通过在 widget/CommonScreens.xml 文件中的标签内添加以下内容来定义您的第一个屏幕

<screen name="test">
        <section>
            <actions>
            </actions>
            <widgets>
                <decorator-screen name="CommonShopAppDecorator" location="component://shop/widget/CommonScreens.xml">
                    <decorator-section name="body">
                        <platform-specific><html><html-template location="component://mycomponent/webapp/mycomponent/test/test.ftl"/></html></platform-specific>
                    </decorator-section>
                </decorator-screen>
            </widgets>
        </section>
    </screen>

屏幕实际上非常模块化，由多个元素（小部件、操作和装饰器）组成。为了简单起见，暂时保持原样，并通过添加您的第一个模板工具包文件来完成新的网页。为此，创建一个新的 webapp/mycomponent/test/test.ftl 文件并添加以下内容

<@alert type="info">Success!</@alert>

图片来源：

^{自定义屏幕。}

打开 https://:8443/shop/control/test/ 并惊叹于您自己的成就。

自定义主题

通过创建您自己的主题来修改商店的外观和感觉。所有主题都可以在 themes 文件夹中作为组件找到。运行 ./ant create-theme 添加您自己的主题。

图片来源：

^{典型的主题组件布局。}

以下是最重要的目录和文件的列表

主题配置：data/*ThemeData.xml
主题特定的包装 HTML：includes/*.ftl
模板工具包 HTML 定义：includes/themeTemplate.ftl
CSS 类定义：includes/themeStyles.ftl
CSS 框架：webapp/theme-title/*

快速浏览一下工具包中的 Metro 主题；它使用 Foundation CSS 框架并利用了以上所有内容。之后，在您新建的 webapp/theme-title 目录中设置您自己的主题并开始开发。Foundation-shop 主题是一个非常简单的特定于商店的主题实现，您可以将其用作您自己工作的基础。

瞧！您已经设置了自己的在线商店，并准备好进行定制了！