Skip to content

vue管理系统模板,包含登录,权限等。完整的、生产环境可直接使用的项目示例,演示

Notifications You must be signed in to change notification settings

liu-xinhui/vue-admin-template

Repository files navigation

配合使用的服务器端spring boot项目,请移步spring-boot-template

项目演示:地址 账号密码默认填充(admin,a123456)

简介

多个vue管理系统开发经验总结而成,集成element uiaxios等,封装了网络请求dialog数据重置登录正则权限验证等工具类和全局方法

完整的、生产环境可直接使用的项目示例,而不是各种组件示例(组件示例可参考vue-element-admin

特别适合中小型项目个人开发者参考及使用,一天开发一个项目不是梦。

开发环境

  • NPM 6.9.0 +(更低版本请自行尝试)
  • IntelliJ IDEA ULTIMATE 、 WebStorm、VSCode、记事本 均可

技术选型

名称 介绍
element ui UI组件
axios 网络请求
vue cli 4 使用vue cli4生成的项目

工程结构

template-front
├── public
│   ├── img -- 放置项目中的图片
│   ├── config.js -- 项目环境配置(服务器base url等),未使用vue cli的多环境配置文件(.env.development等)因为这种方式修改baseUrl必须重新打包
│   └── 其他文件夹 -- 为vue自带文件不做介绍
├── src
│   ├── components -- 放置项目公用组件
│   │   ├── VmSearch.vue -- 搜索框组件
│   │   └── VmTable.vue -- 表格封装,包含分页、搜索、搜索条件重置、网络请求等
│   ├── plugins -- 放置插件
│   │   ├── el-dialog-drag.js -- 此指令加在el-dialog上可实现dialog拖曳
│   │   ├── axios.js -- axios配置文件,token、全局网络请求错误提示、401跳转到登录页 均在此配置
│   │   ├── element.js -- 引入element ui
│   │   ├── http.js -- 在axios基础上增加的一层封装,简写网络请求,适合restfull风格的接口,挂在到全局
│   │   └── myPlugin.js -- 全局指令、方法挂载、全局异常处理
│   ├── router -- 路由
│   │   ├── router.js -- 路由配置文件
│   │   └── routerBuilder.js -- 路由生成工具类,也可不适用此工具类按照原有语法书写路由
│   ├── store -- vue状态管理
│   ├── style -- 全局css配置
│   │   ├── element.scss -- 覆写element ui的样式,例如圆角、主题色、表格边框等
│   │   ├── main.scss -- 项目全局css,放置公用css
│   │   ├── transition.scss -- 项目全局css动画
│   │   └── variables.scss -- css变量
│   ├── util -- 工具
│   │   ├── constant.js -- 放置静态变量、文本对照。可直接转化为el-select使用的数据格式.使用方式参照DeviceList.vue和DeviceEdit.vue
│   │   ├── loginUtil.js -- 登录返回数据保存和获取,token、用户名、权限等
│   │   └── regular.js -- 常用的正则表达式,校验用户名、密码等
│   └── 其他文件夹 -- 为vue自带文件不做介绍
│   ├── views -- 页面
│   │   ├── main -- 放置登录、主页、侧边栏等等
│   │   └── 其他文件夹  -- 放置自己的项目模块
│   └── 其他文件夹 -- 为vue自带文件不做介绍
├── .gitignore -- git忽略dist、node_modules、ide配置文件等
├── .npmrc -- 此文件npm会自动读取,无需改动。更改npm源,防止node-sass等安装失败
├── alias.config.js -- 编辑器无法识别vue的@符号路径,无法跳转。Intellij idea或者WebStorm中搜索webpack选中此文件,可使编辑器识别到@路径。如果无需跳转,可删除
├── Dockerfile -- 用docker的人懂得,不用的可删除此文件。
├── nginx.conf -- Dockerfile中使用此文件作为nginx配置文件(原版配置文件,只改动启用了gzip)。不使用docker和nginx部署的请忽略
└── 其他文件 -- 为vue cli自带文件不做介绍

运行项目

# clone或者下载项目

# 修改服务器地址`public/config.js`,可直接连接"http://118.25.44.86:8010/"进行测试
# 进入项目目录
cd template-front

# 安装依赖
npm install

# 启动项目
npm run serve

部署项目

docker部署

#进入项目根目录
cd template-front

#打包项目
npm run build

#docker打包镜像
docker build -t template-front:latest .

#启动docker容器,可使用-e SPRING_PROFILES_ACTIVE=${env}指定环境,不指定则默认为dev
docker run -itd --name template-front -e env=dev template-front:latest

使用Intellij idea docker插件部署

idea docker

docker+jenkins部署

参考我的文章 最优雅的Docker+Jenkins pipeline部署vue项目,前端项目都可参考

直接部署

#进入项目根目录
cd template-front

#打包项目
npm run build

#将dist目录拷贝至任意web容器即可,tomcat、jetty、nginx、IIS均可

权限实现

RBAC基于角色的权限访问控制(Role-Based Access Control)

取消了用户权限的直接关联,改为通过用户关联角色角色关联权限的方法来间接地赋予用户权限。 当新增用户时只需分配已有的角色,大大减少运营人员工作量和出错率。

  • 三张表分别为多对多关系 权限

  • 生成关联网之后的结构如下 权限

  • 代码实现,具体参考代码 权限

权限

权限

权限

建议

  • 服务器地址配置在public/config.js

  • 图标采用在线iconfont,请在index.html替换成自己的图标库 index.html

  • 强烈建议启用eslint,可自动修复代码,既能避免很多错误也能统一团队的开发规范,用好的话大大提高效率

    Jetbrains系列(Intellij idea、WebStorm等)启用方式如下 eslint

  • vue cli项目中,@默认表示src路径,但是编译器无法识别路径,导致无法ctrl+鼠标左键跳转, 在Jetbrains系列(Intellij idea、WebStorm等)setting中配置webpack别名路径即可。其他编辑器自行百度。 webpack

界面截图

截图

截图

截图

截图

截图

About

vue管理系统模板,包含登录,权限等。完整的、生产环境可直接使用的项目示例,演示

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published