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


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}}
]

前后端整合---js对象方法---异步组件相关推荐

Day215.课程详细页面功能完善、Echarts统计分析模块[生成统计数据+生成图表]前后端整合 -谷粒学院
谷粒学院课程详细页面功能完善一.修改课程详细接口 1.在service_order模块添加接口用于判断订单中status值是否为1,为1则为已支付 @RestController @CrossO ...
从前后端分离到前后端整合的“退步”（二）pom.xml文件配置
系列文章目录从前后端分离到前后端整合的"退步"(一)项目结构从前后端分离到前后端整合的"退步"(二)pom.xml文件配置 Spring Boot + Vu ...
从前后端分离到前后端整合的“退步”（一）项目结构
系列文章目录从前后端分离到前后端整合的"退步"(一)项目结构从前后端分离到前后端整合的"退步"(二)pom.xml文件配置 Spring Boot + Vu ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇：JS对象字面量this
缘起书接上文<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史>,昨天咱们说到了以我的经历说明的web开发经历的 ...
若依(RuoYi-Vue)+Flowable工作流前后端整合教程
此教程适合若依前后端分离项目,其他项目可以在扩展列表中进行查找. 近期公司里需要对很久以前的RuoYi-Vue前后端分离项目扩展出flowable的功能,当然这个重任也是落在了我的身上(不然也不会有这 ...
vue axios 跨域_SpringBoot+Vue从零开始搭建系统(三)前后端整合二
前端整合前端代码 KwgcFooter.vue 页面底部 KwgcHeader.vue 页面头部 KwgcLogin.vue 用户名: 密码: 登录登录验证情况: kwgcHeader.vue 这 ...
京东java前后端联调_前端工程化、组件化实践JDM分享
前端技术原创文前端工程化.组件化实践JDM分享该文由孵化创新一部曾瑞文在研究院技术分享会的分享内容总结而成,主要讲解了团队创新的前端工程化.组件化的思想及实践应用. 为什么要搞前端框架? Java ...
vue 项目引用static目录资源_SpringBoot+Vue从零开始搭建系统(三)前后端整合二
前端整合前端代码 KwgcFooter.vue 页面底部 KwgcHeader.vue 页面头部 KwgcLogin.vue 用户名: 密码: 登录登录验证情况: kwgcHeader.vue 这 ...
spring boot + vue + element-ui全栈开发入门——前后端整合开发
一.配置思路是通过node的跨域配置来调用spring boot的rest api. 修改config\index.js文件,设置跨域配置proxyTable: proxyTable: {'/api ...

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

前后端整合---js对象方法---异步组件相关推荐

最新文章

热门文章