gcddblue / vue-admin-webapp Goto Github PK

this is a admin project

License: MIT License

JavaScript 20.09% HTML 0.37% Vue 72.41% CSS 7.12%

vue admin vuex vue-router axios element webpack vue-cli mock webpack4

vue-admin-webapp's Introduction

简介

vue-admin-webapp 是一个后台管理 spa 页面，它基于 vue 和 element-ui 采用了最新的前端技术栈，实现了登录权限验证，动态路由生成，并使用 easy-mock 来模拟请求数据，实现了典型的业务模型案例，它可以帮你快速搭建后台管理系统模板，并根据实际的业务需求添加路由来实现企业级管理页面，相信本项目一定能帮助到你。

在线预览-github
在线预览-gitee （推荐国内用户）

目前版本基于 webpack 4.0+ 和 vue-cli 3.x 版本构建，需要 Node.js 8.9 或更高版本（推荐 8.11.0+），相关知识可以自行进官网进行了解

快速开始

在开始之前，请确保在本地安装 node 和 webpack 及 git。本项目涉及的技术栈主要有 ES6 、vue 、vuex 、vue-router 、vue-cli 、axios 、webpack 、element-ui 、easyMock ,所以你最好提前熟悉了解这些知识，这将对你认识学习该项目有很大帮助

详细的项目介绍，可以关注我的的相关文章：

正确姿势开发 vue 后台管理系统

安装

# 克隆项目
git clone [email protected]:gcddblue/vue-admin-webapp.git

# 进入项目目录
cd vue-admin-webapp

# 安装依赖
npm install

# 启动服务
npm run serve

部署

deploy分支执行 deploy.sh 文件脚本执行 npm run build 并上传至 gh-pages 分支更新 github pages 页面

功能

- 登录 / 注销
  - 登录仿GeeTest-极验安全策略

- 页面
  - 初次进入引导用户
  - sideBar收缩和展开
  - 全屏控制

- 侧边栏
  - 根据不同用户权限展示相应的动态左侧菜单

- 权限验证
  - 管理员页面
  - 权限设置

- 表格操作
  - 涉及平常业务遇到的相关表格操作（参考）
- Excel
 - Excel导出
 - Excel导入
 - 多级表头导出

- Echarts
 - 滑动显示更多数据
 - 动态切换charts
 - map地图使用

- Icons
 - element-icon
 - 阿里iconfont

Online

在线浏览

License

MIT

vue-admin-webapp's People

Contributors

Stargazers

Watchers

Forkers

1361784611 joncv eric-n3750 lyb2333 ypdabendan truexu0529 gunmm avalian estelle00 kule2018 libin1991 qq919006380 haile7777777 lzhua wodemax huangzexia wu-jianyong wichell anthonycxj angeyflame leviys bxy18710401602 xiezhengsu sdtm1016 test11l jimorucheng panduanlove x1059455449 baitcenter joesleung all1344820123 myd-website ser1993ching lt1067066026 jacobhsu meixianzheng xingwang0524 songxianjin winnerbe hhy5277 dhxtling tanshinepan aff49866 xywzzj shaunstanislauslau y-happy666 lzm3000 isnicc isniapp yunfeng0214 pibupi mulaoren dewuel martinadamsdev aceyuj boom-gh abcpan showleon c-eazy joetang1 tumbledleo mcfly1860 shadiaowangyou marvengong chonglou828 liu-huitao laurocky jayandme hobgoblinc xiaowxhang sunduoqing hope8spring weizhanzhan cupandcup 20160805xcy penxu journeyc sakura-jin mahmudalim vokie123456 sqshine jackwuhao szp1206 confuzzledhp chenyuan8059 eddylapis myhlcb alexjinx jin20190923 superise-liuli zhouchengzhu0124 zxsted tedrepo beeworkshop asnaper fiorayang fxwing markchan1209 hzj1012 wkjjkw

vue-admin-webapp's Issues

mock 数据没有了老哥

能开启下mock数据接口吗，或者发一下mock数据，老哥，线上的项目都登陆不了了。。。

ie11 edge内核下canvas图片有问题

ctx.globalCompositeOperation = 'overlay'
在ie edge下不支持，可以换成
ctx.globalCompositeOperation = 'xor'

项目是基于开源项目vue-element-admin 进行开发的嘛？

看了下vue-element-admin 的相关文档，再对照作者的项目，感觉有点儿类似

这个我看到的最优雅最简洁的vue+elementUI后台项目

作者的项目结构和代码体现出他清晰的思路和高技术！

src/api/index目录下网络请求返回401时,清空token且返回登录页好像错了吧?

import store from "@/store";
import router from "@/router";
store.commit("DEL_TOKEN");
router.replace({
path: "/login",
query: {
redirect: router.currentRouter.fullPath,
},
});
//上面是你的处理,
store.commit("DEL_TOKEN");
commit提交难道不是应该在actions里面的方法提交的吗?这样也能提交mutations吗?
为何不直接使用你store.dispatch("user/loginOut");这个方法呢?
萌新不懂为何你这样处理,求告知啊

希望作者大大可以新增一个多页面标签切换功能

mock数据能否发一份

提一个bug, 切换用户后登陆成功直接路由404页面

重现步骤:

先登陆 admin管理员账号
访问路由, 权限许可/权限设置
用户-登出
输入 user进行登陆
登陆成功
导航404页面

可能造成的原因:

登陆的是管理员账号, 管理员有权限访问 权限许可/权限设置 路由
登出的时候, 路由导航到 /login的时候, 路由的查询参数 redirect: router.currentRoute.fullPath保存了当前解析的 URL /permission/roles
user 用户登陆, 登陆成功之后进行导航, 而它并没有访问 /permission/roles 路由的权限, 导致直接登陆 404

预览打不开了啊老哥

关于近期打不开页面问题

这个主要还是因为巨坑的easy-mock官网时常挂掉，所以api响应错误，现在我已经改为部署在fastmock上，语法部署规则和easy-mock很像，已经能正常访问了。（easy-mock真的是无力吐槽，挺好的网站不好好维护，看看github上全是吐槽官网挂了的...）

复杂表格最右按钮布局问题

大佬，fastmock可以拉一下项目成员吗？

@gcddblue 自己在做的项目需要mock数据，静态的太多了，mock.js不熟悉，大佬这个项目的数据可以借一下吗？

右侧消息中心和切换charts页面元素重叠

1、使用admin账户登录进去，
2、左侧菜单栏选择Echarts/切换charts
3、点击右上角消息按钮向左推出消息中心面板，此时charts页面的切换四个切换天数按钮，挡在了消息中心页面上

大佬，登录那报错，下载最新的代码

vue-router.esm.js?8c4f:1958 Uncaught (in promise) Error: Redirected when going from "/login?redirect=%2Fdashbord" to "/dashbord" via a navigation guard.
at createRouterError (vue-router.esm.js?8c4f:1958)
at createNavigationRedirectedError (vue-router.esm.js?8c4f:1917)
at eval (vue-router.esm.js?8c4f:2266)
at _callee$ (index.js?a18c:300)
at tryCatch (runtime.js?96cf:62)
at Generator.invoke [as _invoke] (runtime.js?96cf:296)
at Generator.prototype. [as next] (runtime.js?96cf:114)
at asyncGeneratorStep (asyncToGenerator.js?1da1:3)
at _next (asyncToGenerator.js?1da1:25)

// router/index.js
path: '/permission',
...
redirect: '/permission/page-use',

这个redirect字段的值应该是/permission/page-user