昵称登录后显示

项⽬描述：超编 4.0 Pc 端项⽬主要有云桥、云创、云海、业务系统管理和⼯作台 5 个⼦系统,其中云海相当于稿源系统,主要是
各平台稿源汇总站,其中⼜分为 3 个模块分别是智能助理(融创栏)、稿件搜索板块、内容详情展示模块.云创主要是⽤于稿件的
新建、编辑等功能,其中功能分为个⼈空间、⼯作室、模板管理、审核空间、管理中⼼ 5 个模块.云桥是稿件外⽹签发系统,主要
分为创意空间、系统管理、云桥空间、发布中⼼等模块.
项 ⽬ 主 要 技 术 栈 （ 前 端 ） ： vue +axios+vuex+vueRouter+ElementUI 框架+Electron+Echarts+node+git(版本控
制)+tinymce(富⽂本编辑器)+Avue+scss+mixins
项⽬职责：主要负责项⽬中云桥终端栏⽬管理、渠道管理、发布中⼼、各⼦系统⽣命周期等模块的⻚⾯功能和云创富⽂本编辑
器中表单组件动态化开发,以及各个⼦系统的维护和迭代.
项⽬步骤 ：
1.进⾏项⽬基础构建,其中项⽬主要⽤到 vue 和 elementui 框架,先通过 vue-cli 进⾏⻚⾯快速构建,并对构建成功后的
⽬录进⾏调整,新增 api ⽂件夹存放接⼝⽂件,styles ⽬录⽤于存放 scss ⽂件,utils 存放 js ⽂件,router ⽂件夹进⾏路由⽂件的存
放,filters ⽂件夹存放写好的 filters.js ⽂件,const ⽂件夹中存放静态数据⽂件(.vue ⽂件 data 中的公⽤字段)
2.src/main.js 是⼊⼝⽂件,主要作⽤初始化 vue 实例和项⽬中⽤到的插件,导⼊ vue,axios,vueAxios,babel-polyfill,
全站权限配置⽂件 permission.js,error.js ⽇志模块,全局的 filter,公共的样式 common.scss ⽂件,字体图标 iconfont.css 等⽂件,并引
⼊定义好的公共组件
3.permission.js(全站权限配置模块),在 permission.js 中导⼊ router 路由模块,store 本地存储,validate.js 验证模块,nprogress(⻚⾯跳
转浏览器顶部进度条)模块,及 nprogress.css 样式⽂件,并引⼊ electron_env 配置⽂件.然后通过 router.beforeEach 路由导航进⾏路
由跳转,并实现路由拦截处理,在进⾏拦截时应设置缓冲处设置,当存在 access_token 时满⾜条件,通过中间件 next 执⾏登录操作,
如果不满⾜条件直接跳转到登录⻚⾯,由于项⽬中有些接⼝需要权限才能访问，所以在项⽬中将 token 保存在 vuex 中, 本地
新建存储模块并将 token 做持久化处理，通过 localStorage 进⾏ token 保存。,并对不同⽤户做权限控制.
4.配置 router 路由模块,新建 page 和 views ⽂件夹,其中在 views ⽂件夹中创建 index.js ⽂件进⾏⻚⾯视图的路由地址配置.page
⽂件夹中进⾏登录⻚,锁屏⻚,404⻚⾯,403⻚⾯,500⻚⾯,主⻚和授权等⻚⾯的配置.并且在router⽂件夹下创建router.js和axios.js
模块,引⼊ vue,vueRouter,store 的模块.通过 store 对个别参数进⾏持久化处理,并通过 vuex 中 getters 动态响应参数变化.
5.axios.js 模块中引⼊ utils ⽂件夹下创建好的 util.js 功能模块,util.js ⽂件主要存放定义好的公⽤静态⽅法(表单序列化,3DES 加
密解密,图⽚转为 base64,对象深拷⻉等公⽤⽅法.)并通过 import 语法按需导⼊即可.6.其中终端栏⽬管理主要⽤到的是 ElementUi 中 tabs 标签⻚组件,为了便于 tabs 标签组件的复⽤,特将此组件进⾏⼆次封装,在
components 中创建 commonTabs 组件,import 导⼊静态数据模块进⾏复⽤,其中 commonTabs 组件共分为基本信息,发布信息,配置
开关,项⽬模板,栏⽬规则,授权设置,播放器设置,渲染规则等功能.,其中基本信息中添加<el-form>表单组件,通过
<el-upload>组件中 before-upload ⽅法实现上传功能.并对上传的⽂件进⾏格式控制只⽀持(png,jpg,gif)等
7.数据回显,主要通过⽗⼦传值实现动态绑定 props,接收到⽗组件请求回来的数据,进⾏⻚⾯渲染.渲染⻚⾯的表层数据⽤插值表
达式即可渲染，部分复杂数据需要利⽤到 VUE 中的作⽤域插槽进⾏赋值（slot-scope），在列表中使⽤ v-for 进⾏赋值,这三种
可以实现表层数据赋值.对公共的数据可以进⾏本地存储.
8.栏⽬规则及数据源规则功能实现,通过<el-tree>组件实现左侧树状结构,新建过滤规则项时,将此功能抽离成单独的
moreRules.vue 组件,再此组件中将请求回的数据通过 v-for 动态渲染到⻚⾯中 ul 标签中,当点击 li 时,实现动态添加
表单组件的功能,其中涉及到 Boolean 类型的表单进⾏添加控制,通过 es6 中 includes 进⾏次数控制(只能添加⼀次).
9.发布中⼼中新建链接稿功能实现,主要引⼊ tinyce,form 表单,上传视频,⾳频等组件.对 tinyce 进⾏ init 初始化配置,
在 init 对象中添加 paste_webkit_styles(只保留的样式),inline(⼀⾏显示)等基本项.
10.对于稿件内容区域,由于⽂章列表模块的功能较为复杂,设置到 crud 所以通过 moreAction 组件进⾏实现.,然后在⽗组件中使
⽤此组件,⽂章操作功能对于已经登陆的⽤户，可允许他们去关闭某篇⽂章，或者是反馈内容。实现⽂章不感兴趣功能,在
moreAction 组件中抛出事件,调⽤接⼝, 实现对数据的删除, 主要通过 vuex 实现跨组件消息传递,在⽗组件 index.vue 中发布
事件,然后在⼦组件中监听事件.
代码优化：
1.在加载⽂章列表时，对其中的图⽚进⾏懒加载处理：并不是⼀开始就加载全部的图⽚，⽽当某张图快要进⼊可⻅
区域时，再去加载。可以避免 http 请求时同时加载完所有资源，导致性能下降。
2.为防范 xss 攻击,①进⾏表单输⼊验证②需要在 HTTP 头部配上，set-cookie： httponly-这个属性可以防⽌ XSS,它会禁⽌
javascript 脚本来访问 cookie。 secure - 这个属性告诉浏览器仅在请求为 https 的时候发送 cookie
BUG 解决：
1.在 moreAction 中，如果是在这种状态退出的，则下次再打开时，它也是这个状态。原因是 isReport 被设置成
了 true，对于这个 bug 解决⽅法是通过在⽗组件中修改⼦组件数据即可，使⽤$ref 解决
2.终端栏⽬中栏⽬规则和过滤规则功能,会出现数据混乱现象,导致控制台报错,这是因为 key 的值不唯⼀造成的,通过
id+name+random()进⾏ key 的位置设定,就可避免此类问题
3.内容发布中点击稿件列表中的某⼀稿件时,右侧稿件详情去没有实时进⾏内容显示,主要是因为组件层级较多,不能通
过$emit 传递到兄弟组件中,可通过 vuex 中 Action 解决此类问题