单页Web应用（single page web application，SPA）： 
SPA 是一种特殊的 Web 应用，是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的。
它将所有的活动局限于一个 Web 页面中，仅在该 Web 页面初始化时加载相应的 HTML 、 JavaScript 、 CSS 。
一旦页面加载完成， SPA 不会因为用户的操作而进行页面的重新加载或跳转，
而是利用 JavaScript 动态的变换 HTML（采用的是 div 切换显示和隐藏），从而实现UI与用户的交互。在 SPA 应用中，
应用加载之后就不会再有整页刷新。相反，展示逻辑预先加载，并有赖于内容Region（区域）中的视图切换来展示内容。

odoo前端应用：Odoo 目前包含三个单页应用：后台应用，工时单应用，POS 应用单页Web应用

 1、菜单响应在/web/static/src/s/web_client.js 中定义：
    1.1、调用 data_manager.load_action() 通过 rpc 取得动作；
    1.2、action_manager.do_action() 执行动作
    案例：视图跳转/切换
         语法：     其中 action 是一个用于描述要跳转到的视图的信息字典     
              var web_client = require(‘web.web_client‘);
              web_client.action_manager.do_action(action, ,{clear_breadcrumbs: true});
              
                  
        clear_breadcrumbs: true 用于控制是否清除面包屑导航当前层
        
    案例代码：通过action        
        var attendance_state =self.login_employee.attendance_state;
            var message = ‘‘
            var action_client = {
                type: "ir.actions.client",
                name: _t(‘Dashboard ‘),
                tag: ‘hr_dashboard‘,
            };
            self.do_action(action_client, {clear_breadcrumbs: true});
            if (attendance_state == ‘checked_in‘){
                message = ‘Checked Out‘
            }
            else if (attendance_state == ‘checked_out‘){
                message = ‘Checked In‘
            }
            self.trigger_up(‘show_effect‘, {
                message: _t("Successfully " + message),
                type: ‘rainbow_man‘
            });
            
            
2、后台模型
   语法：var Model = require(‘web.Model‘);
         new Model(‘res.users‘‘).call(‘do_manual_launch‘,, [[]]).then(function(result){
             web_client.action_manager.do_action(action);
         })； 
    调用了后端 res.users 模型的 do_manual_launch 方法
    
    
    实际案例：odoo14里面用了_rpc来实现
        fetch_data: function() {
        var self = this;
        var def0 =  self._rpc({
                model: ‘hr.employee‘,
                method: ‘check_user_group‘
        }).then(function(result) {
            if (result == true){
                self.is_manager = true;
            }
            else{
                self.is_manager = false;
            }
        });
        var def1 =  this._rpc({
                model: ‘hr.employee‘,
                method: ‘get_user_employee_details‘
        }).then(function(result) {
            self.login_employee =  result[0];
        });
        var def2 = self._rpc({
            model: "hr.employee",
            method: "get_upcoming",
        })
        .then(function (res) {
            self.employee_birthday = res[‘birthday‘];
            self.upcoming_events = res[‘event‘];
            self.announcements = res[‘announcement‘];
        });
        return $.when(def0, def1, def2);
    },

3、客户端方法
    // 获取 web_client 对象
    var web_client = require(‘eb.web_client‘);
    
    //刷新视图页面（可更新按钮的显示状态）
    web_client.do_show();
    
    // 刷新页面
    web_client.do_reload();
    // 通知提示（页面右上角）第三个参数表示通知是否固定在页面不消失，默认 false
    web_client.do_warn(‘标题内容‘, ‘提示内容‘, false);
    web_client.do_notify(‘标题内容‘, ‘提示内容‘, false);
    
    // 设置窗口标题
    web_client.set_title("窗口标题");
    
    // 执行窗口动作以切换视图
    web_client.do_action(action);
    
    // 获取当前状态
    web_client._current_state;
    
    //获取 domain
    web_client.action_manager.get_inner_action().widget.searchview.build_search_data()
    
    
    
4、Odoo act_window 的 flags 参数
   通过 Odoo act_window 的 flags 可以实现一些个性化的视图控制。
    ‘flags‘: { //是否显示 sidebar 区域(主要为 action 按钮)
         ‘sidebar‘: False,
         ‘pager‘: False, //是否显示分页组件
         ‘initial_mode‘: ‘edit‘, // 进入时的默认视图模式
         ‘form‘: { //表单视图的设置
         ‘action_buttons‘: False,
         ‘initial_mode‘: ‘edit‘,
         ‘options‘: {‘mode‘: ‘view‘},
         },
         ‘tree‘: { //列表视图的设置
         ‘action_buttons‘: False
         }
    }
    使用示例：
    <field name="context">{ "flags": {"disable_filters": False} }</field>
    其他控制项
    headless
    views_switcher 5
    display_title
    search_view
    auto_search
    hidden 隐藏控制
    disable_filters - 禁用搜索栏筛选
    disable_groupby - 禁用搜索栏分组
    disable_favorites - 禁用搜索栏收藏
    disable_custom_filters 禁用自定义过滤

5、

_onFilePDF: function (ev) {
  var self = this;
  var fieldId = self._getId(ev.currentTarget);
  self.$el.append(`
  <div class="zPDF_iframe">
    <div class="pdc_close btn btn-primary">关闭</div>&nbsp;&nbsp;&nbsp;
    <div class="btn btn-primary"><a href="/web/content/${fieldId}?download=true" style="text-decoration: none; color: white">下载</a></div><br>
    <iframe  class="zPDF" scrolling="yes" id="main" name="main" frameborder="0"  style="min-height:600px;width:1000px;height:100%;" src="/web/content/${fieldId}"></iframe>
  </div>
  `)
}