2018-11-01

,开发工具
1,编译器:webstorm
2,版本管理工具:SVN
3,切图:Photoshop
4,CSS框架:bootstrap3.3.7
5,css预处理器:sass
6,js框架:jQuery3.3.1 angularJs1.7.0
7,路由:ui-router
8,富文本:wangedit
9,模态框: bootbox4.4
10, 图片上传:angular-fiel-upload

后台
VIEW -index.html(首页)
Template(路由模板页面文件夹)
Login(登录页)
-login.html
Backstage(后台页)
-backstage.html
User(用户管理)
-userList.html(用户列表)
-userSearch.html(搜索模板)
-userDetail.html(用户详情
Content(内容管理
-articleList.html(文章列表)
-articleSearch.html(搜索模板)
-articleDetail.html(文章详情)
-videoList.html(视频列表)
-videoSearch.html(搜索模板)
-videoDetail.html(视频详情)
Administrator(后台管理)
-AC.html(账号管理)
-ACDetail.html(账号编辑新增)
-RL.html(角色管理)
-RLDetail.html(角色编辑新增)
-PW.html(密码管理)
-MOD.html(模块)
CSS
-global.css(公共样式)
-login.css (登陆页面样式)
-backstage.css (后台页面样式)
JS
-config(主要存放路由)
-controller(控制器)
-directive(指令)
-fillter(过滤器)
-Di(依赖,自定义服务)
-app.js
Image(图片)
Data(假数据)

1.登录页
需求描述:
可以有一个页面可以让我登录进行并且使用求学大作战后台的功能。

验收标准:

输入index.HTML默认就是登录页面。页面上面两个输入框,方便输入账号和密码有输入验证,方便用户第一时间知道的错误与否。点击登录按钮,账密错误在页面上有相应的提示。成功跳转到后台页面。

实现思路:

1.使用ng-messge来实现错误提示。
2.点击登录按钮,发送账密,加上请求,成功就跳转到后台页面。
3.使用coki,来实现确定那个管理员登录。存储起来。

2后台页面
需求描述:
作为一个后台管理员登录希望有一个手风琴列表,让我可以进入相应模块。顶部有管理员,注销等功能。主页有一个欢迎进入后台管理的欢迎语。

验收标准:

1,顶部的头有logo,具体那个管理员,注销功能。
2,右边有一个手风琴。
3,有欢迎语

实现思路:

1.顶部的注销使用模态框,确定之后清除coki。
2.管理员的话,从登录那里获取然后设置全局。显示在页面上。
2.手风琴页面使用ui-bootstrap的手风琴即可。
3后台页面
需求描述:
作为后台管理者,刚刚进入页面,希望有一个默认的用户。可以是按照默认排列。我希望可以用一个搜索功能,选择相应的条件,让我按照条件搜索相应用户。
在用户管理列表我希望可以看到用户基本信息。用户的总人数,进行限制用户的登录,可以点击查看具体某个用户的信息。

验收标准:

1,点击手风琴的用户列表,进入用来管理页面。上面是搜索的,下面是具体的用户列表。

2,列表页面可以展示用户总人数,ID,昵称,邮箱,逆袭豆,年级,所在区域,状态,进行操作等。搜索部分可以按照昵称,手机号,逆袭豆,(后一个逆袭豆要比前一个大)ID,邮箱,年级,状态,所在区域,进行搜索, 选择之后,点击搜索,下面的列表更新数据,搜索旁边有一个重置按钮,点击之后把搜索条件恢复默认,更新数据。

3,点击查看按钮可以挑战到相应页面,展示手机,ID,昵称,邮箱,逆袭豆,年级,所在区域,头像等。

4,点击冻结可以弹出一个模态框,让我确定是否冻结用户,如果点击确定,更新页面信息,展示该用户被冻结。

5,点击解冻可以弹出一个模态框,让我确定是否解冻用户,如果点击确定,更新页面信息,展示该用户被正常。

实现思路:

1,冻结和解冻使用bootbox的模态框来进行是否确定,确定之后,发送请求到服务器,然后发送成功使用回调 reload重新加载页面。

2.搜索的手机号,限制输入数字,11位,邮箱的话,类型是邮箱,

逆袭豆限制输入整数,设置互相关联,后者要大于前者,难点:暂时不知道怎么实现。
所在区域选择之后,弹出一个选择框。难点:没有接触过,不知道怎么实现

3,不管是默认的还是搜索的,都是发送请求到服务器,获取到的数据,使用ng-ng-repeat来渲染到页面上。
4,使用一个过滤器,获取用户状态,根据用户状态来显示操作的按钮是冻结还是解冻。

4内容管理
4.1文章管理:

需求描述:
作为后台管理者,我希望可以管理我网站的文章视频等,进入到页面写上面可以按照标题,作者,点赞数和收藏数,分类(banner,card)状态(上下架)进行搜索文章。
作为后台管理者我希望可以看到列表可以把标题,分类,年级,点赞,收藏,状态等信息展示出来。
希望可以进行文章的查看,新增,编辑,上下架等操作。

验收标准:
1,可以按照标题,作者,点赞数,收藏数,状态,分类进行搜索。点击重置,可以清除搜索框的东西,恢复默认的列表。点赞数和收藏数只限填写数字,后者不允许小于前者。

2,banner文章最多增加8张,超过8张后,第九个上架,第一个下架。

3,点击上架或者下架文章,弹出一个确认框,点击确定就进行相应操作。否,取消操作。

4,点击查看,不能操作。

5,新增和编辑的标题,限制在25个字,上传图片限制在5M左右,超过弹出一个窗口提示。作者限制14个字,摘要限制28个字。需要做一个表单验证,全部填完修改或者提交按钮才能点击。

6,分页功能可以使用,分页的输入框只能输入正整数。

实现思路:

1.搜索主要是点赞和收藏的收藏要数字,后一个比前一个大。

难点:怎么实现。后一个比前一个大。
现在是如果输入了第一个,5,第二个输入小于5的话,自动删除输入框数字。
如果是先输入第二个,再输入第一个,第一个比第二个大的话,删除第一个输入框的值。

2.下面分页使用UI-bootstrap的分页组件,然后自己加上一个input框,input框的值正整数,跟分页里面的ng-model值是一杨的。点击确定一样是可以实现分页的效果。

3.上下架使用boobot的comfirm来操作,点击是,就发送请求到服务器。

难点: 怎么只能上传8张,超过8张,怎么自动下架第一个张,然后把第九张给上传上去。

解决办法: 点击上架的话,确定按钮之前。先获取在页面上获取有多少上架的文章,使用if判断,如果已经有8张,点击comfirm的是按钮。然后先发送一个请求把第一个给下架了。然后再把本次这个上架。

4.把新增编辑和查看设置为同一个HTML页面。在文章列表的新增,编辑,按钮页面分别设置一个参数,例如1,2,3。

然后在在新增等页面获取这个参数,设置为一个ng-model。使用ng-if来显示HTML页面的内容。

5,通过获取的参数,判断页面如果是新增,内容全部是空。
如果是编辑页面。根据传输过来的ID,发送请求到服务器,获取到的数据然后使用ng-model页面上。

如果是查看页面,发送请求到服务器,获取数据,渲染到页面上,通过使用disabled=“disabled" 在页面上,使得页面内容不可编辑。

4.2视频编辑页面

需求描述:
1,作为一个管理者,我希望有视频管理,方便我们管理视频,管理视频
2,作为一个管理者,我希望有搜索功能,可以按照标题,分类,年级,科目,点赞,收藏,老师,状态等,进行搜索,来进行管理。
3,作为一个管理者,我希望对视频列表的内容进行查看。可以对视频文章进行上下架,查看,编辑,新增视频。

验收标准:

1,搜索部分,点赞和收藏部分,只能输入正整数,后一个比前一个大。
2,视频文章列表只能上架8张banner图,标题,只能显示14个字,超过换行显示。老师名字,一行显示5个字,超过换行。
3,新增视频,默认下架状态,一页展示10条数据。安装标记时间顺序排列。
4,点击上下架,弹出模态框,点击确定进行上下架。
5,查看页面不能操作
6.新增页面,点击删除老师,弹出模态框,点击确定,再弹出成功的弹窗。点击老师添加,时代峰峻爱啦啦啦 视频简介限制140字数。上传视频的格式要使用mp4格式,如果不是出现一个模态框提示上传mp4.
新增页面选择banner图,会弹出一个上传封面的部分。里面有上传组件,上传预览等。新增页面点击保存,由调到视频列表,并提示上传成功。点击取消,有一个comfirm,如果是取消就关闭,确定就跳到视频列表页面。

7.编辑页面,如果分类是banner图的话,就把封面部分显示出来。编辑标题限制40字。 视频简介限制140字数。上传视频的格式要使用mp4格式,如果不是出现一个模态框提示上传mp4.编辑页面点击保存,由调到视频列表,并提示上传成功。点击取消,有一个comfirm,如果是取消就关闭,确定就跳到视频列表页面。

实现思路:

1.搜索主要是点赞和收藏的收藏要数字,后一个比前一个大。

难点:怎么实现。后一个比前一个大。
现在是如果输入了第一个,5,第二个输入小于5的话,自动删除输入框数字。
如果是先输入第二个,再输入第一个,第一个比第二个大的话,删除第一个输入框的值。

2.上下架使用boobot的comfirm来操作,点击是,就发送请求到服务器。

难点: 怎么只能上传8张,超过8张,怎么自动下架第一个张,然后把第九张给上传上去。

解决办法: 点击上架的话,确定按钮之前。先获取在页面上获取有多少上架的文章,使用if判断,如果已经有8张,点击comfirm的是按钮。然后先发送一个请求把第一个给下架了。然后再把本次这个上架。

3.按照最新的编辑时间顺序排序的话,使用for循环来判断文章时间,时间最小的放在前面。
4,一行按照14个字符,或者5个字符显示,超出换行使用,word-wrap:break-word使用这个,算出字符的总宽度,设置一下。

5.把新增编辑和查看设置为同一个HTML页面。在文章列表的新增,编辑,按钮页面分别设置一个参数,例如1,2,3。

然后在在新增等页面获取这个参数,设置为一个ng-model。使用ng-if来显示HTML页面的内容。

6.新增页面,点击删除老师,弹出模态框,点击确定,再弹出成功的弹窗。点击老师添加,弹出的模态框:难点 上传视频的格式要使用mp4格式,获取文件的value值,获取后缀,如果不是mp出现一个模态框提示上传mp4.

新增页面选择banner图,使用ng-if判断会弹出一个上传封面的部分。里面有上传组件,上传预览等。新增页面点击保存,由调到视频列表,并提示上传成功。点击取消,有一个comfirm,如果是取消就关闭,确定就跳到视频列表页面。

7.编辑页面,如果分类是banner图的话,使用if把封面部分显示出来。上传视频的格式要使用mp4格式,获取文件的value值,获取后缀,如果不是mp出现一个模态框提示上传mp4.编辑页面点击保存,由调到视频列表,并提示上传成功。点击取消,有一个comfirm,如果是取消就关闭,确定就跳到视频列表页面。
8
如果是查看页面,发送请求到服务器,获取数据,渲染到页面上,通过使用disabled=“disabled" 在页面上,使得页面内容不可编辑。

5 后台管理

需求描述:
作为一个后台管理者,我希望可以管理我的查看我的账号信息。修改密码,
作为一个超级后台管理员。

我希望可以管理下面的管理员,给他们分配后台的模块或者功能。已经新增管理员。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,670评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,928评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,926评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,238评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,112评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,138评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,545评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,232评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,496评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,596评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,369评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,226评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,600评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,906评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,185评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,516评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,721评论 2 335

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,065评论 25 707
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    X先生_未知数的X阅读 15,960评论 3 119
  • 今日偶然在书上读见: 相思坟上种红豆,豆熟打坟知不知? 第一反应是笑了,呵,这可是所谓的哗众取宠。便在百度上搜到了...
    猫问觉阅读 330评论 0 0
  • 愿你做自己,并坦然欢喜。下载了喜马拉雅FM在手机里面,在泡脚或者做其他事情的事情可以听一下,一举两得。 ...
    isabellaLilove阅读 428评论 0 0
  • #爱在原地等候# DAY 1 这是一个很长很长的故事,如果有人愿意相信,那么我也愿意说出来。 七岁那年,你...
    墨色轻染阅读 223评论 0 1