Giter Site home page Giter Site logo

jerry-goodboy / usthe Goto Github PK

View Code? Open in Web Editor NEW

This project forked from tomsun28/usthe

0.0 2.0 0.0 1.87 MB

bootshiro+usthe权限管理系统angular前端(前后端分离,也可作为企业基本框架)线上注册用户为体验给了最大权限,请不要随意删除。

Home Page: http://tom.usthe.com

License: MIT License

Dockerfile 0.58% TypeScript 57.82% JavaScript 3.34% CSS 0.26% HTML 38.01%

usthe's Introduction

usthe

  • ustherestful URL资源无状态认证权限管理系统的前端,基于angular+typeScript+adminLte,后端bootshiro
  • 区别于一般,提供页面可配置式的,动态的 restful api 安全管理支持
  • 数据传输动态秘钥加密,jwt过期刷新,用户操作监控等 加固应用安全

使用和一些约定


  • 您使用此项目在后端开发好api后,需要在前端页面 资源配置->API管理 新增基于ant匹配风格的api(约定没有配置的api没有保护)
  • eg: 获取角色关联的对应用户列表 rest-url/role/user/{roleId}/{currentPage}/{pageSize}访问方式为GET, 您需要在页面新增api: /role/user/*/*/* GET方式
  • 自定义url匹配链约定为 url= url+"=="+httpMethod
  • 页面添加了api后,您需要在 资源配置->角色管理 配置您想要授权角色的API,菜单,关联用户等资源(约定授权给auth_anon角色的api可以被所有人访问,,注意没有授权给任何角色的api是可以被任何人访问的)
  • 授权菜单在第一次登录时已经获取存储到sessionStorage防止重复获取,您授权变更菜单之后想要看的效果需要关闭页面重新打开(或者清除sessionStorage之后会自动获取授权菜单)
  • have fun

学习交流QQ群 482621971

项目的基础框架设计:

总的长这样:

image1


前端usthe

基于angular5 + angular-cli + typeScript + rxjs + bootstrap + adminLTE,践行angular最佳实践。
过程中node,webpack等有用到过,但我不熟。。。

后端bootshiro

基于springboot + apache shiro + mybatis框架,restful风格api,自定义状态码,json-web-token,druid数据库连接池,swagger文档生成,redis存储refreshtoken和动态秘钥,maven,MD5单向加密和AES双向等。。。

gate -nginx

这个nginx作为反向代理服务器,解决了跨域,真实IP头(现服务器端支持跨域可不用nginx)。另一个nginx作为angular应用服务器,tomcat作为bootshiro的服务器。

反向代理的nginx.conf见: conf

持续集成

流程长这样~:

image2

详细实现技术见另一篇: docker学习

相关文档


部署


0.安装nginx(可选)

  • 这里使用docker安装nginx-docker
  • clone 上面的nginx-docker仓库到本地: git clone https://gitee.com/tomsun28/DockerFile.git
  • 进入nginx目录修改nginx.conf对应参数: 要代理的后端bootshiro服务IP,要代理的前端usthe地址IP
  • 进入nginx目录下,生成nginx镜像:docker build -t nginx:1.0 .
  • 启动nginx: docker run -d -p 80:80 --name nginx nginx:1.0

1.IDE启动调试

  • fork 项目到自己的仓库(欢迎star^.^)
  • clone 项目到本地 git clone https://gitee.com/yourName/usthe.git
  • 用WebStorm导入
  • 需要node环境
  • 安装angular cli工具 npm install -g @angular/cli@latest
  • 进入项目目录 npm install
  • 修改/src/environments/environments.ts开发环境的apiBaseUrl对应为后端服务器提供api服务地址
  • 若使用nginx做代理(apiBaseUrl为nginx地址,约定nginx-url+'/api/'为提供api的后端项目根url,具体可在nginx.conf里修改)
  • ng serve 启动
  • 前提启动了后端bootshiro
  • 访问浏览器ok http://localhost:4200

这个本地开发环境部署现可以去掉nginx,但生产环境最好还是要有的

2.docker本地部署

  • fork 项目到自己的仓库(欢迎star^.^)
  • clone 项目到本地 git clone https://gitee.com/yourName/usthe.git
  • 修改/src/environments/environments.prod.ts生产环境的apiBaseUrl
  • 在项目目录下 docker build -t usthe:1.0 .
  • docker images看是否生成镜像成功
  • 运行 docker run -d -p 4300:4200 --name haiLady usthe:1.0
  • docker ps 就可以看见您的haiLady了
  • 前提部署了后端bootshiro
  • 访问浏览器 http://localhost:4300

3.jenkins+docker持续集成持续部署CICD

  • fork 项目到自己的仓库(欢迎star^.^)
  • clone 项目到本地 git clone https://gitee.com/yourName/usthe.git
  • 更改生产和开发环境对应的/src/environments/environments apiBaseUrl
  • 搭建CICD环境有点繁琐,看这篇最下面
  • 参照搭建完成后,usthe对应的jenkins下运行shell:
#!/bin/bash

#build in jenkins sh

#docker docker hub仓库地址,之后把生成的镜像上传到  registry or docker hub
REGISTRY_URL=127.0.0.1:5000
#docker login --username tomsun28 --password xxxx

#根据时间生成版本号
TAG=$REGISTRY_URL/$JOB_NAME:`date +%y%m%d-%H-%M`

#使用放在项目下面的Dockerfile打包生成镜像
docker build -t $TAG $WORKSPACE/.

docker push $TAG
docker rmi $TAG

#判断之前运行的容器是否还在,在就删除
if docker ps -a | grep -i $JOB_NAME;then
docker rm -f $JOB_NAME
fi

#用最新版本的镜像运行容器

docker run -d -p 4200:80 --name $JOB_NAME $TAG

仓库

gitee:

bootshiro
usthe

github:

bootshiro
usthe

。。。。。持续同步更新。。。。

======================================

欢迎一起完善哦^^



效果展示

image4

image5

image6

image7

thanks:

Howieair的小猪图标
zhangkaitao的跟我学shiro
网络上前辈们的教程文章开源项目



usthe's People

Contributors

tomsun28 avatar

Watchers

liucaidong 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.