Oejia 技术栈
首页
应用市场
方案
OE学院
分享
关于
编辑器
登录
Odoo 开发前台页面和模板引擎的使用
admin
on 2017-02-10
### 方式一:使用Qweb #### 带站点基础框的页面 **后台代码** ``` @http.route('/trial', auth='public', type='http', website=True) def trial(self, **kw): # ... values = { 'plan': trial_plan, } return request.render('saas_portal.try_trial', values) ``` **模板** ``` <template id="try_trial"> <t t-call="website.layout"> <t t-set="title">Try trial</t> <div class="oe_structure"> <div class="container" style="text-align: center"> <h2>开通: <t t-esc="plan.name"/></h2> <p>实例正在创建中...</p> <p>这可能需要几分钟,请稍后在 <a href="/my/home">我的账号</a> 页面 SaaS 栏查看创建的结果</p> </div> </div> </t> <script> $(document).ready(function() { $('div.oe_structure div.container').css('height', $(window).innerHeight()); }); </script> </template> ``` - 可以看到模板首先使用了`website.layout` 这样页面内容就放置在一个公共的站点基础框内 - Qweb模板引擎使用xml写法,标签大多以 t 开头 - Qweb模板定义的xml文件要加入到模块定义文件的data组下,随模块安装后保存到数据库的视图表ir_ui_view,渲染页面时从数据库读取 #### 完全自定义的页面 **后台代码** ``` @http.route('/payment/order_status_show', type='http', auth='public', website=True, methods=['GET'], csrf=False) def order_status_show(self, **params): # ... values = { 'transaction': tx, 'order': order[0].id } return request.render("payment.order_status_show", values) ``` **模板** ``` <template id="order_status_show" name="orderstatus" page="True"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta charset="utf-8"/> <meta http-equiv="pragma" content="no-cache"/> <meta http-equiv="cache-control" content="no-cache"/> <meta http-equiv="expires" content="0"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/> <title> 订单确认 </title> <link rel="shortcut icon" href="/web/static/src/img/favicon.ico" type="image/x-icon"/> <link rel="stylesheet" type="text/css" href="/payment_weixin/static/src/css/qrcode_pay.css"/> </head> <body> <!-- p-header --> <div class="p-header"> <div class="w"> <div id="logo"> <a href="/"><img width="120" height="40" src="/logo.png" alt="Logo" title="点击返回首页"/></a> 订单确认 </div> </div> </div> <!-- p-header end --> <div class="main"> <div class="w"> <!-- order 订单信息 --> <!-- order 订单信息 --> <div class="order"> <div class="o-left"> <h3 class="o-title"> <t t-esc="'恭喜,您的订单创建成功! 订单号:'+ transaction.reference" /> </h3> <p class="o-tips"> 谢谢光顾,期盼您的 <span class="font-red"> 下次 </span> 光临。<a t-attf-href="/my/orders/{{ order }}">查看</a> 订单详细 </p> </div> <div class="o-right"> <t t-if="transaction.state == 'done'"> <div class="o-price"> <em> 已付金额 </em> <strong> <t t-esc="transaction.amount" /> </strong> <em> 元 </em> </div> </t> </div> <div class="clr"> </div> </div> <!-- order 订单信息 end --> <!-- order 订单信息 end --> <!-- payment 支付方式选择 --> <div class="payment"> <!-- 微信支付 --> <div class="pay-weixin"> <div class="p-w-hd"> 微信关注我们 </div> <div class="p-w-bd" style="position:relative"> <div class="p-w-box"> <div class="pw-box-hd"> <img src="http://mall.ziranyidu.com/wx.png" width="298"/> </div> <div class="pw-box-ft"> <p> 请使用微信扫一扫 </p> <p> 扫描二维码关注我们 </p> </div> </div> <div class="p-w-sidebar"> </div> </div> </div> <!-- 微信支付 end --> </div> <!-- payment 支付方式选择 end --> </div> </div> </body> </html> </template> ``` ### 方式二:使用Jinja2 ####以odoo数据库创建页面为例 **后台代码** ``` import jinja2 loader = jinja2.PackageLoader('odoo.addons.web', "views") env = jinja2.Environment(loader=loader, autoescape=True) class Database(http.Controller): def _render_template(self, **d): d.setdefault('manage',True) d['insecure'] = odoo.tools.config['admin_passwd'] == 'admin' d['list_db'] = odoo.tools.config['list_db'] d['langs'] = odoo.service.db.exp_list_lang() d['countries'] = odoo.service.db.exp_list_countries() # databases list d['databases'] = [] try: d['databases'] = http.db_list() except odoo.exceptions.AccessDenied: monodb = db_monodb() if monodb: d['databases'] = [monodb] return env.get_template("database_manager.html").render(d) @http.route('/web/database/manager', type='http', auth="none") def manager(self, **kw): return self._render_template( ``` 关键代码`return env.get_template("database_manager.html").render(d)` 注意这里的 env 和 request.env 没什么关系,不能搞混了 上面的`jinja2.PackageLoader('odoo.addons.web', "views")`设置模块引擎从 web 模块的 views 目录下寻找模板文件 **模板(节选部分)** ``` <div class="form-group"> <div class="row"> <div class="col-md-12"> <label for="name" class="control-label">Database Name</label> <input id="name" type="text" name="name" class="form-control" required="required" autocomplete="off"/> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col-md-12"> <label for="login" class="control-label">Email</label> <input id="login" type="text" name="login" class="form-control" required="required" autocomplete="off"/> </div> </div> </div> <div class="form-group has-feedback"> <label for="password" class="control-label">Password</label> <input id="password" type="password" name="password" class="form-control" required="required" autocomplete="off"/> <span class="fa fa-eye o_little_eye form-control-feedback" aria-hidden="true" style="cursor: pointer; pointer-events: auto"></span> </div> <div class="form-group"> <div class="row"> <div class="col-md-6"> <label for="lang" class="control-label">Language</label> <select id="lang" name="lang" class="form-control" required="required" autocomplete="off"> {% for lang in langs %} <option {% if lang[0] == "zh_CN" %}selected="selected" {% endif %}value="{{ lang[0] }}">{{ lang[1] }}</option> {% endfor %} </select> </div> <div class="col-md-6"> <label for="country" class="control-label">Country</label> <select id="country" name="country_code" class="form-control" autocomplete="off"> <option value=""></option> {% for country in countries %} <option {% if country[0] == "cn" %}selected="selected" {% endif %}value="{{ country[0] }}">{{ country[1] }}</option> {% endfor %} </select> </div> </div> </div> <div class="form-group"> <div class="checkbox"> <label> <input name="demo" type="checkbox" class="pull-right" value="1"> <span>Load demonstration data</span> <span class="text-muted"> (Check this box to evaluate Odoo)</span> </label> </div> </div> ``` 使用Jinja2引擎的模板文件直接在文件系统里,渲染页面时不需要读数据库,相对快一些,但管理不如Qweb可以直接在线编辑那样方便
Information
Odoo 开发前台页面和模板引擎的使用
http://www.oejia.net/article/afc16afa41266923e53a538a03304649
http://www.oejia.net/raw/afc16afa41266923e53a538a03304649
admin
on 2017-02-10
Category
Odoo
Related
2016-11-29 :
DjangoX 模型管理功能配置介绍
2022-02-09 :
商城——多商户版
2019-03-25 :
Odoo 基于企业微信实现的自建应用审批流功能的配置及使用说明
2018-03-23 :
Celery 常用命令
2016-09-21 :
如何在 Django 中使用 Tornado 的 WebSocket 并做请求的用户验证识别
2022-12-29 :
在 Odoo 中使用 WebSocket 并兼容Odoo的Session会话识别
2016-03-21 :
YouMd 的 config.py 各配置项说明
2016-12-16 :
Odoo 的静态资源优化方案
2020-04-20 :
OE客服系统之工单&客诉模块
2019-06-12 :
Odoo 地图位置改为百度地图
官方订阅号
关注订阅实时了解我们更多分享
分类
(20)
Django (3)
DjangoX (13)
JS (2)
Nginx (1)
Odoo (134)
Python (1)
YouMd (3)
公告说明 (2)
前端 (2)
后端HTTP (7)
异常处理 (1)
桌面UI (1)
移动开发 (4)
About This Entry
关于 Odoo 的模板引擎 Qweb
Odoo 开发中 wizard 向导页的使用方法
About This Blog
main index
to find recently
archives
to find all
标签
微信模块发布记录
微信模块
小程序商城
Web
Http
客服系统
审批OA
OE商城
HTML5
Markdown
DjangoX
oeshop
Excel
PyQT
md
Python
解析
YouPBX
服系统
示例
markdown
最近发布
Odoo 微信小程序商城模块 Oejia_weshop v0.1.1 发布
Oejia_wx v0.4.0 发布,支持 Odoo10 的微信模块
DjangoX App 配置和菜单组设置介绍
Odoo 微信小程序商城模块 Oejia_weshop 常见问题处理
微信模块 Oejia_wx v0.5.8 发布,多会话客服消息支持及素材图文方面增强
Odoo 低版本升级到 Odoo15 的处理集锦
Odoo商城模块 Oejia_weshop v1.0.1 发布,统一强大的后台多种客户端支持
钉钉消息通知及审批功能的使用说明
新版开启2016年新篇章
Friend Links
Oejia技术梦博客分享
YouMd,爱上MarkDown
Mole轻量级wsgi架子