由你定制是一个服装定制品牌,后台管理系统等，直观实时展示定制成品后的整体效果，为用户提供⻄装、衬衣、 大衣、皮夹等男装定制服务，同时为用户提供着装搭配咨询、量体师上⻔、众包量体等服务。此项目为商品后台列表管理系统。 项目主要技术栈（前端）：vue.js +vue-cli+ vue-router + axios + ElementUi+Echarts+webpack+git(版本控制) 项目职责: 实现后台首⻚布局、侧边栏收缩切换、动画实现、前后端对接渲染数据、导航栏用户名和头像展示,实现用户商品管理、服装 素材管理、上传素材图片、收藏图片、删除图片、全部图片和收藏图片切换展示等功能实现粉丝数据的统计、并进行后台可视 化数据的展示 项目步骤 ： 1.通过 Vue-cli 快速创建基础的结构，调整结构目录 ,通过 git 进行版本控制 ,在调整好的空文件夹中，新建一个 .gitkeep 作 为占位文件。安装项目中用到的 ElementUi 框架,在 main.js 中导入使用.安装项目中用到的 vue-router,进行路由规则的配置, 创建首⻚组件：src/views/home/index.vue,进行基础布局实现 2.进行头部内容、侧边栏⻚面的结构布局和 css 样式.侧边栏为每个 index ⻚面的路由，并在 home 组件中设置一 个 router-view 组件布局在 main 中以渲染各个路由的视图.侧边栏折叠效果的实现,声明一个数据，来表示两种状态，根据这 个数据，来动态设置以上三个地方的效果。 3.实现动态路由功能，通过 el-menu 组件上有个属性，default-active 来指定激活哪个路由菜单,实现动态激活路由 的功能.进行商品管理-筛选条件容器布局,其中用到了面包屑组件, 单选框组件、下拉框、日期控件, 由于面包屑组件会多 次用到, 特将面包屑组件进行了封装 4.商品管理-筛选结果区域布局,使用 ElementUi 提供的卡片组件,表格和分⻚组件.实现频道下拉功能, 当组件初始的时候，获取 所有的频道信息 ,给 channelOptions 选项数据赋值 ,遍历选项数据的时候，修改数据中的字段名称。商品管理-服装列表, 组件 初始化的时候，根据默认的筛选条件获取服装列表数据 , 获取数据后进行赋值, 完成服装列表⻚面显示，通过 el-pagination 组 件实现分⻚切换功能。 5.素材管理组件创建及功能实现，在 data 声明素材列表数据，在组件初始化的时候获取素材列表数据，在 methods中 声明获取数据的函数，获取数据后赋值给 data 中的列表数据。实现素材管理组件中全部和收藏切换功能，首先绑定事件 change 事件，在指定处理函数中，如果切换成功则回到第一⻚，并重新获取数据，实现列表与分⻚重新渲染。 6.通过 ElementUi 提供过 upload 组件实现素材上传功能实现素材的删除功能，绑定删除按钮的点击事件，在处理函数中传入 图片的 id，点击弹出确认框提示，点击确定发送删除请求即可，响应成功，显示成功提示并更新当前⻚数据.创建粉丝管理组 件，配置路由，粉丝列表通过使用 Echarts 进行可视化⻚面结构布局，准备 dom 容器，进行初始化实例，根据参考图进行图 表配置对象的设置，使用配置，发送请求响应成功后渲染⻚面即可 代码优化： 1. 商品管理与商品发布组件使用同一个频道组件功能，为了简化代码对此组件进行封装处理，便于后期维护,cdn 引包配置， 解决本地引入，导致加载过负，此项通过 webpack 的 base 文件中进行配置

银赚头条是一个新闻聚合网站平台，该平台通过海量信息采集、深度数据挖掘和用户行为分析，该平台主要涉及新闻推送、看新闻赚金币等功能，集热点头条、搞笑内容、娱乐内容为一体，为用户提供社会热点、娱乐新闻、搞笑段子等服务。 项目主要技术栈（前端）：vue.Js+vue-cli全家桶+vue-router+vantUi框架+git（版本控制）+vuex+axios+amfe-flexible( rem适配) 项目职责：主要负责项目中登录模块、文章列表模块、频道模块的页面展示和功能实现 项目步骤 ： 1. 通过Vue-cli创建基础的项目结构，删除现有的文件并调整目录结构，通过git操作，把本地的新分支推送到远程 2.安装第三方包postcss-pxtorem、amfe-flexible以及一个基于 promise 的 HTTP 库axios。配置postcss-pxtorem，把页面px单位自动转成rem单位，提高开发效率。 3.创建组件views/login/index.vue，然后在router/index.js中配置路由表，实现登录页面结构布局和css样式，其中用到vantui中的NavBar导航栏、Form表单 4.由于项目中有些接口需要权限才能访问，所以在项目中将token保存在vuex中, 本地新建存储模块并将token做持久化处理，通过localStorage进行token保存。 5.登录模块完成后,对文章信息模块进行组件化开发,首先进行页面的基础布局,通过van-cell、van-grid和van-image组件实现 6.通过父子传值动态绑定+props,接收到父组件请求回来的数据,进行页面渲染.渲染页面的表层数据用插值表达式即可渲染，部分复杂数据需要利用到VUE中的作用域插槽进行赋值（slot-scope），在列表中使用v-for进行赋值，这三种可以实现表层数据赋值 7.实现下拉刷新和上拉加载功能,主要实现原理是,在下拉刷新时,会触发refresh事件,在事件的回调函数中进行同步或者异步操作,操作完成后,再将加载状态数据更改成false完成加载功能 8.对页面中渲染的时间内容, 进行相对时间的处理, 其中用到dayjs并且配合vue中的过滤器,来完成时间的转换，在main.js中全局注册使用过滤器 9.由于文章列表模块的功能较为复杂,所以新建moreAction组件进行实现.,然后在父组件中使用此组件,文章操作功能对于已经登陆的用户，可允许他们去关闭某篇文章，或者是反馈内容。 10.实现文章不感兴趣功能,在moreAction组件中抛出事件,调用接口, 实现对数据的删除, 主要通过eventBus(事件总线)实现跨组件消息传递,在父组件index.vue中发布事件,然后在子组件中监听事件 11.封装频道管理组件, 点击触发弹层, 通过查阅接口发现, 进行添加频道时需要传入对应的文章编号, 在获取文章编号时用到了$route.params获取路由信息中的文章编号   代码优化： 1.在加载文章列表时，对其中的图片进行懒加载处理：并不是一开始就加载全部的图片，而当某张图快要进入可见区域时，再去加载。可以避免http请求时同时加载完所有资源，导致性能下降。 2.设置了路由拦截处理，阅读vue-router文档发现导航守卫功能，便将此段代码封装至路由的js文件中，从而实现路由导航守卫功能 BUG解决： 1.在moreAction中，如果是在这种状态退出的，则下次再打开时，它也是这个状态。原因是isReport被设置成了true，对于这个bug解决方法是通过在父组件中修改子组件数据即可，使用$ref解决 2.最大安全值的处理,由于后端回传的真实id是19位的数值，超过了js能表达的最大安全整数，所以要引入一个额外的包JSONBig来处理这个问题。

项目描述：超编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.其中终端栏目管理，为了便于tabs标签组件的复用，进行封装。其中commonTabs组件共分为基本信息,发布信息,配置开关,项目模板,栏目规则,授权设置,播放器设置,渲染规则等功能 7.数据回显,主要通过父子传值实现动态绑定props,接收到父组件请求回来的数据,进行页面渲染.渲染页面的表层数据用插值表达式即可渲染，部分复杂数据需要利用到 VUE 中的作用域插槽进行赋值（slot-scope），在列表中使用 v-for 进行赋值,这三种可以实现表层数据赋值.对公共的数据可以进行本地存储. 代码优化： 1.在加载文章列表时，对其中的图片进行懒加载处理：并不是一开始就加载全部的图片，而当某张图快要进入可见 区域时，再去加载。可以避免 http 请求时同时加载完所有资源，导致性能下降。 2.为防范xss攻击,①进行表单输入验证②需要在 HTTP 头部配上，set-cookie： httponly-这个属性可以防止 XSS,它会禁止 javascript 脚本来访问 cookie。 secure - 这个属性告诉浏览器仅在请求为 https 的时候发送 cookie