TOMMYHU

1、vue proxyTable接口跨域请求调试
或参考开发阶段 API 请求代理
在vue-cli项目中的config文件夹下的index.js配置文件中，dev长这样子：
dev: {     env: require('./dev.env'),     port: 8080,     autoOpenBrowser: true,     assetsSubDirectory: 'static',     assetsPublicPath: '/',     proxyTable: {},       cssSourceMap: false   }
服务器提供的接口如果长这样https://www.exaple.com/server_new/login，我们把域名提取出来如https://www.exaple.com；

在config中新建一个文件命名为proxyConfig.js :
module.exports = {   proxy: {         '/apis': {    //将<a href="http://www.exaple.com" target="_blank">www.exaple.com</a>印射为/apis             target: 'https://www.exaple.com',  // 接口域名             changeOrigin: true,  //是否跨域             pathRewrite: {                 '^/apis': ''   //需要rewrite的,             }                       }   } }
config文件夹下的index.js引入proxyConfig.js：
var proxyConfig = require('./proxyConfig') config文件夹下的index.js中的dev改成: [codes=c#] dev: {     env: require('./dev.env'),     port: 8080,     autoOpenBrowser: true,     assetsSubDirectory: 'static',     assetsPublicPath: '/',     proxyTable: proxyConfig.proxy,     cssSourceMap: false   }   
重启项目npm run dev：

你会发现出现了这个



这个时候我们已经设置好了本地API代理了

修改本地hosts文件
文件路径一般是C:\Window\System32\drivers\etc，打开hosts文件，在这一段下面把localhost设置进去
# localhost name resolution is handled within DNS itself. # 127.0.0.1       localhost # ::1             localhost 127.0.0.1                   activate.adobe.com 127.0.0.1                   practivate.adobe.com 127.0.0.1                   lmlicenses.wip4.adobe.com 127.0.0.1                   lm.licenses.adobe.com 127.0.0.1                   na1r.services.adobe.com 127.0.0.1                   hlrcv.stage.adobe.com
localhost                   www.exaple.com            
搞定
此时我们已经完全解决了跨域问题，以及本地测试后台无法向我们本地环境设置cookie的情况了。

2、后端设置请求头部Access-Control-Allow-Credentials: true和Access-Control-Allow-Origin: www.xxx.com
后端设置请求头部Access-Control-Allow-Credentials: true和Access-Control-Allow-Origin: www.xxx.com
前端post请求设置withCredentials=true
这里用了axios的请求数据方法代码如下：
import axios from 'axios' import config from '../config' export default { request (method, uri, data, headerConfig = {withCredentials: true}) { if (!method) { console.error('API function call requires method argument') return } if (!uri) { console.error('API function call requires uri argument') return } let url = config.serverURI + uri return axios({ method, url, data, ...headerConfig }) } }
jQuery的$.ajax:：
$.ajax({ type: "POST", url: "http://www.xxx.com/api.php", dataType: 'json', xhrFields: {   withCredentials: true }, crossDomain: true }).then((json) => { // balabala... })

3、jsonp

jsonp也是一种解决跨域的方法，不过我从来没有用过，在网上查了下资料，jsonp的原理是script标签引入js是不受域名限制的, 由于是模拟插入script标签, 所以不可以用post请求。

4、nginx配置
最近使用vue开发一个功能，npm run build之后打包的代码放在了a.com.cn下但是php接口部署在了b.com下，那么问题来了，如何让后端接口支持跨域。有两种方法：

让后端在返回数据的时候设置下返回请求的header，这种方法比较不稳定，因为接口一旦多了就得改好多代码，而且每次出了问题还得去找后端开发改代码，很烦。

另一种方法是，自己配置nginx，首先ssh登录到部署接口所在的服务器，修改nginx配置，在http对象中加入两行代码：
http {   // 需要加入的代码   add_header Access-Control-Allow-Origin <a href="http://a.com.cn" target="_blank">http://a.com.cn</a>   add_header Access-Control-Allow-Credentials true   server {     // b.com.cn的具体配置   } }
改完重启下nginx，然后在vue项目中，在导入axios的地方加如以下代码：
import axios from 'axios' axios.defaults.withCredentials = true
然后测试，发现就可以跨域了。

弹出层、弹窗插件，有这两兄弟就够了，居家旅行必备良品
layx  https://gitee.com/monksoul/LayX
layer  http://layer.layui.com/

前端
1、promise.then
2、Step.js 使用教程（附源码解析）

3、Async.js中文详解



其他
1、Generator co http://www.ruanyifeng.com/blog/2015/05/async.html
2、async await 可以参考阅读https://www.jianshu.com/p/7bd8d5e87965

2.1、vue : async / await 的应用
api.js
import axios from 'axios'; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; var async2 = async function () {     let data = await new Promise((resolve)=>{         setTimeout(()=>{             resolve({"errocode":0,"errmsg":"ok"})             console.log("async2");         },3000)     })     return data } export const async1 = async function () {     await async2();     let data = await new Promise((resolve)=>{         setTimeout(()=>{             resolve({"errocode":0,"errmsg":"ok"})             console.log("async1");         })     })     return data }
app.vue
import { async1,async2 } from '../../api/api'; ... created(){     async1().then((v)=>{             console.info(v);      });   }, ...

vue使用async/await 报错“Syntax Error: await is a reserved word“””
引入babel-plugin-transform-runtime包，然后在.babelrc加上 {   "presets": [     ["env", { "modules": false }],     "stage-2"   ],   "plugins": ["transform-runtime"],   "comments": false,   "env": {     "test": {       "presets": ["env", "stage-2"],       "plugins": [ "istanbul" ]     }   } }



async/await 更好的异步解决方案https://segmentfault.com/a/1190000012411744

1.引入generator支撑库
经过Babel转译后的代码，会把aysnc/await的功能通过类似co库的方式来实现，即要使用到generator，所以，和我们使用co的时候一样，需要依赖一个regeneratorRuntime，才能支持generator特性。我们可以使用Facebook开源的regenerator库。你可以通过npm来下载这个regenerator库：

npm install regenerator --save
然后将下载文件中名为regenerator-runtime的文件拿出来，放到我们的小程序代码中去。

2.引入代码
在需要使用async/await特性的代码文件中，引入regenerator库：

import regeneratorRuntime from '../../utils/regenerator-runtime/runtime-module.js';
然后，你就可以放心的在你的代码里使用async/await来写异步处理了。

https://www.w3cplus.com/preprocessor/8-tips-help-get-best-sass.html
编写Sass的八个技巧

download: function() {         console.log("xiazai")         var obj = document.getElementById('download');         var str = "姓名,出生日期,地址\n";         for (var i = 0; i < this.tableData.length; i++) {           var item = this.tableData[i];           str += item.name + ',' + item.date + ',' + item.address;           str += "\n";         }         console.log(obj)         str = encodeURIComponent(str);         console.log(str)         obj.href = "data:text/csv;charset=utf-8,\ufeff" + str;         obj.download = "download.csv";       }

/** * Created by Tommy.Hu on ${DATE}. */ <template>     <section>${NAME}..     </section> </template> <script> export default {   name: '${NAME}',   data () {     return {       componetTitle: '${NAME}'     }   } } </script> <style scoped> </style>

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8" />     <script>         function upload(input) {             //支持chrome IE10             if (window.FileReader) {                 var file = input.files[0];                 filename = file.name.split(".")[0];                 var reader = new FileReader();                 reader.onload = function() {                     console.log(this.result)                     alert(this.result);                 }                 reader.readAsText(file);             }             //支持IE 7 8 9 10             else if (typeof window.ActiveXObject != 'undefined'){                 var xmlDoc;                 xmlDoc = new ActiveXObject("Microsoft.XMLDOM");                 xmlDoc.async = false;                 xmlDoc.load(input.value);                 alert(xmlDoc.xml);             }             //支持FF             else if (document.implementation && document.implementation.createDocument) {                 var xmlDoc;                 xmlDoc = document.implementation.createDocument("", "", null);                 xmlDoc.async = false;                 xmlDoc.load(input.value);                 alert(xmlDoc.xml);             } else {                 alert('error');             }         }     </script>     <title>file upload</title> </head> <body> <input id='file' type="file" onchange="upload(this)" />【注意，参数传的是这个input的html元素,若是jquery，此参数是$('#file')[0]】 <script type='text/javascript'> //<![CDATA[ if (document.getElementById('processtime')) document.getElementById('processtime').innerHTML="<span class='runtimedisplay'>Run in 174 ms, 9 Queries.</span>"; //]]> </script></body> </html>