位置: IT常识 - 正文

若依框架前端Vue项目分析实战(若依框架前端发请求)

编辑:rootadmin
若依框架前端Vue项目分析实战 说明

推荐整理分享若依框架前端Vue项目分析实战(若依框架前端发请求),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:若依框架前端技术,若依框架前端怎么用,若依框架前端改造,若依框架前端怎么用,若依框架前端如何通过后端加载页面,若依框架前端如何通过后端加载页面,若依框架前端如何通过后端加载页面,若依框架前端使用,内容如对您有帮助,希望把文章链接给更多的朋友!

前面讲解了vue2的单点知识,下面用若依提供的vue项目,实战分析一下,拿到一个vue项目,如何进行分析并进行二次开发。

一、public/index.html与main.js和App.vue三者的关系

vue项目是单界面应用,所有的界面将在public下的index.html里呈现。 main.js是程序的入口,在这里,定义了vue实例对象。如下代码:

new Vue({ el: '#app', router,//路由插件 store,//vuex插件,所有的组件中都可以使用store中的action,mutation和state数据。通过$strore调用或者mapXXX函数映射 render: h => h(App)})

其中,el配置项是配置vm实例要填充的public/index.html里的元素对象。render属性配置的是用App.vue组件进行填充。在vm实例对象挂载完成之前,即mouted函数执行之前,页面显示的是public/index.html中本身的元素,在挂载完成后,public/index.html中会显示App.vue中的元素。 在public/index.html中,原有的是加载中插件,如下:

<body> <div id="app"> <div id="loader-wrapper"> <div id="loader"></div> <div class="loader-section section-left"></div> <div class="loader-section section-right"></div> <div class="load_title">正在加载系统资源,请耐心等待</div> </div></div>

所以,刷新界面时,先出现加载中界面,如下: 等vm实例挂载完成后,显示App.vue组件内容。

下面分析App.vue中组件的内容。 看template内容:

<template> <div id="app"> <!-- 路由占位,router-link在哪 --> <router-view /> </div></template>

这里只有router-view,说明这里要进行路由的切换展示。所以,接下来该分析路由的配置,看App.vue跳转到了哪个组件。

二、路由分析

路由的配置在router/index.js下,进行分析:

{ path: '', component: Layout, redirect: 'index', children: [ { path: 'index', component: () => import('@/views/index'), name: 'Index', meta: { title: '首页', icon: 'dashboard', affix: true } } ] }

这段路由配置就是App.vue挂载完成后的展示组件。首先,项目访问路径为’'(空)时,加载的组件是Layout组件,展示Layout组件内容。通过redirect属性重定向到index路径。index是子路由,在Layout中展示index.vue界面。这就是为何每次刷新,默认打开首页tab页的原因。 这里,补充个知识点: 不管是router-link的to属性,还是直接在浏览器输入路径,如果输入的是子路由的路径,那么界面会展示子路由的组件,也会展示父路由的组件。不会单独展示子路由对应的组件。 如:to=/home/SeatDistribute,则对应的view会显示App.vue和Home.vue和/home/SeatDistribute组件。 to=/home,view会显示App.vue组件和Home.vue组件。 根据路径,找router-view的位置: 路径为一层的,如:/home。则对应App.vue中的router-view。 路径为多层的,如/home/SeatDistribute,则找其父组件的router-view,即Home.vue组件中的router-view。

所以,上面重定向到index.vue组件后,也是显示Layout组件的。即在Layout组件内部,再显示index.vue组件。router定义子路由时,默认children子路由就是被父路由包裹的。

三、Layout组件分析

通过上面分析,可知App.vue展示的是Layout组件,那么下面就分析Layout组件。通过分析,Layout组件是布局组件,即后台管理系统的整体布局,是通过这个组件完成的。里面包含了很多子组件嵌套。下面先画一下其组件划分结构: 可见,将整体布局划分成上图的几个组件。这也体现出了vue组件化编程的思想。在每个组件内部,又对各个部分进行了组件的拆分,例如在navbar组件中, 每个元素,都划分成了一个组件。这里主要体会组件化编程思想。具体组件的实现方式,这里不做深入研究。已经提供好的功能,我们直接拿来用即可。

四、Vuex应用分析

在main.js中定义vue的时候,可以看到使用了Vuex技术,如下:

new Vue({ el: '#app', router,//路由插件 store,//vuex插件,所有的组件中都可以使用store中的action,mutation和state数据。通过$strore调用或者mapXXX函数映射 render: h => h(App), beforeMount() { debugger; }})

下面就分析一下Vuex技术在项目中是如何应用的。 首先,看stroe/index.js文件:

Vue.use(Vuex)const store = new Vuex.Store({ modules: { app, user, tagsView, permission, settings }, getters})export default store若依框架前端Vue项目分析实战(若依框架前端发请求)

可以看到,使用了模块化命名,分成了权限模块,设置模块,用户模块等几个模块。因为Vuex最终操作的都是state对象,所以,重点看一下这几个模块的state对象都存入了什么: 权限模块permission.js:

state: { routes: [], addRoutes: [], defaultRoutes: [], topbarRouters: [], sidebarRouters: [] }

可见,权限模块state存入了路由数据。路由可以共享到每个组件去使用。

用户模块user.js:

state: { token: getToken(), name: '', avatar: '', roles: [], permissions: [] }

用户模块state定义了token,用户名,用户角色,用户权限等数据,用于共享。

设置模块settings.js:

const state = { title: '', theme: storageSetting.theme || '#409EFF', sideTheme: storageSetting.sideTheme || sideTheme, showSettings: showSettings, topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav, tagsView: storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView, fixedHeader: storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader, sidebarLogo: storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo, dynamicTitle: storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle}

可见,settings.js模块定义了皮肤颜色,主题风格,边距等等数据用于共享。

各模块的Actions和Mutations对象定义了各种函数来操作这些state数据,这里就 不一一列举了。

通过上面存入Vuex中的数据可以知道,在项目中,把全局的一些信息,存入Vuex中。这些信息可以是前端自己设定的,也可以是后台获取的数据。这样,在项目的任何一个组件中,都可以通过$store属性或者mapXXX函数获取到这些共享数据。 Vuex有点儿类似于原生js中的全局变量的感觉。

五、关于动态路由和菜单权限的实现

前面讲路由时,路由都是在router/index.js里预置好的。但是在真实项目中,菜单肯定是通过权限,在后台获取的。分析一下若依框架,是如何实现权限分配和动态路由的。 首先找到菜单的组件,上面已经分析过,是Layout组件中的sidebar组件。点进去,看sidebar组件的实现:

<sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route" :base-path="route.path" />

可见,其遍历了sidebarRouters,而sidebarRouters通过Vuex的分析可知,其配置在了permissions模块的state中。所以,在permissions.js的Actions对象和Mutations对象中,肯定有操作这个数据的函数,找相应的代码。 代码比较分散,下面看其实现思路: 首先,在Actions函数中,利用axios发送请求到后台,获取用户菜单权限,该接口的返回值如下:

{"msg": "操作成功","code": 200,"data": [{"name": "System","path": "/system","hidden": false,"redirect": "noRedirect","component": "Layout","alwaysShow": true,"meta": {"title": "系统管理","icon": "system","noCache": false,"link": null},"children": [{"name": "User","path": "user","hidden": false,"component": "system/user/index","meta": {"title": "用户管理","icon": "user","noCache": false,"link": null}}, {"name": "Role","path": "role","hidden": false,"component": "system/role/index","meta": {"title": "角色管理","icon": "peoples","noCache": false,"link": null}}, {"name": "Menu","path": "menu","hidden": false,"component": "system/menu/index","meta": {"title": "菜单管理","icon": "tree-table","noCache": false,"link": null}}, {"name": "Dept","path": "dept","hidden": false,"component": "system/dept/index","meta": {"title": "部门管理","icon": "tree","noCache": false,"link": null}}, {"name": "Post","path": "post","hidden": false,"component": "system/post/index","meta": {"title": "岗位管理","icon": "post","noCache": false,"link": null}}, {"name": "Dict","path": "dict","hidden": false,"component": "system/dict/index","meta": {"title": "字典管理","icon": "dict","noCache": false,"link": null}}, {"name": "Config","path": "config","hidden": false,"component": "system/config/index","meta": {"title": "参数设置","icon": "edit","noCache": false,"link": null}}, {"name": "Notice","path": "notice","hidden": false,"component": "system/notice/index","meta": {"title": "通知公告","icon": "message","noCache": false,"link": null}}, {"name": "Log","path": "log","hidden": false,"redirect": "noRedirect","component": "ParentView","alwaysShow": true,"meta": {"title": "日志管理","icon": "log","noCache": false,"link": null},"children": [{"name": "Operlog","path": "operlog","hidden": false,"component": "monitor/operlog/index","meta": {"title": "操作日志","icon": "form","noCache": false,"link": null}}, {"name": "Logininfor","path": "logininfor","hidden": false,"component": "monitor/logininfor/index","meta": {"title": "登录日志","icon": "logininfor","noCache": false,"link": null}}]}]}, {"name": "Monitor","path": "/monitor","hidden": false,"redirect": "noRedirect","component": "Layout","alwaysShow": true,"meta": {"title": "系统监控","icon": "monitor","noCache": false,"link": null},"children": [{"name": "Online","path": "online","hidden": false,"component": "monitor/online/index","meta": {"title": "在线用户","icon": "online","noCache": false,"link": null}}, {"name": "Job","path": "job","hidden": false,"component": "monitor/job/index","meta": {"title": "定时任务","icon": "job","noCache": false,"link": null}}, {"name": "Druid","path": "druid","hidden": false,"component": "monitor/druid/index","meta": {"title": "数据监控","icon": "druid","noCache": false,"link": null}}, {"name": "Server","path": "server","hidden": false,"component": "monitor/server/index","meta": {"title": "服务监控","icon": "server","noCache": false,"link": null}}, {"name": "Cache","path": "cache","hidden": false,"component": "monitor/cache/index","meta": {"title": "缓存监控","icon": "redis","noCache": false,"link": null}}]}, {"name": "Tool","path": "/tool","hidden": false,"redirect": "noRedirect","component": "Layout","alwaysShow": true,"meta": {"title": "系统工具","icon": "tool","noCache": false,"link": null},"children": [{"name": "Build","path": "build","hidden": false,"component": "tool/build/index","meta": {"title": "表单构建","icon": "build","noCache": false,"link": null}}, {"name": "Gen","path": "gen","hidden": false,"component": "tool/gen/index","meta": {"title": "代码生成","icon": "code","noCache": false,"link": null}}, {"name": "Swagger","path": "swagger","hidden": false,"component": "tool/swagger/index","meta": {"title": "系统接口","icon": "swagger","noCache": false,"link": null}}]}, {"name": "Http://ruoyi.vip","path": "http://ruoyi.vip","hidden": false,"component": "Layout","meta": {"title": "若依官网","icon": "guide","noCache": false,"link": "http://ruoyi.vip"}}]}

分析其返回值,可以看到,就是按照router的格式,将菜单数据进行了返回。其中,子菜单就以children属性,定义在了父菜单下面。菜单名称,定义在了meta属性里面。 这样,就根据用户权限获取了菜单路由信息。下面,看这些信息是如何进行使用的。 还回到Sidebar组件的这段代码:

<sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route" :base-path="route.path" />

可以看到,涉及到另一个自定义组件sidebar-item,遍历菜单,把获取到的路由信息传了过去,最终实现了菜单的展示和点击出现tab页面。具体实现不再详细解释。

六、自定义指令的应用

若依框架自定义了几个指令,下面看如何进行自定义指令和这几个指令的作用: 在directive包下,进行了自定义指令。 重点看permissions相关的自定义指令。一个权限指令,一个角色指令,其实现思路就是根据Vuex中user的角色和权限数据,判断是否有某个角色或者某个权限,从而判断是否有权限操作某个按钮。即菜单中按钮权限的判断,是通过自定义指令完成的。

七、关于element-ui

在一个组件中,有很多的标签,当是el-开头的时候,就是element-ui的标签,可以根据官网查找对应属性的意思等。不是以el开头的标签,可能是项目自定义的组件,也可能是第三方组件。具体的点进去一看便知。

八、history模式与项目部署

前面讲到,history模式下,刷新浏览器,会报404,这里,再说清楚一点。 在开发环境中,即使使用history模式,刷新界面,不会报404,但是项目打包部署到web服务器上后,再访问前端项目,再刷新界面,会报404,这是为何呢? 个人理解,在开发环境中,vue-cli自行解决了history刷新报404的问题,直接通过路由,定位到了相应的组件。但是项目部署到web服务器上后,刷新界面,浏览器中的url直接就发送到web服务器上了,服务器默认并不会处理路径,而是直接根据路径找资源,找不到url的资源,所以就报404了。 项目部署后,如何解决history模式的404问题呢?根据不同的web服务器,进行简单的设置,就可以解决了。 具体可参考:不同的历史模式 下面记录在nginx下部署vue项目的过程。 首先,在package.json中, 运行build命令,对项目进行打包。 打包完成后,在项目根目录下,会生成dist文件,dist文件里,打包好的文件,有个index.html文件,整个vue项目,就在这个单界面里展示。

配置nginx服务器: 首先,配置nginx.config配置文件,重点如下:

server { listen 80; #nginx端口,也是前端项目访问的端口 server_name localhost;#nginx的ip,也是前端工程访问ip #charset koi8-r; #access_log logs/host.access.log main; location / { root "F:/java_structure/vue/RuoYi-Vue-master/ruoyi-ui/dist";#vue项目打包dist后的路径 index index.html index.htm;#这里配置index就行,不用管try_files $uri $uri/ /index.html;#解决history刷新报404问题,配置此项后刷新就不再报404了。 }#vue项目想后台发送请求的前缀。在开发环境中,配置proxyTable可以进行代理转发。在nginx上,在此进行代理转发配置location ^~/prod-api { rewrite ^/prod-api/(.*)$ /$1 break; #此配置表明发送到后台的请求不带prod-api,将其自动去掉 proxy_pass http://localhost:8080; #后台服务器路径。此处需要注意,这里的后台服务器,是为vue项目提供数据支撑的服务器。而上面配置的listen和server_name,是nginx的port和ip,也是前端项目的port和ip。解决history模式404的问题,也是解决的nginx服务器返回的404的问题,并不是解决后台项目返回的404的问题,这点一定要清楚。 } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } }八、统计图,报表使用

echarts可以和vue很好的配合使用,此外,再提供一个很好的统计报表可视化插件库:Viser

本文链接地址:https://www.jiuchutong.com/zhishi/300653.html 转载请保留说明!

上一篇:Pytorch实现MLP(基于PyTorch实现)(pytorch m1)

下一篇:走进小程序【六】微信小程序架构之【视图层】万字详解(进入微信小程序)

  • 微信公众号增粉技巧大全(微信公众号增粉优先微媒网赞赏)

    微信公众号增粉技巧大全(微信公众号增粉优先微媒网赞赏)

  • 荣耀70pro怎么设置24小时时间(荣耀70pro怎么设置返回键)

    荣耀70pro怎么设置24小时时间(荣耀70pro怎么设置返回键)

  • 写作时文不加点 我一定鼎力相助(写作时文不加点和我一定鼎力相助)(写作文文不加点蚂蚁庄园)

    写作时文不加点 我一定鼎力相助(写作时文不加点和我一定鼎力相助)(写作文文不加点蚂蚁庄园)

  • 为什么移动数据打不开(为什么移动数据关了还会产生流量费用)

    为什么移动数据打不开(为什么移动数据关了还会产生流量费用)

  • 畅连通话支持手机型号(畅连通话只能华为手机用吗)

    畅连通话支持手机型号(畅连通话只能华为手机用吗)

  • telan00a是什么型号(tel-an00a什么型号多少钱)

    telan00a是什么型号(tel-an00a什么型号多少钱)

  • 0000000024蓝屏怎样解决(00000024蓝屏)

    0000000024蓝屏怎样解决(00000024蓝屏)

  • 支持ddr4的主板有哪些(支持DDR4的主板支持什么CPU)

    支持ddr4的主板有哪些(支持DDR4的主板支持什么CPU)

  • 手机系统软件怎么删除不了(手机系统软件怎么更新)

    手机系统软件怎么删除不了(手机系统软件怎么更新)

  • 微信卡券怎么删除(微信卡券怎么删除不想要的)

    微信卡券怎么删除(微信卡券怎么删除不想要的)

  • 小米手机校正流量失败是怎么回事(小米手机校正流量指令)

    小米手机校正流量失败是怎么回事(小米手机校正流量指令)

  • 已保存不可上网是什么意思(wifi已保存不可上网)

    已保存不可上网是什么意思(wifi已保存不可上网)

  • 罗技g304怎么连接电脑(罗技g304怎么连接电脑蓝牙)

    罗技g304怎么连接电脑(罗技g304怎么连接电脑蓝牙)

  • 我的苹果xr为什么是单卡(我的苹果xr为什么只充到98%的电量)

    我的苹果xr为什么是单卡(我的苹果xr为什么只充到98%的电量)

  • 腾讯视频查看历史弹幕(腾讯视频查看历史弹幕手机版)

    腾讯视频查看历史弹幕(腾讯视频查看历史弹幕手机版)

  • 手机启用短信呼是什么意思 (手机启用短信呼服务是怎么回事)

    手机启用短信呼是什么意思 (手机启用短信呼服务是怎么回事)

  • press ctrl+alt+delete to restart什么意思

    press ctrl+alt+delete to restart什么意思

  • 抖音青少年密码是什么(抖音青少年密码怎么解锁)

    抖音青少年密码是什么(抖音青少年密码怎么解锁)

  • 华为nova3i怎么录制屏幕(华为nova3i怎么录音)

    华为nova3i怎么录制屏幕(华为nova3i怎么录音)

  • volte通话要不要开启

    volte通话要不要开启

  • 三星qvo和evo有什么不同(三星evo和evoplus)

    三星qvo和evo有什么不同(三星evo和evoplus)

  • 华为p30怎样关机(华为p30怎么关机)

    华为p30怎样关机(华为p30怎么关机)

  • 微信账单字体太大了怎么解决(微信账单字体太小怎么办)

    微信账单字体太大了怎么解决(微信账单字体太小怎么办)

  • 饿了么在哪给骑手好评(饿了么怎么点骑士专送)

    饿了么在哪给骑手好评(饿了么怎么点骑士专送)

  • 三星s9otg功能怎么打开(三星s9otc怎么打开)

    三星s9otg功能怎么打开(三星s9otc怎么打开)

  • 表格怎么排序号1234(numbers表格怎么排序号)

    表格怎么排序号1234(numbers表格怎么排序号)

  • 怎么显示手机电量数字(怎么显示手机电量)

    怎么显示手机电量数字(怎么显示手机电量)

  • 搜狗搜索如何开启阅读模式(搜狗搜索如何开通)

    搜狗搜索如何开启阅读模式(搜狗搜索如何开通)

  • 个人所得税专项附加扣除子女教育
  • 来料加工增值税率
  • 中级税务师是什么
  • 累计折旧 计提折旧
  • 分红免征企业所得税
  • 移动话费可以开企业发票吗
  • 销售使用过的固定资产如何开票
  • 营改增后房地产企业增值税税收筹划存在问题
  • 享受专项附加扣除该怎么申报
  • 销售退货时发票已认证怎么办
  • 财产转让应纳税额如果是负数怎么办
  • 电影院场地出租价格
  • 公司研发阶段的产品领料怎么处理?
  • 调增教育经费如何做账
  • 未计提职工教育经费汇算清缴
  • 发票抬头写个人有效吗
  • 意外险部分费用怎么算
  • 小规模纳税人可以开9%专票吗
  • 个人所得税怎么查
  • 增值税普票怎么验证真伪
  • 个体户需不需要银行开户
  • 公司扣了员工的个人所得税但没有帮员工申报
  • 增值税留抵税额账务处理
  • 小规模纳税人缴纳增值税怎么做账
  • 房地产开发企业建造的商品房,在出售前
  • windows11怎么添加打印机驱动
  • 右键新建菜单中没有文本文档怎么办
  • win10高级功能
  • 房地产企业用开发产品对外投资涉及税收
  • PHP:pg_prepare()的用法_PostgreSQL函数
  • vue解决数据量过大的问题
  • vuecli websocket
  • vue的自定义指令怎么用
  • 史上无敌的超级兵王
  • 20221年的手抄报
  • php设置header参数
  • vf中显示命令
  • 利息进项税是否含增值税
  • 以股权换股权税务问题
  • 小企业会计准则应付税款法
  • 小规模如何申报增值税
  • 02-MyBatis-Plus
  • 金税盘维护费抵扣
  • PostgreSQL中的OID和XID 说明
  • 委托加工物资的消费税计入成本吗
  • 会计调转回去还要继续教育吗
  • 出口退税的会计科目
  • 银行承兑汇票如何签收
  • 个人转让不动产交印花税吗
  • 营业外收入在汇算清缴里填哪张表
  • 管理费用如何结转成本
  • 一般纳税人开劳务费的税率是多少
  • 怎么查对方是一般还是小规模
  • 会计凭证要保存多少年企业注销
  • 会计一般采用什么科目
  • 债务重组的方式主要包括哪些
  • MySQL ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO) 的原因分解决办法
  • sql server无法连接服务器的原因
  • 访问和更改关系的区别
  • mysql如何导出数据
  • sql server储存过程的创建与使用
  • windows隐藏文件名
  • 微软9月22
  • cmd命令行操作
  • ubuntu修改ip地址方法
  • ghost后恢复数据
  • ubuntu如何安装wps
  • win7速度
  • win10系统找不到无线网络连接
  • win10 mobile 1709
  • js的上传文件
  • python的nltk
  • unity ui控件
  • 微信开发微信开发
  • 迁移图片到另一台设备什么意思
  • android适配器是什么意思
  • javascript用户名验证
  • 加油站怎么收税
  • 浙江国地税联合税务局
  • 广东省电子税务局官网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设