01 前言
如果你还未曾看过我之前三篇关于通告APP的，建议你点击上方链接哦~~
02 正文
现在已经是第六周的周末了，主要的业务功能基本完成了哦~
第八周这门课程结课了，因为已经去实习了，所以投入这个APP的时间减少了，不过后期有时间会继续维护和完善~~
我继续来说明一下通告APP的进度啦，这一次主要是说一些细节
下文主要说前端（客户端和管理端），后端（服务端）在上一篇的推文中讲的比较详细：点击了解服务端。
03 客户端
技术栈：vue+mintUI
我们先总体上看一看客户端组件树，树立一个全局观
从0开始，新用户注册之后登陆
扫描二维码关注公众号，回复： 10993513 查看本文章
新用户登录成功之后，页面是这样的
主页页面看见的是当前地区所有人发的通告都会显示
首页左上方会根据用户IP定位到用户所在的城市
但是用户可以手动切换自己想看的地区
输入城市名字之后点击回车
这里就是动态获取，然后下面的通告也是佛山的
我们可以点击通告，进入详情页，然后进行订阅
当你点击订阅之后会显示已订阅
你可以对通告进行点赞的哦
订阅之后，通告订阅页面就会显示啦
当新用户注册之后是没有权限的
除非新用户去申请，并且申请成功，才可以发布通告的
订阅功能的实现:
根据搜狐开放的一个js插件，获取IP，
首页里面根据用户IP获取所在城市
利用高德公开的API解析返回用户IP所在的城市
新用户默认头像是这样的
可以点击编辑个人信息进行修改
修改后—数据会保存到数据库
新用户可以申请权限
权限范围是可以到村的
我这个是从一个github地址下载的，第三方开源爬取的数据：数据链接
它每一级都是一个独立的文件，当你选择要申请的权限范围之后
你就可以进行上下级选择，前端通过访问后台接口，获取每一级的数据，数据是由后端解析文件返回的
我们去后台审核
审批之前我们可以进行查看
查看之后角色没有问题我们可以进行审批通过
审批通过之后，这个普通用户就是权限用户了哦
有了权限之后，他/她就可以发布通告了
点击发布通告的图标进入发布通告的界面
我们进行编辑，这里用了一个插件，实现了富文本编辑的功能
手牵手，我们去后台审批这个通告吧
我们可以点击详细按钮查看通告详细内容
然后可以进行审批
审批通过之后
这个通告就可以在通告列表显示出来啦
如果后期发现这个通告有不好的地方，比如不符合事实或者存在抄袭等，可以对这个通告进行停用
以上就是客户端的啦
小结一下客户端的功能：
截图是不是不带劲？我录制了动态的…
登录注册效果如下
首页自动定位，手动修改地址，效果如下
订阅点赞功能，效果如下
修改个人基本信息，效果如下
申请权限功能，效果如下：
后台审批通过之后，他就是权限用户了，可以发布通告了
注意：他申请权限通过之后是不可以再次申请的
我们后台审核通过之后，就可以显示了
以上就是客户端的啦
接下来我们就看看管理端的咯
04 管理端
主要技术栈：vue-element-admin
管理端组件树
功能：动态路由与权限管理（用了两周时间才弄出来…）
- 管理员拥有
全部菜单权限 - 权限用户拥有的是
部分菜单权限
注意：侧边栏的这个菜单权限是根据用户id，查询数据库，根据用户所属角色动态生成的
动态路由是根据后台返回的菜单url列表，动态生成的路由
参考：Vue 动态路由的实现(后台传递路由，前端拿到并生成侧边栏)
参考：开源项目 > WEB应用开发 > 后台管理框架
管理端登录
管理员登录
管理员拥有全部权限
- 用户管理（权限用户，普通用户，授权审批）
- 通告管理（审批通告，通告列表）
- 角色管理（角色列表）
- 权限管理（菜单管理）
截图如下：
权限用户登录
权限用户拥有部分权限
- 用户管理（授权审批）
- 通告管理（审批通告，通告列表）
截图如下：
角色是可以增加的
角色是由管理员管的，可以对角色或者角色所拥有的权限进行修改
比如我们可以增加一个角色：村委书记
给他一个审批公告的功能
这里就显示出来了
对于权限菜单，可以进行增删改查
小结一下管理端的功能：
数据库
用户与角色是一对一的关系，用户登录之后，根据用户的id去判断用户是什么角色角色和权限是多对多的关系，一个角色可以有多个权限，一个权限可以被多个用户使用
根据角色去查对应的菜单权限，动态生成路由json返回给后台管理系统，通过addRouter动态渲染到侧边栏
角色暂时是这样设计的，如果用户申请的角色是其他的，比如党委或者书记等角色
那么可以在管理端动态添加，然后顺便赋予权限
总结
个人能力不行，技术有限，完成了基本的大概的功能
管理端是别人封装好的二次框架来的，所以代码量异常的多…改起来那酸爽…
我感觉上下级关系那边的处理还是不够友好~~~
管理端还有一些小bug，后期会修复，客户端还有一些小功能可完善，后期会慢慢完善。
