1.cookie同源限制问题描述:后端egg采用基于jwt认证的登录策略,辅以session管理用户信息,但是遇到cookie同源限制。虽然后端egg通过cors实现了跨域,但是cookies依然严格遵守同源策略。我把后端提交到域名为mboke.top的服务器后,我本地启动的前端项目直接用axios和mboke.top服务器通信。虽然跨域请求成功了,但是本地启动的前端项目的域名是localhost。cookie严格遵守同源策略,所以我的跨域请求可以成功,但是cookie一直失败。第一种方案是放弃cookie和session管理用户信息的思路,直接使用jwt认证和存储用户信息,完全使用jwt认证和存储。第二种Nginx使用nginx方向代理mboke.top后端接口,彻底解决cookie同源限制问题。第三种domian,如果我用的是github.io服务器,我的前端项目是放在github服务器上的,那么从个人marhooo.github.io源发到mboke.top接口的请求还是有限制的同源。我可以在mboke.top顶级域名下创建一个dash.mboke.top子域,cname为marhooo.github.io。这样前端项目就在二级域名下了。我们在前端脚本中写一行来设置我们的前端二级域名的域为一级域名,以便cookie解除限制。第四种是增加中心节点,专门用来记录cookies的。使用广泛用于跨根cookie共享的jsonp,参见文章,大型企业的解决方案。2、彩蛋开的是https,不是nginx。安装egg-cluster:npmiegg-cluster--save将pem和key放到一个文件夹中写入exports.cluster={https:{key:path.join(__dirname,'intheconfig.prod.jsfile../app/cassl/mboke.top.key'),//https证书绝对目录cert:path.join(__dirname,'../app/cassl/mboke.top.pem')//https证书绝对目录}};修改package.json的脚本命令:"start":"egg-scriptsstart--title=egg-server-eggserver--port=443"docker里面不用改什么3.Github显示主页可以搭建Github主页正在cnamed作为二级域名很重要!免费新建一个项目(项目名设置为:github用户名+github.io),将静态项目dist中的文件直接推送到本仓库的master分支,这样个人主页就搭建好了,但是我们还可以进一步改变。在个人域名解析中增加解析。记录值为仓库名称,即github用户名+github.io。在master分支上创建一个CNAME文件,到setting中点击,然后就可以为dash.mboke.top二级域名启用ssl,然后在Github中强制执行就可以了。。。。gh-pages分支显示你在github上的任何项目都会被二级域名解析。真的是免费的!4.全局组件和本地组件的注册全局注册的组件可以在任何地方使用,因为组件会通过Vue.component函数扩展到Vue.options,每个组件在初始化的时候会合并Vue.options和自己的options,这样每个组件都可以访问这个全局注册的组件。部分注册的组件只能在当前组件中使用,因为组件只扩展到Sub.options,也就是当前组件构造函数的options。5、webpack编译简单梳理webpack编译时以main.js为入口文件,自上而下编译,通过loader插件转换js、vue、css等文件,收集依赖打包并编译代码,还会执行babelshim,至此前端工程就完成了。main.js中的新Vue()代码之前一直困扰着我。其实准确的说是webpack编译了main.js文件,也执行了newVue()的代码。编译的时候,webpack会把关系网导入到依赖集合中,然后就完成了整体的编译打包!那我们就整理下用Vue.component()注册全局组件的代码去向。1、首先我们了解一下vue-loader编译vue文件后会转换成什么样的文件。如果.vue文件是一个组件的转换对象!全局注册函数调用:Vue.component('my-component',{/*...*/})调用global-api中的initAssetRegisters函数,将组件对象通过extend和convert成组件构造函数把它放到Vue.options.component对象中。[Vue.options是Vue构造函数的全局属性。我之前写包的时候从来没用过这个方法]2.然后从上往下编译文件,newVue()开始执行时,会发生什么NewVue()执行————>执行_init函数————>_init函数中有这么一段代码【图1】,作用是合并options———>src/core/util/options.js文件调用mergeAssets函数,会遍历所有ASSET_TYPES为组件的Vue.options.component对象,完成合并(使用Object.createjs方法)将Vue.options和外部写入的options合并到vm.$options【图2】————>生成合并后的objectofthis.$options[图3]————>跳过initLifecycle(vm)、initEvents(vm)的初始化事件和属性————>然后来到initRender(vm)步骤————>创建VNode踏入这一步。我们知道这一步是通过调用_createElement函数实现的(createElement函数的核心部分,createElement其他代码实现的函数如图4所示)。————>Vnode转化为真正的dom进程后,有机会记录图一:图二:图三:图四:
