niqingzhu / xboot-front

基于Vue+iView开发的x-boot前台 权限可控制至按钮显示 动态路由权限菜单/多语言/简洁美观 前后端分离

Home Page:http://xboot.exrick.cn

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

xboot-front

作者大四作品 且为后台开发 能力经验有限 如有错误欢迎指正 期待您的捐赠支持!

宣传视频

http://xboot.exrick.cn

后台项目地址:X-Boot

涉及技术:Spring Boot 2.x/Spring Security/JWT/Spring Data JPA+Mybatis-Plus/Redis/Elasticsearch 分布式限流/同步锁/验证码/SnowFlake雪花算法ID生成 动态权限管理 数据权限 代码生成 日志记录 定时任务 第三方账号、短信登录

项目简介

  • 项目基于 Vue-Cli 3.0正式版创建
  • 主要Main组件框架基于iView-admin 1.0版本 修复其BUG
  • 组件库升级iView3.0
  • 后台加载动态权限菜单 多方式轻松权限控制至按钮显示
  • 提供Vue空白模版,只需修改后台请求和对应实体字段即可完成页面开发
  • 多语言切换、消息管理、第三方社交账号或短信登录
  • iView使用图标库 ionicons 额外图标库 vue-awesome

截图预览

QQ截图20180826163917.png

QQ截图20180826163956.png

QQ截图20180826164058.png

QQ截图20180826164129.png

QQ截图20180826164144.png

QQ截图20180826164226.png

主要所用技术

本地开发构建运行

  • 启动后端 x-boot 项目后,在 vue.config.js 中修改你的后端接口地址代理配置
  • 在项目根文件夹下先后执行命令 npm install (若有报错请使用cnpm)、 npm run dev
  • 前台端口默认9999 http://localhost:9999

部署

  • 执行过命令 npm install 后,执行 npm run build 将打包生成的 dist 静态文件放置Nginx服务器中,并配置反向代理。当然还可放置Spring Web等其他项目resources静态资源文件夹下可避免跨域(不推荐)。
  • Nginx配置提醒 由于路由默认已使用history模式 需加入以下配置 完整配置参考见下方开发指南
location / {
	if (!-e $request_filename) {
        rewrite ^(.*)$ /index.html?s=$1 last;
        break;
    }
    ...
}

开发指南及技术栈说明

学习记录(更新中)

1.axios请求封装 统一异常处理

2.路由菜单加载

3.控制权限至按钮显示

4.基于Websocket实现发送消息后右上角消息图标红点实时显示

Docker下前端端集群部署(更新中)

后端端集群部署请跳转至x-boot项目查看

1.Docker的安装与常用命令

2.Nginx集群搭建

3.XBoot前端集群部署及负载均衡配置

作者其他项目推荐

技术疑问交流

  • QQ交流群 475743731(付费),可获取各项目详细图文文档、疑问解答

  • 免费交流群 562962309

  • 作者博客:http://blog.exrick.cn

About

基于Vue+iView开发的x-boot前台 权限可控制至按钮显示 动态路由权限菜单/多语言/简洁美观 前后端分离

http://xboot.exrick.cn


Languages

Language:Vue 67.3%Language:JavaScript 23.0%Language:CSS 9.3%Language:HTML 0.4%