vue-framework-range常见问题整理

vue-framework-range前端vue框架常见问题整理

解决tinymce报错问题

1.package.json文件中找相关的依赖并删除
2.dos窗口删除依赖npm uninstall vue-tinymce
3.重新下载npm install vue-tinymce

select标签问题

1.通过将vue版本号从2.3.3换成2.5.2是可以解决
2.同时注意更换vue-template-compiler版本号，也要换到2.5.2
3.直接在package.json中修改版本号，然后npm install就行了

表格不显示问题

1.使用dos命令进入到项目目录下,执行npm install qiniu.js
2.Table的列设置columns7中,设置第一列的width属性值为20,去掉引号
3.修改index.html中引用qiniu.min.js的代码为bower_components/qiniu/src/qiniu.js
4.重新执行 npm install -> npm run build:prod

登录时保存的值

1.登录之后需要动态获取路由,此时需要先保存token
2.在src/store/modules/user.js中的LoginByEmail方法中,保存了如下三个值, 这三个值在后期获取动态路由时需要用到,所以在登录成功后必须要保存这三个值

	Cookies.set('Admin-Token', response.data.token);
    commit('SET_TOKEN', data.token);
    commit('changeLogin', { "Authorization": userinfo.token });
	//这里对roles进行赋值,在之后动态生成路由时, 就不需要获取用户信息了
    commit('SET_ROLES', [userinfo.roles.roleName]);

需要注意的是, 在退出方法中需要将对应的值清空掉, 保证下次登录时, 数据是正确的

浏览器控制台弹出’[vue-router] Duplicate named routes definition: { name: “Dashboard”, path: “/dashboard” }'警告信息

找到src下的login.js文件, 在router.addRoutes(store.getters.addRouters);之前加一行代码

	router.matcher = new VueRouter({ routes: constantRouterMap }).matcher;
    router.addRoutes(store.getters.addRouters);

在文件中import两个内容, 内容如下, constantRouterMap是默认的初始化菜单

	import { constantRouterMap } from 'src/router';
	import VueRouter from 'vue-router';

原理就是之前vue的router已经生成过路由, 在router中已经存在了某些路由, 再次addRoutes时会造成重复添加, 这种做法就是在addRoutes之前, 先初始化router的match属性, 清空已经添加过的路由, 重新初始化, 想深入了解路由的, 可以查一下vue里router的match属性原理

用户登录动态生成目录时, 普通用户登录退出后, 管理员登录时菜单依旧是普通用户的菜单问题

问题原因在于js中对于数组的赋值, 是引用传递, 这就造成了在动态生成accessedRouters时会改变asyncRouterMap原数组中的数据, 因为方法中使用的数组是对原asyncRouterMap数组的引用

	GenerateRoutes({ commit }, data) {
		return new Promise(resolve => {
        const { roles } = data
        let accessedRouters
        if (roles.indexOf('admin') >= 0) {
			accessedRouters = asyncRouterMap
        } else {
          	accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
        }
        commit('SET_ROUTERS', accessedRouters);
        resolve();
      })
    },

同理如果定义一个变量RouterMap去复制asyncRouterMap的话, 也是对原数组的引用, RouterMap改变时, 也会影响到asyncRouterMap

	var RouterMap = asyncRouterMap;

这里给大家分享几个关于js中数组复制的方式

	//一 转为JSON字符串再转回到array(转回array时类型为Object)
    var RouterMap = JSON.parse(JSON.stringify(asyncRouterMap));
    //二 使用concat连接一个空数据组进行复制
    var RouterMap = [].concat(asyncRouterMap);
    //三 分割复制(slice有两个参数start和end, end可不传, 表示从start开始到末尾)
    var RouterMap = asyncRouterMap.slice(0);
    //四 深度复制数组
    var RouterMap = _.cloneDeep(asyncRouterMap);

当然还有一种谁都会写的方法, 那就是遍历

	asyncRouterMap.forEach(e => {
		//存入新数组
	});

在解决本问题时, 需要用到的是第四种方法: 深度复制数组, 有兴趣的可以了解一下这个方法
设置为深度复制之后, 再次使用不同用户登录系统时, 就会对应的显示正常的权限菜单了, 注意在vue中vuex的数据和router的数据, 在页面进行F5刷新或者系统自动刷新时, 都会将原来设置的值进行初始化, 所以在解决上述问题的时候, 可以使用页面刷新的方式实现, 只不过在过程会出现闪动, 不太友好, 有强迫症的同学可以考虑使用这里介绍的方法, 不在乎细节的可以直接考虑页面刷新

	window.reload();

…
…
…
待补充区域…
…
…
…
再有新的问题会及时更新补充…
…
…
…

GitHub托管地址

代码clone下来之后, 直接安装运行即可

	npm install			//安装插件
	npm run dev			//运行项目
	npm run build:prod	//打包项目, 打包后将项目放入后台系统的static目录下, 即可完成前后端整合

如果nodejs环境没有搭建, 建议先搭建node环境

欢迎各位前来star