vue轻量级后台管理系统基础模板

2shou 发布于2019-08-23 14:17 / 2616人阅读

摘要：具体实现请查看和的退出登陆回调方法。现在除了必要的页面需要在一开始添加到路由表里，其他的页面都可以根据后台数据来自动生成。另外，如果在未登陆时要访问某一指定页面，会重定向到登陆页，登陆成功后会自动跳到这个指定页面。

项目地址 vue-admin-template

在线预览

更新 2019.6.25 更新

修复路由表冲突问题

退出当前用户，换账号重新登陆时，上个账号和现在的账号路由表会有冲突的问题，解决办法是在退出登陆时重置路由表。

具体实现请查看 router/index.js、Login.vue 和 Index.vue 的退出登陆回调方法。

2019.6.18 更新

优化动态添加路由功能

以前的动态路由功能并不完善，首先要将所有的路由都添加到路由表里，然后根据后台返回的菜单栏数据来生成菜单。

导致的问题就是，虽然有页面在菜单栏上不显示，但由于已经添加到路由表里了，所以可以在地址栏上手动输入在菜单栏上不存在（但在路由表存在）的页面，进而可以越权访问。

现在除了必要的页面需要在一开始添加到路由表里，其他的页面都可以根据后台数据来自动生成。而且菜单栏上没有的页面，在地址栏上输入地址也是访问不了的。

另外，如果在未登陆时要访问某一指定页面，会重定向到登陆页，登陆成功后会自动跳到这个指定页面。

具体实现请看 permission.js 和 util 目录下的 index.js 文件

2019.3.14 更新

增加404页面

假如跳转到一个不存在的页面时会重定向到404页面

2019.3.8 更新

增加面包屑功能

用于展示当前页面的路径

增加权限控制功能

如果未登陆，访问所有页面都重定向到登陆页

2019.3.1 更新

增加动态菜单栏功能

icon使用的是iview组件的icon组件。

数据格式：

// 左侧菜单栏数据
menuItems: [
    {
        name: "Home", // 要跳转的路由名称 不是路径
        size: 18, // icon大小 非必填
        type: "md-home", // icon类型 非必填
        text: "主页" // 文本内容
    },
    {
        text: "二级菜单",
        type: "ios-paper",
        children: [
            {
                type: "ios-grid",
                name: "T1",
                text: "表格"
            },
            {
                text: "三级菜单",
                type: "ios-paper",
                children: [
                    {
                        type: "ios-notifications-outline",
                        name: "Msg",
                        text: "查看消息"
                    },
                    {
                        type: "md-lock",
                        name: "Password",
                        text: "修改密码"
                    },
                    {
                        type: "md-person",
                        name: "UserInfo",
                        text: "基本资料",
                    }
                ]
            }
        ]
    }
]

相关依赖

vue-router

iview

axios

vuex

功能 登录页

一周七天自动切换不同的壁纸（建议自己配置）

标签栏

点击标签切换页面

刷新当前标签页

关闭其他标签/关闭所有标签

注意： 组件的名称和路由的名称一定要一致，例如 Home.vue 组件名称 name: home，则在路由文件中也要给它设置为 name: home，否则页面内容不能缓存

// 在router文件中
{
    path: "home",
    name: "home",
    component: () => import("../views/Home.vue")
}

// 在Home.vue中
export default {
    name: "home"
}

侧边栏

伸展/收缩

页面宽度过小自动收缩

多级菜单（利用iView组件）

用户相关

消息通知

用户头像

基本资料

动态菜单栏

根据数据动态生成菜单

面包屑

展示当前页面的路径

权限控制

如果在未登陆的情况下访问指定页面将会重定向到登陆页

其它

利用axios拦截器实现了ajax请求前展示loading 请求结束关闭loading

注意

源码可见并且添加了必要的注释可以自行更改

Index组件一般情况下只需要传数据就行其他不用关注

市面上有大量的vue后台管理系统模板但是功能都太丰富了而且有很多组件用不上所以写了这么一个最基础的只有必要功能的模板
UI库使用的是iView 有大量的组件可用

子组件跳转到子组件

// xxx为你想跳转的子组件name
this.$parent.gotoPage("xxx")

路由传参

this.gotoPage("userinfo", {
    id: id,
})
// 在userinfo组件里取参
this.$route.params.id

使用下载

git clone git@github.com:woai3c/vue-admin-template.git

cd vue-admin-template

npm i

开发

npm run serve

打包

npm run build

如果对你有帮助，请给个Star

云服务器 GPU云服务器后台管理模板html vue基础教程腾讯云轻量服务器模板网站后台模板

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100396.html

Vue 页面权限控制和登陆验证

摘要：如果一个页面，有角色越权访问，这时就得做出限制了。我们可以通过或来实现，下面用代码来展示一下如何用控制登陆验证。更多文章页面权限控制页面权限控制是什么意思呢？就是一个网站有不同的角色，比如管理员和普通用户，要求不同的角色能访问的页面是不一样的。如果一个页面，有角色越权访问，这时就得做出限制了。 Vue 动态添加路由及生成菜单这是我写过的一篇文章，通过动态添加路由和菜单来做控制，...

lastSeries 2019-08-23 18:13 评论0 收藏0
【收藏】2019年最新Vue相关精品开源项目库汇总

摘要：前言本文的前身是源自上的项目但由于该项目上次更新时间为年月日，很多内容早已过期或是很多近期优秀组件未被收录，所以小肆今天重新更新了内容并新建项目。提交的项目格式如下项目名称子标题相关介绍如果收录的项目有错误，可以通过反馈给小肆。前言本文的前身是源自github上的项目awesome-github-vue,但由于该项目上次更新时间为2017年6月12日，很多内容早已过期或是很多近期优...

williamwen1986 2019-08-23 14:50 评论0 收藏0
方案设计--如何看待前端框架选型 ?

摘要：纯前端开发主要是针对静态页面。自主权最大，正常是使用进行辅助开发，上线等。大致原因使用是为了和端的保持同步。四总结对于比较正式的项目，前端技术选型策略一定是产品收益最大化，用户在首位。对于前端团队，可以实现企业受益最大化要点。一、技术选型的策略 1、保证产品质量（1）功能稳健：网页不白屏，不错位，不卡死；操作正常；数据精准。（2）体验优秀：加载体验，交互体验，视觉体验，无障碍访...

gnehc 2019-08-23 18:13 评论0 收藏0
Vue2.0 + ElementUI 手写权限管理系统后台模板（一）——简述

摘要：简介最近写了一个基于权限管理系统的后台模板，包含了正常项目开发所需的框架功能，开发者使用的时候只需要专注于项目的业务逻辑就好。同时接下来会让你拥有一个自己完全掌控的框架。简介最近写了一个基于vue2.0+element-ui权限管理系统的后台模板，包含了正常项目开发所需的框架功能，开发者使用的时候只需要专注于项目的业务逻辑就好。同时接下来会让你拥有一个自己完全掌控的框架。源码地址...

_ivan 2019-08-23 14:06 评论0 收藏0