springcloud 学习六 增加vue-element-admin 作为前端 springcloud 后端

后端的认证服务器,UPMS(用户权限服务)已完成。

前端选择vue-admin-template 进行改造,

代码提交更新至GIT库: 

shrek 后端:  https://github.com/wushu0725/shrek

shrek-ui 前端 : https://github.com/wushu0725/shrek-ui  

线上DEMO : http://www.shrek11.cn:8080  实现登陆获取token,获取用户信息,退出注销token

拿下前端和后端代码后,执行SQL脚本,修改数据库和redis配置,

后端先启动  shrek-service,shrek-geteway,shrek-auth,shrek-upms,

前端VUE  用NODEJS跑,执行 npm install ,npm run dev

springcloud 学习六 增加vue-element-admin 作为前端 springcloud 后端_第1张图片

 

现在的环境是 

springcloud 学习六 增加vue-element-admin 作为前端 springcloud 后端_第2张图片

shrek-service  服务注册   端口 8888

shrek-geteway  服务网关  端口  9999

shrek-auth       认证服务   端口 9000

shrek-upms     用户权限管理服务   端口  9111

我们下载vue-element-admin到本地,修改代理配置文件,意思是开发环境所有的接口前面加/api

然后,代理会把所有接口/api开始的接口代理发送到http://127.0.0.1:9999 后端网关。

springcloud 学习六 增加vue-element-admin 作为前端 springcloud 后端_第3张图片

springcloud 学习六 增加vue-element-admin 作为前端 springcloud 后端_第4张图片

修改登陆接口和获取用户信息接口

springcloud 学习六 增加vue-element-admin 作为前端 springcloud 后端_第5张图片

在前端请求的钩子函数中加 认证信息

springcloud 学习六 增加vue-element-admin 作为前端 springcloud 后端_第6张图片

 

启动前端,后端服务,在页面上点登陆,看请求数据和返回数据

认证请求。

获取用户信息请求.

springcloud 学习六 增加vue-element-admin 作为前端 springcloud 后端_第7张图片

你可能感兴趣的:(前后端分离,springcloud,学习,高性能WEB网站)