针对于个人自媒体PC端管理平台主要是实现文章发布,素材管理,以及针对于粉丝管理还有个人信息设置的一些功能,项目整体基于vue框架完成单页面的网页开发,对项目中涉及到的比较有难度的点进行了分析:
1.首先是登录功能校验部分. ★
登录页面采用的elment-ui进行布局的 ,需要对用户手机以及验证码的格式进行校验,采用的是elment-ui自带的form组件校验规则对单个表单项进行校验,之后是整体表单项的校验
1.1单个表单项校验的逻辑主要给el-form表单通过:model="form"绑定一个数据对象 同时还要:rules="results"动态绑定一个校验规则对象 给需要校验表单性 通过prop属性绑定上字段名 .
1.2 对于一些特殊的表单项 需要进行自定的校验 校验的逻辑通过validator配置的
通过在校验规则中指定一个校验函数 这个函数必须设置data选项return之前 校验函数中的有三个删除 rule value callback 分别的指的是 当前字段对应的校验规则 当前字段对应的值 以及校验完毕后需要调用的回调函数 成功的话 就callback() 失败的话 就callback,error("错误消息提示")
1.3 整体校验的逻辑 在用户点击登录的时候要进行整体表单的校验 主要原理给el-form表单加上一个ref的属性 通过$refs去获取到这个表单对象 然后调用组件validate函数进行校验 该函数一个回调函数 回调函数中的valid参数代表着是否校验成功
2.登录访问权限以及本地存储用户信息的设置★
首先是本地存储用户信息部分,用户在成功登录之后 ,会通过后端传回的用户信息使用sessionStorage保存到本地,因为本地的获取本地用户信息的操作会在以后频繁使用 所以单独放在了src/utils/auth.js文件中 分别设置三个函数 分别是存储 获取 以及删除本地信息 并且导出 方便后面试用
关于登录访问权限部分 采用的是vue中的方式导航守卫 在进行路由跳转之前都需要进行一次验证 验证规则指的是在访问的不是login页面或者 本地没有用户的信息的时候 都需要让其跳转到login页面进行登录
3.对请求方式axios的配置 ★★
因为后台的服务器的链接很冗长 使用的时候很不方便 以及每次请求的时候请求头都要携带请求头的信息 所以单独将axios的配置放在一个src/api/index.js文件下
逻辑代码的实现 导入axios
1.配置基准地址
通过axios.defaults,baseURl="xxxx"配置基准地址 这样使用的axios的时候 直接将后面的路由写上就可以了
2.配置请求头
第一种方式:直接通过axios.defaults.header.Authorization 设置请求头信息 但是这样做容易出现一个bug 就是在本地没有存储token的情况下 登录之后访问其他页面的时候出 token为undefined的情况 出现这样的原因是因为js代码在页面刷新的时候才会被加载 我们从登录界面跳转到index界面的时候知识进行了路由之间的跳转 所以获取不到token的值 需要进行刷新一次才可以保存token到本地,所以才有了第二种方式
第二种方式:设置请求拦截器的方式 在每次请求前 获取本地的token 追加到请求头上 这样每次请求的时候都会携带token 比较实时精准
请求拦截器以及响应拦截器 都属于axios的方式 具体的使用逻辑 基本上都是这样的形式 axios.interceptors.request.use(成功回调函数,失败回调函数)
axios.interceptors.response.use(**成功回调函数,**失败回调函数)
两者的区别在于一个请求之前 一个响应之后 要进行区分
具体的使用方式 :
请求拦截器中成功回调函数会有一个config参数 这个参数指的配置信息的对象 我们通过config.header对请求头进行配置,同时也需要return这个config信息
响应拦截器的使用主要是对失败回调函数的使用 比如token失效之后 通过失败回调函数中的error对象 error.reponse的状态码进行判断 失败回调函数返回的是一个promis.reject(err)错误的结果
4.插槽的使用★
项目中使用到插槽大概有两种分别是默认插槽以及作用域插槽
再对面包屑组件封装的时候采用的是默认插槽 在文章数据渲染 以及评论数据渲染的时候采用的是作用与插槽
说一下具体的用法:
在面包屑组件中通过进行站位 在父组件使用的时候 直接在组件标签上写上内容管理这样使用就可以了
作用域插槽的使用 先渲染位置通过 进行占位 内部可以写随意的html标签或者element-ui的组件标钱 使用数据时候 通过scope.row,字段进行获取数据
5.封装组件的过程以及插件的使用
项目我们封装了三个组件 一个是面包屑组件 一个是下拉框组件 一个上传图片的组件
面包屑的组件比较容易 结合这插槽的使用 没有什么难度
下拉框组件封装的时候 稍微有些绕但是还能接受 业务逻辑大概是这样的:★★
首先采用el-select 组件 完成布局方式 但是需要给这个组件绑定上依赖的数据 el-select需要绑定一个值 这个值也就是显示数据的那个值的标识或者id什么的 我们项目中用的channel_id el-option也需要绑定依赖的值 组件单独的独立功能完成之后 就需要考虑传值的问题 这个组件中涉及是channel_id 所以先从父组件中传入值进来 通过prop进行接收 但是有一点注意就是 传过来的值是单向的 不能被修改 所以在子组件中绑定这个值的时候 不能使用双向绑定的方式 需要将:model改变:value进行绑定 子组件接收到这个值之后 还需要返回一个新的值给父组件 这里的逻辑就是 就是通过el-select组件中的@change事件 这个事件默认有一个参数指的是改变选项后的新值 获取到这个新值val之后 通过$emit()的方式触发父组件中的自定义的@input方法 对change_id进行一个修改 从而实现双向通信的效果 因为用的:value 以及@input 也可以采用v-model的简写方式
上传图片的逻辑:更为复杂一些 但是复杂的地方不是双向通信 而是在页面的动态效果方面 可以多写几遍试试 至于组件之前进行通信的数据 则是我们设置的图片链接的地址articleForm.cover.images[0] 也就是我们点击发布文章需要上传的数据 ★★★
6.富文本的使用以及校验
使用: 分三步 安装---> 局部注册----> 使用组件
安装:npm install vue-quill-editor
局部注册: 同时需要导入样式
import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'import { quillEditor } from 'vue-quill-editor'export default { components: { quillEditor }}
使用组件:
<quill-editor v-model="content" :options="editorOption" /> <!-- editorOption 配置对象：配置富文本有什么功能 -->
富文本的校验:
之前的校验都是通过element-ui提供的组件进行的校验 设置校验时机也是根据规则中的 blur 或者 change进行判断的哇 但是富文本不是element-ui的组件 所以不能兼容校验时机 所以必须需要给这个富文本组件自己设置一个@blur事件 同在绑定prop=content属性 在事件触发的时候 需要获取到组件对象 然后使用通过validateField("content")进行校验就可以了 对了 还有就是 也需要给content字段设置校验规则
对频道组件还有上传组件因为是属于element-ui组件 所以直接校验就可以了哇
7.非父子组件之间的通信 (刚哥说很重要) ★★★★★
这个逻辑其实很类似子传父的过程 只不过之前传值的的时候 是通过this对象 这个this对象则是组件对象 这里我们换成了vue对象 具体在项目的使用 是为了在改变用户name属性的时候 需要将修改的值传给首页也就layout组件 改变右上角显示的昵称 嗯? 对 就是这样
使用方式:
在src/eventBus.js中引入 vue 并导出其构造函数
import Vue from 'vue'export default new Vue()
在setting中导入eventBus 然后通过eventBus,$emit('自定义函数',数据) 进行传值
在layout中 也导入 eventBus 然后 通过eventBus.@on(自定义函数名,data=>{
balababalala 反正就是一顿乱操作 应该就可以了哇
})
8.最大安全数处理
9.上传图片自定义方式
正常的上传图片操作很简单 因为是通过element-ui组件的el-upload 进行上传的 不是通过axios上传 所以需要给这个组件设置 active (url) headers(请求头) name(字段的名字)还有一点就是这个组件默认使用的是 post 请求方式 也不是很难 稍微复杂一点就是自定义上传素材
因为根据后端请求方式的不同 所以需要patch请求 这就需要通过http-request 这个属性 实现自定义上传 这个方式获取参数是组件的配置信息 通过{file} 获取图片的信息 在通过实例化formdata 将图片信息传入进去之后 直接通过axios进行传参就可以了 需要注意的几点就是 首先是http-request 接收的参数 是组件的配置信息 需要将file也就是图片信息提取出来 其次之前的发送请求的方式是element-ui组件内部的行为 这种是通过axios 因为我们已经对axios进行了配置 所以直接发送数据就可以
10.合并修改编辑文章和发布文章页面
比较核心的一点就是 路由跳转的变化 会涉及到组件的初始化 但是使用发布文章还有编辑文章的时候 并没有参与路由的变化 这个时候怎么去分配不同的功能呢? 那就需要采用监听器watch的方式了 对$route.query.id进行监听 如果存在 route.query.id 通过正常获取数据 然后渲染数据 如果不存在就是数据发布文章页面 同样获取数据然后渲染
11.路由参数的区别
params 和query 的区别:
首先是params 如果携带着参数的话 通常结合者name来使用 比如
{ name:'user', params:{ id:10000}
路由呈现出来的/user 携带的参数不会在url中体现出来 如果是获取的这个传递的参数 可以通过$route.params.id进行获取到
query携带参数的通常结合者path进行 如果有参数携带的话 写到query中比如
{ path:'/user, query:{ id:10000 }}
在路由中呈现的形式则是 /user?id=10000
可以通过$route.query.id 进行获取
但是还有一点就是要注意的是路由配置以这样的形式比如
{ path:'/user/:id',}
在浏览器显示的样式则是 /user/10000 这种的 需要通过$route.params.id 进行获取
