项目总结

最近做了一个带后台的官网，学习实践了很多新的东西。想做一个记录来记录一下这几个踩过的坑，以便后面复习，或者是遇到相同问题时能找得到。 

 我们做的是一个官网需要一个后台来支撑，前后端分离，我是负责后台前端部分，使用了Vue，ajax，jq，bootstrap和一个tinymce的富文本框。

 遇到的问题有？ 

 1.图片缓存问题

 由于图片地址是指向服务器的本地文件夹的，所以每次刷新路径并不会发生变化。所以他并不是每一次都会重新去服务器请求获取图片，而是去浏览器的缓存中读取。所以在后台每次更新之后的刷新总是看不见直接的更改效果，用户体验比较差。 解决：利用vue的过滤器在地址后面添加一个data参数，每次都new一个新的时间戳作为请求图片的参数，这样每次加载得路径都不相同，所以都会去服务器里获取到图片。

var reg = RegExp(/jpg/); 

 if( reg.exec(value)){

 var s1=''; } 

 2.箭头函数和普通函数的区别，作用域等的不同

 3.前一个ajax请求的页面资源没加载完，如果强制执行下一个ajax会报错，并且执行失败。

4.空值执行方法 因为我们项目存在很多键不为空值为空的的数据，所以每次执行方法前都要判断一下是否存在，再执行方法 否则会报错。

5.url链接，图片命名中最好不带有空格，带空格之后会出现一些错误。 

6.vue：

 1.vue使用路由传值时要注意：params和query的区别。

query：刷新依旧存在。但是会在url中一直挂着，如果不怕url丑就可以使用这个。

 this.$router.push({ path:'/editor', query:{ id:id, url:'Generaliza', tablename:'generaliza' }}); 

params：刷新就不存在。不在url上挂着，可以在VueRouter的path中链接后面加上(例如 :id )这样来让他显示在url上。 注意：params需要在VueRouter的routes为要使用params的路由再加一个name的值，否则params不会生效。

var router=new VueRouter({ routes:[ {path:'/', component:home}, {path:'/generaliza/:id', component:generaliza,name:generaliza}, ] }) 

使用方法跟query一样,只是将query改为params: 

this.$router.push({ path:'/editor', params:{ id:id }}); 

2. 传参是this.$router,接收参数是this.\$route 。

1.  $router为VueRouter实例，想要到不同URL，则使用$router.push方法，并选择性传入参数。

 2.$route为当前router跳转对象，可以获取到name、path、query、params等参数。 

this.$route.query.id 

 3.在v-html中使用过滤器：

 4.vuex状态管理。一个可以解决组件之间传值麻烦问题的东西。其实就是一个传值的中转站。很好用。 

7.Tinymce: 

1.tinymce会根据请求地址来自动修改路径 加上 convert_urls: false 来关闭路径自动转换。

 2.直接复制word插入富文本框，保持原格式的插件。powerpaste。目前只有老版本需要的在下面留个邮箱。

 plugins: [ 'powerpaste' ] //在plugins添加powerpaste 

 powerpaste_word_import: 'propmt', // 参数可以是propmt, merge, clear，效果自行切换对比 powerpaste_html_import: 'propmt', // propmt, merge, clear

powerpaste_allow_local_images: true,  

3.自定义了一个轮播图插件，可以在富文本框中插入轮播图 ，但是由于时间问题没有完全做完，虽然能用但是还是不够完善。注意点：要让页面的轮播图js资源在请求富文本框内容的后面执行，否则轮播图不会生效。

以上都是个人见解。如有错误还请指出来 !