一、开发工具
1.编译器：Visual Studio Code，微信开发者工具
2.版本管理器：svn
3.切图：Photoshop

二、整体架构
预期可能使用到的前后台框架插件：
（1）CSS预处理器：sass
（2）JS框架：vue
（3）脚手架：vue-cli4.5
（4）ui框架：后台用：element-ui，前台用： WeUI
（5）页面路由： vue-router
（6）html请求：axios

三、项目结构

前台

Src

|——images//存放图片

|——component//存放公共组件

|——pages//个人页面

|——HomePage（首页）

|——SignIn（签到）

|——StudentIdCard（学生证）

||——personalData（个人资料）

||——binding（绑定）

||——dataEdition（资料编辑）

||——collectList（收藏列表）

|——Article（文章）

||——acticleList（文章列表）

||——acticleDetailPgaes（文章详情页）

|——Video（视频）

||——videoList(视频列表)

||——videoDetailPages（视频详情页）

|——untils

||——api.js（接口）

||——request.js（请求）

||——router.js（路由）

||——store.js（仓库）

后台

Src

|——Assets（图片）

|——Component（公共组件）

||——interceptor.js（拦截器）

||——router.js(路由)

||——store.js(vuex仓库)

||——axios（封装axios）

|——Backstage

|——UserManagement（用户管理）

||——userList.vue（用户列表）

||——userDetails.vue（用户详情）

|——ContentManagement（内容管理）

||——articleList.vue（文章列表）

||——articleDetails.vue（文章详情）

||——videoList.vue（视频列表）

||——videoDetails.vue（视频详情）

|——BackstageManagement（后台管理）

|——AccountManagement（账号管理）

||——accountList.vue（角色列表）

||——AccountIncrease.vue（新增账号）

||——editAccount.vue(编辑账号)

|——ChangePassword（修改密码）

||——changePassword.vue（修改密码）

|——RoleManagement（角色管理）

||——roleList.vue(角色列表)

||——roleEdit.vue（角色编辑）

||——roleIncrease.vue(角色新增)

|——MouduleManagement（模块管理）

||——mouduleList.vue(模块列表)

||——mouduleEdit.vue（模块编辑）

||——mouduleIncrease.vue(模块新增)

四、业务逻辑

前台：

门卫处

需求描述：

1.作为一名初高中生，我希望可以通过签到增长我的逆袭豆。这样便于用户在做某种事情上起到优惠的作用。

2.作为一名初高中生，我希望可以查看我的签到记录，这样便于用户知晓签到的情况。

验收标准：

1.在一级背景图上面可以看到签到按钮，点击签到按钮进入签到页面，签到页面展示用户头像、昵称、逆袭豆的数量和“签到”按钮。

2.点击“签到”，弹窗提示“签到成功，获得逆袭豆+x颗”。点击右上角叉号或弹窗展示3秒后自动消失。

3.签到成功之后，在日历上当天签到日期会用逆袭豆展示并按钮置灰变为“已签到”提醒“用户今日已签到”。日历上方展示用户累计签到和签到最高记录的数据。日历展示当月全部的天数。并且展示当天是几月-几号。不能查看之前签到的记录。

4.日历下面有签到规则，点击签到规则弹窗提示“签到领取逆袭豆，通过消耗逆袭豆可观看付费视频。首日签到可领取1颗逆袭豆，连续签到每日递增1颗。连续签到5天后，逆袭豆每日可领取5颗。签到中断逆袭豆可要重新计算呦~”点击空白处或右上角叉号弹窗即可消失

实现方案：

1、在页面中点击签到按钮，进入签到界面，向后端请求数据，获取用户头像，昵称，逆袭豆数量、今天的签到状态和签到的天数，渲染到页面上；

2、签到成功后，弹出一个窗口表面签到成功，通过定时器3s后关闭或点击空白处关闭，可加上遮罩层；

3、查看当月的签到状态，通过后端给的参数，利用条件语句判断是否签到，然后渲染一定的颜色上去，

4、通过后端给的签到状态，给按钮一个点击状态，已经签到的不可点击，并显示为“当天已经签到”

学生证

需求描述

1.作为一名第一次登录初高中生，我希望可以提示我默认调用微信基本信息，这样便于用户方便完善个人资料。

2.作为一名初高中生，我希望可以更改昵称、头像、选择年级，这样便于用户实时更新资料。

3.作为一名初高中生，我希望可以看到我收藏、这样便于用户想看的时候可以进行查看。

验收标准

1.在一级背景图上面可以看到学生证，点击学生证进入学生中心界面。个人资料可以看到学生的空头像、随机昵称、年级：未设置、逆袭豆：0颗。

2.点击资料可完善个人头像、昵称（限制14字之内）、年级的资料，点击保存修改，小窗提示“保存成功”。学生中心界面展示用户的头像、ID、昵称、年级、所在区域、逆袭豆颗数。点击逆袭豆可跳转门卫处进行签到。

3.我的收藏可根据文学部和影像部进行分别就收藏，按照收藏的时间倒叙排列。点击相应的文章跳转详情页面，详情页底部可对文章进行点赞和收藏，收藏有两种状态，分别提示“收藏成功”“取消收藏”。点赞和收藏的状态在列表会变现出来。eg:该文章被收藏或点赞的话会在列表页展示点赞和收藏的状态。在列表不可对文章进行点赞和收藏。

4.点击“账号与绑定设置”，进入绑定页面，可用手机号或邮箱进行绑定。输入正确的手机号或邮箱、正确的验证码，点击绑定则“绑定成功”并显示绑定成功页面，错误则提示相应的toast。分别有“请输入正确格式的邮箱”“请输入正确格式的手机号”“该手机号已绑定”“该邮箱已注册”“验证码错误”“验证超过3次，请明日再试”。首次绑定手机号/邮箱获得20颗逆袭豆，已经绑定手机号/邮箱其中一个的绑定第二个账号不再赠送逆袭豆。

实现方案：

1、wx判断本地缓存中是否有token，有的话，直接向后端发送请求，获取数据库用户信息，可以在个人资料中显示；没有的话，表明用户需要授权，弹出授权窗口，接受个人资料才能显示个人的信息，否则随机生成昵称；

2、点击收藏的时候，把当前的时间戳发会给后端，排序就按照收藏的时间进行排序；收藏功能在前台通过使用wx：for循环来实现，根据后端给的列表完成显示，

3、通过正则验证手机和邮箱的格式，跳出相应的提示，一天只能验证3次，则由后端来完成

文学部

需求描述：

1.作为一名初高中生，我希望可以看到文学文章列表，这样便于我更好的阅读文学文章。

2.作为一名初高中生，我希望可以对文章进行点赞和收藏，这样便于阅读自己认为好的文章。

3.作为一名初高中生，我希望在列表中可以展示作者的文章标题、作者昵称、发布时间、封面、摘要、收藏，点赞数，这样便于用户快速了解文章内容。

验收标准：

1.在一级背景图上面可以看到文学部，对背景大小可手动缩放，滑动并且可以查看全图。点击文学部进入文学文章界面。文章分为banner文章和列表的文章。列表中可以看到文章标题、封面、分类、作者、摘要、收藏数、点赞数、发表时间。banner图每3s滑动一次。

2.列表页的发表时间：1天之内都用小时来展示 -  eg:6小时前；1天之外用日期来展示 - eg:2017-01-02，列表标题展示限制10字之后...。摘要展示限制25字之后…。列表以10条数据为一组进行“点击加载更多”。每加载一次刷新再次加载10条数据。没有数据时底部提示“已加载全部文章”，再点击“已加载全部文章”提示说明“哎呀，没有了，别点啦”。有文章点击则跳转象相应的文章详情下进行阅读。

3.点击列表页数据跳转相应的详情页。详情页展示文章的标题、发表时间、分类、作者、摘要、收藏数、点赞数。可在文章详情页对文章进行点赞和收藏。点击“收藏”成功提示“收藏成功”；取消提示“取消收藏”，收藏成功之后列表页的心也会变成收藏的状态。

实现方案：

1、在首页点击进入文学部列表；

2、轮播图使用swiper，设置3s一次

3、列表页的发表时间使用小时来显示，类如2小时前；超过24小时，显示日期，格式为2020-10-10

4、当用户滑倒页面底部，触发页面的触底监听函数，然后调用开发者设计的触底函数，进行相关请求。其中，请求第二页的数据时，会对返回的数组与原有的数组合并，并把新数组发送到data中，渲染到页面；

5、详情页包括文章的标题、发表时间、分类、作者、摘要、收藏数、点击数，点击收藏弹1出提示显示收藏成功，取消提示取消收藏，相应的也会改变红心的显示

影像部

需求描述

1.作为一名初高中生用户，我希望有教学视频的内容，以便于我能够观看视频进行学习。

2.作为一名初高中生用户，我希望视频可以按照年级、科目和视频列表展示内容，以便于我能够选择符合自己需求的视频。

3.作为一名初高中生用户，我希望在视频列表中可以展示视频的详细信息，以便于我选择是否观看此视频。

4.作为一名初高中生用户，我希望在视频详情里可以看到视频的标题、老师昵称、发布时间、播放视频、文字内容、收藏点赞数，这样便于我更清晰的浏览视频和内容。

验收标准

1.进入影像部路径：

在一级背景图上面可以看到影像部，对背景大小可手动缩放，滑动并且可以查看全图。点击影像部进入视频界面。

2.影像部列表页面：

页面分为年级科目列表、banner图和视频列表。

字段显示：每次进入影像部列表页都默认显示年级和科目。

视频列表显示有两种情况：

a在学生证中设置年级后（如：高三），进入影像部，视频列表为高三的全部科目视频。
b.在学生证中未设置年级，进入影像部，列表页视频为全部科目视频。由用户自由选择。

（1）年级科目：点击年级和科目后，展示的视频内容同步更新。

（2）banner图：banner图进行轮播显示，最多8张，banner图无内容链接则点击无反应；有内容链接则跳转相应的内容详情进行浏览。

（3）视频列表：列表中可以看到老师头像、昵称、视频简介、收藏数、点赞数、发表时间。

老师头像和昵称在左上角显示；视频简介：初始最多显示两行内容，超过两行后出现更多按钮，点击更多展出全部简介内容。每行最多显示27个字，超过27字另起一行。

收藏数和点赞数不可以在列表页操作；发表时间：不足1小时，按 –eg:1小时前 显示；24小时之内都用小时来展示 -  eg:6小时前；24小时之外用日期来展示 - eg:2017-01-02；

（4） 列表视频中内容展示：展示视频标题、视频时长、观看视频按钮。

          视频标题：视频标题展示一行限制20字，超过20字另起一行，默认居中对齐

          视频时长：-eg 04:35

          观看视频按钮：播放键

数据加载：列表以10条数据为一组进行“点击加载更多”，每加载一次刷新再次加载10条数据。没有数据时底部提示“哎呀，没有了，别点啦”。

3.影像部视频详情页：

（1）点击视频列表中的某一部视频可跳转到相应的详情页，详情页展示视频的标题、老师昵称、发表时间、简介、视频播放框、正文内容、收藏数、点赞数。点击视频播放框播放按键对视频进行播放。

（2）点赞：点击空心点赞图标，图标状态点亮，数字统计+1，再点击点亮图标，状态改回初始状态，数字统计-1。

收藏：点击空心收藏图标，图标状态点亮，数字统计+1，提示“收藏成功”，再点击收藏图标，状态改回初始状态，数字统计-1。提示“取消收藏”。

小窗功能：边看视频边浏览。观看视频过程中，向下滚动时，视频播放窗口会保持在顶部，向上滚动到顶部时，回到最初始状态。

影像列表实现方案：

1、字数超过20个自动换行，利用正则表达式来实现；

2、进入影视部，根据学生证的资料显示相对应年级的资料，如果未设置，则显示全部的资料；根据设置的年级和科目，通过wx：for渲染不同的数据上去；

3、发送请求获取轮播图的数据，若图片中存在url可以点击跳转；

4、简介字数超过27个自动换行，利用正则表达式来实现；用js实现字数超过一定字数的时候，超过的字数使用“...”来显示，当点击更多的时候，显示为原来的字体

影像详情页实现方案：

1、进入影视部，根据学生证的资料显示相对应年级的资料，如果未设置，则显示全部的资料；

2、点赞通过后端中传过来的状态决定点赞图标的状态，

3、使用sticky粘性布局实现。观看视频时，向下滚动，视频播放窗口会固定在当前页面，内容会随着下拉展示；

后台

 暂时只写完前台的，熟悉每一步的开发流程；