若依框架前端Vue项目分析实战

Posted 敲代码的小小酥

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了若依框架前端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

可以看到,使用了模块化命名,分成了权限模块,设置模块,用户模块等几个模块。因为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项目分析实战的主要内容,如果未能解决你的问题,请参考以下文章

Vue项目搭建修改若依框架的侧边栏导航栏面包屑样式修改全局页面样式

若依和vue-admin哪个更适合二开

若依框架-Vue实用框架(权限控制和页面渲染)

若依vue项目更改开发环境端口

若依vue项目更改开发环境端口

在vue项目中若依框架设置多个proxy跨域代理