This content originally appeared on DEV Community and was authored by canonical
Demo Video: A complete example of building a product list page with the Nop platform
This article demonstrates a powerful low-code development workflow, perfect for building admin backends. You can quickly create a fully functional backend, and the platform's built-in mechanisms automatically provide product-level customization capabilities without any extra design. We'll use the nop-app-mall sample e-commerce project as our example.
Project Source Code: nop-app-mall on Gitee
1. Designing the Data Model in Excel
The foundation of our application is a data model defined in an Excel spreadsheet. This file describes your database tables, fields, and their relationships.
In the Excel model, you can configure:
- Tags: Add annotations for fields and tables. For example,
seqmeans the field value is auto-generated by aSequenceGenerator, andvarmarks a field as a dynamic variable in tests. - Display: Control if a field is visible, editable, or updatable. The auto-generated frontend will respect these settings.
- Data Domain: Assign business semantics to a field. For instance, a field with
domain=createTimewill be automatically set to the current time when a new record is created. - Dictionary: Restrict field values to a predefined set of options. Dictionaries can be Java
enumclasses or defined in YAML files. - Table Associations: Define relationships between tables (e.g., one-to-many) using the association list.
You can also define dictionary tables directly in the Excel model, and the corresponding dict.yaml files will be generated automatically.
1.1. Reverse Engineering from an Existing Database
Demo Video: How to generate an Excel data model via reverse engineering
If you have an existing database, you can use the command-line tool to reverse-engineer its structure and generate an initial Excel model.
java -Dfile.encoding=UTF8 \
-jar nop-cli.jar \
reverse-db litemall \
-c=com.mysql.cj.jdbc.Driver \
--username=litemall \
--password=litemall123456 \
--jdbcUrl="jdbc:mysql://127.0.0.1:3306/litemall?useUnicode=true&characterEncoding=utf-8&useSSL=true&serverTimezone=UTC"
After generation, you can adjust settings like the Maven module name and package in the [Configuration] sheet of the Excel file.
1.2. Importing from PowerDesigner or PDManer
You can also generate an Excel model from visual design tools. For a PowerDesigner (.pdm) file:
java -Dfile.encoding=UTF8 -jar nop-cli.jar gen-orm-excel model/test.pdm
For an open-source PDManer (.pdma.json) file:
java -Dfile.encoding=UTF8 -jar nop-cli.jar gen-orm-excel model/test.pdma.json
These models are treated as different representations of the same underlying ORM model and can be seamlessly integrated at compile time using the platform's metaprogramming capabilities.
2. Generating the Initial Project Code
With the Excel model ready, generate the initial codebase:
java -jar nop-cli.jar gen model/app-mall.orm.xlsx -t=/nop/templates/orm
This command generates a full-stack project structure:
-
app-mall-api→ Public API and message definitions -
app-mall-dao→ Database entities and ORM layer -
app-mall-service→ GraphQL service implementations -
app-mall-web→ Frontend pages and view models -
app-mall-app→ Packaged application for testing -
deploy→ Database DDL scripts
The platform uses incremental code generation, meaning you can regenerate code from the model without overwriting your custom business logic.
3. Configuring Menus and Access Permissions
The generated code includes a default permissions file (_app-mall.action-auth.xml) that defines menu entries for the CRUD pages of each entity. You can easily customize this file to add new menus, remove default ones, or reorganize the navigation structure.
4. Implementing Backend Services
The platform automatically generates GraphQL services and metadata from the data model. Your job is to focus on the non-standard business logic.
4.1. Adding Entity Methods
Logic that depends only on an entity's own fields can be added as a method on the entity class itself.
class LitemallGoods extends _LitemallGoods {
/**
* Syncs the retail price to the lowest price among related products.
*/
public void syncRetailPrice() {
LitemallGoodsProduct minProduct = Underscore.min(getProducts(), LitemallGoodsProduct::getPrice);
BigDecimal retailPrice = minProduct == null ? new BigDecimal(Integer.MAX_VALUE) : minProduct.getPrice();
setRetailPrice(retailPrice);
}
}
4.2. Enhancing CRUD Logic
By subclassing CrudBizModel, you can override methods to inject custom logic before or after standard CRUD operations. For example, you can automatically sync the retail price before saving a product.
4.3. Custom Database Access
The platform generates a Mapper interface and corresponding SQL templates. You can write powerful object-based queries (EQL) or native SQL in these templates.
<!-- LitemallGoods.sql-lib.xml -->
<sql-lib>
<sqls>
<eql name="syncCartProduct" sqlMethod="execute">
<arg name="product"/>
<source>
update LitemallCart o
set o.price = ${product.price},
o.goodsName = ${product.goods.name}
where o.productId = ${product.id}
</source>
</eql>
</sqls>
</sql-lib>
4.4. Exposing GraphQL Endpoints
Annotate Java methods to expose them as part of your GraphQL API.
-
@BizQuery/@BizMutationfor top-level queries and mutations. -
@BizLoaderto add computed fields to your entities.
5. Building the Frontend
5.1. Customizing Forms and Tables
The frontend is described using a framework-agnostic View Model (view.xml). It uses a compact, business-oriented DSL to define forms, grids, and pages. You primarily describe the layout, and the controls are inferred from the data model.
<form id="edit" size="lg">
<layout>
========== intro[Product Intro] ================
goodsSn[Product SN] name[Product Name]
counterPrice[Market Price]
isNew[Is New] isHot[Is Hot]
!specifications
</layout>
<cells>
<cell id="specifications">
<gen-control>
<input-table addable="true" editable="true" removable="true"/>
</gen-control>
</cell>
</cells>
</form>
5.2. Visual Page Designer
The platform uses the Baidu AMIS framework to render JSON-based pages. A key feature is the visual designer. In development mode, you can:
- Edit JSON/YAML directly in an in-browser editor with live preview.
-
Use a drag-and-drop visual designer to modify the page. When you save, the system only stores your customizations (the delta) in a
page.yamlfile, leaving the base generation untouched.
6. Development and Debugging
The platform provides excellent tooling for a smooth development experience:
- Idea Plugin: Offers code completion, validation, and even a debugger for the internal DSLs.
- GraphQL UI: Built-in GraphQL playground to explore and test your API.
-
Detailed Logs: All compile-time models are dumped to a
_dumpdirectory for inspection.
7. Automated Testing
A model-driven testing framework simplifies writing integration tests. It uses a record-and-replay mechanism.
- Write a test that reads input and writes output.
- On the first run, it records the initial state and the results into a
casesdirectory. - On subsequent runs, it automatically sets up an in-memory database with the recorded data and verifies that the output matches the snapshot.
8. Delta Customization: The Key to Reusability
This is a core feature. All model files are stored in a virtual file system (src/resources/_vfs) that supports delta layering.
You can overlay customizations in a /_delta/default directory. For example, to customize a platform component, you simply create a file at /_delta/default/nop/path/to/component.xml. The platform will automatically use your version instead of the base one.
This allows you to:
- Fix platform bugs without modifying the base code.
- Create product variants for different clients by simply including different delta modules.
- Deeply customize any layer of the application in a structured, maintainable way.
9. Building a Native Executable
The application can be compiled into a native executable using GraalVM, resulting in faster startup times and a smaller footprint.
cd app-mall-app
mvn package -Pnative
This produces a standalone executable in the target directory.
Summary
The development workflow is built upon the theory of Reversible Computation and can be summarized as a series of model transformations, where each step can be customized and overridden:
Excel Data Model
→ ORM Model + ΔORM
→ GraphQL Metadata + ΔMeta
→ Backend Services (Java)
→ View Model + ΔView
→ Frontend Pages (JSON/AMIS) + ΔPage
The entire Delta-based software production line can be visualized as follows:
And expressed conceptually as:
XORM = Generator⟨XExcel⟩ + ΔXORM
XMeta = Generator⟨XORM⟩ + ΔXMeta
GraphQL = Builder⟨XMeta⟩ + BizModel
XView = Generator⟨XMeta⟩ + ΔXView
XPage = Generator⟨XView⟩ + ΔXPage
The Key Insight: Every step in this inference chain is optional. You can start from any point, or completely discard the generated results from previous steps. For example, you can:
- Manually create an
xviewmodel without anyxmetabacking - Write a
page.yamlfile directly using pure AMIS JSON components - Bypass all generators and implement services entirely in Java
This approach captures the "inexact derivations" we often observe in software development. While a data model strongly suggests what the frontend pages might look like, the relationship is not absolute. The platform lets you setup these derivations as a convenient starting point, but never locks you into them.
Grounded in Reversible Computation, this platform provides a standardized technical path to achieve reuse based on dynamic similarity through:
- Embedded Metaprogramming: Setting up inference pipelines between any structures
- Pipeline Decomposition: Breaking complex transformations into manageable steps: A → B → C
- Delta Customization: Enhancing each step: A →
_B→ B →_C→ C - Information Passing: Allowing extended information to flow through the pipeline when needed
In daily development, this means you get the benefits of code generation and standardization without sacrificing the flexibility to handle unique business requirements.
This content originally appeared on DEV Community and was authored by canonical
canonical | Sciencx (2025-10-23T14:02:35+00:00) From Excel to a Full-Stack Application: A Low-Code Development Workflow. Retrieved from https://www.scien.cx/2025/10/23/from-excel-to-a-full-stack-application-a-low-code-development-workflow/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.