1. 创建页面菜单
2. 控制器创建页面路由,并返回模板
3. 制作模板和样式
4. 页面增加按钮动作,用于提交/获取(POST、GET)数据库模型数据
5. JS监听动作,并用ajax或rpc方式处理动作要提交/获取的数据(可以直接用模型方法处理也可以用控制器的路由方式处理)
6. 模型函数或路由处理直接返回结果,或js调用得到数据进行二次处理
7. 页面得到结果,结束
一、创建菜单
<record id="menu_home" model="website.menu">
<field name="name">HOME</field>
<field name="url">/web_home</field>
<field name="parent_id" ref="website.main_menu" />
<field name="sequence" type="int">0</field>
</record>
二、控制器创建路由,并响应模板
@http.route('/web_home', type='http', auth='public', website=True)
def index(self, **kw):
return http.request.render('web_home.web_home_template')
三、制作模板(和自定义样式)
<template id="web_home_template" name="MY HOME">
<t t-name="website.home">
<t t-call="website.layout">
<div class="container">
<p>首页的内容~</p>
</div>
</t>
</t>
</template>
(这里后访问网站可直接看到页面菜单并点击得到静态页面)
(接下是编写页面交互的过程)
四、页面添加动作
<template id="web_home_template" name="MY HOME">
<t t-name="website.home">
<t t-call="website.layout">
<div>
<p>你的首页内容~</p>
<a id="add_click">按钮1</a>
<br/>
<a id="add_click_connect">按钮2</a>
</div
</t>
</t>
</template>
五、JS监听动作,并用ajax或rpc方式处理动作要提交/获取的数据
新建js文件
odoo.define('web_home.home, function (require) {
"use strict";
require('web.dom_ready');
var Widget = require('web.Widget');
var ajax = require('web.ajax');
var CheckConnect = Widget.extend({
init: function () {
var self = this;
// 监听add_click_connect动作
$('a').on('click', '#add_click_connect', function (e) {
self.on_click(e);
});
},
// 处理点击动作,并用ajax 调用自定义路由
on_click: function (e) {
ajax.jsonRpc('/shop/logged').then(function (content) {
console.log('click ok');
});
}
});
new CheckLogin();
});
六、控制器路由处理,并返回结果
@http.route(['/shop/logged'], type='json', auth="public", methods=['POST'], website=True)
def login_ed(self, product_id, add_qty):
product = request.env['product.product'].sudo().browse(product_id).exists()
# return request.env['ir.ui.view'].render_template("requirement_shop_website.login_up")
small_image = product.image_small
return request.env['ir.ui.view'].render_template("requirement_shop_website.login_up", {
'product': product,
'pdt_add_qty': add_qty,
'small_image': small_image,
})
七、返回结果,结束
https://blog.csdn.net/qq_41551450/article/details/109715722