【通告随时知APP】项目基本完成
01 前言
1. 通告APP，项目需求以及背景分析
2. 通告APP的进度
3. 04.12 项目进度
如果你还未曾看过我之前三篇关于通告APP的，建议你点击上方链接哦~~
02 正文
现在已经是第六周的周末了，主要的业务功能基本完成了哦~
第八周这门课程结课了，因为已经去实习了，所以投入这个APP的时间减少了，不过后期有时间会继续维护和完善~~
我继续来说明一下通告APP的进度啦，这一次主要是说一些细节
下文主要说前端（客户端和管理端），后端（服务端）在上一篇的推文中讲的比较详细：点击了解服务端。
03 客户端
技术栈：vue+mintUI
我们先总体上看一看客户端组件树，树立一个全局观
从0开始，新用户注册之后登陆
新用户登录成功之后，页面是这样的
主页页面看见的是当前地区所有人发的通告都会显示
首页左上方会根据用户IP定位到用户所在的城市
但是用户可以手动切换自己想看的地区
输入城市名字之后点击回车
这里就是动态获取，然后下面的通告也是佛山的
我们可以点击通告，进入详情页，然后进行订阅
当你点击订阅之后会显示已订阅
你可以对通告进行点赞的哦
订阅之后，通告订阅页面就会显示啦
当新用户注册之后是没有权限的
除非新用户去申请，并且申请成功，才可以发布通告的
订阅功能的实现:
根据搜狐开放的一个js插件，获取IP，
首页里面根据用户IP获取所在城市
利用高德公开的API解析返回用户IP所在的城市
新用户默认头像是这样的
可以点击编辑个人信息进行修改
修改后—数据会保存到数据库
新用户可以申请权限
权限范围是可以到村的
我这个是从一个github地址下载的，第三方开源爬取的数据：数据链接
它每一级都是一个独立的文件，当你选择要申请的权限范围之后
你就可以进行上下级选择，前端通过访问后台接口，获取每一级的数据，数据是由后端解析文件返回的
我们去后台审核
审批之前我们可以进行查看
查看之后角色没有问题我们可以进行审批通过
审批通过之后，这个普通用户就是权限用户了哦
有了权限之后，他/她就可以发布通告了
点击发布通告的图标进入发布通告的界面
我们进行编辑，这里用了一个插件，实现了富文本编辑的功能
手牵手，我们去后台审批这个通告吧
我们可以点击详细按钮查看通告详细内容
然后可以进行审批
审批通过之后
这个通告就可以在通告列表显示出来啦
如果后期发现这个通告有不好的地方，比如不符合事实或者存在抄袭等，可以对这个通告进行停用
以上就是客户端的啦
小结一下客户端的功能：
截图是不是不带劲？我录制了动态的…
登录注册效果如下
首页自动定位，手动修改地址，效果如下
订阅点赞功能，效果如下
修改个人基本信息，效果如下
申请权限功能，效果如下：
后台审批通过之后，他就是权限用户了，可以发布通告了
注意：他申请权限通过之后是不可以再次申请的
我们后台审核通过之后，就可以显示了
以上就是客户端的啦
接下来我们就看看管理端的咯
04 管理端
主要技术栈：vue-element-admin
管理端组件树
功能：动态路由与权限管理（用了两周时间才弄出来…）
- 管理员拥有
全部菜单权限 - 权限用户拥有的是
部分菜单权限
注意：侧边栏的这个菜单权限是根据用户id，查询数据库，根据用户所属角色动态生成的
动态路由是根据后台返回的菜单url列表，动态生成的路由
参考：Vue 动态路由的实现(后台传递路由，前端拿到并生成侧边栏)
参考：开源项目 > WEB应用开发 > 后台管理框架
管理端登录
管理员登录
管理员拥有全部权限
- 用户管理（权限用户，普通用户，授权审批）
- 通告管理（审批通告，通告列表）
- 角色管理（角色列表）
- 权限管理（菜单管理）
截图如下：
权限用户登录
权限用户拥有部分权限
- 用户管理（授权审批）
- 通告管理（审批通告，通告列表）
截图如下：
角色是可以增加的
角色是由管理员管的，可以对角色或者角色所拥有的权限进行修改
比如我们可以增加一个角色：村委书记
给他一个审批公告的功能
这里就显示出来了
对于权限菜单，可以进行增删改查
小结一下管理端的功能：
数据库
用户与角色是一对一的关系，用户登录之后，根据用户的id去判断用户是什么角色角色和权限是多对多的关系，一个角色可以有多个权限，一个权限可以被多个用户使用
根据角色去查对应的菜单权限，动态生成路由json返回给后台管理系统，通过addRouter动态渲染到侧边栏
角色暂时是这样设计的，如果用户申请的角色是其他的，比如党委或者书记等角色
那么可以在管理端动态添加，然后顺便赋予权限
总结
个人能力不行，技术有限，完成了基本的大概的功能
管理端是别人封装好的二次框架来的，所以代码量异常的多…改起来那酸爽…
我感觉上下级关系那边的处理还是不够友好~~~
管理端还有一些小bug，后期会修复，客户端还有一些小功能可完善，后期会慢慢完善。
【通告随时知APP】项目基本完成相关推荐
- 技术总监之路——App项目开发流程
App项目开发流程 一. 需求阶段 1. 初期由leader或者项目责任人和PM沟通下阶段开发计划,确认需求的可行性和优先级等初步达成共识 2. 接下来PM提供详细UE文档(需求颗粒感尽可能小)发起三 ...
- 一些完整的Android开源app项目
android开源项目有很多,但是完整的app项目不多,下面是最近我 整理的一些开源app项目: 注: jcodecraeer网站上搜集了很多开源项目,更新很快,非常值得关注. 一.photoup 介 ...
- 视频教程-React全栈：前后端分离的招聘Web App项目（含资料）-ReactJS
React全栈:前后端分离的招聘Web App项目(含资料) 张长志技术全才.擅长领域:区块链.大数据.Java等.10余年软件研发及企业培训经验,曾为多家大型企业提供企业内训如中石化,中国联通,中国 ...
- 视频教程-【孙伟】APP项目UI设计基础-工具图标设计视频教程-UI
[孙伟]APP项目UI设计基础-工具图标设计视频教程 教学产品线与企业合作项目负责人,移动互联学院教学总监,从事培训与UI/UED课程研发工作多年,拥有数万学员且平均薪资位居行业前列.曾就职于世界50 ...
- 盘点 Github 上的高仿 app 项目
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 作者:水哥:来源:GitHubClub 学技术的,多多少少 ...
- App项目实战之路(二):API篇
原创文章,转载请注明:转载自Keegan小钢 并标明原文链接:http://keeganlee.me/post/practice/20160812 微信订阅号:keeganlee_me 写于2016- ...
- 第一次，触碰Web App项目，栽过的那些坑。
此项目是一个IPad上的Web App项目,页面的滚动用了最新的IScroll 5.0 插件, 确实是挺潮的. 项目用时 1个月 完成的, 准备今天晚上上线. 这是年前的最后一篇文章了,与众位博友分享 ...
- java 酒店预定 app_Android应用源码酒店在线预定app项目全套
[实例简介] Android应用源码酒店在线预定app项目全套 [实例截图] [核心代码] package com.bn.summer; import android.graphics.Bitmap; ...
- HTML5 APP项目展示响应式网页模板
简介: 国外的一款APP项目展示HTML单页模板 1.该模板代码干净整洁: 2.效果相当的炫酷,相当简洁大气高端,模板简单,全部已数据调用 3.网站手工DIV+css,代码精简,首页排版整洁大方.布局 ...
最新文章
- 对于PS和flash协作做过光字的一点心得
- exception java doc,Javadoc和RuntimeException
- win10 java64虚拟机_Java VM 环境配置过程要点（ win10,64位）
- Mysql —— C语言链接mysql数据库，实现可以增删改查的角色权限登录系统
- 华为ap配置_第18期——AP安装常见问题和注意事项
- React应用里Invalid hook call错误消息的处理
- jquery 筛选元素 (3)
- hibernate one2one 唯一外键关联（双向关联）
- P3388 【模板】割点（割顶）
- Java反射机制--反射概述
- 发现同构：Gartner曲线、达克效应 与 跨越鸿沟
- WebP是什么格式？如何免费批量转换JPEG
- springboot打包-依赖包到单独文件夹并微缩原有jar包体积
- 错误记录：FutureWarning: Using a non-tuple sequence for multidimensional indexing is deprecate
- 数字信号处理随堂笔记（2）ᝰ离散时间信号与系统的频域分析
- 【算法和数据结构】模拟和暴力
- c语言计算二次函数顶点坐标,C语言编写一个求一元二次方程的实根的程序。 编辑一个小程序去做一元二次方程的求解（b^24ac）...
- 拼多多买菜进击一线城市：上海开团首日，1公里开出11家自提点
- html把一张图片动态的代码,原神：4张动态图演示168皮肤琴的实机效果，三种玩家可入手...
- 网络基础-IP地址详解