1.熟练使用 HTML、CSS、能根据 UI 提供的设计稿,快速搭建符合 W3C 标准的页面结构,能使用 HTML5 与
CSS3 实现动画效果
2.熟练使用 less,scss 预编译技术、提升代码灵活性和开发效率,增强代码可维护性
3.熟练使用 JavaScript、jQuery 用原生 JS 代码编写常见网页特效,并熟知 DOM 结构
4.熟练运用 Ajax 进行前后端数据交互,利用 jsonp 实现跨域请求
5.熟练使用主流的数据可视化框架 Echarts、和element-ui、Vant 、layui 、Mint UI等前端ui框架
6.熟练使用 Vue、Vue 全家桶快速开发项目,知晓 MVVM 的开发的思想与核心概念
7.熟练使用 npm,webpack 模块化打包工具,能够使用 GIT 进行版本控制
8.熟练使用 Es6、原型链、继承、作用域、闭包等新特性,能够使用es6新增的数组和对象方法
9. 熟悉TypeScript用法,参与过vscode插件开发
10.熟悉node.js,会搭建服务器进行接口测试,会使用 PostMan 工具
2019.12-2021.04超编4.0 PC端项目
web开发工程师
项目描述:超编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 中发布事件,然后在子组件中监听事件.