柚创意和柚创意后台管理系统作为入手的第一个实际项目，其中有很多不成熟的地方、也有很多不熟练、不会的。柚创意主要是模仿千图网、包图网做的一个素材网站，实现的功能主要有素材的展示、上传下载、会员分销、任务大厅等。柚创意后台管理系统主要实现修改数据、一些数据的审核发布、禁用删除和解析token获取用户权限等功能。这两个项目主要运用Vue+Element-ui来实现页面功能
柚创意是从头到尾一直由我来完成，在柚创意后台管理系统的中期开始由我单独完成，在项目即将完成之际，下面做一下此次项目的总结与收获。
柚创意
第一期
前台的第一期主要实现页面的展示、上传下载。在这一期的时候静态页面基本已经做好，由于是第一个Vue项目，也是第一次接触Vue很多东西不会用，基本都是晚上总结一下明天要做啥，然后开始学，第二天现学现卖，这也导致有很多东西都是只会用儿不理解为什么这么用，而且也有很多的东西只学了一个表面（vue-router vuex）用的最浅显的功能，这导致后期有很多遗留问题（有些是已经不能改的）。
还有就是因为原来做的都是一个一个小demo,基本不会出现相同的方法，所以在这次的项目中除了刚开始java提醒我的axios封装，其他的我都是写在页面里面，没有做封装，这也导致一个项目有很多意外的bug、改着这个又影响到了那个、同一个功能要想多个方法去改。
第一期的功能我一直以为搜索会难道我，结果还没做到搜索的时候我已经倒下。首先做的是上传功能，做上传的时候，当时研究上传插件，结果发现根本看不懂，研究了三天，最后决定还是自己做上传，单个上传文件没有什么难的，主要是两点需要注意：
- 获取上传图片的尺寸
- 获取上传进度
获取上传图片的尺寸我用的是new Image()再用onload事件获取图片的尺寸。获取上传进度我用的是axios的onUploadProgress计算出上传百分比
然后就开始下载功能的实现。刚开始下载的时候我采用的是download，但是由于不会设置导致乱码，最后由后台设置下载。
搜索我用的是sessionStorage存储的数据，但是搜索的后退不能用，这有待去研究。
第二期
第二期主要是会员、分销、充值提现和购买素材。会员、分销都没什么，主要是有关于钱的问题，我们研究的是支付宝的充值和提现，这主要是由后台来完成的，没有走前端。充值是由后台返一个表单，我用iframe来渲染。我没有主要研究过这一块，看见别人的网站都是拿图片来渲染的，有空需要研究一下第三方。
第三期
第三期主要是任务大厅，这点也没有什么东西，主要是各种状态的控制、身份的判断，只要做好这些，基本就没有什么新技术。
柚创意后台管理系统
这个后台系统我是在中期才开始写的，刚开始上手的就是权限问题，我们做的是解析token获取用户有操作哪些接口的权限，权限控制到按钮级。我是在网上搜的方法：
import Vue from 'vue'
Vue.directive('has', {
bind: function(el, binding) {
if (!Vue.prototype.$_has(binding.value)) {
el.parentNode.removeChild(el);
}
}
});
//权限检查方法
Vue.prototype.$_has = function(value) {
let isExist=false;
let buttonpermsStr=JSON.parse(sessionStorage.getItem('Jurisdiction')).auth;
if(buttonpermsStr==undefined || buttonpermsStr==null){
return false;
}
// let buttonperms=JSON.parse(buttonpermsStr);
for(let i=0;i<buttonpermsStr.length;i++){
if(buttonpermsStr[i].authority.indexOf(value)>-1){
isExist=true;
break;
}
}
return isExist;
};
//在main中引入这个js文件 如：import has from './public/btnPermissions'
//在需要判断的接口上接加v-has='接口名'
做这个素材网站主要还有图片的处理和兼容，这让我知道了object-fit和object-position这两个属性，还了解到了webp的图片是有兼容的。可以用：
function checkWebp () {
try {
return (document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0)
} catch (err) {
return false
}
}
//判断是否为webp图片
还有就是我在第一次打包时出现各种各样的问题，这些现在货已经不是问题，但是还有一个需要特别说明。那就是我的项目使用ES6语法写的，但是现在有些低版本的浏览器并不兼容，这时候就需要babel-polyfill插件来解决。对于一些跳转路由之后没有在页面顶部的问题可以设置：
scrollBehavior (to, form, savePosition) {
return {
x: 0,
y: 0
}
},
//写在router.js里，统一解决
对于SEO问题我用的是prerender-spa-plugin这个插件，但是这个插件比较适合不更新数据的页面，对于需要更新数据的页面效果并不好，于是我看了一下官网上推荐的SSR和Nuxt.js，发现Nuxt.js改动比较大，适合从项目以开始就用的，SSR相比于Nuxt.js改动较小。SSR需要node.js中间层来转化为HTML, 需要把数据放在Vuex里来动态获取。我参考的是www.cnblogs.com/xiaohuochai…和blog.csdn.net/ligang25851…这两篇文章，但是最后在Vuex动态更改数据那没有往下做了。
对于更换头像问题，我用的是vue-cropper，这里有比较详细的介绍。
已经到了项目的尾声，这个项目也让我学到了很多，最重要的就是一个项目一定要封装公用方法，不能让一个项目有好几个头和手，那样会引起很多以外的问题；还有就是认识到了自己技术上的不足，还需继续学习进步。在实际的工作中也要学会搜索自己需要的东西，不能一味的值想着自己写出来这个功能，要以最简单的方法完成工作。还要认真处理细节问题，不要想着最快做完，要考虑清楚之后再去写，把自己当成用户去思考问题，就能减少很多不必要的bug，思考问题要全面，技术上的难题永远逃避不了，遇见了要想办法把它克服。
