如何在dtcloud中构建前端页面，本文次要介绍在dtcloud中如何应用jquery和echarts等插件

dtcloud中内置了jquery和 Bootstrap的css款式，能够间接应用，并且dtcloud能够解析sass语法，不便大家编写款式，而echarts等文件须要独自加载引入

我的项目目录如下：

  1. echarts引入
  • 下载echarts.js文件，链接如下
    https://cdnjs.com/libraries/echarts
  • 将echarts.js放在模块中
  • 在__manifest__.py中加载该文件

  1. 应用QWeb和jquery构建页面
    QWeb是什么？
    是一个基于xml的模板引擎，用于生成HTML片段和页面，模板指令是写在xml标签中的以t-结尾的属性，比方t-if
    如果要让一个标签不被渲染，能够采纳t来包裹，这样会执行它外面的命令然而不产生任何输入,例如：

    <t t-name="pyecharts_template"></t>

    qweb罕用指令：

  2. t-name 用于指明模板的名称
  3. t-extend 用于指明该模板是继承自另外哪一个模板，前面会带父模板的名称，如：t-extend=“Login"
  4. t-jquery 一个jQuery的选择器，前面指明选择器的定义，如：t-jquery=".oe_logiin"
  5. t-operation 个别跟在t-jquery前面，指明选择器找到元素后执行的动作，其值有：append(追加)、replace(替换)
  6. t-if 用于指明元素在页面产生的条件，前面是带一个javascript的表达式，返回True或False
  7. t-att-### 用于指明一个元素的属性值，###是元素的属性名称，如：t-att-value=“javascript表达式”
  8. t-foreach 用于指明一个循环调用，前面个别带的是一个数组
  9. t-as 用于获得循环中的单个值，与t-foreach搭配应用，前面带的是一个变量名，能够循环中应用变量取值
  10. t-esc 用于一个文字输入
  11. t-call 用于调用另外模板，前面带一个模板的名称
  12. t-set 用于设定一个变量，前面带变量的名称，个别跟t-value搭配应用
  13. t-value 用于指定某个变量或元素的值

更多理解：https://blog.csdn.net/weixin_44565926/article/details/124851731

2.1 新建一个xml模板，用qweb申明一个模板，（t-name申明模板名称，等下要在js文件中援用此模板）能够在模板中编写html标签内容

2.2 新建一个load_pyecharts.js文件，其中contentTemplate绑定xml模板

2.3 js代码

start: function () { $(document).ready(function () {// js代码编写 }）}

2.4 在__manifest__.py的assets中加载上述js和xml文件及css/sass文件

  1. 增加菜单

  • home.xml文件

    <?xml version="1.0"?><dtcloud>  <data>      <record id="action_pyecharts" model="ir.actions.client">          <field name="name">Dashboard</field>          <field name="tag">load_pyecharts</field> // js文件（core.action_registry.add）注册的名称      </record>      <menuitem          id="menu_pyecharts"          name="首页"          font_icon="sidenav-icon feather icon-home"          action="action_pyecharts"          groups="base.group_user"          sequence="10" />  </data></dtcloud>
  • 在__manifest__.py的data中引入home.xml文件
  1. 重启服务、刷新该模块即可看到成果
作者：王步宇