odoo--Qweb使用补充(二)

Qweb小白接触的并不多,在没接触odoo之前,几乎没有听说过(人菜的缘故),虽然学习理解起来不是很费劲,但少了必要的练习,实践和应用,想必没过几天就会忘掉(个人记性不太好的缘故).所以对照着其他平台的课程讲解,记录一下在odoo中的用法.本文代码为'Leo-Bian'老师的<<odoo开发教程之精通版>>课程,大家有兴趣的话,就去老师哪里学习,小白只是做一个自己的学习总结,以便日后自用.

上一章,我们建立了一个简单的Qweb界面,现在我们将其优化,添加一些新的东西.一般开发也是如此,循序渐进,先搭建最基础的东西,然后运行,无异常报错,再着手扩展.

我们先修改Qweb的显示代码(static/epidemic_tongji_page.xml):

<template>
    <t t-name="EpidemicTongjiPage">
        <div class="container" style="backround-color:#fff"><!--新添加了样式-->
            <t t-call="Graphmap" /><!--将下面定义的div内容放置此处(调用下半部分)-->
        </div>
    </t>
    <t t-name="Graphmap">
        <!--此处定义了两个区域,用于存放不同的数据界面,再T标签下,包含正常的HTML元素-->
        <div class="row">
            <div class="col-md-5" id="newsdata" style="height:400px;width:100%"></div>
            <div class="col-md-7" id="graphmap" style="height:400px;width:100%"></div>
        </div>
    </t>
</template>

现在,我们要给Qweb上呈现一些数据,与后台互动,(static/tongji_page.js),为了方便搭大家观看,就源代码复制过来了改动的地方小白会特殊标注:

odoo.define('Epidemic.TongjiPage',function (require){
  var AbstractAciton=require('web.AbstractAction');
  var core =require('web.core');

  
  var TongjiPage=AbstractAciton.extend({
      template:'EpidemicTongjiPage',
      

      //******当打开此界面时,进行调用此方法(此方法为内置方法)*******
      start:function (){
          var self=this;//首先我们要访问后台
          var data;

      /*我们将接口的数据拿出
      第一给参数:自定义配置的路由(http请求)
      .then(function(){....})我们将他返回的数据进行渲染(self._show_map_graph(data))
       这给_show_map_graph方法也是我们自己定义的

      */
          this._rpc({route:'/data/map',params:[]})
              .then(function (data){
                  self._show_map_graph(data);
        })
      },

       /*************自定义方法***************************
      一般写方法,先不写方法的主体,而是先将拿到的数据进行打印,确保无误后再进行方法的编写*/
      _show_map_graph:function (data){
        console.log(data);
        /*将数据塞入Qweb界面,先做打印数据,这个后面添加
        var $newdata=document.getElementById('newsdata');
        var node_news=new DOMParser().parseFromString(data,'text/html').body.children[0];
        $newdata.appendChild(node_news);*/
    }
  });

  //进行注册,第一个参数是动作
  core.action_registry.add('epidemic.tongji.page',TongjiPage);
})

做完这一步,我们就要先处理http请求,也就是route:'/data/map',params:[]} 这一段代码的请求

所有的http请求,我们都放在模块根目录下的(controllers)文件夹下面:

 在此文件夹下,我们需要创建两个文件:

 其中(__init__.py)的内容为,有基础的同学很容易理解,就不再赘述

from . import main

(main.py)内容:

# -*- coding: utf-8 -*-
#先引用我们需要的包
from odoo import http
from odoo.http import request#我们通过odoo提供的request,就可以拿到odoo的上下文环境
import akshare as ak


class EpidemicTongji(http.Controller):
    #我们通过http给我们提供的装饰器,来配置我们请求的路由
    @http.route('/data/map', auth='user',type='json')
    def data_tongji(self, **kw):
        news_target=self._data_new()#调用下面定义的方法
        return news_target#将之返回

    def _data_new(self):
        """获取新闻"""
        news = ak.covid_19_163(indicator='实时资讯新闻播报')  # 接口
        inxs = news.index#获取索引
        a_target="""<a href="{}">{}</a><br/>"""
        news_target=''
        for inx in inxs:  #对遍历索引
            col = news.loc[inx]  # 获得每一行数据
            #将拿到的数据拼接到我们之前定义好的a标签
            current_a=a_target.format(col[-1],col[0])
            news_target+=current_a#然后我们把数据加到汇总的字符串里
            if inx >=10 :break#只读取10条数据
        news_target="""<div>{}</div>""".format(news_target)#将我们的a标签集放入div里
        return news_target#将之返回

这样我们请求的路由,即数据的获取就完成了.当然还没算完,我们必须在:

# -*- coding: utf-8 -*-
from . import models
from . import controllers

将其import 该文件夹,才算正式引用加载.

还记得我们在(static/tongji_page.js/_show_map_graph)方法下注释的内容吗?我们现在就是将拿到的数据塞到Qweb界面里.具体如下

_show_map_graph:function (data){
        console.log(data);
        //我们拿到之前Qweb界面(static/epidemic_tongji_page.xml)div的id
        var $newdata=document.getElementById('newsdata');
        
        //我们要将拿到的数据转换成dom节点,不然类型不匹配,数据也无法塞进去
        var node_news=new DOMParser().parseFromString(data,'text/html').body.children[0];
        
        //将节点node_news,塞到指定的div(newdata)里
        $newdata.appendChild(node_news);
    }

这样,我们拿到的数据就能正常渲染了.

我们再做个总结吧:

1. 首先,我们增加了Qweb静态文件的界面(static/epidemic_tongji_page.xml)
2. 然后我们增加js,目的是将我们定义的Qweb模板加载进来,在注册表中注册(static/tongji_page.js)
3. 在js注册的过程中,我们需要映射,映射就是我们建立一个客户端的动作,然后客户端,其中客户端动作有一个tag属性,用他的值与我们的js映射(views/epidemic_tongji_page_action.xml)
4. 然后我们建立菜单项,用来跳转到我们刚才定义的客户端动作,这样动作和模板就关联起来了(views/menu_view.xml)
5. 初次运行(static/tongji_page.js),会执行start方法,然后我们rpc访问到我们所定义的路由的位置(controllers/main.py),我们把信息拼凑成字符串,然后返回js后,我们再进行渲染

大概就是这个样子,至此,Qweb到此为止,因为小白也不是很熟练,所以打算先去敲几遍熟悉一下流程什么的,大概做出了就是这个样子啦:

 我们先做出这样的界面即可,后续我们会将空白的地方填满,做出一个好看的Qweb显示报表.当然啦,温故而知新,小白再熟悉熟悉Qweb的流程和使用,再为大家开新坑吧!拜拜!

QAQ