2016-09-18

today

2016-09-04

express

-

1	通过响应向响应头内写入cookie

2016-09-04

express

express介绍

1
2

express是nodejs的一个非常优秀的mvc框架，他对nodejs做了一定的封装，以方便程序员建立自己的web应用，
而不需要再使用nodejs原始的方法创建http服务。他只是一个工具，一个nodejs的模块。

使用express

引入这个模块
var express=require('express')
var app = express();
app是express的返回值，也是一个函数，接着我们就要使用app上的方法

监听方法

1 2	app.listen(端口号，function(){'success'}) 使用express就省略了很多代码，这一句就省略了用$http.createserver(function(req,res){}).listen()

路由(请求的方法和路径) path可以为*，方法可以为all

app.get('/',function(){})
/ 表示根目录
* 表示全部匹配
all 表示匹配到所有的方法

中间件（Middleware）是一个函数

app.use(function(req,res,next){}) 应用中间件
next()  决定了是否继续向下执行，有就执行，没有就不执行
app.use(function(error，req,res,next){})  错误中间件
next中传递错误,会被错误中间件接受 参数为四个参数的中间件
执行任何代码。修改请求和响应对象。
抽取了公有的属性和方法
路径默认为‘/’,开头路径可以匹配

EJS（以后要接触Jade）

EJS简介

1	EJS是一个JavaScript模板库，用来从JSON数据中生成HTML字符串。原理就是字符串拼接

三种绑定方式

<%= title%>   得到的就是<h1>hello zfpx</h1>，并不会渲染html
<%-title%>    hello zfpx   会渲染html
<%%>          嵌套js表达式
title  都是在server中已经声明定义过的，如：app.get('/',function (req,res) {                      
     res.render('1',{title:'<h1>hello zfpx</h1>',arr:[1,2,3],flag:false}); });

设置模版引擎(背)

第一种设置方式（一般不用）
app.set('view engine','ejs')
app.set('views',__dirname)   __dirname表示当前文件夹下的所有静态文件
第二种设置方式（常用）
app.set('view engnie','html')
app.engnie('html',require(''ejs).__express)
app.set('views',__dirname)
res.locals.title='123'
app.locals：这是一个函数对象，可以给它增加新的属性。程序内所有页面模板都能访问这个对象，所以可以用它保存全局配置变量供页面模板使用。
在response部分，有一个跟app.locals对应的res.locals。res.locals用于保存请求级变量，它的用法跟app.locals一样

渲染模版

1	res.render('1.ejs',function(error,data){})

静态文件的服务

1	app.use(express.static(__dirname));

发送文件

1 2	res.sendFile('./1.html',{root:__dirname}); {root:__dirname}：配置路径 res.sendFile(path.resolve('./1.html'));

解析请求体

npm install body-parser  安装插件
var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extented:true}));

2016-08-24

angular

AngularJs MVC

1
2
3

Model:数据模型层
View:视图层,负责展示
Controller:控制器，控制逻辑

1.模块化

1.1 创建模块

一切从模块开始
angular.module(name, [requires], [configFn]);
name：字符串类型，代表模块的名称；
requires：字符串的数组，代表该模块依赖的其他模块列表，如果不依赖其他模块，用空数组即可
configFn：用来对该模块进行一些配置。

2.控制器

2.1 创建控制器

1
2
3

通过模块创建控制器
angular.module('appModule').controller('appCtrl',function($scope){});
当前作用域$scope,$scope就是viewModel

2.2 控制器特点

controller和DOM平行
控制器可以声明变量和方法
控制器可以嵌套
子控制器可以继承父控制器

2.3 控制器的合理使用

不要复用controller
不要在controller中操作DOM
不要再controller里格式化数据
控制器之间交互是通过事件进行的

3.$scope和$rootScope

3.1 注入$scope和$rootScope

1 2	angular.module('appModule').controller('appCtrl',function($scope,$rootScope){}); 一般使用$rootScope时候都是多视图的项目中，为了达到一个元素多处使用的目的

3.2 初始化方法

1 2	通常情况下我们会将$rootScope上的代码提取声明 app.run(function($rootScope){});

3.3 防止代码压缩

app.controller('appCtrl',['$scope',function ($s) {
    $s.name = 'zfpx';
}]);
为了防止通过压缩工具压缩代码后$scope等名称改变报错，一般用数组来存储变量

4.$watch和$apply

4.1 $watch监听模型上的值

页面代码
<div ng-controller="appCtrl">
+    <input type="text" ng-model="name">
</div>

4.1.1 监听写法1:

app.controller('appCtrl',['$scope',function ($s) {
+        $s.$watch('name', function (newVal,oldVal) {
+            console.log(newVal,oldVal);
+        })
}]);

4.1.2 监听写法2:

app.controller('appCtrl',['$scope',function ($s) {
       $s.$watch(function () {
           return $s.name;
       }, function (newVal,oldVal) {
           console.log(newVal,oldVal);
       });
}]);

4.2 $watch监听方法

页面代码
<div ng-controller="appCtrl">
    <input type="text" ng-model="val1">
    +
    <input type="text" ng-model="val2">
    {{total()}}
</div>
控制器
app.controller('appCtrl',['$scope',function ($s) {
        $s.total = function () {
            return $s.val1+$s.val2;
        };
        $s.$watch($s.total, function (newVal,oldVal) {
            console.log(newVal,oldVal);
        })
}]);

4.3 $apply刷新视图

4.3.1 原生的方法不会刷新视图

页面代码
<div ng-controller="appCtrl">
    {{name}}
</div>
控制器
app.controller('appCtrl',['$scope',function ($s) {
        $s.name = 1;
        setInterval(function () {
            $s.name++
        },1000)
}]);
 setInterval并不是angular中的方法，不能使用，使用了$apply之后，强制刷新，就可以使用，也可以在agular中注入$interval的服务

4.3.2 通知视图刷新

通知方式1:导入服务
app.controller('appCtrl',['$scope','$interval',function ($s,$interval) {
    $s.name = 1;
    setInterval(function () {
        $s.name++;
        $s.$apply();
    },1000);
}]);
通知方式2:强制刷新
app.controller('appCtrl',['$scope','$interval',function ($s,$interval) {
    $s.name = 1;
    setInterval(function () {
        $s.$apply(function(){
            $s.name++;
        });
    },1000);
}]);

4.4 自带的指令会刷新视图

4.4.1 $timeout

app.controller('appCtrl',['$scope','$timeout',function ($s,$timeout) {
    $s.name = 1;
    $timeout(function () {
        $s.name++;
    },1000);
}]);

4.4.2 $interval

app.controller('appCtrl',['$scope','$interval',function ($s,$interval) {
    $s.name = 1;
    $interval(function () {
        $s.name++;
    },1000);
}]);

4.4.3 取消定时器

app.controller('appCtrl',['$scope','$interval',function ($s,$interval) {
    $s.name = 1;
    var timer = $interval(function () {
        $s.name++;
        $interval.cancel(timer);
    },1000);
}]);
使用cancle的方法，已经是angular自带的指令就不要在调用$apply去通知了

5.ng-href

表达式生效前不要加载该资源,防止空链接
<a ng-href="{{ myHref }}">baidu</a>
var app = angular.module('appModule',[]);
app.controller('appCtrl',function ($scope,$timeout) {
  $timeout(function () {
      $scope.myHref = 'http://www.baidu.com';
  },20000)
})

6.ng-src

表达式生效前不引用该资源,防止出现404
<img ng-src="{{imgSrc}}"/>
var app = angular.module('appModule',[]);
app.controller('appCtrl',function ($scope,$timeout) {
    $timeout(function() {
        $scope.imgSrc = 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png';
    }, 1000);
});

服务

1	服务是公用的方法，把控制器中相同的部分抽取出来封装成一个服务，什么时候用的时候就是把他注入到控制器中使用

注入服务

1 2	myModule.provider('自定义服务的名字',function(){this.$get=function(){return } 注：provider:定义服务

2016-08-22

NPM

NPM简介

1
2
3

NPM（node package manager），通常称为node包管理器。顾名思义，它的主要功能就是管理node包，
包括：安装、卸载、更新、查看、搜索、发布等。
它的一个很重要的作用就是：将开发者从繁琐的包管理工作（版本、依赖等）中解放出来，更加专注于功能的开发。

NPM的操作

初始化->创建一个package.json
1
输入：npm init

依赖列表

1
2
3

依赖的好处可以详细描述你的项目
所有的依赖要放入到依赖列表中
安装时加入到列表里

全局安装
所有带-g的都表示全局安装，可以在’命令行’下直接使用

1
2
3

npm install gulp -g
安装了一个gulp框架:gulp:基于文件流的构建系统；主要是方便以后项目上线的时候，自动进行js，css的合并，压缩，语法检查，监听文件变化（一般和3一起用）
在任何地方安装都可以 因为安装到全局下

发布包

创建用户
1
npm adduser

我们想发布我们包和 jquery一样，让别人使用

1
2
3

npm publish
发布之后去https://www.npmjs.com/-->登录(adduser起的名字就ok)查看
发布之后 可以让别人进行下载

查看目录安装

1	npm root -g

node npm 都可以在命令行下使用，我把它配置到path中了

本地安装

1
2
3

本地安装就是项目中要真正使用的
 一个叫开发依赖 例如webpack  --save-dev
一个叫依赖  jquery --save

包的卸载

全局卸载
1
npm uninstall gulp -g

本地卸载

1 2	npm uninstall jquery --save npm uninstall webpack --save-dev

npm的源的问题

切换源

1	npm install nrm -g

查看所有源

nrm ls

使用源

1	nrm use taobao

2016-08-22

Hexo

hexo简介

1	Hexo是一个开源的静态博客生成器,用node.js开发

创建一个博客

1. 准备工作

1
2
3

git
node.js
markdown编辑器

2.安装hexo

window

1 2	在window中，按下window+r---cmd进入命令窗口--nmp install hexo-cli -g -g表示在全局下安装，-g可以写在这句代码的人格位置

mac

1	在mac需要输入 sudo npm install hexo-cli -g

3.初始化博客

初始化博客

1	hexo init blog--初始化的项目是没有node_modules

安装所需要的模块

1
2
3

这里有两种：a.直接进入blog的文件夹输入指令--npm-install
            b.在别的文件下输入命令 cd blog&&npm-install
            是安装所需要的依赖

启动服务查看当前结构
1
输入--hexo server

新建文章

1
2
3

在启动服务后按ctrl+c结束此次服务
输入 hexo new '文章名'-->自动跳转至webstorm中-->在blog-->source-->_posts-找到我新建的文章
再次启动服务-输入当前的地址

更新文章

发布到github
下载hexo-deployer 插件
1
npm install hexo-deployer-git --save

修改config

deploy:
  type: git
  repo: <repository url>这里要修改成https://github账户名:密码@github.com/github账户名/github账户名.github.io.git
  branch: master
  message: push

部署（发布）

1 2	hexo deploy-->就可以在自己的github上看到已经发布的东西注意：当再次发布的时候，需要在hexo deploy前执行hexo g

2016-08-21

hexo.js

node 基础

git基础

添加缓存区
1
git add .

2016-08-21

Hello World

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 Start

Create a new post

1	$ hexo new "My New Post"

More info: Writing

Run server

1	$ hexo server

More info: Server

Generate static files

1	$ hexo generate

More info: Generating

Deploy to remote sites

1	$ hexo deploy

More info: Deployment

cookie

express

EJS（以后要接触Jade）

静态文件的服务

AngularJs MVC

1.模块化

1.1 创建模块

2.控制器

2.1 创建控制器

2.2 控制器特点

2.3 控制器的合理使用

3.$scope和$rootScope

3.1 注入$scope和$rootScope

3.2 初始化方法

3.3 防止代码压缩

4.$watch和$apply

4.1 $watch监听模型上的值

4.2 $watch监听方法

4.3 $apply刷新视图

4.4 自带的指令会刷新视图

5.ng-href

6.ng-src

服务

NPM简介

NPM的操作

依赖列表

发布包

查看目录安装

包的卸载

npm的源的问题

切换源

查看所有源

使用源

hexo简介

创建一个博客

1. 准备工作

2.安装hexo

3.初始化博客

发布到github

node 基础

git基础

Quick Start

Create a new post

Run server

Generate static files

Deploy to remote sites