Git忽略规则和.gitignore规则不生效的解决办法

#Git忽略规则：

在git中如果想忽略掉某个文件，不让这个文件提交到版本库中，可以使用修改根目录中 .gitignore 文件的方法（如果没有这个文件，则需自己手工建立此文件）。这个文件每一行保存了一个匹配的规则例如：

###此为注释 – 将被 Git 忽略

*.sample 　　 # 忽略所有 .sample 结尾的文件
!lib.sample 　　 # 但 lib.sample 除外
/TODO 　　 # 仅仅忽略项目根目录下的 TODO 文件，不包括 subdir/TODO
build/ 　　 # 忽略 build/ 目录下的所有文件
doc/*.txt 　　# 会忽略 doc/notes.txt 但不包括 doc/server/arch.txt

###.gitignore规则不生效的解决办法

把某些目录或文件加入忽略规则，按照上述方法定义后发现并未生效，原因是.gitignore只能忽略那些原来没有被追踪的文件，如果某些文件已经被纳入了版本管理中，则修改.gitignore是无效的。那么解决方法就是先把本地缓存删除（改变成未被追踪状态），然后再提交：

git rm -r --cached .
git add .
git commit -m 'update .gitignore'

展开全文 >>

vue-cli新建项目

#前端体系

  • 框架：Vue2.0
    1. MVVM轻量级渐进式框架
    2. 自底向上增量开发的设计，只关注视图层
    3. 易于上手，文档全中文
  • 构建工具：Vue-cli
    1. 成熟的vue项目结构设计
    2. 本地测试服务器
      1. webpack集成打包上线方案
  • PC组件库：ElementUI
    1. 饿了么团队开发维护的pc端组件库
    2. 完善的组件库 + UI设计库
    3. 相比bootstrap, elementUI的24栅格布局更具灵活性
  • 移动端组件库：VUX
    1. 易用，实用，美观的移动端UI组件库
  • html代码风格：h5最新标签
    1. header footer article section aside
  • css代码风格：less预处理语言
    1. 增加了诸如变量、混合（mixin）、函数等功能
    2. 可以嵌套式写法，可以更好维护css代码
  • js代码风格：es6
    1. 使用最新的es6语法开发新一代web前端应用
    2. 例如let、const、箭头函数、template string
  • 包管理工具：Npm
    1. 世界上最大的包管理器
  • 自动流打包工具：webpack（Vue框架） / gulp（不使用框架）
    1. webpack已集成在Vue-cli中
    2. gulp通过Npm安装使用
  • 代码格式统一工具：eslint（待定，要求太过严格，经常会报错）
    1. 代码规范和错误检查工具

###AngluarJS1 的劣势：

  1. 致命劣势：官方已经不在维护该框架，未来组件将不会得到更新，时间就了就会被淘汰
  2. 与最新的angular 2相比，完全不一样，与以后的版本脱离，很难升级
  3. 太重

###Vue2.0 的优势：

  1. 简单：官方文档很清晰，比 Angular 简单易学。
  2. 快速：异步批处理方式更新 DOM。组合：用解耦的、可复用的组件组合你的应用程序。
  3. 紧凑：20kb min+gzip，且无依赖。
  4. 强大：表达式 & 无需声明依赖的可推导属性 (computed properties)。
  5. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

#前端思想

  1. 用框架就不用JQuery
  2. 数据驱动页面
  3. 组件化编程

  1. 全局安装vue-cli
    sudo npm install -g vue-cli

  2. 生成项目
    vue init webpack gu-test

  3. 到达新建目录下
    cd gu-test

  4. 安装依赖
    sudo npm install

  5. 安装路由 网络请求 less
    sudo npm install vue-resource less less-loader json-server --save-dev
    npm install npm install vuex --save

  6. 开始运行
    npm run dev

  7. 生成服务器build
    npm run build

生成项目时的一些内容

  • Project name gu_vue （名称）
    Project description A Vue.js project （简介）
    Author gupan gupan@ieou.com （作者）
    Vue build standalone
    Install vue-router? Yes （是否安装路由）
    Use ESLint to lint your code? No （ESLint代码检查）
    Set up unit tests No （测试）
    Setup e2e tests with Nightwatch? No （测试）

展开全文 >>

three.js初上手

Cameras（照相机，控制投影方式）

Camera
OrthographicCamera 正交投影照相机
PerspectiveCamera 透视投影照相机

Core（核心对象）

BufferGeometry
Clock（用来记录时间）
EventDispatcher
Face3
Face4
Geometry
Object3D
Projector
Raycaster（计算鼠标拾取物体时很有用的对象）

Lights（光照）

Light
AmbientLight
AreaLight
DirectionalLight
HemisphereLight
PointLight
SpotLight

Loaders（加载器，用来加载特定文件）

Loader
BinaryLoader
GeometryLoader
ImageLoader
JSONLoader
LoadingMonitor
SceneLoader
TextureLoader

Materials（材质，控制物体的颜色、纹理等）

Material
LineBasicMaterial
LineDashedMaterial
MeshBasicMaterial
MeshDepthMaterial
MeshFaceMaterial
MeshLambertMaterial
MeshNormalMaterial
MeshPhongMaterial
ParticleBasicMaterial
ParticleCanvasMaterial
ParticleDOMMaterial
ShaderMaterial
SpriteMaterial

Math（和数学相关的对象）

Box2
Box3
Color
Frustum
Math
Matrix3
Matrix4
Plane
Quaternion
Ray
Sphere
Spline
Triangle
Vector2
Vector3
Vector4

Objects（物体）

Bone
Line
LOD
Mesh（网格，最常用的物体）
MorphAnimMesh
Particle
ParticleSystem
Ribbon
SkinnedMesh
Sprite

Renderers（渲染器，可以渲染到不同对象上）

CanvasRenderer
WebGLRenderer（使用WebGL渲染，这是本书中最常用的方式）
WebGLRenderTarget
WebGLRenderTargetCube
WebGLShaders（着色器，在最后一章作介绍）

Renderers / Renderables

RenderableFace3
RenderableFace4
RenderableLine
RenderableObject
RenderableParticle
RenderableVertex

Scenes（场景）

Fog
FogExp2
Scene

Textures（纹理）

CompressedTexture
DataTexture
Texture

Extras

FontUtils
GeometryUtils
ImageUtils
SceneUtils

Extras / Animation

Animation
AnimationHandler
AnimationMorphTarget
KeyFrameAnimation

Extras / Cameras

CombinedCamera
CubeCamera

Extras / Core

Curve
CurvePath
Gyroscope
Path
Shape

Extras / Geometries（几何形状）

CircleGeometry
ConvexGeometry
CubeGeometry
CylinderGeometry
ExtrudeGeometry
IcosahedronGeometry
LatheGeometry
OctahedronGeometry
ParametricGeometry
PlaneGeometry
PolyhedronGeometry
ShapeGeometry
SphereGeometry
TetrahedronGeometry
TextGeometry
TorusGeometry
TorusKnotGeometry
TubeGeometry

Extras / Helpers

ArrowHelper
AxisHelper
CameraHelper
DirectionalLightHelper
HemisphereLightHelper
PointLightHelper
SpotLightHelper

Extras / Objects

ImmediateRenderObject
LensFlare
MorphBlendMesh

Extras / Renderers / Plugins

DepthPassPlugin
LensFlarePlugin
ShadowMapPlugin
SpritePlugin

Extras / Shaders

ShaderFlares
ShaderSprite

[

赏

谢谢你请我吃糖果

](javascript:;)

展开全文 >>

小程序商品修改

首页页面

  • 已完成：
    1. 首页可以展示
    2. 推荐商品可以下滑一直加载更多
  • 未完成：
    1. 首页banner图和一些推荐广告页点击跳转页面
  • 后台待修改：
    1. banner图的获取方式是否有问题，index控制器里面index接口的$ad新加，一次加载全部

分类页面

  • 已完成：
    1. 可以正常展示分类
  • 未完成：
    1. 缺少分类的图片
  • 后台待修改：
    1. 缺少分类的图片，后台数据库没有传图片

分类点击后商品筛选列表页面

  • 已完成：
    1. 可以展示商品信息
  • 未完成：
    1. 暂未增加筛选功能，比如品牌，价钱之类
    2. 分页有问题，加载更多
  • 后台待修改：
    1. 分页有问题，good控制器里goodsList获取商品列表接口的分页不正常，我添加了两个参数代替原来$page 但是不起作用

购物车页面

  • 已完成：
    1. 可以展示，但是不能操作
  • 未完成：
    1. 大部分逻辑
  • 后台待修改：
    1. 缺少商品放入购物车后，立刻下单结算的接口和参数，没看明白后台的cart2 cart3 cart4几个接口的意思
    2. 缺少 + - 删除 商品数量的接口，没找到后台
    3. 用户登录后，购物车初始化时商品数量不正确，改过但是没改明白，比如有2个同样商品的，显示的还是1个
    4. 购物车的商品信息到前台，缺少商品图片

商品详情页面

  • 已完成：
    1. 可以展示商品详情，新加展示评论
    2. 可以收藏
  • 未完成：
    1. 加入购物车的商品规格未连通
    2. 不能取消收藏
  • 后台待修改：
    1. 待定

订单页面

  • 已完成：
    1. 无
  • 未完成：
    1. 无
  • 后台待修改：
    1. 购物车下单接口先跑通，在看订单

展开全文 >>

小程序逐帧图制作 

<canvas canvas-id="myCanvas" style="border: 1px solid;"/>

JS

onLoad: function () {
    var img = [];
    for (var i = 0; i < 40; i++) {
        img.push('../../images/frame1/' + i + '.png');
    }
    const ctx = wx.createCanvasContext('myCanvas');

    var currentIndex = 0;

    var aaa = setInterval(function () {
        frame(40);
    }, 100)

    function frame(num) {
        if(currentIndex<num){
            ctx.clearRect(0, 0, 2000, 2000);  //清空画布
            ctx.drawImage(img[currentIndex], 0, 0, 300, 150);
            ctx.draw();
            currentIndex++;
        }else{
            clearInterval(aaa);
        }
    }
}

开发者工具上会有点卡，真机上看流畅
本来用的是requestAnimationFrame
开发者工具可以用，但是真机是不兼容
所以用的setInterval

展开全文 >>

点击穿透飘浮元素

类似库博2项目 按钮上面飘浮着很多气泡 在气泡的css加上这条就可以不影响

pointer-events:none;

取值：

auto：
与pointer-events属性未指定时的表现效果相同。在svg内容上与visiblepainted值相同
none：
元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。
其他值只能应用在SVG上。

说明：

设置或检索在何时成为属性事件的target。
使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获（将会穿过父元素而指向位于其下面的元素）。
对应的脚本特性为pointerEvents。

展开全文 >>

.htaccess

.htaccess
如果没有的话验证码可能会出不来 需要从服务器下载一下

概述来说，htaccess文件是Apache服务器中的一个配置文件，它负责相关目录下的网页配置。通过htaccess文件，可以帮我们实现：网页301重定向、自定义404错误页面、改变文件扩展名、允许/阻止特定的用户或者目录的访问、禁止目录列表、配置默认文档等功能。
Unix、Linux系统或者是任何版本的Apache Web服务器都是支持.htaccess的，但是有的主机服务商可能不允许你自定义自己的.htaccess文件。
启用.htaccess，需要修改httpd.conf，启用AllowOverride，并可以用AllowOverride限制特定命令的使用。如果需要使用.htaccess以外的其他文件名，可以用AccessFileName指令来改变。例如，需要使用.config ，则可以在服务器配置文件中按以下方法配置：AccessFileName .config 。
笼统地说，.htaccess可以帮我们实现包括：文件夹密码保护、用户自动重定向、自定义错误页面、改变你的文件扩展名、封禁特定IP地址的用户、只允许特定IP地址的用户、禁止目录列表，以及使用其他文件作为index文件等一些功能。

展开全文 >>

gulp

  1. 全局安装 gulp：

npm install –global gulp

  1. 作为项目的开发依赖（devDependencies）安装：

npm install –save-dev gulp

  1. 在项目根目录下创建一个名为 gulpfile.js 的文件：

var gulp = require(‘gulp’);

gulp.task(‘default’, function() {
// 将你的默认的任务代码放在这
});

  1. 运行 gulp：

gulp

gulp合并插件

安装: npm install gulp-concat –save-dev

var concat = require(‘gulp-concat’); //引用
接下来，只要concat(‘xxx.js’)就算合并了。注意此时只是在内存中生成

前面我们学过管道的概念，因此代码整合非常简单
gulp.src([这里写上js]).pipe(concat(‘xxx.js’)).pipe(gulp.dest(‘目录’))

###1.编辑gulpfile.js

var gp = require('gulp');
var concat = require('gulp-concat');

gp.task("taskName",function(){
    // 把1.js和2.js合并为main.js，输出到dest/js目录下
    gp.src(['1.js','2.js']).pipe(concat('main.js')).pipe(gp.dest('./dest/js'));
})

###2.执行gulp任务

gulp taskName
1
第二个插件：压缩插件

安装：npm install gulp-uglify –save-dev
光合并没啥乱用，我们还需要压缩，减少网络传输

这个插件就更简单了
var uglify = require(‘gulp-uglify’);
uglify()即可，参数都不要

同样是编辑gulpfile.js

var gp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
gp.task("taskName",function(){
    // 把1.js和2.js合并压缩为main.js，输出到dest/js目录下
    gp.src(['1.js','2.js']).pipe(concat('main.js')).pipe(uglify()).pipe(gp.dest('./dest/js'));
})

执行这个任务后会生成压缩版的main.js

###3.gulp-minify-css（CSS压缩）
npm install –save-dev gulp-minify-css

可以使用它来压缩CSS文件
var gulp = require(‘gulp’);
var minify = require(‘gulp-minify-css’);

gulp.task('cssmini', function () {
    gulp.src(['css/*.css', '!css/*.min.css'])  //要压缩的css
        .pipe(minify())
        .pipe(gulp.dest('buildcss/'));
});

###4.gulp-minify-html（html压缩）
npm install –save-dev gulp-minify-html

可以使用它来压缩html文件.
var gulp = require(‘gulp’);
var htmlmini = require(‘gulp-minify-html’);

gulp.task('htmlmini', function () {
    gulp.src('*.html')
        .pipe(htmlmini())
        .pipe(gulp.dest('minihtml'));
})

https://segmentfault.com/a/1190000008349859

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家