安装

$ npm i axios            // 阿西奥斯

引用 const axios = require('axios');

$ bower install axios

cdn <script src="http://unpkg.com/axios/dist/axios.min.js">

Request参数

{
    baseUrl: '/api'                    // 基础url
    url: '/databaseList',        // 请求的接口，与基础合起来为'/api/databaseList'
    method: 'get',        // 请求方式，default=get

    // 设置头部信息
    headers: {
        'Content-Type': 'Application-json',
        'X-token': '1k12hkj34j2kbjhs9df74b'},
    },

    // URL的参数，get或Content-Type='application/x-www-form-urlencoded'使用的参数，不能用data
    params: {
        ID: 12345
    },

    // data发送的主休，用于post、stream、buffer
    data: {
        username: 'sigunag',
        password: '*******'
    },

    // 超时时间
    timeout: 1000,

    // 响应类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
    responseType: 'json',

    // 响应的编码
    responseEncoding: 'utf8',

    // socket代理路径
    socketPath: null, // default

    // keepAlive 保持连接，默认不启动
    httpAgent: new http.Agent({ keepAlive: true }),
    httpsAgent: new https.Agent({ keepAlive: true }),

    // 代理主机
    proxy: {
        host: '127.0.0.1',
        port: 9000,
        auth: {
            username: 'mikeymike',
            password: 'rapunz3l'
        }
    },

    // 取消请求
    cancelToken: new CancelToken(function (cancel) {

    })

    // 一个可选的函数负责序列化“参数”
    paramsSerializer: function(params) {
        return Qs.stringify(params, {arrayFormat: 'brackets'})
    },

    transformRequest: [function (data, headers) {        // 在请求服务器之前的回调，适用于post
        return data;
    }],
    transformResponse: [function (data) {        // 在响应的回调，适用于post
        return data;
    }],
}

Response参数

{
    // 响应数据
    data: {},

    // 状态码
    status: 200,

    // http响应状态消息
    statusText: 'OK',

    // 响应头
    headers: {},

    // `config` is the config that was provided to `axios` for the request
    config: {},

    // `request` is the request that generated this response
    // It is the last ClientRequest instance in node.js (in redirects)
    // and an XMLHttpRequest instance the browser
    request: {}
}

创建实例

const axios = require('axios');


const request = axios.create({
      baseURL: '/api',     // api的base_url
        timeout: 10000,     // 请求超时时间 ms
})

/* 创建拦截器 */
// 请求拦截器
request.interceptors.request.use(
    (config) => {
        // Do something before request is sent
        return config;
    }, 
  (error) => {
        // Do something with request error
        return Promise.reject(error);
    }
);

// 响应拦截器
request.interceptors.response.use(
    (response) => {
        // Do something with response data
        return response;
    }, 
    (error) => {
        // Do something with response error
        return Promise.reject(error);
    }
);

axios.get('/user', {        
    params: {
        ID: 12345
    }
})
.then((d) => {
    // success
})
.catch((error) => {
    // error
})
.then(() => {
    //
})


一、请求参数 

    1、get或content-type="application/x-www-form-urlencoded" 使用 params来加参数

    2、post、content-type="application/json" 使用 data来传参数

axios.all 处理多个请求

就是promis.all()，多个请求全部执行成功后在执行

function getUserAccount() { return axios.get('/user/12345');     }
function getUserPermissions() { return axios.get('/user/12345/permissions'); }

axios.all([getUserAccount(), getUserPermissions()])
    .then(axios.spread(function (acct, perms) {
        // Both requests are now complete
    }));

API

一、axios(config)

    1、post请求

        axios.request('/user/12345',{
            method: 'post',
            data: {
                firstName: 'Fred',
                lastName: 'Flintstone'
            }
        });

    2、get请求

        axios.request('http://bit.ly/2mTM3nY', {
            method:'get',
            responseType:'stream'
        })
        .then(function(response) {
            response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
        });

二、创建实例

    const request = axios.create({
        baseURL: '/api',            // 基础
        timeout: 1000,                // 请求超时时间
        headers: {'X-Custom-Header': 'foobar'}
    });


{


}

axios-mock-adapter axios使用mock

https://github.com/ctimmerm/axios-mock-adapter

前端开发桌面程序

1、Electron - https://electronjs.org/docs                可以开发.exe的桌面程序

    https://www.jianshu.com/p/57d910008612

UI框架

一、Bootstrap中文网：http://www.bootcss.com/       

二、Bootstrap Table API:  http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/

        http://www.cnblogs.com/gamehiboy/p/5176618.html

三、Vue UI:

    1、layUI框架: http://www.layui.com/

        页面中加载layui
        <script src="lib/layui.js"></script>
        <script src="mian.js"></script>

        main.js
        layui.use(['laydate'], function(){         // laydate 调用日期插件
                var laydate = layui.laydate;
                var oD = document.getElementById("dateInput");

                var start = {
                elem: oD,
                min: laydate.now(),
                max: '2099-06-16 23:59:59',
                istoday: false,
                choose: function(datas){
                    end.min = datas;     // 开始日选好后，重置结束日的最小日期
                    end.start = datas     // 将结束日的初始值设定为开始日
                }
            };

            laydate(start);          
        });

    饿了么vue PC端框架 : http://element.eleme.io/#/zh-CN/resource

四、React UI:

    蚂蚁金服React ui框架https://ant.design/

    react native https://github.com/ant-design/ant-design-mobile/blob/master/README.zh-CN.md

                    https://mobile.ant.design/docs/react/introduce

    React UI: http://rsuite.github.io/#/?_k=1me3ji

    React 图表: BizCharts:http://bizcharts.net/products/bizCharts/demo

微信UI

UI库 http://vue.ydui.org/

移动端UI

阿里移动端框架 mui: http://m.sui.taobao.org/

饿了么vue ui移动框架: http://mint-ui.github.io/#!/zh-cn

flexible移动端rem转换: http://caibaojian.com/flexible-js.html

JS库

1、jQeruy

2、underscore: http://www.css88.com/doc/underscore/

3、zepto: http://www.bootcss.com/p/zeptojs/


日期类

1、jquery DateTimePicker:  http://www.jq22.com/jquery-info332

2、Bootstrap DataPicker:   http://www.bootcss.com/p/bootstrap-datetimepicker/

3、laydate:  http://laydate.layui.com/

JS框架

1、VueJS

2、AngularJS    

vue-strap：http://yuche.github.io/vue-strap/

3、React

4、ReactNative

Mock数据

1、mock：http://mockjs.com/       // 生成随机数据，拦截 Ajax 请求

2、RAP: http://rap.taobao.org/org/index.do

    复制一个字段名，然后新建一个字段粘贴，在按ctrl+回车，就会将他下面所有的数据都复制过来，对于层级很复杂的比较好用

chrome 插件

    EditThisCookie   设置cookie

    PostMan        post请求

3、在线编辑代码: https://jsfiddle.net/

NodeJS

Exporess:  http://www.expressjs.com.cn/

egg阿里nodejs框架:https://eggjs.org/zh-cn/basics/middleware.html

移动端的Sass框架

yo: https://github.com/doyoe/Yo#bugs-and-feature-requests

icons

http://www.iconfont.cn/                    // 阿里图标收集

http://www.fontawesome.com.cn/

https://icons8.com/icon/new-icons/all

http://emojipedia.org/    小图片

其它插件

1、socket: https://github.com/sockjs/sockjs-client    

2、二进制转换库: protobuf.js  bytebuffer.js  long.js

3、纯前端将table导出Excel文件  http://www.jianshu.com/p/74d405940305

    js-xlsx: https://github.com/SheetJS/js-xlsx      用来读取和写文件，

        暴露一个XLSX全局对象
            读取数据XLSX.reder()，读取文件XLSX.readerFile()
            写数据 XLSX.write()，写文件XLSX.writeFile()、写流文件XLSX.stream
            utils对象

    fileSaver: https://github.com/eligrey/FileSaver.js/blob/master/FileSaver.js

4、axios - ajax封装  https://github.com/axios/axios#cancellation

5、iScroll: http://cubiq.org/iscroll-5   http://www.360doc.com/content/14/0724/11/16276861_396699901.shtml

6、Swipper: http://www.swiper.com.cn/

http://www.jq22.com/      jquery插件网

日期

1、momentjs: http://momentjs.cn/            // 日期格式化

####

chalk: https://github.com/chalk/chalk // 可以设置终端log的显示颜色

前端打包工具

1、gulp

2、webpack

3、grunt

调试工具

1、browsersync:   http://www.browsersync.cn/            // 浏览器同步测试工具

    http://www.browsersync.cn/docs/command-line/

产品类

http://www.sketchcn.com/

omniGraffle

管理工具

Confluence 用于团的wiki，和日常工作流程

JIRA   产品版本  产品需求 - 技术开发 - 测试

Stash  git 仓库

/** 工具类 */

查看chrome的DNS缓存对应表: chrome://net-internals#dns

Sublime Text

http://blog.csdn.net/u013861109/article/details/53106074

1、安装package control

        https://packagecontrol.io/

        Control + `（mac） 或 Ctrl+～ （win） 调出console  输入下面命令，查看是否安装成功 Perferences->package settings中看到package control这一项，则安装成功

        import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

2、安装编辑器主题

        按下Ctrl+Shift+P，输入install，选择Package Control: Install Package，然后输入Spacegray，选择Theme: Spacegray.

        在菜单栏中选择Preferences->Settings-User，复制以下代码，覆盖打开的文件内容，保存即可应用主题：    
        {
                "theme": "Spacegray.sublime-theme",
            "color_scheme": "Packages/Theme - Spacegray/base16-ocean.dark.tmTheme"
        }

3、设置代码行间距、字号

        需要个性哪个就直接在preferences -> settings user 中的配置添加
        {
            "color_scheme": "Packages/Theme - Spacegray/base16-ocean.dark.tmTheme",
            "theme": "Spacegray.sublime-theme",
            "font_size": "16",
            "line_padding_top": 2,
                "line_padding_bottom": 2
        }


4、安装常用插件

        安装：command + shift + p 输入 ip 回车

        卸载：command + shift + p 输入remove 回车

        1) px转rem插件  https://github.com/flashlizi/cssrem

        1）emmet：html、css快速编写

            如果emmet插件失效：http://www.jianshu.com/p/0862e754cf15

        2）syncedSideBar：侧栏与主界面的颜色相同

        3）babel：ES6、JSX、React

        4）AngularJS

        5）jQuery：jQuery提示

        6）Html5：html5捆

        7）Less：一个Less语法高亮插件

        8）Sass

        9）JsFormat：js 格式化插件

        10）SublimeLinter：行内高亮语法

        11）SideBarEnhancements：一个左边栏增强

        12）SublimeCodeintel：一个代码智能提示引擎

        13）Alignment：Js代码对其插件

        14）BracketHighlighter：代码对其线高亮

        15）Git：git的支持插件

        16）Prefixr：Prefixr Api支持，Prefixr是一个生成css3兼容性的api

        17）LiveReload：网页浏览器页面重新加载插件

        18）Tag：格式化代码排版

                Mac OS X: Command-Option-Shift-F
                Windows: Control-Alt-Shift-F


        19) HTML-CSS-JS Prettify 代码格式化插件 cmd+shift+h

        20）cssrem：sublime的px转rem的插件   https://github.com/flashlizi/cssrem      需要手动下载放到packages中，配置cssrem.sublime文件指定px_to_rem的值 

        21）MarioRicalde-SCSS       SCSS的代码提式和高亮

        react插件   http://www.jianshu.com/p/ecf6c802fdc5?open_source=weibo_search

emmet快捷方法

http://www.w3cplus.com/tools/emmet-cheat-sheet.html

http://www.iteye.com/news/27580

webStorm

1、格式化代码: format   command + option + L

2、install plugins  安装插件

    webstorm/plugins => 插入插件名，然后添加

atom

用于开发react

atom-react-autocomplete 组件名及状态的自动补全 

http://blog.csdn.net/crper/article/details/52196675

vs-Code

安装插件： ext install 插件名

https://marketplace.visualstudio.com/VSCode

1、vue-beautify: vue格式化

2、vue: 语法高亮

3、html-snippets：H5 提示

4、vscode-html-css: 写class可以搜索到所有引用class的值

5、jquerysnippets: jquery提示

6、vscode-JS-CSS-HTML-formatter: html/css/js文件格式化 使用方法: ⌘ + P 输入formatter

7、path-intellisense: 路径自动提示

8、npm-intellisense: 使用require提示

9、vscode-eslint: 语法验证

10、Bootstrap: 

11、vscode-icons: 编辑器菜单中对应文件前加图标   输入icon 选择 File icon Theme

    vscode-icon-theme: 

12、ReactSnippets: ReactJS  jsx文件内 输入 rcc 就可以创建一个react组件的初始代码  
    https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets

13、vscode-node-readme: 可以查看node reuqire中引用的node-module的包内容

14、auto-close-tag: 可以将文档未闭合标签自动加关闭   输入close tag

15、px转rem插件   https://github.com/Maroon1/px2rem 

16、主题类

    Atom One Dark Theme

        vsc-material-theme

        Material Theme

        切换主题  ⌘ + shift + p   =>  输入 them 选择颜色主题在列表中在选择

17、guides: 高亮缩进基准线   ext install guides

18、常见问题

    1) HTML GB2312的乱码问题：code - 首选项 - 设置  在右侧来设置此属性 files.autoGuessEncoding": true

-------------------

1、⌘ + p 搜索插件

2、⌘ + shift + p  命令

3、⌘ + , 打开settings.json配置

4、^(control) + ` 打开vscode自带的终端

5、miniMap的配置  在settings.json中加入 "editor.minimap.enabled": true  配置

6、|http://www.jianshu.com/p/819fc0f7f3b2  配置

7、http://www.cnblogs.com/huaxingtianxia/p/5481493.html   快捷键

8、整行粘贴 sb是⌘+D,   vscode是光标在当前行 ⌘+C, 然后在⌘+V

9、多行光标

    ALT+鼠标

    ALT+上下方向键

    关键词被选中/高亮后，CTRL+D


{
    "workbench.iconTheme": "vscode-icons",
    "workbench.colorTheme": "Atom One Dark",
    "files.autoGuessEncoding": false,
    "window.zoomLevel": -1,
    "editor.fontSize": 13,                    // 文字大小，也可以command +
    "editor.tabSize": 2,                    // tab空格数
    "editor.formatOnType": false,
    "editor.formatOnSave": false,
    "editor.wordWrap": "on"                    // 代码自动换行
}

gitBook

https://segmentfault.com/a/1190000005859901
http://www.chengweiyang.cn/gitbook/introduction/README.html

markdown

https://sspai.com/post/25137

使用工具

1、sFTP - 可视化拖拽上传服务器，也命令行

2、SecureCRT - 纯命令行上传服务器

3、Navicat Premium - Mysql 可视化工具

4、Studio 3T - MongoDB 可视化工具

5、Sourcetree - Git工具

6、VSCode、Sublime、Atom、WebStorm - 前端开发工具

7、

LodashJS

工具库，处理数组、对象的一些方法

官网: https://lodash.com/

中文官网: http://lodashjs.com/docs/#_chunkarray-size1

示例

let box = document.querySelector("#box");

let arr = [1,2,3,4,5,6];

// 将数组每两个下标值，转成一个二维数组 
// arr = _.chunk(arr, 2);      // [[1,2], [3,4], [5,6]]

// 删除数组中的false, null, 0, '', undefined, Nan
// arr = [1, 0, 3, '', false, 'ss']
// arr = _.compact(arr);      //   [1,3,'ss'] 

// 合并数组
// arr = [1];
// arr = _.concat(arr, 2, [3], [[4]]);    // [1, 2, 3, [4]]

// 去除数组中指定的数值
// arr = _.difference(arr, [2,3,4]);   // [1,5,6]

// 截取数组从第个开始直到最后的值
// arr = _.drop(arr, 2);      // [3,4,5,6]

// 指定删除的下标个数，从右开始
// arr = _.dropRight(arr, 2);    // [1,2,3]

// 填充数组元素，全部或指定区域
// arr = _.fill(arr, 'a');       // ['a', 'a', 'a', 'a', 'a', 'a'];
// arr = _.fill(arr, '*', 1, 4);    // [1, "*", "*", "*", 5, 6]

// 查找指定的值返回下标
// arr = [
//   {user: 'siguang', age: 30},
//   {user: 'lulu', age: 20},
//   {user: 'haha', age: 10}
// ]
// arr = _.findIndex(arr, function(o){ return o.user == 'lulu' });   // 1
// arr = _.findIndex(arr, ['age', 10])     // 2 如果不存在返回-1

// findLastIndex() 与findIndex()相同只是从后向前
// lastIndex()

// 将一个二维数组转成对象
// arr = [['a', 1], ['b', 2]];
// arr = _.fromPairs(arr);     // {a: 1, b: 2}

// 返回数组第一个、最后一个元素
// arr = _.head(arr);    // 1
// arr = _.last(arr);    // 6

// 根据下标返回值
// arr = _.indexOf(arr, 2);   // 1

// 删除最后一个数组值
// arr = _.initial(arr);     // [1, 2, 3, 4, 5]

// 将数组元素用分割符分开，返回一个字符串
// arr = _.join(arr, '~');      // "1~2~3~4~5~6"

// 根据下标的返回数组中的值，如果是负数从后开始
// arr = _.nth(arr, 2);      // 3
// arr = _.nth(arr, -2);        // 5

// 删除数组中指定的值
// arr = _.pull(arr, 3, 4, 5);   // [1, 2, 6]
// arr = _.pullAll(arr, [3,4,5]);   // [1, 2, 6]

// 返回指定下标的数组值
// arr = _.pullAt(arr, [1,3,5]);   // [2, 4, 6]

// 删除数组元素
arr = _.remove(arr, function(n){ return n % 2 == 0 });    // [2, 4, 6]


console.log(arr);    
box.innerHTML = 'sss'

sheetjs 用于读取和导出文件，如Excel、csv

安装

1、CDN src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"

2、$ npm i xlsx --save

3、$ npm install file-saver --save       // 依赖插件，用于对文件的生成保存  https://github.com/eligrey/FileSaver.js

使用

let XLSX = require('xlsx');     // 引用插件
let FileSaver = require('file-saver');

API

一、读写:

    XLSX.readFile('test.xlsx') - 读取文件

    XLSX.read(); 

    XLSX.write(wb, opt);  

    XLSX.writeFile(wb, filename, write_opts); 


二、方法

    XLSX.utils.table_to_book(document.getElementById('tableau'), {sheet:"Sheet JS"});    // 通过table遍历成导出文件

    XLSX.utils.json_to_book()      // 将组装sheet需要的格式，见下面数据格式

    XLSX.utils.sheet_to_json(ws, {header:1, raw:true})


三、输入

    aoa_to_sheet() - 将JS数据数组转换为工作表

    json_to_sheet() - 将一个JSON对象数组转换为工作表

    table_to_sheet() - 将DOM TABLE元素转换为工作表


四、出口: 将Sheet生成的数据转成其它格式:

    XLSX.utils.sheet_to_csv() - 生成CSV

    XLSX.utils.sheet_to_txt() - 生成UTF16格式文本

    XLSX.utils.sheet_to_html() - 生成HTML

    XLSX.utils.sheet_to_json() - 生成一个对象数组

    XLSX.utils.sheet_to_formulae() - 生成公式列表

    Example 将Sheet生成的数据转成html:

        let wb = XLSX.utils.table_to_book(document.getElementById('tab1'), {sheet:"Sheet JS"});
        let sheetData = wb.Sheets['Sheet JS'];
        console.log(XLSX.utils.sheet_to_html(sheetData));


五、通过Blob对象转成文件

    let wb = XLSX.utils.table_to_book(document.getElementById('tab1'), {sheet:"Sheet JS"});
    let fname = '借款.xlsx';
    FileSaver.saveAs(new Blob([s2ab(wb)], {type:"application/octet-stream"}), fname);

    function s2ab(s) {
        if(typeof ArrayBuffer !== 'undefined') {
            let buf = new ArrayBuffer(s.length);
            let view = new Uint8Array(buf);
            for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
            return buf;
        } else {
            let buf = new Array(s.length);
            for (var i=0; i!=s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
            return buf;
        }
    }

格式

let wb = XLSX.utils.table_to_book(document.getElementById('tableau'), {sheet:"Sheet JS"});      // sheet定义的值是返回中数据SheetNames的值

{
    SheetNames:["SheetJSaaa"],      // 这里存的名与Sheets中的名对应
    Sheets:{
        "SheetJSaaa": {
            !merges: [],
            !ref: "A1:F7",              // 指定数据的开始和结束
            A1: {t: 's', v: '创建时间'},        // t:
            A2: {t: "n", v: 43205.613541666666, z: "m/d/yy"},
            B1: {t: "s", v: "业务类型"},
            B2: {t: "s", v: "PAY_DAY_LOAN"}
            .....
        }
    }
}

一、wb - workbook对象

    let wb = XLSX.utils.table_to_book(document.getElementById('tableau'), {sheet:"Sheet JS"});

    1、wb.SheetNames - 工作表的名

    2、wb.Sheets[sheetname] - 返回工作表中存储的数据

    3、wb.Props - 存储标准属性的对象

    4、wb.Workbook - 存储工作簿属性


二、修改单元格的值

    t - 单元格类型：b布尔值，n数字，e错误，s字符串，d日期
    https://docs.sheetjs.com/#cell-object     单元格对象


    let first_sheet_name = wb.SheetNames[0];
    let workSheet = wb.Sheets[first_sheet_name];

    let desired_cell = workSheet['A1'].v;       // 取出v的值


三、设置xlsx单元格行、列样式

    https://docs.sheetjs.com/#formulae

| https://www.gitbook.com/book/sheetjs/docs/details
| https://docs.sheetjs.com/#sheetjs-js-xlsx // 官方文档