搭建个人空间

一、准备阶段：

选择框架：使用vue-element-ui框架写后台系统，框架进行搭建

使用数据库以及接口：选择mongdb数据库，以及对应接口，使用postman工具进行测试接口

安装地址：https://www.runoob.com/mongodb/mongodb-window-install.html

二、介入编写

     登入编写逻辑：

一、编写html，css样式

二、编写验证表单规则

三、获取验证码

四、点击提交至指定接口

难点：

显示验证码：

1.首先页面显示该验证码（封装验证码接口地址-api-创建一个js文件）

 2.index.vue文件下使用该接口

   进行导入；

 

 使用自定义属性调用验证码接口；

 

 使用v-html进行绑定

点击登入，发送表单数据，并请求对应接口

 验证表单，写入回调函数，该形参默认为false，当验证表单通过则进行跳转；否则捕获错误后，判断错误类型，打印不同报错类型；最后重置表单，登录成功后，将teken添加到本地

 

鉴权（）：

在permission写入鉴权的规则：

判断是否需要权限：

判断是否需要权限---不需要情况下---在login页面---直接放行；|| 判断是否需要权限---不需要情况下---在login页面---查看是否在已登入页面---如果在--跳转首页；如果不在--还在login页面

判断是否需要权限---需要情况下---是否有用户信息---如果有---放行 || 如果没有---是否有token---如果没有则在login页面 || 如果有token则验证token是否正确，如果正确则走首页；如果不正确则走login页面

 

permission.js中写入鉴权校验规则（需要使用api-user的接口；需要使用用户存储的信息getter.js；使用token等）---在modules---user.js中处理数据---在request拦截请求的token

 

首页标语：

页面搭建以及回显数据：

使用element-ui搭建表单：序号，标题，描述，中图，大图，操作（编辑），通过接口拿到对应数据，生成新的data，将接口所有数组，赋值给data；在由表单中prop写入data.里面的属性

编辑弹窗：

首先是标题和描述，要回显外面写好的信息：点击编辑按钮时，拿到所有表单数据；将所有表单数据，赋值给this.form ; 表单里标题和描述使用v-model来实现双向绑定；

上传中图和大图：

由于上传图片，其他模块也有使用的，所以写入到全局（src-components） ；使用element ui上传控件；传入两个值一个是组件标题，一个是上传控件（value）；判断页面this.value有数据传进来的时候，让他上传图片（使用到服务器以及mondb的路径传输，需要注意：因为该api是post请求，需要携带token： Authorization : 'Bearer ' + localStorage.getItem('adminToken'),//从本地获取token，添加header），使页面数据渲染页面上；最后将该组件引入index.vue

搭建表单遇到问题：因为中图和大图取的是服务器的路径，但是一直获取不到图片，提示404，到最后发现人家服务器压根没有这个路径，故意删了的（这边的图片路径指的是mondb数据库里面的数据）

文章管理：（点击添加文章，输入各种信息内容，选择分类后，回显在文章列表下；选择分类数据来源：文章分类）

 文章列表：（删除，编辑，分页）

分页： 

求出总条数；求出总页数（总条数/每页显示的条数）；一种需要考虑场景：当用户删除数据后，需要有个if判断，处理该场景；使用element ui找到对应的分页组件，使用对应element ui提供的方法绑定方法，实现点击页数，切换页数，5,10,20；去往第几页

删除：

调用写好的接口，传入id，根据id将内容删除

编辑：（稍后在写）

文章分类：（添加，修改，删除）

添加：调用接口，传入数据（输入框的内容，下拉列表选择的内容），完成创建

编辑：调用接口，传入数据，将数据复制给表单，打开弹窗，回显信息内容；调用修改接口，拿到最新id，拿到表单内容，点击确定，修改成功；

删除：同上

添加文章：（富文本编辑器：toast ； 发布文章，编辑文章内容）

发布文章（添加）：编写好表单信息，点击button时，拿到所有表单信息，调用接口，发送该请求；跳转到文章列表，回显内容

编辑文章（全流程）：views目录下新建vue文件；新建一个路由，新建一个api接口，在文章列表模块点击修改按钮跳转到新建vue文件（修改文件），修改逻辑同新增一样（换个接口）

 

项目管理（修改，增加，删除逻辑）

在src-api下新建需要获取到的接口（拿取：获取页面数据，获取新增，删除，编辑接口）

在src-views下创建vue文件使用element ui 搭建页面，使用data存储数据，在通过接口获取页面数据，渲染页面；

删除：调用删除的接口，传入id，删除成功后，刷新页面；

编辑：使用element ui编辑对话框的各个信息内容；通过dialogFormVisible 该方法设置该编辑对话框不可见，点击编辑按钮时，开启dialogFormVisible该属性；将内容拿到，回显在编辑框页面；点击确实时的函数，拿到修改后的表单内容，调用接口，关闭弹窗，刷新页面，修改成功；

新增：