content.json

{"meta":{"title":"来杯coffee","subtitle":"alanJiang的个人博客网站","description":"记录工作生活中的点滴","author":"alanJiang","url":""},"pages":[{"title":"关于","date":"2016-01-31T14:10:28.000Z","updated":"2019-02-15T05:34:20.987Z","comments":true,"path":"about/index.html","permalink":"/about/index.html","excerpt":"","text":""},{"title":"categories","date":"2019-02-05T05:04:31.000Z","updated":"2019-02-15T05:34:20.987Z","comments":true,"path":"categories/index.html","permalink":"/categories/index.html","excerpt":"","text":""},{"title":"滴滴全平台框架Chameleon API","date":"2019-02-10T16:00:00.000Z","updated":"2019-02-15T05:34:20.987Z","comments":true,"path":"cml/api.html","permalink":"/cml/api.html","excerpt":"","text":"import cml from ‘chameleon-api’ 路由导航navigateTo保留当前页面，跳转到应用内的某个页面。 参数 参数名 类型 必填 默认值 说明 path String 是 无 应用内页面的路径， 路由里面的path值 (用于小程序端) query Object 否 无 要传递的参数，可在将进入页面的beforeCreate里面获取 返回值无 举例123456 path: '/pages/navigateBack/index', query: { a: 1, b: 'test' }}) redirectTo关闭当前页面，跳转到应用内的某个页面 参数 参数名 类型 必填 默认值 说明 path String 是 无 应用内页面的路径， 路由里面的path值 (用于小程序端) query Object 否 无 要传递的参数，可在将进入页面的beforeCreate里面获取 返回值无 举例123456 path: '/pages/navigateBack/index', query: { a: 1, b: 'test' }}) navigateBack关闭当前页面，返回上一页面 参数 参数名 类型 必填 默认值 说明 backPageNum Number[负数] 否 -1 要返回的页面级数, 为负数, 默认返回上一页 返回值无 举例cml.navigateBack(-1); 网络请求get参数 参数名 类型 必填 默认值 说明 url String 是 网络请求地址，如果项目中配置了apiPrefix并且setting中的apiPrefix为true，则添加配置的前缀 data Object 否 要传的参数，会拼接在请求的url中 header Object 否 设置http请求的header resDataType String 否 json 设置response的数据类型, 为json时, 会尝试对返回值进行JSON.parse() setting Object {apiPrefix: true, jsonp: false} 自定义了设置，apiPrefix为是否添加chameleon.config.js中设置的apiPrefix; jsonp 为 true 时会发起一个 jsonp 请求 举例123456789101112 url: 'https://cml.com/api/user/1'}).then(res => { cml.showToast({ message: JSON.stringify(res), duration: 2000 })}, err => { cml.showToast({ message: JSON.stringify(err), duration: 2000 })}) post参数 参数名 类型 必填 默认值 说明 url String 是 网络请求地址，如果项目中配置了apiPrefix并且setting中的apiPrefix为true，则添加配置的前缀 data Object 否 要传的参数，会拼接在请求的url中 header Object 否 设置http请求的header contentType String 否 form 取值：form或json，决定body中data的格式，对应header中content-type为application/x-www-form-urlencoded或application/json resDataType String 否 json 设置response的数据类型, 为json时, 会尝试对返回值进行JSON.parse() 举例123456789101112131415 url: 'https://cml.com/api/user/update', data: { a: 1 }}).then(res => { cml.showToast({ message: JSON.stringify(res), duration: 2000 })}, err => { cml.showToast({ message: JSON.stringify(err), duration: 2000 })}) request参数 参数名 类型 必填 默认值 说明 url String 是 网络请求地址，如果项目中配置了apiPrefix并且setting中的apiPrefix为true，则添加配置的前缀 data Object 否 要传的参数，会拼接在请求的url中 method Object 否 若cml.get()/cml.post()无法满足需求,如需使用DELETE/PUT时,可调用此方法 header Object 否 设置http请求的header contentType String 否 form 取值：form或json，决定body中data的格式，对应header中content-type为application/x-www-form-urlencoded或application/json resDataType String 否 json 设置response的数据类型, 为json时, 会尝试对返回值进行JSON.parse() 举例12345678910111213141516 url: 'https://cml.com/api/user/1', data: { a: 1 }, method: 'PUT'}).then(res => { cml.showToast({ message: JSON.stringify(res), duration: 2000 })}, err => { cml.showToast({ message: JSON.stringify(err), duration: 2000 })})"},{"title":"留言","date":"2016-02-01T12:29:57.000Z","updated":"2019-02-15T05:34:20.987Z","comments":true,"path":"comment/index.html","permalink":"/comment/index.html","excerpt":"","text":""},{"title":"滴滴全平台框架Chameleon","date":"2019-02-10T16:00:00.000Z","updated":"2019-02-15T05:34:20.987Z","comments":true,"path":"cml/index.html","permalink":"/cml/index.html","excerpt":"","text":"官方文档官方文档 常用命令 npm i -g chameleon-tool全局安装chameleon工具 cml -vcml -h cml init project创建项目与启动 cml dev创建项目与启动 cml init page创建新页面 cml init component first-com 创建及引用组件 <template> <view> <first-com></first-com> </view> </template> 架构目录结构 ├── chameleon.config.js // 项目的配置文件 ├── dist // 打包产出目录 ├── mock // 模拟数据目录 ├── node_modules // npm包依赖 ├── package.json └── src // 项目源代码 ├── app // app启动入口 ├── components // 组件文件夹 ├── pages // 页面文件夹 ├── router.config.json // 路由配置文件 └── store // 全局状态管理 路由在router.config.json文件中配置 属性属性类型类型 描述 注解 String 字符串 `"string"` Number 数字 `1, 1.5` Boolean 布尔值 `true，false` Array 数组 `[1, 'string']` Object 对象 `{key: value}` EventHandler 事件处理函数名 `handlerName`是组件中定义的事件处理函数名 公共属性属性名 类型 描述 注解 id String 组件唯一标示 保证整个页面唯一 class String 组件样式类名 在cmss中定义的样式类 style String 组件内联样式 可动态设置内联样式 c-bind EventHandler 组件事件 视图层视图层由 CML 与 CMSS 编写 CMSScmss写在.cml文件中的<style>标签内 class静态class1<view class="kind-list-item-hd-show class2 class3"></view> 动态class12345678910111213目前 class 不支持传入对象的形式； 简单数据绑定 {{}}之内的会被当做一个表达式去处理；<view><text class="\\{\\{prefix+'a'\\}\\}">class数据绑定</text></view><script>class Index { data () { return { prefix: 'cls' } }}export default new Index();</script> 三元运算符12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970<view class="static" class="\\{\\{open ? 'cls1 cls2' : 'cls3 cls4'\\}\\}"></view> ``` ##### 布局> 与css差不多##### 盒子模型> 与css差不多##### 样式的多态cml在不同平台的样式 <style> @media cml-type (支持的平台) { } .common { /**/ } <style>类型有:> - web> - weex> - wx> - alipay> - baidu例如:> @media cml-type (web) { .class1 { color: red; } }因为多态只能在cml文件中使用,如果想使用在.css文件中,如果需要使用其他文件中引用进来,可以: <style lang="less"> @media cml-type (web) { @import "./style1.less"; } @media cml-type (weex) { @import "./style2.less"; } @media cml-type (wx,alipay,baidu) { @import "./style3.less"; } </style> #### CML-标准语法#### CML-类VUE语法> 模板添加一个lang属性<template lang="vue">### 逻辑层#### 生命周期钩子|执行时机|详细:-|:-|:-beforeCreate|实例初始化之后，数据和方法挂在到实例之前 一个页面只会返回一次|在该生命周期回调函数中会返回传入当前页面的参数对象created| 数据及方法挂载完成|beforeMount|开始挂载已经编译完成的cml到对应的节点时|mounted|cml模板编译完成,且渲染到dom中完成|beforeDestroy|实例销毁之前|destroyed| 实例销毁后|#### 计算属性computed> 就是一个方法,可以对一个值,或者进行逻辑处理之后,再返回给页面 Computed reversed message: ““ class Index { data = { message: ‘Hello’ } computed = { // 计算属性的 getter reversedMessage: function () { return this.message.split(‘’).reverse().join(‘’) } }};export default new Index();1#### 侦听属性 watch fullName is : ““class Index { data = { firstName: ‘Foo’, lastName: ‘Bar’, fullName: ‘Foo Bar’ } watch = { firstName: function (newV, oldV) { this.fullName = newV + ‘ ‘ + this.lastName }, lastName: function (newV, oldV) { this.fullName = this.firstName + ‘ ‘ + newV } }};export default new Index();1234567891011#### 数据管理> chameleon-store 提供集中管理数据的能力。- state- getters- mutation- action- 子模块##### 简单开始1. 创建 store，并且提供一个初始 state 对象和一些 mutation： import createStore from ‘chameleon-store’const store = createStore({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }})export default store12. 通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更： store.commit(‘increment’) console.log(store.state.count) // -> 11234567891011---### 配置针对项目、组件、路由等的特定配置，以满足各种方式的需求#### 组件配置组件的配置以json对象的格式配置在.cml文件中，结构如下：#### 路由配置chameleon项目内置了一套各端统一的路由管理方式`src/router.config.json是路由的配置文件,内容如下：` “mode”: “history”, “domain”: “https://www.chameleon.com", “routes”:[ { “url”: “/cml/h5/index”, “path”: “/pages/index/index”, “mock”: “index.php” } ]}` mode 为web端路由模式，分为hash或history。 domain 为web端地址的域名。 routes 为路由配置 path为路由对应的cml文件的路径,以src目录下开始的绝对路径，以/开头。 url为web端的访问路径。 mock为该路由对应的mock文件(仅模拟模板下发需要)。项目配置本文档描述了项目配置的全部参数及使用方法。chameleon的构建过程是配置化的，项目的根目录下提供一个chameleon.config.js文件，在该文件中可以使用全局对象cml的api去操作配置对象。例如："},{"title":"我的QQ","date":"2019-02-10T16:00:00.000Z","updated":"2019-02-15T05:34:20.987Z","comments":true,"path":"qq/index.html","permalink":"/qq/index.html","excerpt":"","text":"我的QQ：850369461"},{"title":"tags","date":"2019-02-05T04:53:38.000Z","updated":"2019-02-15T05:34:20.987Z","comments":true,"path":"tags/index.html","permalink":"/tags/index.html","excerpt":"","text":""},{"title":"实验室","date":"2016-02-01T12:29:57.000Z","updated":"2019-02-15T05:34:20.987Z","comments":true,"path":"lab/index.html","permalink":"/lab/index.html","excerpt":"","text":""}],"posts":[{"title":"开源商城练习项目","slug":"开源商城练习项目","date":"2019-02-19T05:47:03.799Z","updated":"2019-02-19T05:47:03.795Z","comments":true,"path":"2019/02/19/开源商城练习项目/","link":"","permalink":"/2019/02/19/开源商城练习项目/","excerpt":"","text":"开源商场handgo 拥有前台和后台handgo非常不错，使用了常用 后台开发使用了常用的spring框架开发 持久化使用mysql 后台模板使用了Freemarker 前端项目使用了最近比较火的Vue+饿了么的Element开发 项目效果图 jeexjj_mall 一个模仿锤子网站的开源项目，非常不错，使用了常用 vue2 + vuex + vue-router + webpack + ES6 + axios + sass + flex + svg + node + mongoDB xbin-store-cloud 模仿国内知名B2C网站,实现的一个分布式B2C商城 使用Spring Cloud 使用dubbox版本请查看 spring cloud等 paascloud-master spring cloud + vue + oAuth2.0全家桶实战，前后端分离模拟商城，完整的购物流程、后端运营平台，可以实现快速搭建企业级微服务项目。支持微信等三方登录。 项目效果图 NodeＮideShop>>> 基于Node.js+MySQL开发的高仿网易严选开源B2C商城 项目效果图 GitHub 值得收藏的前端项目>>> https://www.ctolib.com/topics-124119.html Vue项目vue小白入门和总结>>> 系统性学习 模仿饿了吗>>>项目效果图 仿小米商场>>>项目效果图 淘票票的全栈demo>>>项目效果图 百度天气应用>>> 基于vue.js 2.0的百度天气应用 项目效果图 干货多多>>>项目效果图 FEBS-Vue>>> FEBS-Vue为FEBS-Shiro的前后端分离版本，前端使用Vue全家桶，组件库采用Ant-Design-Vue ###前端 Vue 2.5.17,Vuex,Vue Router Axios vue-apexcharts ant-design-vue webpack,yarn ###后端 Spring Boot 2.1.0a Mybatis,TK Mapper,Pagehelper MySQL 5.7,Hikari,Redis Shiro,JWT 项目效果图 30个Vue开源项目>>> 2018年最值得关注的30个Vue开源项目 小程序51商场，Open-Shop 包含小程序和后台管理源码 民宿主题App 一个民宿主题的微信小程序前端 头脑王者辅助 微信小程序—头脑王者辅助（一部手机即可，只需配置WiFi代理） 开源小程序，jfinal-cms-shop 包含小程序和后台管理源码 小商场系统，litemall Spring Boot后端 + Vue管理员前端 + 微信小程序用户前端 后台项目还是小程序都感觉非常不错，很适合自己 项目效果图 一个页面效果很不错的小程序 Spring Boot后端 + Vue管理员前端 + 微信小程序用户前端 后台项目还是小程序都感觉非常不错，很适合自己 项目效果图 html图片示例 html图片示例 微信小程序总结及案例集锦 微信小程序的发展会和微信公众号一样，在某个时间点爆发 项目效果图 html图片示例 html图片示例 JavaJava学习+面试指南 各种Java知识，有很多系统性的知识点，非常不错。 kensite_cms 一个不错的Java Web系统。 项目效果图 symphony 一款用 Java 实现的现代化社区（论坛/BBS/社交网络/博客）平台，非常大。 项目效果图 Flutter寻狗小程序的Flutter原生版本 flutter上架项目，完成生态，非常不错。 项目效果图 仿单读App 练习一下常用的组件、布局、网络请求、json解析等 项目效果图 基本涵盖所有Flutter widget 的Demo 基本涵盖所有Flutter widget 的Demo，每个widget都包含一个demo及demo的代码和widget相关属性的介绍，当然中间可能有漏掉的，我会在后面进行完善，希望这个工程能帮助到你。 仿好奇心日报 练习一下常用的组件、布局、网络请求、json解析等 项目效果图","categories":[{"name":"开源项目","slug":"开源项目","permalink":"/categories/开源项目/"}],"tags":[{"name":"vue","slug":"vue","permalink":"/tags/vue/"},{"name":"java","slug":"java","permalink":"/tags/java/"}]},{"title":"Linux常用命令","slug":"liunx/Linux常用命令","date":"2019-02-18T16:00:00.000Z","updated":"2019-02-19T02:20:16.488Z","comments":true,"path":"2019/02/19/liunx/Linux常用命令/","link":"","permalink":"/2019/02/19/liunx/Linux常用命令/","excerpt":"","text":"修改目录下所有文件权限 chmod -R 777 apache-tomcat-8.5.20/","categories":[{"name":"个博搭建","slug":"个博搭建","permalink":"/categories/个博搭建/"}],"tags":[{"name":"HEXO","slug":"HEXO","permalink":"/tags/HEXO/"}]},{"title":"idea配置vue开发环境","slug":"IDEA/idea配置vue开发环境","date":"2019-02-17T16:00:00.000Z","updated":"2019-02-18T08:15:41.155Z","comments":true,"path":"2019/02/18/IDEA/idea配置vue开发环境/","link":"","permalink":"/2019/02/18/IDEA/idea配置vue开发环境/","excerpt":"","text":"第一步，下载vue插件 安装好，之后，配置支持.vue后缀文件 配置支持 ECMAScript 6 配置语法高亮 File -> Setting -> Edit -> Inspections -> html .png) 输入1234567891011121314151617181920212223@tap@tap.stop@tap.prevent@tap.once@click@click.stop@click.prevent@click.once@change@change.lazy@change.number@change.trimv-modelv-forv-textv-htmlv-ifv-else-ifv-elsev-prev-oncev-bindscoped 设置vue新建文件模板 file–>setting–>editor–>file and code Templates，选择Vue File，然后可以在右边框中编辑默认模板内容，编辑完点击“ok”","categories":[{"name":"IDEA","slug":"IDEA","permalink":"/categories/IDEA/"}],"tags":[{"name":"IDEA","slug":"IDEA","permalink":"/tags/IDEA/"}]},{"title":"idea配置行注释在不是在一行顶头和快速找到文件在project位置","slug":"IDEA/idea配置行注释在不是在一行顶头","date":"2019-02-17T16:00:00.000Z","updated":"2019-02-18T08:19:37.483Z","comments":true,"path":"2019/02/18/IDEA/idea配置行注释在不是在一行顶头/","link":"","permalink":"/2019/02/18/IDEA/idea配置行注释在不是在一行顶头/","excerpt":"","text":"配置行注释在不是在一行顶头 快速找到文件在project位置","categories":[{"name":"IDEA","slug":"IDEA","permalink":"/categories/IDEA/"}],"tags":[{"name":"IDEA","slug":"IDEA","permalink":"/tags/IDEA/"}]},{"title":"nginx-loaction正则写法","slug":"nginx/nginx-loaction正则写法","date":"2019-02-17T16:00:00.000Z","updated":"2019-02-18T01:13:57.655Z","comments":true,"path":"2019/02/18/nginx/nginx-loaction正则写法/","link":"","permalink":"/2019/02/18/nginx/nginx-loaction正则写法/","excerpt":"","text":"精确匹配 location = / { # 精确匹配 / ，主机名后面不能带任何字符串 [ configuration A ] } 同样的 但是正则和最长字符串会优先匹配 location / { # 因为所有的地址都以 / 开头，所以这条规则将匹配到所有请求 [ configuration B ] } location /documents/ { # 匹配任何以 /documents/ 开头的地址，匹配符合以后，还要继续往下搜索 # 只有后面的正则表达式没有匹配到时，这一条才会采用这一条 [ configuration C ] } location ~ /documents/Abc { # 匹配任何以 /documents/ 开头的地址，匹配符合以后，还要继续往下搜索 # 只有后面的正则表达式没有匹配到时，这一条才会采用这一条 [ configuration CC ] } location ^~ /images/ { # 匹配任何以 /images/ 开头的地址，匹配符合以后，停止往下搜索正则，采用这一条。 [ configuration D ] } 参解 已=开头表示精确匹配如 A 中只匹配根目录结尾的请求，后面不能带任何字符串。 ^~ 开头表示uri以某个常规字符串开头，不是正则匹配 ~ 开头表示区分大小写的正则匹配; ~* 开头表示不区分大小写的正则匹配; / 通用匹配, 如果没有其它匹配,任何请求都会匹配到 顺序 no优先级：(location =) > (location 完整路径) > (location ^~ 路径) > (location ~,~* 正则顺序) > (location 部分起始路径) > (/) 推荐地址 qq { padding: 2px 4px; font-size: 90%; color: #c7254e; background-color: #f9f2f4; border-radius: 4px; }","categories":[{"name":"Nginx","slug":"Nginx","permalink":"/categories/Nginx/"}],"tags":[{"name":"Nginx","slug":"Nginx","permalink":"/tags/Nginx/"}]},{"title":"nginx-conf配置","slug":"nginx/nginx-conf","date":"2019-02-16T16:00:00.000Z","updated":"2019-02-18T01:13:57.655Z","comments":true,"path":"2019/02/17/nginx/nginx-conf/","link":"","permalink":"/2019/02/17/nginx/nginx-conf/","excerpt":"","text":"简介Nginx配置文件主要分成四部分 main：全局配置 server：主机配置 upstream：上游服务器设置，主要为反向代理、负载均衡相关配置 location：URL匹配特定位置后的设置 server继承main，location继承server；upstream既不会继承指令也不会被继承。它有自己的特殊指令，不需要在其他地方的应用 配置1.main全局配置直接写在根 woker_processes 2：设置cpu使用使用数量 worker_cpu_affinity：在高并发情况下，通过设置cpu粘性来降低由于多CPU核切换造成的寄存器等现场重建带来的性能损耗如worker_cpu_affinity 0001 0010 0100 1000(四核) worker_rlimit_nofile 10240：写在main部分。默认是没有设置，可以限制为操作系统最大的限制65535。 events模块 worker_connections 2048：每一个worker进程能并发处理（发起）的最大连接数（包含与客户端或后端被代理服务器间等所有连接数） nginx作为反向代理服务器计算公式 最大连接数 = worker_processes * worker_connections/4 所以这里客户端最大连接数是1024,设置不能超过worker_rlimit_nofile 当nginx作为http服务器时，计算公式里面是除以2。 use epoll： Linux操作系统下，nginx默认使用epoll事件模型，得益于此，nginx在Linux操作系统下效率相当高。 OpenBSD或FreeBSD操作系统上采用类似于epoll的高效事件模型kqueue。 在操作系统不支持这些高效模型时才使用select。 2.http服务器模块 sendfile on：开启高效文件传输模式，sendfile指令指定nginx是否调用sendfile函数来输出文件，减少用户空间到内核空间的上下文切换。对于普通应用设为 on，如果用来进行下载等应用磁盘IO重负载应用，可设置为off，以平衡磁盘与网络I/O处理速度，降低系统的负载。 keepalive_timeout 65：长连接超时时间，单位是秒，这个参数很敏感，涉及浏览器的种类、后端服务器的超时设置、操作系统的设置，可以另外起一片文章了。长连接请求大量小文件的时候，可以减少重建连接的开销，但假如有大文件上传，65s内没上传完成会导致失败。如果设置时间过长，用户又多，长时间保持连接会占用大量资源。 send_timeout：用于指定响应客户端的超时时间。这个超时仅限于两个连接活动之间的时间，如果超过这个时间，客户端没有任何活动，Nginx将会关闭连接。 client_max_body_size 10m：允许客户端请求的最大单文件字节数。如果有上传较大文件，请设置它的限制值 client_body_buffer_size 128k：缓冲区代理缓冲用户端请求的最大字节数 default_type：default_type application/octet-stream; test：模块http_proxy（这个模块实现的是nginx作为反向代理服务器的功能，包括缓存功能）【设置直接写在http大括号根目录】： proxy_connect_timeout 60：nginx跟后端服务器连接超时时间(代理连接超时) proxy_read_timeout 60：连接成功后，与后端服务器两个成功的响应操作之间超时时间(代理接收超时) proxy_buffer_size 4k：设置代理服务器（nginx）从后端realserver读取并保存用户头信息的缓冲区大小，默认与proxy_buffers大小相同，其实可以将这个指令值设的小一点 proxy_buffers 4 32k：proxy_buffers缓冲区，nginx针对单个连接缓存来自后端realserver的响应，网页平均在32k以下的话，这样设置 proxy_busy_buffers_size 64k：高负荷下缓冲大小（proxy_buffers*2） proxy_max_temp_file_size：当proxy_buffers放不下后端服务器的响应内容时，会将一部分保存到硬盘的临时文件中，这个值用来设置最大临时文件大小，默认1024M，它与proxy_cache没有关系。大于这个值，将从upstream服务器传回。设置为0禁用。 proxy_temp_file_write_size 64k：当缓存被代理的服务器响应到临时文件时，这个选项限制每次写临时文件的大小。proxy_temp_path：（可以在编译的时候）指定写到哪那个目录。模块http_gzip gzip on：开启gzip压缩输出，减少网络传输。 gzip_min_length 1k：设置允许压缩的页面最小字节数，页面字节数从header头得content-length中进行获取。默认值是20。建议设置成大于1k的字节数，小于1k可能会越压越大。 gzip_buffers 4 16k：设置系统获取几个单位的缓存用于存储gzip的压缩结果数据流。4 16k代表以16k为单位，安装原始数据大小以16k为单位的4倍申请内存。 gzip_http_version 1.0： 用于识别 http 协议的版本，早期的浏览器不支持 Gzip 压缩，用户就会看到乱码，所以为了支持前期版本加上了这个选项，如果你用了 Nginx 的反向代理并期望也启用 Gzip 压缩的话，由于末端通信是 http/1.0，故请设置为 1.0。 gzip_comp_level 6：gzip压缩比，1压缩比最小处理速度最快，9压缩比最大但处理速度最慢(传输快但比较消耗cpu) gzip_types：匹配mime类型进行压缩，无论是否指定,”text/html”类型总是会被压缩的。举例：gzip_types text/html text/plain text/css gzip_vary on：和http头有关系，会在响应头加个 Vary: Accept-Encoding ，可以让前端的缓存服务器缓存经过gzip压缩的页面，例如，用Squid缓存经过Nginx压缩的数据。 server虚拟主机http服务上支持若干虚拟主机，每个server通过监听地址或端口来区分。 listen：监听端口，默认80，小于1024的要以root启动。可以为listen *:80、listen 127.0.0.1:80等形式。 server_name：服务器名，如localhost、www.example.com，可以通过正则匹配。1.模块http_stream（负载均衡）这个模块通过一个简单的调度算法来实现客户端IP到后端服务器的负载均衡，upstream后接负载均衡器的名字，后端realserver以 host:port options; 方式组织在 {} 中。如果后端被代理的只有一台，也可以直接写在 proxy_pass 。例如：upstream分配策略全解： weight（权重）：指定轮询几率，weight和访问比率成正比，用于后端服务器性能不均的情况。如下所示，10.0.0.88的访问比率要比10.0.0.77的访问比率高一倍。 linuxidc{ 123 server 10.0.0.77 weight=5; server 10.0.0.88 weight=10; } ip_hash（访问ip）：每个请求按访问ip的hash结果分配，这样每个访客固定访问一个后端服务器，可以解决session的问题。 12345upstream favresin{ ip_hash; server 10.0.0.10:8080; server 10.0.0.11:8080; } fair（第三方）：按后端服务器的响应时间来分配请求，响应时间短的优先分配。与weight分配策略类似。 12345upstream favresin{ server 10.0.0.10:8080; server 10.0.0.11:8080; fair; } url_hash（第三方）：按访问url的hash结果来分配请求，使每个url定向到同一个后端服务器，后端服务器为缓存时比较有效。 注意：在upstream中加入hash语句，server语句中不能写入weight等其他的参数，hash_method是使用的hash算法。 123456 upstream resinserver{ server 10.0.0.10:7777; server 10.0.0.11:8888; hash $request_uri; hash_method crc32; } 其他设置状态项 down：表示单前的server暂时不参与负载. weight：表示单前的server暂时不参与负载. max_fails ：允许请求失败的次数默认为1.当超过最大次数时，返回proxy_next_upstream 模块定义的错误. fail_timeout ：max_fails次失败后，暂停的时间。 backup ：其它所有的非backup机器down或者忙的时候，请求backup机器。所以这台机器压力会最轻。 12345678将server节点下的location节点中的proxy_pass配置为：http:// + upstream名称，即“http://backend”.location / { root html; index index.html index.htm; proxy_pass http://backend; } 2.location（http服务中，某些特定的URL对应的一系列配置项。） root /var/www/html：定义服务器的默认网站根目录位置。如果locationURL匹配的是子目录或文件，root没什么作用， 一般放在server指令里面或/下。server下的和location下的不会重复,常用于静态文件。 index index.jsp index.html index.htm：定义路径下默认访问的文件名，一般跟着root放 proxy_pass http:/backend：请求转向backend定义的服务器列表，即反向代理，对应upstream负载均衡器。也可以proxy_pass http://ip:port proxy_redirect off;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 这四个暂且这样设，如果深究的话，每一个都涉及到很复杂的内容，也将通过另一篇文章来解读。 test： test： 推荐地址1推荐地址2推荐地址3 .pp{ color: red; font-style: oblique; font-weight: bold; margin: 10px 10px; } aaa { padding: 2px 4px; font-size: 90%; color: #c7254e; background-color: #f9f2f4; border-radius: 4px; } tt { padding: 2px 4px; font-size: 14px; color: #2087b9; font-weight: bold; background-color: #51cc8730; border-radius: 4px; }","categories":[{"name":"Nginx","slug":"Nginx","permalink":"/categories/Nginx/"}],"tags":[{"name":"Nginx","slug":"Nginx","permalink":"/tags/Nginx/"}]},{"title":"docker-nginx","slug":"docker/docker-nginx","date":"2019-02-16T16:00:00.000Z","updated":"2019-02-18T01:13:57.655Z","comments":true,"path":"2019/02/17/docker/docker-nginx/","link":"","permalink":"/2019/02/17/docker/docker-nginx/","excerpt":"","text":"查询 docker search nginx 拉取 docker pull nginx 启动命令 docker run -p 80:80 -v -v -d nginxdocker run -p 80:80 –name mynginx -v /static:/static -v /etc/nginx/nginx.conf:/etc/nginx/nginx.conf -v $PWD/logs:/wwwlogs -d nginx nginx映射配置详解 -v /static:/static：将主机中当前目录下的www挂载到容器的/www -v /etc/conf/nginx.conf:/etc/nginx/nginx.conf：将主机中当前目录下的nginx.conf挂载到容器的/etc/nginx/nginx.conf -v $PWD/logs:/wwwlogs：将主机中当前目录下的logs挂载到容器的/wwwlogs","categories":[{"name":"Docker","slug":"Docker","permalink":"/categories/Docker/"}],"tags":[{"name":"Docker","slug":"Docker","permalink":"/tags/Docker/"},{"name":"Nginx","slug":"Nginx","permalink":"/tags/Nginx/"}]},{"title":"docker下载安装","slug":"docker/docker基本","date":"2019-02-16T16:00:00.000Z","updated":"2019-02-18T01:13:57.655Z","comments":true,"path":"2019/02/17/docker/docker基本/","link":"","permalink":"/2019/02/17/docker/docker基本/","excerpt":"","text":"ubuntu安装 apt-get install docker.io 创建软链接 ln -sf /usr/bin/docker /usr/local/bin/docker 查看docker运行状态 service docker status 启动docker服务 service docker start 启动docker服务 service docker start 关闭docker服务 service docker stop centos安装 yum -y install docker-io 加入开机启动 chkconfig docker on 启动docker服务 service docker start","categories":[{"name":"Docker","slug":"Docker","permalink":"/categories/Docker/"}],"tags":[{"name":"Docker","slug":"Docker","permalink":"/tags/Docker/"}]},{"title":"nginx入门","slug":"nginx/nginx_welcome","date":"2019-02-15T16:00:00.000Z","updated":"2019-02-18T01:13:57.655Z","comments":true,"path":"2019/02/16/nginx/nginx_welcome/","link":"","permalink":"/2019/02/16/nginx/nginx_welcome/","excerpt":"","text":"NGINX是一个免费的，开源的，高性能的HTTP服务器和反向代理，以及IMAP / POP3代理服务器。NGINX以其高性能，稳定性，丰富的功能集，简单的配置和低资源消耗而闻名。 安装linux安装nginx下载 nginx常用命令启动服务 /usr/local/nginx/sbin/nginx 停止服务 /usr/local/nginx/sbin/nginx -s stop 检验nginx配置有没有用 /usr/local/nginx/sbin/nginx -t 平滑重启nginx /usr/nginx/sbin/nginx -s reload 正常关闭服务 /usr/nginx/sbin/nginx -s quit 重新打开日志文件 /usr/nginx/sbin/nginx -s reopen 信号 /usr/nginx/sbin/nginx -s signal 语法一行语句已”;”结尾，一个程序块以“{}”包括起来，大括号中有其他大括号指令，可以“，”隔 配置编译时配置","categories":[{"name":"Nginx","slug":"Nginx","permalink":"/categories/Nginx/"}],"tags":[{"name":"Nginx","slug":"Nginx","permalink":"/tags/Nginx/"}]},{"title":"HexoCommand","slug":"HexoCommand","date":"2019-02-15T05:34:20.987Z","updated":"2019-02-15T05:34:20.987Z","comments":true,"path":"2019/02/15/HexoCommand/","link":"","permalink":"/2019/02/15/HexoCommand/","excerpt":"","text":"HEXO常用写作命令1.创建markdown文件 语法：hexo new [layout] 参解： hexo:hexo命令 new:创建 layout:布局,Hexo 有三种默认布局：post、page 和 draft，默认post布局 布局名称 路径 post source/_posts page source draft source/_drafts 2.模版（Scaffold）在新建文章时，Hexo 会根据 scaffolds 文件夹内相对应的文件来建立文件例： $ hexo new photo “MyHexoWord” 在执行这行指令时，Hexo 会尝试在 scaffolds 文件夹中寻找 photo.md，并根据其内容建立文章，以下是您可以在模版中使用的变量 变量 描述 layout 布局 title 标题 date 文件建立日期","categories":[{"name":"个博搭建","slug":"个博搭建","permalink":"/categories/个博搭建/"}],"tags":[{"name":"HEXO_GitHub个博","slug":"HEXO-GitHub个博","permalink":"/tags/HEXO-GitHub个博/"},{"name":"HEXO","slug":"HEXO","permalink":"/tags/HEXO/"}]},{"title":"MarkDown","slug":"MarkDown","date":"2019-02-15T05:34:20.987Z","updated":"2019-02-15T05:34:20.987Z","comments":true,"path":"2019/02/15/MarkDown/","link":"","permalink":"/2019/02/15/MarkDown/","excerpt":"","text":"#markdown常见用法 不管你是开发，还是产品，还是测试，还是普通软件使用的运营人员，总之，学会了markdown会对你的工作，生活有莫大的帮助。 ###有哪些使用markdown的产品呢？ GitHub 简书 CSDN Stack Overflow Apollo 等等 一.标题 #一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题 二.段落 table键 三.区块引用 > 或者 >> 或者更多 四.代码区块1.单行代码语法：代码之间分别用一个反引号（）包起来 `create database hero;` create database hero; 2.代码块语法：代码之间分别用三个反引号包起来，且两边的反引号单独占一行 \\`\\`\\` function fun(){ echo "这是一句非常牛逼的代码"; } fun(); \\`\\`\\` 1234function fun(){ echo "这是一句非常牛逼的代码";}fun(); 3.直接tabvoid main() { printf("Hello Markdown Use AlanJiang"); } 五.列表###1.无序列表 使用星号（*），加号（+），减号（-）作列表标记 - a + b * c a b c ###2.有序列表 使用数字加点作列表标记 1. a 2. b 3. c a b c ###3.嵌套 嵌套列表 1. a 1. a1 2. a1 a a1 a1 嵌套列表无序 - a - a1 - a2 a a1 a2 六.字体样式 加粗 **word** word 斜体 *word* word 斜体加粗 *word* word 删除线 ~~word~~ ~word~~ 七.分割线 三个或者三个以上的 - 或者 * 都可以。 八.图片语法 ![alt](src “title”) alt图片下面文字 src图片地址 title鼠标移到图片上时显示的内容 事例：![markdown创始人](/resource/the-hound_big_2_.gif) 图片大小(暂时不知道为什么不行)语法 ![](…=300-300-r) html标签方式 <p align="left"> <img src="https://raw.githubusercontent.com/alanjiang1129/markdown/master/resource/the-hound_big_2_.gif" alt="Sample" width="250" height="140"> <p align="left"> <em>html图片示例</em> </p> </p> html图片示例 九.超链接语法 超链接名 title可以不加 [百度](www.baidu.com) [百度](www.baidu.com) 百度 必应 谷歌 十.表格 表头|表头|表头 :---|:--:|---: 内容|内容|内容 内容|内容|内容 “-“有一个就可以了 “\\:”对其方式 java html js 小明1234 小黄1324 小亮123 刘备 关羽 张 十一.markdown绘制流程图放弃这个东西:joy:，不好用还复杂，觉得还是xmind直接画比较简单粗暴。 git:复选框(github特有的特性) - [ ] 不勾选 - [x] 勾选 不勾选 勾选 C C++ Java Qt Android C# .NET git:Emoji表情(github特有的特性):sleeping::anguished::raised_hand: github常用表情代码地址 IDE:编辑器 markdown属于轻量级标记语言 很多系统文本编辑器都可以编辑，windows的记事本，常用的notepad++,liunx的vim,vi都可以 笔者是java开发人员，使用的vscode，idea都有对应插件 google浏览器插件：StackEdit Markdown Extension(该官网不一定有下载)官网在线模式/Markdown-here官网等，扩展应用商城搜索”Markdown“有很多,(无法访问google搜索的可以去相关插件网站下载，离线安装google插件) other 反斜杠\\：转义符","categories":[{"name":"个博搭建","slug":"个博搭建","permalink":"/categories/个博搭建/"}],"tags":[{"name":"HEXO_GitHub个博","slug":"HEXO-GitHub个博","permalink":"/tags/HEXO-GitHub个博/"},{"name":"MarkDown","slug":"MarkDown","permalink":"/tags/MarkDown/"}]},{"title":"微服务架构盛行的时代，你需要了解点 Spring Boot","slug":"SpringBoot","date":"2019-02-15T05:34:20.987Z","updated":"2019-02-15T05:34:20.987Z","comments":true,"path":"2019/02/15/SpringBoot/","link":"","permalink":"/2019/02/15/SpringBoot/","excerpt":"","text":"随着互联网的高速发展，庞大的用户群体和快速的需求变化已经成为了传统架构的痛点。在这种情况下，如何从系统架构的角度出发，构建出灵活、易扩展的系统来快速响应需求的变化，同时，随着用户量的增加，如何保证系统的稳定性、高可用性、可伸缩性等等，成为了系统架构面临的挑战。 为了解决这些问题，微服务架构应运而生，它的本质在于分布式、去中心化。微服务架构是一种架构模式或者说一种架构风格，它提倡将传统的一站式应用（左下图）根据业务拆分成一个个服务（右下图），彻底去掉耦合，每个服务提供单个业务功能，一个服务只做一件事，运行在其独立的进程中。 每个服务之间互相协调、互相配合，为用户提供最终的价值。服务之间采用轻量级的通信机制（通常是基于 http 的 RESTful API）。 每个服务都围绕着具体业务进行构建，并且能够被独立地部署到生产环境、类生产环境等。不同的服务也可以使用不同的数据库和数据存储。 另外，应尽量避免统一的、集中式的服务管理机制，对具体的一个服务而言，应根据业务上下文，选择合适的语言、工具对其进行构建，可以有一个非常轻量级的集中式管理来协调这些服务，可以使用不同的语言来开发这些服务。 Spring Boot 诞生时，微服务概念正处于酝酿阶段，Spring Boot 的研发融合了微服务架构的理念，是 Java 领域微服务架构最优落地的技术，给微服务架构提供了技术支撑。Spring Boot 有哪些优势呢？ 良好的基因：Spring Boot 是伴随着 Spring 4.0 诞生的，继承了 Spring 框架的优秀基因。 简化编码：传统的 Spring web 项目需要引入一堆相关的依赖，而在 Spring Boot 中，我们只需要引入一个 starter-web 依赖即可快速创建 web 应用。 简化配置：传统的 Spring 项目一度被人认为是“配置地狱”，而 Spring Boot 更多的是采用 Java Config 的方式，简化了配置的繁琐。 简化部署：Spring Boot 项目不需要在服务器上去部署 tomcat，因为 Spring Boot 内嵌了 tomcat，我们只需要将项目打成 jar 包，通过命令一键式启动。 简化监控：可以引入 spring-boot-start-actuator 依赖，直接使用 REST 方式来获取进程的运行期性能参数，从而达到监控的目的，还可以配合 Spring Cloud 一起使用。 微服务是未来发展的趋势，使用 Spring Boot 开发项目，会颠覆传统的开发模式，大大提升开发效率，可以说如果你使用 Spring Boot 开发过项目，你就不愿意再回到原来的开发方式了。 看看 Spring 官方对 Spring Boot 的定位：Build Anything，Build 任何东西。 Spring Boot 旨在尽可能快地启动和运行，并且只需最少的 Spring 前期配置。 同时我们也来看一下官方对后面两个的定位： SpringCloud：Coordinate Anything，协调任何事情； SpringCloud Data Flow：Connect everything，连接任何东西。 仔细品味一下，Spring 官网对 Spring Boot、SpringCloud 和 SpringCloud Data Flow 三者定位的措辞非常有味道，同时也可以看出，官方对这三个技术非常重视，我们还有什么理由不去学习呢？","categories":[{"name":"SpringBoot","slug":"SpringBoot","permalink":"/categories/SpringBoot/"}],"tags":[{"name":"SpringBoot","slug":"SpringBoot","permalink":"/tags/SpringBoot/"}]},{"title":"Docker部署GitLab","slug":"docker_gitlab","date":"2019-02-15T05:34:20.987Z","updated":"2019-02-15T05:34:20.987Z","comments":true,"path":"2019/02/15/docker_gitlab/","link":"","permalink":"/2019/02/15/docker_gitlab/","excerpt":"","text":"前言Git 是目前最流行的版本控制系统，在它的基础之上， GitHub 和 GitLab 成为当前最流行的代码托管平台，它们均提供的代码评审、项目管理、持续集成等功能，越来越多的互联网企业都迁移到 Git。 部署为了安装方便，这里我们使用 Docker 安装 GitLab 中文版，通常会将 GitLab 的配置 (config) 、 日志 (logs) 、数据 (data) 放到容器之外， 便于日后升级： docker run \\ --detach \\ --publish 8443:443 \\ --publish 8000:80 \\ --name gitlab \\ --restart unless-stopped \\ --volume /srv/gitlab/config:/etc/gitlab:Z \\ --volume /srv/gitlab/logs:/var/log/gitlab:Z \\ --volume /srv/gitlab/data:/var/opt/gitlab:Z \\ beginor/gitlab-ce:11.3.0-ce.0 修改/srv/gitlab/config/gitlab.rb 文件： # 配置端口 unicorn['port'] = 8084 # 这个地址一定要配置、否则项目的Git地址不对 external_url "http://192.168.1.180" # 配置邮件 gitlab_rails['smtp_enable'] = true gitlab_rails['smtp_address'] = "smtp.163.com" gitlab_rails['smtp_port'] = 25 gitlab_rails['smtp_user_name'] = "17762018584@163.com" gitlab_rails['smtp_password'] = "111111" gitlab_rails['smtp_domain'] = "163.com" gitlab_rails['smtp_authentication'] = "login" gitlab_rails['smtp_enable_starttls_auto'] = true gitlab_rails['smtp_tls'] = false gitlab_rails['gitlab_email_from'] = "17762018584@163.com" user["git_user_email"] = "17762018584@163.com" 配置密钥输入命令，一直回车即可。 $ ssh-keygen -t rsa -C '345849402@qq.com' Generating public/private rsa key pair. Enter file in which to save the key (/c/Users/zzp/.ssh/id_rsa): Created directory '/c/Users/zzp/.ssh'. Enter passphrase (empty for no passphrase): Enter same passphrase again: Your identification has been saved in /c/Users/zzp/.ssh/id_rsa. Your pub*lic key has been saved in /c/Users/zzp/.ssh/id_rsa.pub. The key fingerprint is: SHA256:OoPvUUq6XgrqdBGXmY9nZIJAR6jQxF702hdLEPVTKkk 345849402@qq.com The key's randomart image is: +---[RSA 2048]----+ |.*++. ooE . | |..= o.+o o o | |o. + *.o= + | |. . oo*. + . | | ...o+S | | .+o= | | ...o B | |.... = + | |o. .+.o | +----[SHA256]-----+ Gitlab命令 # 重新应用gitlab的配置 gitlab-ctl reconfigure # 重启gitlab服务 gitlab-ctl restart # 查看gitlab运行状态 gitlab-ctl status #停止gitlab服务 gitlab-ctl stop # 查看gitlab运行日志 gitlab-ctl tail # 停止相关数据连接服务 gitlab-ctl stop unicorn gitlab-ctl stop sideki 界面效果","categories":[{"name":"Docker","slug":"Docker","permalink":"/categories/Docker/"}],"tags":[{"name":"Docker","slug":"Docker","permalink":"/tags/Docker/"},{"name":"GitLab","slug":"GitLab","permalink":"/tags/GitLab/"}]},{"title":"github_oauth","slug":"github-oauth","date":"2019-02-15T05:34:20.987Z","updated":"2019-02-15T05:34:20.987Z","comments":true,"path":"2019/02/15/github-oauth/","link":"","permalink":"/2019/02/15/github-oauth/","excerpt":"","text":"#GitHub page静态页面功能开发使用 ###第一步：进入我的设置界面，点击settings按钮,如图 ###第二步：找到最下方的 Developer settings 设置，进入开发者配置 ###，可以看到，我这里现在是有一个接入oauth，点击最右上角的new OAuth App,根据你自己的应用信息设置相关类容 ###第三步：注册完成之后，可以在oauth app列表看到，在注册程序的详情有客户端appid和密钥，还可以修改自己的程序对应头像","categories":[{"name":"GitHub","slug":"GitHub","permalink":"/categories/GitHub/"}],"tags":[{"name":"GitHub","slug":"GitHub","permalink":"/tags/GitHub/"},{"name":"HEXO_GitHub个博","slug":"HEXO-GitHub个博","permalink":"/tags/HEXO-GitHub个博/"}]},{"title":"GitHub_Page功能托管静态文件并正常访问","slug":"GitHub-Page功能托管静态文件并正常访问","date":"2019-02-15T05:34:20.987Z","updated":"2019-02-15T05:34:20.987Z","comments":true,"path":"2019/02/15/GitHub-Page功能托管静态文件并正常访问/","link":"","permalink":"/2019/02/15/GitHub-Page功能托管静态文件并正常访问/","excerpt":"","text":"#GitHub page静态页面功能开发使用 ###第一步：进入项目管理界面，点击设置按钮,如图 ###第二步：滚到下方，看到该设置 ###第三步：设置成这个样子即可，并点击保存，下面Theme 是选择主题的，可以自行选择 ###第四步：save之后，我们就可以访问我们的html界面信息了，如图中就是你的网站地址","categories":[{"name":"GitHub","slug":"GitHub","permalink":"/categories/GitHub/"}],"tags":[{"name":"GitHub","slug":"GitHub","permalink":"/tags/GitHub/"},{"name":"HEXO_GitHub个博","slug":"HEXO-GitHub个博","permalink":"/tags/HEXO-GitHub个博/"},{"name":"静态文件托管","slug":"静态文件托管","permalink":"/tags/静态文件托管/"}]},{"title":"HelloHexo","slug":"HelloHexo","date":"2019-02-15T05:34:20.987Z","updated":"2019-02-15T05:34:20.987Z","comments":true,"path":"2019/02/15/HelloHexo/","link":"","permalink":"/2019/02/15/HelloHexo/","excerpt":"","text":"Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub. Quick StartCreate a new post1$ hexo new \"My New Post\" More info: Writing Run server1$ hexo server More info: Server Generate static files1$ hexo generate More info: Generating Deploy to remote sites1$ hexo deploy More info: Deployment","categories":[{"name":"个博搭建","slug":"个博搭建","permalink":"/categories/个博搭建/"}],"tags":[{"name":"HEXO_GitHub个博","slug":"HEXO-GitHub个博","permalink":"/tags/HEXO-GitHub个博/"},{"name":"HEXO","slug":"HEXO","permalink":"/tags/HEXO/"}]},{"title":"Java类和实例","slug":"Java类和实例","date":"2019-02-15T05:34:20.987Z","updated":"2019-02-15T05:34:20.987Z","comments":true,"path":"2019/02/15/Java类和实例/","link":"","permalink":"/2019/02/15/Java类和实例/","excerpt":"","text":"前言上一讲当中我们介绍了类方法和类变量，上次给大家布置了一个小作业，写一个银行转账的简单的类。这个功能当然不难，大家也都熟悉，不过其实这里面是隐藏了许多问题的。 比如A账户在给B账户，转账的时候，A账户扣了钱之后系统发生了异常，给B账户增加余额的代码就执行不到了，这该怎么办？如果多个读写操作同时执行又该怎么办？ 比如你账户里有100元，你买了一个100元的东西，在购买操作执行之前对你账户的余额进行了校验，发现余额充足。与此同时，发生了转账操作，转走了100元。此时购物的行为并没有停止，而且已经做过余额校验了，那么就会继续执行，导致账户里变成负值。而众所周知，一个人的账户余额是不能为负值的。 以上的这些问题在高并发的场景当中非常常见，但是目前我们的讲解进度还没有到那么后面，只需要实现最简单的转账功能即可，大家感兴趣的同学可以自己了解一下。 老规矩，在微信公众号：潇潇学长当中回复”账户“，即可获得学长的代码。 静态的概念在前一讲当中，我们留了一个问题给大家。为什么有的方法可以直接通过类名加上方法名直接调用，而有的时候就必须先new出来一个实例呢？究竟它们之间有什么差别呢？ 为了解释这个问题，我们要引入一个新的概念，叫做”静态“。 静态写成关键词是static，大家都不陌生，在之前的讲义当中，我们每一次定义方法，都必须要在前面加上static关键词。 很多人看到静态这个词，觉得静态的意思就是固定不变的，其实这是把static和final做了混淆。这个静态的概念涉及到的概念和理论太多，很难一下解释清楚，我先不解释它到底是什么意思，先简单地说说我们该怎么理解。 对于static的理解，可以粗浅地分为两层次。 先说第一个层次，对于一个类来说，它当中的字段或者是方法加上了static，就表示它属于这个类独有。注意，我特意没用私有，就是避免和private关键词冲突。 还用之前的印钞机和钞票打个比方，假如说A有一台印钞机，他为了证明这台印钞机是他的。他在印钞机背面贴上了标签，写上了自己的名字。有一天，B想要占有这台机器，就擦掉了A的名字，写上了自己的。但是不管这台印钞机上到底是谁的名字，它印出来的钞票都是一样的，并且钞票上也不会带有这个标签的信息。也就是说，这个标签是印钞机独有的，与钞票无关。 用java的语言来说，这个静态的变量和方法都是类所独有的，与从类当中new出来的实例无关。并且实例也是不能访问类当中的静态变量的。 如果能理解到这个层次，差不多就弄清楚了static的用途，就是标记这个方法或者是变量属于类所独有的。平时写写代码，使用一下其实是够了。但是如果面试的时候问起来，这么答并不够深入。 第二个层次，一个类当中的静态变量与其他变量虽然写在一起，但是在java的虚拟机当中，其实是隔离的。我们都知道java虚拟机当中用到的内存分为两块，一块是堆内存，一块是栈内存。“","categories":[{"name":"SpringBoot","slug":"SpringBoot","permalink":"/categories/SpringBoot/"}],"tags":[{"name":"SpringBoot","slug":"SpringBoot","permalink":"/tags/SpringBoot/"}]},{"title":"技术面试题","slug":"技术面试题","date":"2019-02-15T05:34:20.987Z","updated":"2019-02-15T05:34:20.987Z","comments":true,"path":"2019/02/15/技术面试题/","link":"","permalink":"/2019/02/15/技术面试题/","excerpt":"","text":"   算法    操作系统    网络    面向对象   数据库      Java    系统设计    工具    编码实践    后记    :pencil2: :computer: :cloud: :art: :floppy_disk: :coffee: :bulb: :wrench: :watermelon: :memo: 本项目包含了技术面试必备的基础知识，浅显易懂，你不需要花很长的时间去阅读和理解成堆的技术书籍就可以快速掌握这些知识，从而节省宝贵的面试复习时间。你也可以订阅 面试进阶专栏，包含了学习指导和面试技巧，让你更轻松拿到满意的 Offer。 :pencil2: 算法 剑指 Offer 题解 Leetcode 题解 算法 :computer: 操作系统 计算机操作系统 Linux :cloud: 网络 计算机网络 HTTP Socket :art: 面向对象 设计模式 面向对象思想 :floppy_disk: 数据库 数据库系统原理 SQL Leetcode-Database 题解 MySQL Redis :coffee: Java Java 基础 Java 容器 Java 并发 Java 虚拟机 Java I/O :bulb: 系统设计 系统设计基础 分布式 集群 攻击技术 缓存 消息队列 :wrench: 工具 Git Docker 构建工具 正则表达式 :watermelon: 编码实践 代码可读性 代码风格规范 :memo: 后记内推信息Job-Recommend 专栏面试进阶指南 知识星球想要向我提问关于学习和求职方面的建议？来知识星球，你的每个提问我都会认真回答。 知识星球 QQ 群为大家提供一个学习交流平台，在这里你可以自由地讨论技术问题。 排版笔记内容按照 文文案排版指北 进行排版，以保证内容的可读性。笔记不使用 ![]() 这种方式来引用图片，而是用 <img> 标签。一方面是为了能够控制图片以合适的大小显示，另一方面是因为 GFM 不支持 <center> ![]() </center> 让图片居中显示，只能使用 <div align="center"> <img src=""/> </div> 达到居中的效果。 我将自己实现的文档排版功能提取出来，放在 Github Page 中，无需下载安装即可免费使用：Text-Typesetting。 上传方案我在本地使用为知笔记软件进行书写，为了方便将本地笔记内容上传到 Github 上，实现了一整套自动化上传方案，包括文本文件的导出、提取图片、Markdown 文档转换、Git 同步。进行 Markdown 文档转换是因为 Github 使用的 GFM 不支持 MathJax 公式和 TOC 标记，所以需要替换 MathJax 公式为 CodeCogs 的云服务和重新生成 TOC 目录。 我将自己实现文档转换功能提取出来，方便大家在需要将本地 Markdown 上传到 Github，或者制作项目 README 文档时生成目录时使用：GFM-Converter。 License学习笔记不是从网上到处拼凑而来，除了少部分引用书上和技术文档的原文，其余都是笔者的原创。在您引用本仓库内容或者对内容进行修改演绎时，请署名并以相同方式共享，谢谢。 LogoPower by logomakr. 致谢感谢以下人员对本仓库做出的贡献，当然不仅仅只有这些贡献者，这里就不一一列举了。如果你希望被添加到这个名单中，并且提交过 Issue 或者 PR，请与笔者联系。 ​ ​ ​ ​ ​ ​ ​ ​ ​","categories":[{"name":"学习总结","slug":"学习总结","permalink":"/categories/学习总结/"}],"tags":[{"name":"学习总结","slug":"学习总结","permalink":"/tags/学习总结/"}]},{"title":"yarn包管理学习使用","slug":"node/yarn/yarn包管理学习使用","date":"2019-02-14T16:00:00.000Z","updated":"2019-02-15T09:50:42.703Z","comments":true,"path":"2019/02/15/node/yarn/yarn包管理学习使用/","link":"","permalink":"/2019/02/15/node/yarn/yarn包管理学习使用/","excerpt":"","text":"安装windows文件下载安装下载 Chocolatey windowns包管理器下载 choco install yarn Scoop 是一个 Windows 的命令行安装程序 scoop install yarn 如果 Node.js 没有安装，scoop 将给你一个建议来安装它。 例如： scoop install nodejs node安装 node install -g yarn 使用现在Yarn已经 安装完毕，可以开始使用。以下是一些你需要的最常用的命令：初始化新项目yarn init 添加依赖包 yarn add [package]yarn add [package]@[version]yarn add [package]@[tag] 将依赖项添加到不同依赖项类别 分别添加到 devDependencies、peerDependencies 和 optionalDependencies： yarn add [package] –devyarn add [package] –peeryarn add [package] –optional 升级依赖包 yarn upgrade [package]yarn upgrade [package]@[version]yarn upgrade [package]@[tag] 移除依赖包 yarn remove [package] 安装项目的全部依赖 yarn 或者 yarn install 修改镜像源查看使用的镜像源 yarn config get registry 配置使用的镜像源 yarn config set registry ‘https://registry.npm.taobao.org' npm 的源只需要把yarn改成npm就可以一样修改","categories":[{"name":"Node","slug":"Node","permalink":"/categories/Node/"}],"tags":[{"name":"Yarn","slug":"Yarn","permalink":"/tags/Yarn/"},{"name":"Node","slug":"Node","permalink":"/tags/Node/"}]},{"title":"js Map数据类型操作","slug":"js/dataType/map","date":"2019-02-14T16:00:00.000Z","updated":"2019-02-15T09:55:26.021Z","comments":true,"path":"2019/02/15/js/dataType/map/","link":"","permalink":"/2019/02/15/js/dataType/map/","excerpt":"","text":"遍历map对象1234567891011121314var map = [{ key : "百度", value : "李彦宏" }, { key : "阿里巴巴", value : "马云" }, ]; for (var key in map) { console.log(map[key]); }//输出结果//Object {key : "百度", value : "李彦宏"}//Object {key : "阿里巴巴", value : "马云"} 遍历map集合12345678910111213141516171819202122232425var m = new Map();m.set(1, "black");m.set(2, "red");m.set("colors", 2);//方法一：m.forEach(function (item) { console.log(item.toString());});//方法二：m.forEach(function (value, key, map) { console.log(value)})// 输出:// black// red// 2//方法三：for (var [key, value] of m) { console.log(key + ' = ' + value);}// 输出:// 1 = black// 2 = red// colors = 2","categories":[{"name":"JS","slug":"JS","permalink":"/categories/JS/"}],"tags":[{"name":"JS","slug":"JS","permalink":"/tags/JS/"},{"name":"JS数据类型","slug":"JS数据类型","permalink":"/tags/JS数据类型/"}]},{"title":"git 主branch地址被删除后更新报错问题解决","slug":"git/git 主branch地址被删除后更新报错问题解决","date":"2019-02-13T16:00:00.000Z","updated":"2019-02-15T05:34:20.987Z","comments":true,"path":"2019/02/14/git/git 主branch地址被删除后更新报错问题解决/","link":"","permalink":"/2019/02/14/git/git 主branch地址被删除后更新报错问题解决/","excerpt":"","text":"报错：12345623:19 Update canceled23:23 Can't Update No tracked branch configured for branch master or the branch doesn't exist. To make your branch track a remote branch call, for example, git branch --set-upstream-to origin/master master (show balloon) 解决方式： git fetch 然后在执行 git push –set-upstream origin master 在更新就好了","categories":[{"name":"Git","slug":"Git","permalink":"/categories/Git/"}],"tags":[{"name":"Git","slug":"Git","permalink":"/tags/Git/"}]},{"title":"修改liunx hosts解析","slug":"liunx/修改hosts","date":"2019-02-12T16:00:00.000Z","updated":"2019-02-18T10:04:34.819Z","comments":true,"path":"2019/02/13/liunx/修改hosts/","link":"","permalink":"/2019/02/13/liunx/修改hosts/","excerpt":"","text":"修改/etc/hosts文件内容添加一行，如github的1234567891011127.0.0.1 localhost127.0.1.1 jp-System-Product-Name# The following lines are desirable for IPv6 capable hosts::1 ip6-localhost ip6-loopbackfe00::0 ip6-localnetff00::0 ip6-mcastprefixff02::1 ip6-allnodesff02::2 ip6-allrouters0.0.0.0 account.jetbrains.com13.229.188.59 github.com","categories":[{"name":"个博搭建","slug":"个博搭建","permalink":"/categories/个博搭建/"}],"tags":[{"name":"HEXO","slug":"HEXO","permalink":"/tags/HEXO/"}]},{"title":"标签横向区中","slug":"css/标签横向区中","date":"2019-02-12T16:00:00.000Z","updated":"2019-02-18T08:25:22.734Z","comments":true,"path":"2019/02/13/css/标签横向区中/","link":"","permalink":"/2019/02/13/css/标签横向区中/","excerpt":"","text":".container { display: flex; align-items: center;}","categories":[{"name":"个博搭建","slug":"个博搭建","permalink":"/categories/个博搭建/"}],"tags":[{"name":"HEXO","slug":"HEXO","permalink":"/tags/HEXO/"}]},{"title":"vue组件与父子组件使用","slug":"vue/vue组件与父子组件使用","date":"2019-02-12T16:00:00.000Z","updated":"2019-02-19T02:24:01.408Z","comments":true,"path":"2019/02/13/vue/vue组件与父子组件使用/","link":"","permalink":"/2019/02/13/vue/vue组件与父子组件使用/","excerpt":"","text":"component(组件)直接写法12345Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], template: '<h3>{{ postTitle }}</h3>'}) 组件注册组件名定义组件名的方式有两种 使用 kebab-case Vue.component(‘my-component-name’, { / … / }) 使用 PascalCase Vue.component(‘MyComponentName’, { / … / }) 直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的 全局注册{12 // ... 选项 ...}) 这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 局部注册普通注册Vue({123456 el: '#app', components: { 'component-a': ComponentA, 'component-b': ComponentB }}) 组件内组件注册12345678var ComponentA = { /* ... */ }var ComponentB = { components: { 'component-a': ComponentA }, // ...} 模块系统在模块系统中局部注册假设的 ComponentB.js 或 ComponentB.vue 文件中：12345678910import ComponentA from './ComponentA'import ComponentC from './ComponentC'export default { components: { ComponentA, ComponentC }, // ...} 现在 ComponentA 和 ComponentC 都可以在 ComponentB 的模板中使用了。 基础组件的自动化全局注册1234567891011import BaseButton from './BaseButton.vue'import BaseIcon from './BaseIcon.vue'import BaseInput from './BaseInput.vue'export default { components: { BaseButton, BaseIcon, BaseInput }} 可以使用webpack，require.context只全局注册这些非常通用的基础组件 12345678910111213141516171819202122232425262728293031323334import Vue from 'vue'import upperFirst from 'lodash/upperFirst'import camelCase from 'lodash/camelCase'const requireComponent = require.context( // 其组件目录的相对路径 './components', // 是否查询其子目录 false, // 匹配基础组件文件名的正则表达式 /Base[A-Z]\\w+\\.(vue|js)$/)requireComponent.keys().forEach(fileName => { // 获取组件配置 const componentConfig = requireComponent(fileName) // 获取组件的 PascalCase 命名 const componentName = upperFirst( camelCase( // 剥去文件名开头的 `./` 和结尾的扩展名 fileName.replace(/^\\.\\/(.*)\\.\\w+$/, '$1') ) ) // 全局注册组件 Vue.component( componentName, // 如果这个组件选项是通过 `export default` 导出的， // 那么就会优先使用 `.default`， // 否则回退到使用模块的根。 componentConfig.default || componentConfig )}) 记住全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生。这里有一个真实项目情景下的示例。 require.context详解 子组件使用父组件关键字 $parent：prop：单向数据流传递，向下传递，子组件定义props: ['initialCounter'], 父组件引用 单个传 传入一个对象的所有属性1234post: { id: 1, title: 'My Journey with Vue'} 模板使用方式：123456<blog-post v-bind="post"></blog-post>等于<blog-post v-bind:id="post.id" v-bind:title="post.title"></blog-post> Prop 验证{1234567891011121314151617181920212223242526272829303132 props: { // 基础的类型检查 (`null` 匹配任何类型) propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, // 带有默认值的数字 propD: { type: Number, default: 100 }, // 带有默认值的对象 propE: { type: Object, // 对象或数组默认值必须从一个工厂函数获取 default: function () { return { message: 'hello' } } }, // 自定义验证函数 propF: { validator: function (value) { // 这个值必须匹配下列字符串中的一个 return ['success', 'warning', 'danger'].indexOf(value) !== -1 } } }}) type值 String Number Boolean Array Object Date Function Symbol 构造函数事例123456789function Person (firstName, lastName) { this.firstName = firstName this.lastName = lastName}Vue.component('blog-post', { props: { author: Person }}) 事件传递父组件<my-component v-on:my-event="doSomething"></my-component>子组件调用方式this.$emit('myEvent') 依赖注入方式provide：允许我们指定我们想要提供给后代组件的数据/方法例子： 12345provide: function () { return { getMap: this.getMap } } inject：来接收指定的我们想要添加在这个实例上的属性inject: ['getMap']","categories":[{"name":"VUE","slug":"VUE","permalink":"/categories/VUE/"}],"tags":[{"name":"VUE","slug":"VUE","permalink":"/tags/VUE/"}]},{"title":"npm添加依赖","slug":"node/npm/npm常用命令","date":"2019-02-12T16:00:00.000Z","updated":"2019-02-19T05:20:17.650Z","comments":true,"path":"2019/02/13/node/npm/npm常用命令/","link":"","permalink":"/2019/02/13/node/npm/npm常用命令/","excerpt":"","text":"安装模块（npm install）参考npm install –save vue-router vuexnpm install –save-dev stylus-loader babel-runtime","categories":[{"name":"个博搭建","slug":"个博搭建","permalink":"/categories/个博搭建/"}],"tags":[{"name":"HEXO","slug":"HEXO","permalink":"/tags/HEXO/"}]},{"title":"空白博客","slug":"test","date":"2019-02-12T16:00:00.000Z","updated":"2019-02-15T05:34:20.987Z","comments":true,"path":"2019/02/13/test/","link":"","permalink":"/2019/02/13/test/","excerpt":"","text":"","categories":[{"name":"个博搭建","slug":"个博搭建","permalink":"/categories/个博搭建/"}],"tags":[{"name":"HEXO","slug":"HEXO","permalink":"/tags/HEXO/"}]},{"title":"（1）vue项目初始化","slug":"vue/vue项目初始化","date":"2019-02-12T16:00:00.000Z","updated":"2019-02-19T05:38:15.801Z","comments":true,"path":"2019/02/13/vue/vue项目初始化/","link":"","permalink":"/2019/02/13/vue/vue项目初始化/","excerpt":"","text":"init参考 大型vue项目1234npm install -g vue-clivue init webpack democd demonpm install 创建完的目录结构.jpeg”) 目录详解 build：目录是一些webpack的文件，配置参数什么的，一般不用动 src：项目开发相关源码 static：生成好的文件会放在这个目录下。 test：测试文件夹，测试都写在这里 .babelrc： babel编译参数，vue开发需要babel编译 .editorconfig：不知名开发工具配置文件 .eslintrc.js： eslint配置文件，用以规范团队开发编码规范，大中型项目很有用 .gitignore：git过滤配置 index.html：主页 package.json： 项目文件，记载着一些命令和依赖还有简要的项目描述信息 项目添加依赖引用12npm install --save vue-router vuexnpm install --save-dev stylus-loader babel-runtime 模块简介vue-routervue-router用起来非常的简单入口文件(src/main.js)： t{ padding: 2px 4px; font-size: 90%; color: #c7254e; background-color: #f9f2f4; border-radius: 4px; }","categories":[{"name":"VUE","slug":"VUE","permalink":"/categories/VUE/"}],"tags":[{"name":"VUE","slug":"VUE","permalink":"/tags/VUE/"}]},{"title":"空白博客","slug":"dubbo/test","date":"2019-02-12T16:00:00.000Z","updated":"2019-02-19T05:35:01.767Z","comments":true,"path":"2019/02/13/dubbo/test/","link":"","permalink":"/2019/02/13/dubbo/test/","excerpt":"","text":"dubbo-learn-book","categories":[{"name":"个博搭建","slug":"个博搭建","permalink":"/categories/个博搭建/"}],"tags":[{"name":"HEXO","slug":"HEXO","permalink":"/tags/HEXO/"}]},{"title":"2019-2-18我的开源项目目标","slug":"我的项目/2019-2-18我的开源项目目标","date":"2019-02-12T16:00:00.000Z","updated":"2019-02-19T05:35:51.062Z","comments":true,"path":"2019/02/13/我的项目/2019-2-18我的开源项目目标/","link":"","permalink":"/2019/02/13/我的项目/2019-2-18我的开源项目目标/","excerpt":"","text":"前端pc vue项目+element+iview+axios npmvue初始化项目 项目配置 路由配置 组件配置 本地测试和部署 socket.io.js（SocketIO插件）zheng.jtotop.js（返回顶部插件）后端spring boot 做项目快速开发 spring cloud 做分布式项目框架参考 redis 缓存服务器 mysql 做持久化 spring boot 了解@controller注解原理，并使用 Mysql 持久化 MyBatis ORM Druid 数据库连接池 MyBatis Generator（代码生成） mybatis根据mysql结构 redis（分布式缓存数据库） redis做日常存储 lua脚本实现高并发 Solr & Elasticsearch（搜索）spring cloudQuartz（定时器，作业调度框架）Ehcache（进程内缓存框架）FastDFS（分布式文件系统）Log4J（日志组件）Swagger2（接口文档测试组件）sequence（分布式高效ID生产）json（数据序列化）Maven项目构建管理工具GitNetty-socketio（实时推送）部署类docker（容器技术）nginx（反向代理，负载均衡）git（代码云管理工具）Jenkins（持续化集成）","categories":[{"name":"个博搭建","slug":"个博搭建","permalink":"/categories/个博搭建/"}],"tags":[{"name":"HEXO","slug":"HEXO","permalink":"/tags/HEXO/"}]},{"title":"vue路由配置","slug":"vue/vue路由配置","date":"2019-02-06T16:00:00.000Z","updated":"2019-02-19T05:19:17.494Z","comments":true,"path":"2019/02/07/vue/vue路由配置/","link":"","permalink":"/2019/02/07/vue/vue路由配置/","excerpt":"","text":"嵌套路由/视图映射 模块化，基于组件的路由器配置 路线参数，查询，通配符 查看由Vue.js过渡系统提供支持的过渡效果 细粒度的导航控制 与自动活动CSS类的链接 HTML5历史模式或散列模式，在IE9中具有自动回退功能 可自定义的滚动行为 全局访问 Vue.$routerurl匹配路由入门配置1.61234routes: [ // dynamic segments start with a colon { path: '/user/:id', component: User } ] ‘:’:动态段，this.$route.params中的参数同名，传参方式1<div>User {{ $route.params.id }}</div> 举例：path|编译path|$route.params:-|:-|:-/user/:username|/user/evan|{ username: ‘evan’ }/user/:username/post/:post_id|/user/evan/post/123|{ username: ‘evan’, post_id: ‘123’ } /:表示路由路径，视为根路径，不写/,视为相对路径 :表示所有路由，事例：path: ‘‘ path: ‘/user-*’ 优先级：有时，多个路由可以匹配相同的URL。在这种情况下，匹配优先级由路由定义的顺序确定：路由定义越早，它获得的优先级越高。 嵌套路由12345678/user/foo/profile /user/foo/posts+------------------+ +-----------------+| User | | User || +--------------+ | | +-------------+ || | Profile | | +------------> | | Posts | || | | | | | | || +--------------+ | | +-------------+ |+------------------+ +-----------------+ 嵌套路由上一级组件:子路由展示标签 定义61234567891011121314{ path: '/user/:id',//路由地址 component:User,//路由地址对应页面组件 children:[//子路由 { path: 'profile', component: UserProfile }, { path: 'posts', component: UserPosts } ]} 命名视图123<router-view class=\"view one\"></router-view><router-view class=\"view two\" name=\"a\"></router-view><router-view class=\"view three\" name=\"b\"></router-view> 612345678910routes: [ { path: '/', components: { default: Foo, a: Bar, b: Baz } } ] 重定向重定向到请求路径6123routes: [ { path: '/a', redirect: '/b' }] 重定向到请求配置路径6123routes: [ { path: '/a', redirect: { name: 'foo' }}] 使用函数进行动态重定向61234{ path: '/a', redirect: to => { // the function receives the target route as the argument // return redirect path/location here. }} 别名可以通过访问/a访问到/b,并且/b依然存在routes: [ { path: ‘/a’, component: A, alias: ‘/b’ } ] t{ padding: 2px 4px; font-size: 90%; color: #c7254e; background-color: #f9f2f4; border-radius: 4px; }","categories":[{"name":"VUE","slug":"VUE","permalink":"/categories/VUE/"}],"tags":[{"name":"VUE","slug":"VUE","permalink":"/tags/VUE/"}]},{"title":"vue路由跳转","slug":"vue/vue路由跳转","date":"2019-02-06T16:00:00.000Z","updated":"2019-02-19T02:24:01.392Z","comments":true,"path":"2019/02/07/vue/vue路由跳转/","link":"","permalink":"/2019/02/07/vue/vue路由跳转/","excerpt":"","text":"1.router-link跳转直接写上跳转的地址1234567891011<router-link to="/detail/one"> <span class="spanfour" >link跳转</span></router-link>// 添加参数<router-link :to="{path:'/detail/two', query:{id:1，name:'vue'}}"> </router-link>// 参数获取id = this.$route.query.id// 新窗口打开<router-link :to="{path:'/detail/three', query:{id:1，name:'vue'}}" target="_blank"></router-link> 2.this.$router.push跳转(e) {1234567891011 this.$router.push({path: "/detail", query: {id: e}})}// 参数获取id = this.$route.query.idtoDeail (e) { this.$router.push({name: "/detail", params: {id: e}})}// 注意地址需写在 name后面//参数获取，params和query区别，query参数在地址栏显示，params的参数不在地址栏显示id = this.$route.params.id 3..this.$router.replace跳转123456789101112//和push的区别，push有记录一个history，replace没有 toDeail (e) { this.$router.replace({name: '/detail', params: {id: e}}) }4. resolve跳转 resolve页面跳转可用新页面打开 2.1.0版本后，使用路由对象的resolve方法解析路由，可以得到location、router、href等目标路由的信息。得到href就可以使用window.open开新窗口了（这边应用：https://segmentfault.com/q/1010000009557100下的一个回答） toDeail (e) { const new = this.$router.resolve({name: '/detail', params: {id: e}}) window.open(new.href,'_blank') }","categories":[{"name":"VUE","slug":"VUE","permalink":"/categories/VUE/"}],"tags":[{"name":"VUE","slug":"VUE","permalink":"/tags/VUE/"}]},{"title":"xll测试测试测试","slug":"test-new-word","date":"2017-07-06T16:00:00.000Z","updated":"2019-02-15T05:34:20.987Z","comments":true,"path":"2017/07/07/test-new-word/","link":"","permalink":"/2017/07/07/test-new-word/","excerpt":"","text":"上一篇我们学习了谷歌Chrome浏览器开发者工具的基础功能，下面介绍的是Chrome开发工具中最有用的面板Sources。 Sources面板几乎是最常用到的Chrome功能面板,也是解决一般问题的主要功能面板。通常只要是开发遇到了js报错或者其他代码问题,在审视一遍代码而一无所获之后打开Sources进行js断点调试,几乎能解决8成的代码问题。js断点功能让人兴奋不已,以前只能在IE中靠alert弹出窗口调试js代码,那样的开发环境对于前端程序员来说简直是一场噩梦。本篇介绍Sources的具体用法,帮助各位在开发过程中够愉快地调试js代码,而不是因它而发疯。首先打开F12开发工具切换到Sources面板中Sources功能面板是资源面板,他主要分为四个部分,四个部分并不是独立的,他们互相关联,互动共同实现一个重要的功能:监控js在执行期的活动。简单来说就是断点啦。首先我们来看区域1,它的功能有些类似于Resources面板,主要是显示网页加载的脚本文件:例如css, js等资源文件(它不包含cookie,img等静态资源文件)。区域1的导航条上有三个tab切换选项,他们都存有不同域名和环境下的js和css文件,我们首先来说明Sources(资源)选项的作用:Sources: 包含该项目的静态资源文件。双击选中文件,该文件内容会在区域2中显示,如果你选中的是js文件,那么你可以在区域2种单击行号进行断点调试,只要js执行到了你所标记的这一行,它会停止向下执行并且等待你的命令:从上图可以看到js执行到断点处时各个区域的变化,首先是区域3中的Breakpoints记录信息会变高亮,然后是区域4中Scope 选项中列出了断点处私有和公有的变量信息,这样,我可以很直观地知道,此时此刻js的执行状态。同样的,你可以把鼠标放到区域2种的某个变量上,浏览器会弹出一个小框框,框框里面则是你悬浮其上的变量所有信息:然后,你可以按F10跟着js执行的路径一步一步地走下去,如果你遇到了一个函数包含着另外一个函数,那么你可以按F11进入到个函数中去观察它的代码执行活动。你也可以通过点击区域1底部的各个图标对js代码进行跟踪。不过我建议你使用快捷键,故名思义,因为它比较快捷方便。不过怎么用完全按照个人习惯来吧。下图是各个按钮的作用功能。在上图蓝色圆圈中数字,它们分别代表:1、停止断点调试2、不跳入函数中去,继续执行下一行代码(F10)3、跳入函数中去(F11)4、从执行的函数中跳出5、禁用所有的断点,不做任何调试6、程序运行时遇到异常时是否中断的开关接下来在区域4种切换到Watch Expressions 选项,它的作用是为目前断点添加表达式,使得每次断点往下走一步都会执行你写下的js代码。需要注意的是这个功能必须谨慎使用,因为这可能会导致你写下的监控代码段会不断地被执行。为了避免你的调试代码重复执行,我们可以在调试时直接在console控制台上一次性地输出当前断点处的信息(推荐这样做)。为了验证我们在console面板中拥有的是当前断点环境,我门可以对比断点执行前后的this值变化。如果你觉得在断点的时候为了看一个变量必须借用console面板输出的方式来查看会比较麻烦,那么你可以更新最新版的Chrome,它已经为我们解决了这个烦恼。为了方便开发者调试,在这一点上谷歌已经做到了极致,就在前几天更新过Chrome以后,卤煮意外地发现了断点时监控环境变量的另外一种方式,这种方式极为清晰,在断点调试的时候,区域2中会自动显示每个变量的值,每次代码往下走的时候这个值都回时时更新。这让开发者对当前环境变量几乎可以说是一目了然。(此功能有一个小缺陷,那就是无法查看数组或者对象的具体索引和值,不过我相信google会改进它的。)当你的项目已经线上,出现了一个bug,你修复了之后无法看到它真正在线上的效果,那么你可以在打开线上的项目,直接在浏览器中修改代码然后看到效果。这样的效果往往是最直接的,这种方法也能帮你省去频繁验证发布的麻烦,毕竟身为前端码农的你也一定会听到过后台(通常情况下是后台发布)大哥的抱怨:“XXX,测试通过了没,不要出现了哈,发布一次很麻烦的!”。而在Chrome里面,只需要在区域2种直接修改,你就可以验证你的代码在线上是否可行。卤煮在此处只是指出该功能的用法之一。其他的就凭诸位的聪明才智去想了。即使在断点时,你也可以编辑代码,按ctrl+S保存之后,你会看到区域2的背景由白色变为浅色,而断点会重新开始执行。回到区域1,Content script 选项开里面包含着一些第三方插件或者浏览器自身的js代码,经常它是被忽略的,实际上它的作用很少。我们可以更多关注一下Snippets选项。还记得基础篇里面介绍的style吗?在里面我们可以编辑界面的css代码并且即时看到它们的映射效果,同样地,在Sinppets中,我们也 可以编辑(重写)js代码片段。这些片段实际上就相当于你的js文件一样,不同的是本地的js文件在编辑器里面编辑的,而此处,你是在浏览器中编写的。这些代码片段在浏览器刷新的时候既不会消失,也不会执行,除非是你手动执行它。它可以存在你的本地浏览器中,即使关闭浏览器,再次打开时它依然还在那里。它的主要作用可以使得我们编写一些项目的测试代码时提供便捷,你知道,如果你在编辑器上编写这些代码,在发布时你必须为它们添加注释符号或者手动删除它们,而在浏览器上编写就不需要这样繁琐了。在Snippets选项的空白处右键后选择弹出的new选项,建立一个你自己的新的文件,然后在区域2种编辑它。Snippets 的非常功能强大,它的许多隐藏功能还有待发掘。目前卤煮使用它是在记住调试片段、单元测试、少量的功能代码编写功能上。最后我们看看js中时间丰富的监控功能,同上篇文章介绍的一样,Sources面板和Elements面板一样有监控事件的功能,而且Sources中功能更加丰富,也更加强大。它的这部分功能集中在区域3中。我以下图为例,观察其作用。从上到下,紫色圈内的数字的意义:1、断点处的债堆栈,就是从该函数起,逐级追寻调用到他的函数名。例如:?1234567891011121314151617function a () {   b();}function b() {   c(); }function c() {  //在该处断点,查看call stack }a->b->c.call stack 从上到下的顺序就是cba2、在区域2中你的断点调试信息。当某个断点在执行的时候对应的信息会高亮,双击该处信息可以在区域2中快速定位。3、添加的Dom监控信息。4、击+ 并输入 URL 包含的字符串即可监听该 URL 的 Ajax 请求,输入内容就相当于 URL 的过滤器。如果什么都不填,那么就监听所有 XHR 请求。一旦 XHR 调用触发时就会在 request.send() 的地方中断。5、为网页添加各种类型的断点信息。如选中了Mouse中的某一项(click),当你在网页上出发这个动作(单击网页任意地方),你浏览器就是立刻断点监控该事件。值得再次重复一遍,Sources是一般的功能开发中最常用到也是最有用的功能面板,它里面的许多功能对于我们开发前端工程来说是非常有帮助的。在web2.0时代的今天,我不推荐依然在自己的代码里面写调试信息的行为,因为这会然你的开发变得繁琐。Chrome开发工具给我们提供的强大功能,我们应该好好利用之。这篇文章就到此结束,虽然有点繁琐,但总算基本表述了卤煮使用经验和想法,希望对你有帮助。如果你觉得不错,请推荐一下本文并继续关注卤煮在的博客。在下一篇中我将向大家介绍Chrome开发工具中的性能方面的调试。","categories":[{"name":"个博搭建","slug":"个博搭建","permalink":"/categories/个博搭建/"}],"tags":[{"name":"HEXO_GitHub个博","slug":"HEXO-GitHub个博","permalink":"/tags/HEXO-GitHub个博/"},{"name":"HEXO","slug":"HEXO","permalink":"/tags/HEXO/"}]},{"title":"国外免费建站工具weebly","slug":"免费建站/国外免费建站工具weebly","date":"2017-07-06T16:00:00.000Z","updated":"2019-02-15T05:34:20.987Z","comments":true,"path":"2017/07/07/免费建站/国外免费建站工具weebly/","link":"","permalink":"/2017/07/07/免费建站/国外免费建站工具weebly/","excerpt":"","text":"官网","categories":[{"name":"个博搭建","slug":"个博搭建","permalink":"/categories/个博搭建/"}],"tags":[{"name":"HEXO","slug":"HEXO","permalink":"/tags/HEXO/"}]},{"title":"电影网站","slug":"电影网站/test","date":"2017-02-06T16:00:00.000Z","updated":"2019-02-15T05:34:20.987Z","comments":true,"path":"2017/02/07/电影网站/test/","link":"","permalink":"/2017/02/07/电影网站/test/","excerpt":"","text":"港剧网,免费看皓镧转","categories":[],"tags":[]}]}