不学也罢组--求学--前端方案

一、开发工具

1，编译器：VS code，微信开发者工具

2，版本管理器：svn

3，切图：ps

二、使用到的前后台框架插件

（1）css，scss

（2）后台框架：Vue3.0，vue-cli4.5

（3）组件库：后台用：element-ui，前台用： 微信的webUI

（4）路由： vue-router

（5）http请求：axios，qs

三、项目文档架构

后台:

build———vue.config.js  (配置文件）

public———index.html  (入口文件)

src

|————asset //存放图片,公共样式

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

                      |————contants （常量表）

                      |————verify  （表单验证公共文件）

                      |————service   （请求公共服务）

                      |————filter   （过滤管道）

                      |————pageNotFound   （页面丢失提示页）

|————router//路由

                      |————index.js

|————views

                      |————login （登录）

                      |————home （首页）

                      |————welcome（欢迎页）

                      |————pages 

                                           |————userInfo (用户信息）

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

                                                                  |————userDetail （用户详情）

                                           |————contentManage  （内容管理)

                                                                  |————article（文章）

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

                                                                                     |———— articleIncrease（文章新增）

                                                                                     |————articleEdit（文章编辑）

                                                                  |————video（视频）

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

                                                                                     |————videoIncrease（视频新增）

                                                                                     |————videoEdit（视频编辑）

                                                                  |————treeHole（树洞）

                                                                                     |————treeHoleList  （树洞列表）

                                                                  |————leaveMessage（留言板）

                                                                                     |————leaveMessageList（留言板列表）

                                          |————backendManage（后台管理）

                                                                  |————accountManage（账户管理）

                                                                                     |————accountList（账户列表）

                                                                                     |————accountIncrease（账户新增）

                                                                                     |————accountEdit（账户编辑）

                                                                  |————roleManage（角色管理）

                                                                                     |————roleList（角色列表）

                                                                                     |————roleIncrease（角色新增）

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

                                                                  |————moduleManage（模块管理）

                                                                                     |————moduleList（模块列表）

                                                                                     |————moduleIncrease（模块新增）

                                                                                     |————moduleEdit（模块编辑）

                                                                  |————pwdChange   (密码修改)

|————App.vue  （渲染文件）

|————main.js（项目入口）

四、业务逻辑

后台：

一、登录

1，需求描述

     作为一个后台管理员我想要一个登录以便于区别每个人的权限和是否有资格登录

2，验收标准

（1）输入的用户名或者密码错误有提示，输入框为空有提示

（2）输入框可清空输入内容

3，实现方案

   1、两个输入框用element ui的el-form组件，设置prefix-icon属性给输入框前插入图标。

   2、输入框添加一个 clearable属性即可清空输入内容。

   3、 输入框使用v-model双向绑定数据，进行一个简单的表单验证。

   4、验证成功后点击登录post请求发送数据给后端，返回成功则跳转到后台首页

二、欢迎页

1，需求描述

      作为一个后台管理员，我想要一个欢迎页，以便于欢迎每一个进入后台的公司人员

2，验收标准

      登录成功后跳转页面显示欢迎页

三、用户信息管理

1，需求描述

     作为一个平台运营者我需要一个用户管理以便于我更好的管理用户信息

2，验收标准

（1）后台点击侧边栏用户管理下的用户列表，即可看到对用户基本信息的管理，在用户管理标题旁边展示所用用户的数量总和。

         列表会展示用户的序号、ID号、昵称、年级、手机号、逆袭豆。列表可对用户进行查看、搜索的操作。用户数据1页展示

         10条数据，超出换页展示。

（2）点击“查看”按钮跳转用户详情页。详情页展示用户的ID号、昵称、逆袭豆、年级、头像

3，实现方案

    1、 账号管理页面要进行一个数据的获取，可以使用axios发起get 请求获取到数据渲染到页面使用element-ui Table组件。

    2、 获取第一页数据，控制每页显示的个数，点击页数跳转到相应的页面，跳转到相应的页数使用element-ui Pagination 分页组件绑定相应参数。

    3、可以通过用户名、用户ID、和状态等筛选数据后使用axios发起post请求获取到数据重新渲染到页面，实现搜索功能。

    4，冻结和解冻，向后台传递id，改变他的状态使用element-ui    Popconfirm 气泡确认框组件。

    5，点击“查看”按钮跳转用户详情页在详情页生命周期created()中使用axios发起get 请求向后台传递id获取到对应id的数据渲染到页面

四、内容管理

<文章管理>

1，需求描述

（1）作为一名后台管理者，我希望可以对文章进行新增、编辑、上下架、搜索的操作，列表对序号、标题、作者昵称、发布时间、封面、摘要、收藏点赞数进行相应的展示。这样便于大致了解文章的主题。

（2）作为一名后台管理者，我希望可以对文章的标题、作者、内容做出编辑或新增的动作。对文章内容进行保存、取消、和返回的操作。

2，验收标准

（1）后台点击侧边栏内容管理下的文章列表，即可看到文章信息的管理，列表会展示文章的序号、标题、封面、作者、摘要、收藏数、点赞数、状态。分类为card文章（列表文章）。列表可对文章进行查看、编辑、下架、搜索的操  作。用户数据1页展                         示 10条数据，超出换页展示。列表数据按照上架的时间倒叙排列。

（2）可对标题（限制25字之内）、作者（限制14字之内）、分类（全部、banner文章、card文章）、状态（全部、上架、下架）、点赞数、收藏数条件进行搜索。点赞数、收藏数搜索只限填写数字，后者不许小于前者。列表1页展示 10条数据，超出换页                     展示

（3）点击“下架”按钮则弹窗提示“是否下架该文章?”是：提示下架成功；否：弹窗消失，展示当前列表。点击“上架”按钮则弹窗提示“是否上架该文章?”是：提示上架成功；否：弹窗消失，展示当前列表。

（4）点击“新增”按钮根据文章的标题（限制25字之内）、封面(上传文件在5M以内) 、分类（card文章）、作者（限制14字之内）、摘要（限制28字之内）、正文进行添加。底部两个按钮分别为“取消”、“保存”；点击“取消”按钮弹窗提  示“确定取消编辑文                       章  内容？”确定：弹窗消失回到列表页，取消：弹窗消失，仍留在当前页面。点击“保存”按钮弹窗提示“文章内容保存成功”。

3，实现方案

  1、 文章管理页面要进行一个数据的获取，可以使用axios发起get 请求获取到数据渲染到页面使用element-ui Table组件。

  2、 获取第一页数据，控制每页显示的个数，点击页数跳转到相应的页面，跳转到相应的页数使用element-ui Pagination 分页组件绑定相应参数，限制文字长度采用filter过滤器管道设置。

  3，下架和上架，使用axios发起put 请求向后台传递id和status状态，改变他的状态使用到 element-ui    Popconfirm 气泡确认框组件。

  4、可以通过用户名、用户ID、和状态等筛选数据后使用axios发起post请求获取到数据重新渲染到页面，实现搜索功能。

  5，新增，编辑页采用element ui的form表单验证，'保存'按钮通过在disabled属性中使用计算属性，所有选项不为空则恢复按钮，上传采用Element UI中的el-upload图片墙组件，提示框使用element-ui   Popconfirm 气泡确认框组件

<视频管理>

1，需求描述

作为一个平台运营者我需要一个课程列表，以便于添加更多课程视频

2，验收标准

（1）处于下架状态的课程有编辑和删除功能，，点击上架提示，是否上架此课程，点击编辑进入课程编辑，点击删除提示是否删除该课程，上架状态只有下架课程，点击下架提示是否下架此课程

（2）课程列表展示列表数据，筛选数据展示数据列表，重置返回默认的数据列表，增删改查正常使用，新增课程正常填写数据

（3）必填项不填写，表单验证不通过，编辑缺失信息

（4）视频上传后展示封面，上传成功后再次点击视频模块，变为重新上传视频上传后展示封面logo上传好展示封面

（5）标题限制，10位数，限制200字必填项推送年级必填项，选择年级之后，下边推送课程变成相对应年级的科目

3，实现方案

  1、 视频管理页面要进行一个数据的获取，可以使用axios发起get 请求获取到数据渲染到页面使用element-ui Table组件。

  2、 获取第一页数据，控制每页显示的个数，点击页数跳转到相应的页面，跳转到相应的页数使用element-ui Pagination 分页组件绑定相应参数，限制文字长度采用filter过滤器管道设置。

  3，下架和上架，使用axios发起put 请求向后台传递id和status状态，改变他的状态使用到 element-ui    Popconfirm 气泡确认框组件。

  4、可以通过年级，课程名称，类型，创建时间，状态筛选数据，实现搜索功能，使用element uI 框架实现下拉菜单跟日期组件，然后用v-model渲染后台数据。

  5，新增，编辑页采用element ui的form表单验证，'保存'按钮通过在disabled属性中使用计算属性，所有选项不为空则恢复按钮，使用Vue+Element UI中的el-upload组件实现视频上传，

        提示框使用element-ui   Popconfirm 气泡确认框组件。

<树洞列表>

1，需求描述

     作为一名运营者，我希望后台有一个树叶管理，以便我对树洞的内容进行查看管理。

2，验收标准

1，可对发布时间，热度，顶数，踩数进行搜索。数字后者不许小于前者。列表1页展示 10条数据，超出换页 展示

2，对列表每一项可进行删除操作

3，实现方案

1，页面要进行一个数据的获取，可以使用axios发起get 请求获取到数据渲染到页面使用element-ui Table组件

2、 获取第一页数据，控制每页显示的个数，点击页数跳转到相应的页面，跳转到相应的页数使用element-ui Pagination 分页组件绑定相应参数，限制文字长度采用filter过滤器管道设置。

3，实现搜索功能，然后用v-model渲染后台数据同上方法，删除按钮使用到 element-ui    Popconfirm 气泡确认框组件

<帖子列表>

1，需求描述

     作为一名运营者，我希望后台有一个树叶管理，以便我对树洞的内容进行查看管理。

2，验收标准 

      1，可对标题，楼主，板块，状态，发布时间进行搜索。发布时间后者时间不许小于前者。列表1页展示10条数据，超出换页展示

      2，对列表每一项可进行删除，查看，加精/取精，置顶的操作

      2，帖子详情页可管理自己发的帖子和评论，点击删除弹出对话框可删除该帖子或该帖子下方的评论，点击确定则删除，点击取消关闭对话框

3，实现方案

1，页面要进行一个数据的获取，可以使用axios发起get 请求获取到数据渲染到页面使用element-ui Table组件

2、 获取第一页数据，控制每页显示的个数，点击页数跳转到相应的页面，跳转到相应的页数使用element-ui Pagination 分页组件绑定相应参数，限制文字长度采用filter过滤器管道设置。

3，实现搜索功能，然后用v-model渲染后台数据同上方法，删除按钮使用到 element-ui    Popconfirm 气泡确认框组件

4，加精/取精操作，置顶操作 使用axios发起put 请求传入id，status状态 获取到数据重新渲染到页面

5，帖子详情页删除按钮使用到 element-ui    Popconfirm 气泡确认框组件

五、后台管理

<角色管理>

1. 需求描述

    作为一个超级管理员，我需要将不同的权限归纳到一个角色中，以便将不同角色赋予给不同账户

2.验收标准

  1，角色管理页面，点击“编辑”或“新增”进入角色编辑页面

  2，点击“删除”出现确认删除弹窗，点击“取消”关闭弹窗，点击“确定”关闭弹窗并删除对应角色

  3，新增/编辑角色页面，点击角色名输入框可为当前角色命名，在输入框内输入内容时输入框边框高亮显示，输入框字符没有限制

  4，点击“全选/全不选”选项，可对应改变所有复选框勾选状态，全选时所有复选框均为勾选状态，全不选则相反

  5，父级模块复选框点击勾选时，所有子级模块均为勾选状态；父级模块点击取消勾选状态时所有子级模块均为未勾选状态

  6，子模块点击勾选任一，父级模块勾选状态为选中状态

  7，点击取消返回角色管理页面,输入角色名和选择权限后可点击保存，保存后返回角色管理页面

3，实现方案

   1、角色管理页面要进行一个数据的获取，可以使用axios发起get 请求获取到数据渲染到页面使用element-ui Table组件。

   2，新增或编辑角色，勾选赋予角色权限，这个模块的权限由后端返回一个数字给我，然后我用这个数字的集合来代表这个模块的权限，可以赋予这个角色相应的权限， 使用element-ui

        的Checkbox 多选框来实现多选，保存使用禁用按钮。点击选中模块禁点事件取消，保存使用axios发起post请求添加角色。

< 账户管理>

1. 需求描述

    作为一个超级管理员，我需要对后台的账户体系进行操作，以便于我维护公司的组织架构

2. 验收标准

1　 账户管理页面，点击“编辑”或“新增”进入账户管理编辑页面

2　 点击“删除”出现确认删除弹窗，点击“取消”关闭弹窗，点击“确定”关闭弹窗并删除对应角色

3　 单选角色下拉选框或输入用户名可进行筛选，点击“查询”可根据选项进行筛选，点击重置则重置默认筛选条件

4　 超级管理员拥有所有权限，不能被编辑，不能被删除，超级管理员新增的管理员可以被修改权限

5　 新增/编辑账户页面，点击输入框可输入对应内容，在输入框内输入内容时输入框边框高亮显示

6　 点击输入用户名，字符规定只能输入大小写英文+数字，大于3个字符不超过15个字符；点击保存时后台进行重复校验，若用户名重复则出现“用户名已存在”提示；用户名输入不符合字符规定，则出现“用户名格式错误”提示；

7　 点击输入手机号，字符规定11位数字，不符合规定则出现“手机号格式错误”提示

8　 点击输入密码，密码输入框输入字符规定暗文显示，只能输入大小写英文+数字，大于6个字符不超过20个字符，否则出现“密码格式错误”提示

9　 点击输入确认密码，确认密码与密码不一致出现“两次密码输入不一致，请重试”提示

10　 点击弹出下拉菜单，单选已保存的角色

11　 保存按钮默认不可点击，输入框都有内容填入时可点击，保存成功弹出提示框，点击确定跳转至账户管理页面

12　 点击取消返回账户管理页面

3，实现方案

 1、 账户管理页面要进行一个数据的获取，可以使用axios发起get 请求获取到数据渲染到页面使用element-ui Table组件。

 2、可以通过索条件输入框和下拉菜单、日期组件筛选数据，实现搜索功能，使用element uI 框架实现下拉菜单跟日期组件，然后用v-model渲染后台数据

 3、路由跳转到详情页面、判断是否携带id数据，改变头部编辑新增标题、渲染数据到输入框

 4、输入框用element-ui实现，v-model双向绑定数据、设置自定义表单验证

 5、保存使用禁用按钮，验证成功点击保存按钮发送请求。

<密码修改>

1. 需求描述

    作为当前登录的管理员，我需要对该账户密码进行修改，以便于提高该账户的安全性

2. 验收标准

1, 修改密码页面，输入框内输入内容时输入框边框高亮显示，密码暗文显示

2,  密码只能输入英文（大小写）+数字的组合，大于6个字符不超过20个字符

3, 密码格式错误出现“请输入大于6个字符不超过20个字符的英文+数字组合”提示

4, 旧密码输入错误时出现“请输入正确的旧密码”提示

5, 新密码与旧密码一致时出现“新密码不能与旧密码一致”提示

6, 确认密码出错时出现“两次密码输入不一致，请重试”提示

7, 保存按钮默认不可点击，当三个输入框都有内容填入时可点击，修改成功则弹出警示框，点击确定跳转至登录页面重新登录，修改不成功则出现对应提示且清空输入栏

8, 取消按钮点击后跳转至模块管理页面

3，实现方案

 1，采用ElementUI表单验证组件，旧密码，新密码，再次确认新密码为必填项

 2，提交修改密码修改前需要先行判断新设密码与再次确认相同，否则弹窗提示密码不一致，修改填写内容。