Skip to content
bootshiro+usthe权限管理系统angular前端(前后端分离,也可作为企业基本框架)。
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
e2e
image
nginx
src
.angular-cli.json
.editorconfig
.gitignore
Dockerfile
LICENSE
README.md
karma.conf.js
package-lock.json
package.json
protractor.conf.js
tsconfig.json
tslint.json
usthe.yaml

README.md

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
网络上前辈们的教程文章开源项目



You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.