在odoo开发里面,view都是使用qweb渲染的。那么对于前端的同学来说,他们希望是使用H5来做页面,那么odoo是如何实现的呢?笔者查看了一下odoo的源码,在addons里面的web模块发现了答案。
在addons/web/controllers/main.py里面,有一个渲染数据库模版页面的方法
<pre>
<code>```def render_template(self, **kw)
pass
return env.get_template('database_manager.html').render()
</pre>
然后又在views里面发现了database_manager.html页面
![web](http://upload-images.jianshu.io/upload_images/143568-b079b994f9c8c034.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- - -
经过一番捣鼓,总结出以下步骤:
<i><b>注意</b>:我是自定义的模块,继承project开发</i><ol>
<li>在views里面新增一个页面:
![list_project](http://upload-images.jianshu.io/upload_images/143568-469bf4cdf672f822.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
</li>
<li>在controller里面添加一个方法:list_project
调用get_template()方法,该方法传入一个静态资源的字符串参数,只要该模块被注册了,那么会自动找到该资源
后面链式调用render()方法,是渲染该页面,可以将需要传到页面的参数放到里面,该参数类型为字典类型
<pre>
<code>```@http.route('/tm/tm/listProject/', auth='public')
def list_project(self, **kw):
projects = http.request.env['project.project'].search([])
return env.get_template('list_project.html').render({'projects': projects})
</pre>```</code>
</li>
<li>定义env
这里需要注意的是jinja2.PackgeLoader()该方法,需要修改对应注册的模块名字,如我自定义的模块为odoo.addons.tm, 第二个参数是你静态资源存放的位置,这样就不需要在__manifest__.py清单文件添加data数据(没试过将*.html添加到data该做法)
<pre>
<code>```import jinja2
import json
import os
import sys
if hasattr(sys, 'frozen'):
# When running on compiled windows binary, we don't have access to package loader.
path = os.path.realpath(os.path.join(os.path.dirname(__file__), '..', 'views'))
loader = jinja2.FileSystemLoader(path)
else:
loader = jinja2.PackageLoader('odoo.addons.tm', "views")```</code>
</pre>
</li>
<li>编辑list_project.html
<pre>
<code>```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的项目</title>
</head>
<body>
{% if projects %}
{% for project in projects %}
<a href="//www.greatytc.com/tm/tm/detail/{{ project.id }}">{{project.name}}</a><br>
{{project.desc}}<br>
<img src="data:image/gif;base64,{{ project.pic }}"/>
{% endfor %}
{% endif %}
</body>
</html>```</code>
</pre>
</li>
<li>重启odoo服务器,update 模块, 在浏览器输出localhost:8069/tm/tm/listProject,效果见下图:
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/143568-d7e8f706e378bda7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
</li>
</ol>
GOOD LUCK!