Angular4 后台管理系统搭建(8) - 重构angular4 站点。

  这章介绍下我这几天重构的angular4 站点。我们最终目标是用angular4做企业级应用的web后台。所以某些功能需要加强。比如更强的权限管理,更自动化的辅助功能。新站点基本上可以满足,可以作为一个基础来扩展。

demo演示地址: http://114.215.44.2      旧版的站点我转移到  http://114.215.44.2:81

github地址:https://github.com/Vetkdf/yang-location

第一步,熟悉下新项目个个模块的作用

其中 以business开头的文件夹,是和业务相关的。根据业务多少自己扩展。module文件夹内是实体类。里面的文件夹和外面业务相关文件夹有个对应关系。

每个业务文件夹内文件对应关系如下

第二步,简单的权限管理和显示对应

在后台数据库里设计几个表。创建一个很简单的权限管理。权限精确到页面级,不精确到按钮级。即每个页面上明确增删读改四个权限。不区分页面内多个按钮的权限。

所以在angular4站点登录的时候。我们就可以获取用户所在用户组的权限。确定左侧目录树能显示那些模块,和那些页面。也可以全自动的填充导航栏。数据和显示的对应关系如下。

具体代码太多。我不贴了。想要看去github上下载看吧。

第三步,前后端两次权限检查

应为我们把数据都放在前端。很多插件可以更改前端数据。所以在除了可以使用前端的

this.indexNews.pagesNews.D //前端获取当前用户对这个页面是否有删除操作权限,有权限为1  没有权限为0 

这样获取当前页面 增删读改  四个权限外。所有和后端 交互的地方,也要检测一次权限。目前通用的做法是在在RESTFUL接口的html头内附件数据,我们也这么做。附加一个 Access-Token

整个系统里,除了登录的get请求不包含。其他所有和后端的交互都要包含这个header附加值。

Access-Token 数值由   token(登录时获取) userid ,pageid 组成。并在和Restful接口交互的时候传递。

这样所有的操作,在服务端可以通过一个拦截器先拦截所有请求。通过Restful的POST, GET,PUT, DELETE。匹配对这个页面权限的 增删读改。 token 和userid用来验证合法性。pageid 用来定位页面。杜绝用户在前端手动修改任何基础数据。扰乱权限的问题。

到目前为止。基本上可以在正式项目内使用了。只要继续按业务扩展就可以。这章没有贴多少代码。应为如果贴代码,那就要贴的太多了。还是下载看吧。

时间: 2024-11-07 16:44:36

Angular4 后台管理系统搭建(8) - 重构angular4 站点。的相关文章

Angular4 后台管理系统搭建(3) - wijmo5 flexgrid表格增删改按钮实现

这章应该是wijmo5 flexgrid表格应用的最后一章,我们在三章内介绍了flexgrid表格组件的数据绑定,分页器搭建,单元格模板控制和代码重绘单元格控制.这章在介绍下对表格添加增删改三个按钮.有了这些功底以后做angular的项目,使用wijmo5 flexgrid组件.基本上是够用了.还有一些比如内部编辑,合并,子表格什么的需要了在去熟悉即可. 首先是要在ts文件内找到html模板内的表格对象.这个用@ViewChild 这个指令实现.我们看下实现,首先是html模板 对表格组件,我们

Angular4 后台管理系统搭建(7) - 切换开发环境

最近事情很多.没顾得上更新.公司协商解除劳动关系了.不过公司按劳动法给了违约金,也是不错的.以后就有更多的时间来做这个. 有人说下载以后编译出错.当时我觉得很奇怪.在我的机器上很稳定的.后来问了下,是在windows环境上.我自己也找了个windows机器.试了下.也是出错. 这种类型转换的错误.但是在MAC环境下.却是一点问题没有.下图是在MAC屏幕上的拍照.不会有错误提示. 要解决也很简单.所有异常处理那.前面加上return.改成如下就可以 .catch((error: any) => {

vue____后台管理系统搭建(推荐,懒得自己写了)

@跳转链接   作者:花裤衩      ---->>     https://juejin.im/post/59097cd7a22b9d0065fb61d2 比较完整的一篇,从开始到结束: 内容涉及环境搭建,基础知识,webpack (不包含)  个人推荐  如果搭建  管理后台 上述链接可应付: 如若要写APP   混编   请酌情结合以下内容: webpack (不包含)  @ 推荐链接:         https://segmentfault.com/a/119000000617877

【开源】OSharp框架解说系列(2.1):EasyUI的后台界面搭建及极致重构

〇.前言 要了解一个东西长什么样,至少得让我们能看到,才能提出针对性的见解.所以,为了言之有物,而不是凭空漫谈,我们先从UI说起,后台管理页面的UI我们将使用应用比较普遍的easyui框架. 以前在用easyui的时候,每个页面都得从0做起,或者不厌其烦地由以前的页面通过“复制-粘贴”的方式来修改,久页久之,就会造成页面庞大且难以维护.其实,前端的html,javascript代码与后端的代码是一样的,通过一定的组织,把重复的代码抽离出来,同样也通过达到很好的复用率.而MVC的天生的Layout

从零开始搭建vue+element-ui后台管理系统项目到上线

前言 之前有些过移动端的项目搭建的文章,感觉不写个pc端管理系统老感觉少了点什么,最近公司项目比较多,恰巧要做一个申报系统的后台管理系统,鉴于对vue技术栈比较熟悉,所以考虑还是使用vue技术栈来做:看过一个不错的后台配置模板(vue-element-admin),页面也挺美的,但是还是碍于不想看太多关于这个模板的配置说明,于是又拉出来之前我搭建的简易版的模板,决定重构下,使用自己搭建的后台系统模板,配置非常简单:本文将从初始化项目开始一直到打包上线做一个详细的介绍,看完本文章,绝对会对其中的一

淘淘商城_0200_搭建后台管理系统

后台管理系统工程搭建 项目是maven项目,Maven的工程类型: 1.war包工程:web工程 2.Jar包工程:java工程,打完是一个jar包 3.Pom工程:父工程,聚合工程 ,这两个一般合起来用,pom工程即做父工程,又做聚合工程来聚合其他模块,以方便执行maven命令. 1.1   父工程的搭建 打开myeclipse 右键new ,new一个maven project,勾选create a simple project 修改pom文件: <project xmlns="htt

基于thinkphp的后台管理系统模板快速搭建

当我们在搭建网站的时候,后端开发人员在编写后台的管理系统的时候,往往会因为缺少一个合适的后台管理系统的模板,而必须去重新编写一个,这几天由于工作上的安排,需要去研究一下thinkcmf的后台管理系统,于是发现那个模式是相当不错,感觉基本每个后台管理系统都可以套用,我把它的主题框架划分了4个大块,三级菜单栏.内容iframe.标签栏.顶栏,如下图: 是不是觉得挺可以的?是不是有种所有后台管理系统都可以套用的赶脚勒?由于整个后台过于庞大,但我们又只是要其这样的主体UI框架,其他的都不要,于是我把它重

Django打造在线教育平台_day_3: 搭建后台管理系统Django自带的admin

1.后台管理系统的特点:权限管理.少前端样式.快速开发 2.Django自带的admin后台管理系统,新建项目时会自动建立,admin也可以看成一个app 运行了程序打开链接:http://127.0.0.1:8000/admin/,就进入了后台管理系统登录页面 3.新建超级用户: Tools 工具栏运行 run manage.py Task 输入:createsuperuser,再根据提示输入用户名.邮箱.密码 4.登录成功: 5.把系统语言设置为中文与设置本地时间:修改MxOnline/se

4、Django实战第4天:xadmin快速搭建后台管理系统

Django默认为我们提供了后台管理系统admin, urls.py中配置的第一条就是访问后台管理系统admin的 urlpatterns = [ url(r'^admin/', admin.site.urls), ] 启动服务,访问127.0.0.1:8000/admin即可访问,访问后台需要验证,但是Django并没有为我们自动创建账号密码,Django提供了命令,让我们自己创建超级用户 现在我们可以用刚刚创建的超级用户登录进去(账号:admin 密码:admin123456) 原文地址:h