Coder Social home page Coder Social logo

andyzhou192 / xboot-front Goto Github PK

View Code? Open in Web Editor NEW

This project forked from exrick/xboot-front

0.0 3.0 0.0 4.21 MB

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

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

JavaScript 21.70% HTML 0.41% Vue 69.31% CSS 8.59%

xboot-front's Introduction

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

xboot-front's People

Contributors

exrick avatar

Watchers

James Cloos avatar andyzhou192 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.