前后端整合---js对象方法---异步组件

最新推荐文章于 2023-02-08 21:44:52 发布

web_longboss

最新推荐文章于 2023-02-08 21:44:52 发布

阅读量243

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/web_longboss/article/details/86559129

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏


a={b:function(){console.log("b")}}
{b: ƒ}
a.b
ƒ (){console.log("b")}
a.b()
b
a={b(){console.log("b")}}
{b: ƒ}
a.b
ƒ b(){console.log("b")}
a.b()
b

// 所以
a={
	b:function(){
		console.log("b")
	}
}
a={
	b(){
		console.log("b")
	}
}
等价

下面?个vue异步加载组件

export const formatRoutes = (routes)=> {
  let fmRoutes = [];
  routes.forEach(router=> {
    let {
      path,
      component,
      name,
      meta,
      iconCls,
      children
    } = router;
    if (children && children instanceof Array) {
      children = formatRoutes(children);
    }
    console.log(component)
    let fmRouter = {
      path: path,
      component: function component(resolve){
        if (component.startsWith("Home")) {
          require(['../components/' + component + '.vue'], resolve)
        } else if (component.startsWith("Emp")) {
          require(['../components/emp/' + component + '.vue'], resolve)
        } else if (component.startsWith("Per")) {
          require(['../components/personnel/' + component + '.vue'], resolve)
        } else if (component.startsWith("Sal")) {
          require(['../components/salary/' + component + '.vue'], resolve)
        } else if (component.startsWith("Sta")) {
          require(['../components/statistics/' + component + '.vue'], resolve)
        } else if (component.startsWith("Sys")) {
          require(['../components/system/' + component + '.vue'], resolve)
        }
      },
      name: name,
      iconCls: iconCls,
      meta: meta,
      children: children
    };
    console.log(fmRouter)
    fmRoutes.push(fmRouter);
  })
  return fmRoutes;
}

在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。例如：

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // 向 `resolve` 回调传递组件定义
    resolve({
      template: '<div>I am async!</div>'
    })
  }, 1000)
})

如你所见，这个工厂函数会收到一个 resolve 回调，这个回调函数会在你从服务器得到组件定义的时候被调用。你也可以调用 reject(reason) 来表示加载失败。这里的 setTimeout 是为了演示用的，如何获取组件取决于你自己。一个推荐的做法是将异步组件和 webpack 的 code-splitting 功能一起配合使用：

Vue.component('async-webpack-example', function (resolve) {
  // 这个特殊的 `require` 语法将会告诉 webpack
  // 自动将你的构建代码切割成多个包，这些包
  // 会通过 Ajax 请求加载
  require(['./my-async-component'], resolve)
})

你也可以在工厂函数中返回一个 Promise，所以把 webpack 2 和 ES2015 语法加在一起，我们可以写成这样：

Vue.component(
  'async-webpack-example',
  // 这个 `import` 函数会返回一个 `Promise` 对象。
  () => import('./my-async-component')
)

当使用局部注册的时候，你也可以直接提供一个返回 Promise 的函数：

new Vue({
  // ...
  components: {
    'my-component': () => import('./my-async-component')
  }
})

前端菜单数据库管理

<el-aside width="180px" class="home-aside">
  <div style="display: flex;justify-content: flex-start;width: 180px;text-align: left;">
     <el-menu style="background: #ececec;width: 180px;" unique-opened router>
        <template v-for="(item,index) in this.routes" v-if="!item.hidden">
          <el-submenu :key="index" :index="index+''">
            <template slot="title">
              <i :class="item.iconCls" style="color: #20a0ff;width: 14px;"></i>
              <span slot="title">{{item.name}}</span>
            </template>
            <el-menu-item width="180px"
                          style="padding-left: 30px;padding-right:0px;margin-left: 0px;width: 170px;text-align: left"
                          v-for="child in item.children"
                          :index="child.path"
                          :key="child.path">{{child.name}}
            </el-menu-item>
          </el-submenu>
        </template>
      </el-menu>
    </div>
  </el-aside>

export const initMenu = (router, store)=> {
  if (store.state.routes.length > 0) {
    return;
  }
  getRequest("/config/sysmenu").then(resp=> {
    if (resp && resp.status == 200) {
      var fmtRoutes = formatRoutes(resp.data);
      // console.log(fmtRoutes)
      router.addRoutes(fmtRoutes);
      store.commit('initMenu', fmtRoutes);
      store.dispatch('connect');
    }
  })
}
export const formatRoutes = (routes)=> {
  let fmRoutes = [];
  routes.forEach(router=> {
    let {
      path,
      component,
      name,
      meta,
      iconCls,
      children
    } = router;
    if (children && children instanceof Array) {
      children = formatRoutes(children);
    }
    console.log(component)
    let fmRouter = {
      path: path,
      component: function component(resolve){
        if (component.startsWith("Home")) {
          require(['../components/' + component + '.vue'], resolve)
        } else if (component.startsWith("Emp")) {
          require(['../components/emp/' + component + '.vue'], resolve)
        } else if (component.startsWith("Per")) {
          require(['../components/personnel/' + component + '.vue'], resolve)
        } else if (component.startsWith("Sal")) {
          require(['../components/salary/' + component + '.vue'], resolve)
        } else if (component.startsWith("Sta")) {
          require(['../components/statistics/' + component + '.vue'], resolve)
        } else if (component.startsWith("Sys")) {
          require(['../components/system/' + component + '.vue'], resolve)
        }
      },
      name: name,
      iconCls: iconCls,
      meta: meta,
      children: children
    };
    console.log(fmRouter)
    fmRoutes.push(fmRouter);
  })
  return fmRoutes;
}

后端根据账号角色菜单关联表关系生成菜单
[
  {
    "id": 2,
    "path": "/home",
    "component": "Home",
    "name": "员工资料",
    "iconCls": "fa fa-user-circle-o",
    "children": [
      {
        "id": null,
        "path": "/emp/basic",
        "component": "EmpBasic",
        "name": "基本资料",
        "iconCls": null,
        "children": [
          
        ],
        "meta": {
          "keepAlive": false,
          "requireAuth": true
        }
      }
    ],
    "meta": {
      "keepAlive": false,
      "requireAuth": true
    }
  },
  {
    "id": 3,
    "path": "/home",
    "component": "Home",
    "name": "人事管理",
    "iconCls": "fa fa-address-card-o",
    "children": [
      {
        "id": null,
        "path": "/per/emp",
        "component": "PerEmp",
        "name": "员工资料",
        "iconCls": null,
        "children": [
          
        ],
        "meta": {
          "keepAlive": false,
          "requireAuth": true
        }
      },
      {
        "id": null,
        "path": "/per/ec",
        "component": "PerEc",
        "name": "员工奖惩",
        "iconCls": null,
        "children": [
          
        ],
        "meta": {
          "keepAlive": false,
          "requireAuth": true
        }
      },
      {
        "id": null,
        "path": "/per/train",
        "component": "PerTrain",
        "name": "员工培训",
        "iconCls": null,
        "children": [
          
        ],
        "meta": {
          "keepAlive": false,
          "requireAuth": true
        }
      },
      {
        "id": null,
        "path": "/per/salary",
        "component": "PerSalary",
        "name": "员工调薪",
        "iconCls": null,
        "children": [
          
        ],
        "meta": {
          "keepAlive": false,
          "requireAuth": true
        }
      },
      {
        "id": null,
        "path": "/per/mv",
        "component": "PerMv",
        "name": "员工调动",
        "iconCls": null,
        "children": [
          
        ],
        "meta": {
          "keepAlive": false,
          "requireAuth": true
        }
      }
    ],
    "meta": {
      "keepAlive": false,
      "requireAuth": true
    }
  },
  {
    "id": 4,
    "path": "/home",
    "component": "Home",
    "name": "薪资管理",
    "iconCls": "fa fa-money",
    "children": [
      {
        "id": null,
        "path": "/sal/sob",
        "component": "SalSob",
        "name": "工资账套管理",
        "iconCls": null,
        "children": [
          
        ],
        "meta": {
          "keepAlive": false,
          "requireAuth": true
        }
      },
      {
        "id": null,
        "path": "/sal/sobcfg",
        "component": "SalSobCfg",
        "name": "员工账套设置",
        "iconCls": null,
        "children": [
          
        ],
        "meta": {
          "keepAlive": false,
          "requireAuth": true
        }
      },
      {
        "id": null,
        "path": "/sal/table",
        "component": "SalTable",
        "name": "工资表管理",
        "iconCls": null,
        "children": [
          
        ],
        "meta": {
          "keepAlive": false,
          "requireAuth": true
        }
      },
      {
        "id": null,
        "path": "/sal/month",
        "component": "SalMonth",
        "name": "月末处理",
        "iconCls": null,
        "children": [
          
        ],
        "meta": {
          "keepAlive": false,
          "requireAuth": true
        }
      },
      {
        "id": null,
        "path": "/sal/search",
        "component": "SalSearch",
        "name": "工资表查询",
        "iconCls": null,
        "children": [
          
        ],
        "meta": {
          "keepAlive": false,
          "requireAuth": true
        }
      }
    ],
    "meta": {
      "keepAlive": false,
      "requireAuth": true
    }
  },
  {
    "id": 5,
    "path": "/home",
    "component": "Home",
    "name": "统计管理",
    "iconCls": "fa fa-bar-chart",
    "children": [
      {
        "id": null,
        "path": "/sta/all",
        "component": "StaAll",
        "name": "综合信息统计",
        "iconCls": null,
        "children": [
          
        ],
        "meta": {
          "keepAlive": false,
          "requireAuth": true
        }
      },
      {
        "id": null,
        "path": "/sta/score",
        "component": "StaScore",
        "name": "员工积分统计",
        "iconCls": null,
        "children": [
          
        ],
        "meta": {
          "keepAlive": false,
          "requireAuth": true
        }
      },
      {
        "id": null,
        "path": "/sta/pers",
        "component": "StaPers",
        "name": "人事信息统计",
        "iconCls": null,
        "children": [
          
        ],
        "meta": {
          "keepAlive": false,
          "requireAuth": true
        }
      },
      {
        "id": null,
        "path": "/sta/record",
        "component": "StaRecord",
        "name": "人事记录统计",
        "iconCls": null,
        "children": [
          
        ],
        "meta": {
          "keepAlive": false,
          "requireAuth": true
        }
      }
    ],
    "meta": {
      "keepAlive": false,
      "requireAuth": true
    }
  },
  {
    "id": 6,
    "path": "/home",
    "component": "Home",
    "name": "系统管理",
    "iconCls": "fa fa-windows",
    "children": [
      {
        "id": null,
        "path": "/sys/basic",
        "component": "SysBasic",
        "name": "基础信息设置",
        "iconCls": null,
        "children": [
          
        ],
        "meta": {
          "keepAlive": false,
          "requireAuth": true
        }
      },
      {
        "id": null,
        "path": "/sys/cfg",
        "component": "SysCfg",
        "name": "系统管理",
        "iconCls": null,
        "children": [
          
        ],
        "meta": {
          "keepAlive": false,
          "requireAuth": true
        }
      },
      {
        "id": null,
        "path": "/sys/log",
        "component": "SysLog",
        "name": "操作日志管理",
        "iconCls": null,
        "children": [
          
        ],
        "meta": {
          "keepAlive": false,
          "requireAuth": true
        }
      },
      {
        "id": null,
        "path": "/sys/hr",
        "component": "SysHr",
        "name": "操作员管理",
        "iconCls": null,
        "children": [
          
        ],
        "meta": {
          "keepAlive": false,
          "requireAuth": true
        }
      },
      {
        "id": null,
        "path": "/sys/data",
        "component": "SysData",
        "name": "备份恢复数据库",
        "iconCls": null,
        "children": [
          
        ],
        "meta": {
          "keepAlive": false,
          "requireAuth": true
        }
      },
      {
        "id": null,
        "path": "/sys/init",
        "component": "SysInit",
        "name": "初始化数据库",
        "iconCls": null,
        "children": [
          
        ],
        "meta": {
          "keepAlive": false,
          "requireAuth": true
        }
      }
    ],
    "meta": {
      "keepAlive": false,
      "requireAuth": true
    }
  }
]