今天完成的事

复盘项目是求学大作战

今天写了一部分后台的方案设计，总体来说还是比较模糊。

文件存放目录还没开始定。

后台方案评审

一．开发工具

1、编译器

2、版本管理

3、切图：Photoshop

4、Css预处理：无，原生CSS

二．整体架构

组件库：element

框架：VUE

三、项目文件架构

暂无

登录页面

需求：

作为后台管理员，我需要通过输入正确的账号密码登陆进后台去操作其他功能

验收标准

用户名或者密码不正确，弹出提示框“请输入正确的账号或密码”

实现方案：

用element input 写用账号密码，V-model绑定值

v-model绑定账号密码，通过axios发送请求

服务端表单验证：根据返回值做验证

本地表单验证：vue自定义校验表单验证，密码账号必填，数据类型限制

判断登陆成功跳转欢迎页 Welcome路由页面，站视侧边栏，顶部菜单栏

欢迎页面

需求

希望能看到欢迎页面，提示登陆正确

验收标准

登陆页跳转欢迎页，可以根据侧边栏或者顶部跳转到不同的页面

注销

需求

作为一名管理员，我希望可以注销账号，以便登陆其他权限不同的账号。

验收标准，点击顶部右边按钮退出登陆。

实现方案

Vue-router搭建后台路由，向后台发送数据。

验收标准：点击注销弹出提示框，点击取消无事发生，点击确定注销账号并跳转回登陆页面。

后台-用户管理-用户列表

需求

作为管理员，

1.我希望可以在用户列表中看到用户的基本信息，以便对用户进行管理。

2.并且希望能通过填写查询条件搜索出相关的用户在列表中展示，以便进行针  对性管理。

3.希望能通过列表对用户进行搜索、冻结/解冻等操作。

验收标准

1. 列表展示所有用户基本信息

2. 点击搜索能按条件搜索出相应的用户列表

3. 点击冻结，弹出提示框，选择确定，该用户状态变为冻结，冻结状态下改用户所有信息不可用。点击解冻，弹出提示框，选择确认则解冻该用户。被冻结的用户在前台不可登陆。

4. 点击查看能跳转到用户详情页。

5. 搜索模块逆袭豆一栏，前面的数字不能小于后面的数字，且为整数。

实现方案

1. 首先要进行一个数据的获取，可以使用axios发起get请求获取数据渲染到页面

2. 获取第一页的数据，控制每页显示的个数，点击页面数跳转到相应的页面，跳转到相应的页数。

3. 可以通过用户名、ID和状态等筛选数据，实现搜索功能。

4. 解冻/冻结 用户，向后台传递ID，改变他的状态。

后台-用户管理-文章列表

需求

作为管理员

1. 希望可以在文章列表中看到文章的基本信息，以便对文章进行管理。

2. 希望能通过条件搜索出相关文章

3. 希望能通过列表对文章进行搜索、编辑、新增、上/下架操作。

后台-用户管理-文章详情

需要新增加文章

验收标准

1. 标题限制25个字。

2. 分类为可选项

3. 封面为上传图片，图片在5M以内。

4. 上传的图片要求展示图片的基本信息

5. 作者处限制14个字

6. 摘要限制28个字

7. 正文输入框使用富文本编辑器。

8. 点击 修改/新增 弹出提示框，文章修改/新增成功。

9. 点击取消弹出提示框：确定取消编辑文章内容吗？

10. 所有内容为必填项，否者新增/修改按钮为灰色不能点击

实现方案

进入新增页面。

1. 进入编辑页面则需要ID获取相应的信息，更改完后发送Put请求更改数据。

2. 标题作者摘要 用element input输入框，用maxlength限制最大字数

3. 文章封面上传用element+table+Progress进度条设置。封面上传成功后自动展示出来。

验收标准：

1. 列表展示文章基本信息。

2. 点击搜索能按条件搜索出相应文章

3. 点击上/下架文章文章状态改变

4. 搜索框点赞数和收藏数只能使用整数，前者不能大于后者。

5. 点击新增/查看/编辑跳转到相应的页面。

实现方案

1. 首先要进行一个数据的获取，可以使用axios发起get请求获取数据渲染文章到页面

2. 获取第一页的数据，控制每页显示的个数，点击页面数跳转到相应的页面，跳转到相应的页数。

3. 可以通过标题分类作者状态点赞收藏数 筛选数据，实现搜索功能。

4. 向后台传递文章的？？来改变他的状态

后台-用户管理-视频列表

参考文章列表

后台-用户管理-视频详情

参考文章详情

后台模块管理

需求描述

作为一个管理员，我希望通过后台管理界面管理后台模块，这样可以新增、编辑或删除后台模块；

验收标准

有模块管理列表，可以新增/编辑相应模块，点击新增/编辑，输入相应字段，完成模块新增/编辑。

实现方案

1、基本信息通过v-for渲染。

2、新增/编辑通过$http请求，对应ID传参实现,通过axios实现。

修改密码

需求描述

1.作为管理，可以对当前登陆的账号进行更改密码；

验收标准

点击修改密码，跳到修改密码界面，按流程完成密码修改操作。

实现方案

1、点击修改密码，跳转密码修改页面，通过传递对应id参数来发送请求

2.做表单验证，判断两次输入密码是否一致。表单验证由element 实现，通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名

明天的任务

补全文件目录，然后搭好后台的公共组件吧