flex 布局
flex 布局
Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
基本概念flex布局元素分为：容器（flex container） 与 项目（flex item）
容器属性123456flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content
项目属性123456orderflex-grow // 默认 0flex-shrink // 默认 1flex-basisflexalign-self
其中 flex 有三个属性 flex
flex布局See the Pen grid layout by chris (@isevenfox) on CodePen.
css 画图形
css画图形1.css画实心三角形原理： 先画一个最简单正方形 高、宽都为10px 然后为他加上边框也为10px 这个时候你就会发现，他变成了一个梯形 假如需要画一个向下的实心尖头，那么就先将梯形的右，下，左边框隐藏。然后就得到一个等腰梯形 这个等腰梯形的宽和高还是为10px，如果想要变成尖的三角形，那么就是直接去掉高和宽 具体实现看如下的 codepen ##2.画空心箭头 原理： 1.先画一个正方形，然后将正方形旋转45度，最后隐藏其他边框 具体实现看如下的 codepen
See the Pen css draw by chris (@isevenfox) on CodePen.
javascript 面向对象程序设计
面向对象程序设计
假如没有对象，那么你就自己new 一个对象出来呗
1.工厂模式123456789101112131415function createPerson (name, age, job) { var o = new Object() o.name = name o.age = age o.job = job o.sayName = function () { console.log(this.name) } o._this = this return o}var p = createPerson('chris', 18, 'softwate engineer') p.sayName()console.log(p._this === this) // 这里的Person 的 this 指向windows全局
2.构造函数模式
ECMAScript可以使用构造函数创建特定的类型对象 使用new操作符实例化新对象 1）创建一个新对象 2）将构造函数的作用域复制给新对象（th ...
Vue 配置stylus支持
Vue 配置stylus支持安装必要的支持12345#初始化项目vue-sell-study#安装stylus支持 yarn add stylus yarn add stylus-loader
修改stylus lang 支持123456789<style lang="stylus" rel="stylesheet/stylus">.hello { font-size 50px color red .t1 { color blue }}</style>
Hybird App 开发中返回逻辑的控制
Hybird App 开发中返回逻辑的控制
开发中碰到一个问题。 假如有三个页面 第一个页面为 /list 列表页面， 第二个页面为/add 资料添加页面（form表单）， 第三个页面是/detail 添加成功之后返回的详情页面。 三个页面的操作逻辑是。list -> add -> detail 在list页面上点击一个按钮，进入添加add的表单页面，add页面添加成功之后会跳转到detail页面。那么如果在app上点击goback到时候，就会跳转到add的form表单。这对于用于体验来说简直是灾难。 我们需要的逻辑是 点击goback的时候直接跳转到list页面，而不是add页面。
我这里采用了参考方案的解决方案一
解决方案一add页面或detail页面添加成功标记你可以在add 页面或者 detail页面添加添加成功的标记
1window.sessionStorage.setItem("addStatus","true")
这里使用sessionStorage，通过设置一个状态标记添加成功。 然后 ...
部分demo
二手车管理后台部分上传表单
使用Symfony作为后台框架，使用sonataAdmin作为后台管理bundle进行二手车管理后台的快速开发。 通过这个项目了解了symfony的容器化注入思想和解耦，同时增加了对前端适配的经验，由于这个项目分为后台管理和APP端，不仅需要制作PC端还需要H5注入APP，并将APP安装到收银POS机，所以通过这个项目也在一定程度上了解了如何进行Hybrid APP的开发与对接。
Hybrid App 部分页面演示
嵌入andorid 和 ios 的报表页面。通过silex框架作为中台，获取后台java接口数据，并将接口数据汇总整理成前端所需要的数据。使用vue-cli+vue+axioss+vuex+mint-ui+echarts完成报表页面。
爱拍流量充值页面
第一个使用vue.js制作的页面。根据API接口对接数据，并使用vue制作该页面。了解了实用数据驱动和dom驱动的区别。第一次了解了vue.js
mac 利器
mac 利器
攒了很久的钱，环境彻底迁移到mac os 下，总结下自己使用的一些工具 从win到mac的一些工具迁移可以看老的文章 win下的mac利器替代品 这一篇主要集中在mac下的工具体会和使用心得
关于开发开发环境
开发环境我还是坚持使用Vagrant+Homestead，这样能够有效的做到环境隔离，同时vagrant能够快速配置开发环境，利于整个团队的开发环境保持一致。
vagrant
virtualbox
homestead
数据库操作
sequel pro
Terminal工具
iTerm2 搭配 zsh 使用，非常的方便
iTerm2
分屏软件
使用它配合快捷键能够快速的分屏，非常的方便
spectacle
思维导图
之前一直用xmind的，后来ios 上限免的时候下载了mindnode之后，就彻底不回去了。由俭入奢易，由奢入俭难，谁用谁知道。 我一般用思维导图来确定项目需求，并撰写流程
Mindnode
编辑器
Jetbrains 全家桶，用起来非常爽。 sublime打开多个文件的时候，速度很快 vscode 的插件非常好用，自从用了S ...
产品项目管理
产品项目管理
最近公司的项目走了很多坑，需要总结一下，以下只是写自己的总结，之后再补书面知识。 整体项目的管理本质上是 Feature List 与 Bug List
需求评审了解需求 这个阶段就是和你的需求方进行了解，知晓需求方的要求，并将其评估。
确认需求 将了解到需求进行固定，并将固定的需求与需求方确认。
页面 将需求的内容映射到实体的页面，哪个页面，该展示哪些数据。
CGI 页面确定完成之后，着手制定CGI网关。 例如一个添加用户页面，需要制定CGI。 1.（get:/user）首先需要一个展示添加用户的页面，这个页面需要输入 username、email、password等添加信息 2.(post:/user) 将添加到信息请求使用post发送到handle，然后将进行一些列处理。 这里需要添加异常的处理,返回可以是一个json。
123456789101112//成功{ "code": 200, "message": "请求数据成功", &quo ...
css常用技巧 css水平居中元素 css垂直居中元素 浮动模块父元素高度为0
css常用技巧
之前写css的时候，总会有一些疑惑，所以需要总结一下，并归纳整理。
css水平居中一个元素
如果需要居中的元素为常规流中inline元素，为父元素设置text-align: center;即可实现
如果需要居中的元素为常规流中block元素，1）为元素设置宽度，2）设置左右margin为auto。3）IE6下需在父元素上设置text-align: center;,再给子元素恢复需要的值
12345678910111213141516171819<body> <div class="content"> aaaaaa aaaaaa a a a a a a a a </div></body><style> body { background: #DDD; text-align: center; /* 3 */ } .content { width: 500px; /* 1 */ ...
vue组件通讯vue父子组件通讯demo
vue组件通讯
最近一直在写报表的页面，也碰到了非常多组件通讯的问题，最近准备重构和总结一下。因为之前是第一次上手vue-cli + echarts + mint-ui，所以前一次写的代码自己非常的不满意。第一次的报表完成图，大致如下gif所示。下面就是总结一下一些组件通讯的方式吧。温故知新。
父子组件通讯数据从父组件到子组件
数据从父组件到子组件是最容易理解的，因为vue是单向数据流，所以数据就像水流一样，从高处到低处，这里为理解为，从父组件流向子组件。
目录如下所示 Main.vue
12345678910111213141516171819202122232425262728293031<template> <div class="main"> //需要传递到子组件的数据，并且绑定到type上 <header-nav :type="type"></header-nav> </div></template><script>import ...
