odoo学习文档

Appearance

Odoo 前端开发 ​

概述 ​

Odoo 前端基于现代 Web 技术栈构建，掌握前端开发是成为全栈 Odoo 开发者的关键。

核心技术 ​

技术说明用途
OWLOdoo Web Library组件化框架，类似 React
QWebOdoo 模板引擎XML 模板渲染
XML Views视图定义Form/List/Kanban/Graph 等视图
JavaScript (ES6+)业务逻辑客户端交互与数据处理
SCSS样式预处理器主题与样式定制

学习路径 ​

1. OWL 组件基础 ​

  • 组件生命周期
  • 状态管理与响应式
  • Props 与事件通信

2. QWeb 模板语法 ​

  • 条件渲染 (t-if, t-elif, t-else)
  • 循环 (t-foreach)
  • 变量输出 (t-esc, t-raw)
  • 模板继承 (t-call)

3. 视图开发 ​

  • Form 视图自定义
  • List/Kanban 视图扩展
  • Search 视图过滤
  • Graph/Pivot 图表

4. 字段组件 (Field Components) ​

  • 自定义 Widget
  • 字段属性扩展
  • 关联字段处理

快速示例 ​

OWL 组件 ​

javascript
const { Component, useState, onWillStart } = owl;

class MyComponent extends Component {
    setup() {
        this.state = useState({ count: 0 });
    }

    increment() {
        this.state.count++;
    }
}

MyComponent.template = "my_module.MyComponent";

QWeb 模板 ​

xml
<templates xml:space="preserve">
    <t t-name="my_module.MyComponent" owl="1">
        <div class="my-component">
            <p>计数器: <t t-esc="state.count"/></p>
            <button t-on-click="increment">+1</button>
        </div>
    </t>
</templates>

相关资源 ​