在数组中，有一类关于连续字串最优解的问题，这个时候可以使用滑动窗口解法。

它的核心思想与对撞指针相似，维护两个指针，右指针遍历数组长度，当右指针前进到某一点不满足最优条件的时候，缩小窗口，左指针前进，重复这个操作直到右指针到达数组长度。

例子

以leetcode76号题目为例，该题需要寻找S的最小字串，其包含T的每一个字母。

按照滑动窗口的思想，两个指针间的字串必须满足题目中包含T每一个字母的要求，

所以初始的时候先移动右指针得到初始窗口：

1
2
3
4
5
6
7
8
9
10
11

do{
    r++;
    map[int(s[r])]++;
    match=1;
    for(int i=0;i<t.size();i++){
      if(map[int(t[i])]<test[int(t[i])]){
        match=0;break;
      }
    }
 } while(!match&&r<int(s.size()));

这个地方需要注意指针的含义，r,l是闭区间意味着在[l,r]中的字串都已经写入表中，之后再做是否满足条件的判断。当然这个地方也可以改成开区间，也就是说r是一个尾后指针，这样的话这部分代码就要改为这样：

1
2
3
4
5
6
7
8
9
10

while(!match&&r<=int(s.size())){
    		map[int(s[r])]++;
    		r++;
    		match=1;
    		for(int i=0;i<t.size();i++){
    			if(map[int(t[i])]<test[int(t[i])]){
                     match=0;break;
                }
    		}
    	};

初始化窗口之后，就可以开始移动另外一个指针，如果移动之后还满足条件，就重新取最优的字串，重复这个步骤直到右指针到达数组长度

1
2
3
4
5
6
7
8
9
10
11
12
13

while(r<int(s.size())){
    		while( map[int(s[l])]>test[int(s[l])] || 			                test[int(s[l])]==0){
    			map[int(s[l])]--;
    			l++;
    		}		
    		minLen=min(minLen,r-l+1);
			if(minLen==r-l+1){
				resultl=l;
				resultr=r;
			}		
			r++;
			map[int(s[r])]++;   	
    	}

这题还有一个巧妙的方法，就是可以把上面两个循环和为一个，增加一个变量count(匹配字串的个数)，如果count大于待匹配字串的长度的时候，可以认为已经把窗口拉到了满足条件的长度，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

for (begin = 0, end = 0; end < S.length();++end) {  
            if (needToFind[S[end]]<0) continue;  
                hasFound[S[end]]++;  
            if (hasFound[S[end]] <= needToFind[S[end]])  
                count++;  
            if (count >= T.length()) {  
                while (needToFind[S[begin]] == 0 || hasFound[S[begin]] > needToFind[S[begin]]) { //NOTE2: two level logica  
                    if (hasFound[S[begin]] > needToFind[S[begin]]) {  
                        hasFound[S[begin]]--;  
                    }  
                    begin++;  
                }  
                windowBegin = begin;  
                windowEnd = end;  
                if (windowEnd - windowBegin + 1 < minLength) {  
                    minLength = windowEnd - windowBegin + 1;  
                    windowEnd = end;  
                    windowBegin = begin;  
                    minStr = S.substr(windowBegin, windowEnd - windowBegin + 1);  
                }  
            }  
        }

完整代码可参考：http://blog.csdn.net/feliciafay/article/details/44535301

最近在刷题的时候遇到一个数组partition的坑，现记录下来。

三路快排的思想是用一个指针遍历，两个指针记录状态，思想简单但实现有一个坑点，那就是指针的边界问题处理，在书写数组程序的时候，一定要非常清楚指针的含义，搞清楚是开区间还是闭区间。

另外还要注意，分割元素的时候，与左边的元素进行交换，左指针和遍历指针要同时递增，与右边的元素进行交换，只有右指针递增。

闭区间的程序如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

void __quickSort3Ways(int arr[], int l, int r){
    // 随机在arr[l...r]的范围中, 选择一个数值作为标定点pivot
    swap( arr[l], arr[rand()%(r-l+1)+l ] );
    int v = arr[l];
    int lt = l;     // arr[l+1...lt] < v
    int gt = r + 1; // arr[gt...r] > v
    int i = l+1;    // arr[lt+1...i) == v
    while( i < gt ){
        if( arr[i] < v ){
            swap( arr[i], arr[lt+1]);
            i ++;
            lt ++;
        }
        else if( arr[i] > v ){
            swap( arr[i], arr[gt-1]);
            gt --;
        }
        else{ // arr[i] == v
            i ++;
        }
      swap( arr[l] , arr[lt] );
       __quickSort3Ways(arr, l, lt-1);
       __quickSort3Ways(arr, gt, r);
    }

在闭区间的情况下，左右两个指针指向最后一个元素，[lt+1,i)表示相等的元素，这个时候循环条件是i<gt ，意味着不用遍历到gt因为gt一定是大于分割元素的数值。

开区间的情况如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

void QuickSort3(T arr[],int L,int R){	
	if(R<=L)
		return;
	srand(time(NULL));
	swap(arr[L],arr[rand()%(R-L+1)+L]);	
	int lt=L+1;//[L+1,lt)
	int gt=R;//[gt,R)
	int eq=L+1;	//[lt,eq)
	while(eq <= gt){
		if( arr[eq] < arr[L]){
			swap(arr[eq],arr[lt]);
			lt++;
			eq++;
		}
		else if( arr[eq] > arr[L]){
			swap( arr[eq] , arr[gt] );
			gt--;
		}
		else
			eq++;
	}	
	swap(arr[L],arr[lt-1]);
	QuickSort3(arr,L,lt-2);
	QuickSort3(arr,gt+1,R);
}

与之前程序区别就在循环条件和最后交换的元素上，由于是开区间，eq等于gt的时候需要继续进行判断，最后交换的也是lt前一个元素。

总结

数组的题目经常容易陷入边界问题的坑，这个时候最重要的是搞清楚变量定义的含义是什么，开区间和闭区间对应的循环条件和循环不变量意义都不相同，需要特别注意。

最近发现flex布局有很多坑，自己对它的理解还不够深入。

flex布局父元素没啥好说的，就是一个justify-content设置水平对齐方式，alighitem设置垂直对齐方式。

对于flex布局的子元素，有三个设定值很关键

flex-basis

术语说是它占据的主轴空间，说人话就是这个子元素拥有的空间，默认拥有的空间当然是它自己大小，有什么用呢，这个属性可以帮助我们进行多级划分。最典型的就是多行布局应用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

    <style>
    .box {
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
    }
    .column {
        border: solid 2px red;
        flex-basis: 100%;
        display: flex;
        justify-content: space-between;
        /*控制横向对齐*/
    }
    .item{
        background-color: #08BDEB;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="column">
        <span class="item">1</span>
        <span class="item">2</span>
    </div>
    <div class="column">
        <span class="item">3</span>
        <span class="item">4</span>
    </div>
</div>
</body>

如上把column的主轴设为百分之百就可以对它进行进一步的划分，从而完成多行多列的布局。

flexgrow

这个属性之前一直有误解，之前只知道对它设置一个数值，它就会自动按比例划分，没有深究它的计算原理，其实它指的是对剩余空间的瓜分。也就是说先要父亲的长度减去所有子元素的flexbasis，如果有多，那就按权重分掉。计算公式如下：

剩余后宽度 w = (子元素flex-grow值 /所有子元素flex-grow的总和) 剩余值*

flexshrink

这个属性计算原理是，如果子元素的所有flexbasis加起来比父亲多，那么就要根据自身长度和那个权重进行缩放。计算公式如下

压缩后宽度 w = (子元素flex-basis值 (flex-shrink)/加权值) 溢出值

总结来说，就是flex布局的子元素设置flex属性后它就不会超出父元素，要么放大要么缩小。那如果我们要让元素溢出怎么办呢？应该这样设置：

1

flex:0 0 auto

这样元素就会按照本来的长度单方向布满。

值得一提的是flex属性由于历史原因还有一个相似的box属性，所以要做一个兼容处理

1
2
3
4

display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ 
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */ 
display: flex

但最近实践发现box和flex还是 有一点区别，就是如果不设置flex属性。box布局如果长度超出不会收缩，而flex布局会进行收缩，也就是说默认的flex-shrink不同。

最近发现自己记忆力下降，学的东西老是记不住，突然感觉自己这几个月看书敲代码都有一些盲目性，很久没有静下心来思考一下方法论这些东西。

代码学习的本质

在我看来，学习=专注力+理解力+归纳力

• 专注力

  专注力的核心是要让自己融入书里面，确切来说，你看的每一句话，每一行文档，你都要知道它在说什么。为了完全控制自己的不走神，最好把手机关机，告诉自己真正想要什么，是想要这一时刷剧打游戏的爽快，还是要未来拿到名企offer的快乐。自控力薄弱的时候多问问自己这些问题，多给自己一些心理暗示。

• 理解力

  很多东西都是看起来似乎你理解了，其实一直停留在表层，就比如js闭包，看一遍你觉得嗯顺其自然就这么回事，但如果停留在这一层，也就是停留在书里面循循善诱一步一步告诉你的一层，而不去想它能运用到什么场景，能解决什么问题，你能否徒手写一个能有实际应用的闭包出来，那你当然会忘得很快。理解的意义是要运用到实际，每学到一个知识点，都应该用博客记录下来，想想这个知识点对自己的代码有什么改进，平常什么时候能用上，要让这个东西成为自己的知识体系

• 归纳力

  归纳的本质是比较后的抽象，比如编程语言有很多，编程语言本质是要编写逻辑代码，所以你要掌握基本语句，基本数据结构，模块化方法，异常处理，IO处理，GUI编程等等 又比如之前用原生JS写组件，写了一两个就会发现大同小异，所以我们要利用归纳法抽象出来编组件的一些注意事项与一般方法，例如基本配置，事件处理，运动变量，变量控制等等。

  为了提高归纳力，每学一个知识点，一定要运用比较法，想一想该知识点与前面有什么联系，任何议题的提出都是有原因的，能否把它抽象成一般方法，它的核心思想是什么，把这些记录下来，写成给自己看的博客。

总之，看书看代码要多想想这些问题，方法是能够显著催化学习速度的。

项目地址：https://github.com/Neilai/widget/blob/master/code/scrollbar.js

核心思想

• 由于要通过鼠标控制滑动条移动的距离，所以我们必须要实时获取鼠标的位置。这涉及到了pagex，pagey，offsetparent属性
• 滑块移动的距离和内容区移动距离有一个转换比ratio，通过这个对两个距离互相转换
• 整个内容区包裹在一个box中，超出部分overhidden，需要通过改变top/left控制移动

具体实现

有几个变量必须非常明确含义 ：

• this._track_length

  它指整个滑块可移动区域的大小加上滑块的大小

• this._content_length

  它指整个整个内容区的大小（包括box外面）

• this._box_length

  box容器的大小

• this._thumb_length

  滑块的大小

• this._distance

  可移动区域的大小

• this._room

  内容留在容器外的长度

它们的初始化代码为

1
2
3
4
5
6

this._content_length = this.options.direction=="y"?this.$content.offsetHeight:this.$content.offsetWidth;
this._box_length = this.options.direction=="y"?this.$this[0].offsetHeight:this.$this[0].offsetWidth;
this._thumb_length = this._box_length/this._content_length*this._track_length;
this._distance = Math.max(this._track_length-this._thumb_length,0);
this._room = Math.max(this._content_length-this._box_length,0);
this.ratio = this._distance+this._room?this._distance/this._room:0;

注意滑块长度是动态设定的

接下来就是封装移动函数，移动的时候要注意的是滑块和内容都要动，转换根据ratio

1
2
3
4
5
6
7
8
9
10
11
12
13

slide:function(move) {
			var self = this;
			if (move > this._room) { //对滚轴移动范围做限制
				move = this._room;
			} else if (move < 0) {
				move = 0;
			}
			if (this._room >= 0) {
				var off=this.options.direction == "y" ? 'top' : 'left';
				this.$thumb.style[off]=move*this.ratio+"px";
				this.$content.style[off]=-move+"px";
			}
		},

接下来就是关键的滑动监听，由于滑块要跟着鼠标动，所以要实时获取移动值，鼠标位置的获取比较简单，但是滑块的相对位置获取需要offparent遍历：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

function offset(curEle) {
		var totalLeft = null,
			totalTop = null,
			par = curEle.offsetParent;
		//首先把自己本身的进行累加
		totalLeft += curEle.offsetLeft;
		totalTop += curEle.offsetTop;
	//	console.log(totalTop);
		//只要没有找到body，我们就把父级参照物的边框和偏移量累加
		while (par) {
			if (navigator.userAgent.indexOf("MSIE 8.0") === -1) {
				//不是标准的ie8浏览器，才进行边框累加
				//累加父级参照物边框
				totalLeft += par.clientLeft;
				totalTop += par.clientTop;
				//console.log(par,totalTop);
			}
			//累加父级参照物本身的偏移
			totalLeft += par.offsetLeft;
			totalTop += par.offsetTop;
			par = par.offsetParent;
		}
		return {
			left: totalLeft,
			top: totalTop
		};
	}

接下来绑定按下事件，目的是设定初值：

1
2
3
4
5
6
7
8

self.$track.addEventListener('mousedown', function(e) {
                self.isMouseDown=true;
                //self.$track.offsetParent=self.document
                self._track_offset = self.options.direction == "y" ? offset(self.$track).top : offset(self.$track).left;
                //鼠标位置与滑块最上部的插值
                self._cursor_position = self.options.direction=="y"?e.pageY-self._track_offset-self.$thumb.offsetTop:e.pageX-self._track_offset-self.$thumb.offsetLeft;
                setSelectable(self.body,false);
            }, false);

绑定移动时间时要注意，需要document绑定，因为滑块比较小….

1
2
3
4
5
6
7
8
9
10
11

this.document.addEventListener('mousemove', function(e) {
                if(self.isMouseDown){
                    var move = self.options.direction == "y" ? e.pageY - self._track_offset : e.pageX - self._track_offset;
                    if (self._cursor_position > 0 && self._cursor_position < self._thumb_length) {
                        move -= self._cursor_position;
                    }
                    //计算出移动距离
                    // console.log(self._room);
					self.slide(move/self.ratio);
                }
            }, false);

绑定滚动事件的时候要注意需要处理一下兼容性

1
2

var delta = -e.wheelDelta/120||e.detail/3;
			var move = this.options.direction=="y"?-this.$content.offsetTop+delta*this.options.steps:-this.$content.offsetLeft+delta*this.options.steps;

项目地址：https://github.com/Neilai/widget/blob/master/code/bannerha.js

一般思路

一个组件需要考虑以下几个部分

• 事件绑定

  哪几个元件会触发事件发生，需要绑定什么事件

• 动画变量的确定

  动画是由哪些变量控制的（例如本组件变化的变量是left）

• 哪些变量对动画变量有控制力

  例如本组件中需要点击圆圈也要产生动画，不同的圆圈产生移动不同的值，所以我们需要一个中间变量index去控制动画变量。

具体实现

• 整体架构和之前是一样的，传入元素后需要找到父容器并继承包裹函数r

• 初始化的时候，需要在第一张图片前加上最后一张图片，最后一张图片后加上第一张图片。

  1 2 3 4 5 6 7 8

  clone: function() { var fir = this.oUl.children[0].cloneNode(true), last = this.oUl.children[this.len - 1].cloneNode(true); this.oUl.appendChild(fir); this.oUl.insertBefore(last, this.oUl.children[0]); this.len = this.oUl.children.length; this.oUl.style.left = -this.liW + 'px'; },

• 然后按照缓冲运动的套路移动图片大小的距离，需要注意的是从最后一张移到第一张和从第一张移到最后一张都需要重置一下left

  1 2 3 4 5

  if (srty > -self.liW) {   self.oUl.style.left = -self.liW * (self.len - 2) + 'px';} if (srty < -self.liW * (self.len - 2)) {     self.oUl.style.left = -self.liW + 'px'; }

• 利用num变量记录现在到了第几张图，这样就可以直接利用circle的index计算需要的偏移量

  1 2 3

  var myIndex = i - (self.num - 1); var offset = -self.liW * myIndex; self.go(offset);

项目地址：https://github.com/Neilai/widget/blob/master/code/accordion.js

总体架构

由于要把代码组件化，模块化，所以需要规范化。整个JS文件由一个立即函数构成，最后输出一个window.accordion全局变量，这样可以防止其他变量污染作用域。

组件接收两个参数，一个是CSS选择器（获取容器元素），一个是参数项。

核心思想

• 充分利用模块化，整个代码核心是一个父容器对象，里面包括传入的设置，以及对象获取
• 充分利用继承机制，将事件绑定，初始化设置，动画模块写在原型链中
• 充分利用闭包 ，将列表dom封装和CSS选择器的解析放在r函数的闭包中

具体实现

• 首先需要将一些参数初始化，分别是：listsize(子元件的offsetwidth)，

  translatesize(exposesize到Listsize的差值)，并根据传入的是x还是y初始化需要用作动画的参数。

• 然后设定容器的宽度

  1	boxWidth = this.listSize + (this.list.length - 1) * this.exposeSize;

  它的长度等于每一个子元件长度加上其他子元件暴露长度

• 设定初始位置，根据listsize和exposesize

• 监听点击事件，如果某子元件点击了，从它开始往前的元件都要超传入方向移动translatesize。

1
2
3
4
5
6
7
8
9
10
11

for (var i = 0; i < this.list.length; i++) {
   (function(i){
      self.list[i].addEventListener('click', function() {
         self.setlistPos();
         for (var j = 1; j <= i; j++) {
            //左边距减小， 减小translate长度
            starmove(self.list[j],{[self.direction]:parseInt(self.list[j].style[self.direction]) - self.translate},self.params.speed)
         }
      } ,false);
   })(i)
}

核心思想

JS动画本质是利用setinterval模拟打关键帧，每一次调用修改speed控制缓冲运动的速度

注意点

• 获取style

  通常的直接style.attr 只能获取到内部样式，内嵌和外部样式无法获取，所以需要用getComputedStyle(obj, false)[attr] (火狐，谷歌)或者 currentstyle(IE)

  封装后如下所示：

  1 2 3 4 5

  function getStyle(obj, attr) {   if (obj.currentStyle) {         return obj.currentStyle[attr];   } else {     return getComputedStyle(obj, false)[attr];   }}

• 设置透明度

  IE和谷歌也有区别

  1 2	filter:alpha(opacity:30); opacity: 0.3;

动画框架实现

• 接收三个参数 obj,json,fn。 分别指向动画作用对象，属性最终结果，回掉。

• 每一个对象对应一个timer

• 每一个timer的操作中，需要对传入的所有属性进行遍历，只要有一个属性没有到预定的值，便把flag置为false

• 由于属性只能为整数，所以speed需要进行四舍五入

• 由于opacity的特殊性，需要单独判断

  完整代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

    //同时运动框架
    function startMove(obj, json, fn) {
        clearInterval(obj.timer);//清除定时器，避免重复生成多个定时器
        obj.timer = setInterval(function () {
            var flag = true;//假设刚开始时所有运动都已完成
            for (var attr in json) {//遍历json
                var icur = null;
//1.判断类型
                if (attr == 'opacity') {
                    icur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
                } else {
                    icur = parseInt(getStyle(obj, attr));
                }
//2.算速度
                var speed = (json[attr] - icur) / 10;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//3.检测停止
                if (icur != json[attr]) {
                    flag = false;
                }
                if (attr == 'opacity') {
                    obj.style.filter = 'alpha(opacity:' + (icur + speed) + ')';
                    obj.style.opacity = (icur + speed) / 100;
                } else {
                    obj.style[attr] = icur + speed + 'px';
                }
            }
            if (flag) {//当所有运动都完成时，清除定时器
                clearInterval(obj.timer);
                if (fn) {
                    fn();
                }
            }
        }, 30);
    }

项目地址：https://github.com/zaxlct/imooc-django

用户登陆与注册

login 中使用了Q方法区并集

1
2
3
4
5
6
7
8

class CustomBackend(ModelBackend):
    def authenticate(self, username=None, password=None, **kwargs):
        try:
            user = UserProfile.objects.get(Q(username = username) | Q(email=username))
            if user.check_password(password):
                return user
        except Exception as e:
            return None

重写authenticate()认证并添加配置,

1
2

AUTH_USER_MODEL = 'users.UserProfile'
AUTHENTICATION_BACKENDS = ('users.views.CustomBackend',)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

class LoginView(View):
    def get(self, request):
        return render(request, 'login.html')
    def post(self, request):
        login_form = LoginForm(request.POST)
        if login_form.is_valid():
            user_name = request.POST.get('username', '')
            password = request.POST.get('password', '')
            # 上面的 authenticate 方法 return user
            user = authenticate(username=user_name, password=password)
            if user is not None:
                if user.is_active:
                    login(request, user)
                    return HttpResponsePermanentRedirect(reverse('index'))
                return render(request, 'login.html', {'msg': '用户未激活！'})
            return render(request, 'login.html', {'msg': '用户名或者密码错误！'})
        return render(request, 'login.html', {'form_errors': login_form.errors})

表单验证，创建form

1
2
3

class LoginForm(forms.Form):   
  username = forms.CharField(required=True)  
  password = forms.CharField(required=True, min_length=5)

模板验证登陆状态

1

request.user.is_authenticated

注册功能传回form,可以提取每一个字段的value

1

{% if register_form.errors.email %} errorput {% endif %}

也可以自定义error

1

captcha = CaptchaField(error_messages={'invalid': '验证码错误！'})

django里面也有自带的发送邮件api

发送前需要作一些配置

1
2
3
4
5
6

EMAIL_HOST = 'smtp.qq.com'
EMAIL_PORT = 25
EMAIL_HOST_USER = '10581290@qq.com'
EMAIL_HOST_PASSWORD = 'scdxhwjinajgbjjc'
EMAIL_USE_TLS = True
EMAIL_FROM = '10581290@qq.com'

然后再调用

1

send_mail(email_title, email_body, EMAIL_FROM, [email])

发送邮件之后，需要保存链接的代码，然后通过路由(注意参数隐藏在正则表达式中)

1

url(r'^active/(?P<active_code>.*)/$', ActiveUserView.as_view(), name='user_active'),

改密码的逻辑是一样的，要注意密码是加密过的所以改的时候需要调用特定的函数

1

user.password = make_password(pwd2)

要注意修改页面只能通过发送的链接进入，然后再专门有一个视图处理POST修改请求

总结

这部分功能主要涉及的是表单操作，注意VIEW是核心枢纽，每次渲染页面的时候提供新的错位信息以及表单绑定数据。

授课机构

模板继承与组件化

页头页尾写在base中，再在其他地方使用extend继承

使用block实现重要部分内容的修改

上传文件保存目录的配置

1

MEDIA_URL = '/media/'MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

在model处地方

1

image = models.ImageField(default='', upload_to='org/%Y/%m', verbose_name='封面图', max_length=100)

分页采用了pure pagination插件

在view中获取分页插件传递过来的page变量，并作每页显示多少的配置

1
2
3
4
5
6

try:
    page = request.GET.get('page', 1)
except PageNotAnInteger:
    page = 1
p = Paginator(all_orgs, 2, request=request)
orgs = p.page(page)

模板代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<div class="pageturn">
    <ul class="pagelist">
      {% if all_orgs.has_previous %}
      <li class="long">
        <a href="?{{ all_orgs.previous_page_number.querystring }}" class="prev">上一页</a>
      </li>
      {% endif %}
      {% for page in all_orgs.pages %}
        {% if page %}
          {% ifequal page all_orgs.number %}
            <li class="active"><a href="?{{ page.querystring }}" class="page">{{ page }}</a></li>
          {% else %}
            <li><a href="?{{ page.querystring }}" class="page">{{ page }}</a></li>
          {% endifequal %}
        {% else %}
          <li class="none"><a href="">...</a></li>
        {% endif %}
      {% endfor %}
      {% if all_orgs.has_next %}
        <li class="long"><a href="?{{ all_orgs.next_page_number.querystring }}">下一页</a></li>
      {% endif %}
    </ul>
  </div>
</div>

从模板中可以看出，我们只要对前一页，中间页，后一页进行样式配置即可。

单页面切换

Vue中是利用组件实现，在django中通过传递参数给view，能够在同一页面获得不同的数据源，同时需要一个变量(city_id)标识现在所出的状态并以此控制样式(if-equal)。

1
2
3
4
5

{% for city in all_citys %}
  <a href="?city={{ city.id }}&ct={{ category }}">
    <span class="{% ifequal city_id city.id|stringformat:'i' %}active2{% endifequal %}">{{ city.name }}</span>
  </a>
{% endfor %}

切换还有一种方法是利用url字段，例如在主页面中

1
2
3
4
5
6
7
8
9
10

<li class="{% ifequal request.path '/' %}active{% endifequal %}"><a href="{% url 'index' %}">首页</a></li>
<li class="{% ifequal request.path|slice:'7' '/course' %}active{% endifequal %}">
  <a href="{% url 'courses:course_list' %}">
    公开课<img class="hot" src="{% static 'images/nav_hot.png' %}">
  </a>
</li>
<li class="{% ifequal request.path|slice:'12' '/org/teacher' %}active{% endifequal %}">
  <a href="{% url 'org:teacher_list' %}">授课教师</a>
</li>
<li class="{% ifequal request.path|slice:'9' '/org/list' %}active{% endifequal %}"><a href="{% url 'org:org_list' %}">授课机构</a></li>

它将url覅之进行切割判断，这里用了slice过滤器，取前几位

另外要注意参数传递的是字符串类型。所以利用了过滤器stringformat转换为字符串(i)

for循环填充数据的时候可以利用forlooper.counter获取index

同理，如果将数据进行排序，只要将sort传入view即可

1
2
3
4
5
6

# 排序
sort = request.GET.get('sort', '')
if sort == 'students':
    all_orgs = all_orgs.order_by('-students')
elif sort == 'courses':
    all_orgs = all_orgs.order_by('-course_nums')

异步表单的处理

为了简化代码量，可以利用model定义form

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

class UserAskForm(forms.ModelForm):
    # 还可以新增字段
    # price = forms.CharField(required=True, min_length=2, max_length=20)
    class Meta:
        model = UserAsk
        fields = ['name', 'mobile', 'course_name']
    # def clean_name(self):
    # def clean_course_name(self):
    def clean_mobile(self):
        # 手机号验证
        mobile = self.cleaned_data['mobile']
        p = re.compile('^0\d{2,3}\d{7,8}$|^1[358]\d{9}$|^147\d{8}')
        if p.match(mobile):
            # 这里还能返回外键
            return mobile
        raise forms.ValidationError('手机号码格式不对', code='mobile_inval')

这里面定义了一个以clean开头的函数进行数据清洗，验证数据是否合法

注意所有表单的后面要加上 csrf-token

后端的view需要返回一个json字符串

1

return HttpResponse(json.dumps(res), content_type='application/json')

由于django进行ajax请求的时候没有返回模板数据，所以要利用到jquery的dom操作

详情页面

注意跳转链接的写法

1

<a href="{% url 'org:org_home' org.id %}">

命名空间+名字+参数

通过id获取后台数据渲染前台页面，这个详情页面的本质是一个单页面应用，但是数据源没有同一性，所以我们要分别写四个页面，并通过标识参数取告诉前端应该显示怎样的样式。

详情页面收藏功能同样用到了jquery的ajax，但是这个不是一个表单，所以我们需要在jquery中增加一个配置

1

beforeSend: function (xhr, settings) {  xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");}

课程页面

模型层需要注意的是运用了反向取数据

1
2
3
4
5
6
7

#反向取数据
def get_zj_nums(self):   
	return self.lesson_set.all().count()
def get_learn_users(self):    
  	return self.usercourse_set.all()[:5]
def get_course_lesson(self):    
    return self.lesson_set.all()

这样只要在模板渲染的时候调用就好了

添加评论

这里运用ajax增加获取的变量，然后刷新页面

1

window.location.reload();//刷新当前页面.

用户登陆验证

自定义一个验证登陆的类

1
2
3
4

class LoginRequiredMixin(object):
    @method_decorator(login_required(login_url='/login/'))
    def dispatch(self, request, *args, **kwargs):
        return super(LoginRequiredMixin, self).dispatch(request, *args, **kwargs)

所有需要的只要继承这个类即可

个人中心

通过request.user取属性

头像图片上传

首先定义form

1
2
3
4

class UploadImageForm(forms.ModelForm):
    class Meta:
        model = UserProfile
        fields = ['image']

这样，在视图中就可以直接save

1
2
3
4

image_form = UploadImageForm(request.POST, request.FILES, instance=request.user)
res = dict()
if image_form.is_valid():
    image_form.save()

资料修改

注意修改的时候save会默认增加一个实例，所以我们要对instance进行赋值操作

用户退出

1
2
3
4

#用户登出class LogoutView(View):
def get(self, request):       
    logout(request)       
    return HttpResponsePermanentRedirect(reverse('index'))

其他处理

debug=true的时候需要配置一下static和media

1

url(r'^media/(?P<path>.*)$',serve, {'document_root': MEDIA_ROOT})

以及

1
2
3
4
5
6
7
8
9

if settings.DEBUG:
    # debug_toolbar 插件配置
    import debug_toolbar
    urlpatterns.append(url(r'^__debug__/', include(debug_toolbar.urls)))
else:
    # 项目部署上线时使用
    from imooc.settings import STATIC_ROOT
    # 配置静态文件访问处理
    urlpatterns.append(url(r'^static/(?P<path>.*)$', serve, {'document_root': STATIC_ROOT}))

总结

django的核心思想是view中处理模型交互以及渲染页面，是中枢，前端每次通过get view获得页面的数据源，每次get可以携带不同的参数这样就能获得不同的数据源来填充页面。如果是ajax请求来更新模型，请求后要么通过dom操作改变页面，要么重载页面，这也是django一个缺陷，必须要重新刷新更新数据源，这时的模板语法就没用武之地。在cookie处理方面，django利用了request对象，只要通过login方法登陆成功了，就可request.user取得想要的数据。

https://github.com/fishenal/vuejs-demo-project

项目地址：https://github.com/fishenal/vuejs-demo-project

layout布局

先构造出layout，把布局写好。

页头

由登陆注册关于退出构成，维护了一个username变量，如果登陆成功username被赋值，退出就会显示，按下退出，username就会被销毁。

弹框的实现

首先实现了最基本的弹窗布局，封装在dialog组件之中，可以传递isShow变量决定是否显示，通过发射onclose事件告诉父亲是否要关闭。

接着在dialog中引入logform组件实现登陆框布局，这是一个表单，它包括表单绑定的数据变量以及错误提示变量errorText

表单中值得注意的是使用了计算属性去验证表单字段

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

> userErrors () { > let errorText, status > if (!/@/g.test(this.usernameModel)) { > status = false > errorText = '不包含@' > } > else { > status = true > errorText = '' > } > if (!this.userFlag) { > errorText = '' > this.userFlag = true > } > return { > status, > errorText > } > }, >

usererror随着model字段变化而变化，同时显示在表单末尾。因为它是子组件，所以在按下登陆的时候，需要发射一个has-log事件并把表单字段传递给父亲。

layout中对弹窗的控制

功能都在组件中实现了，那么layout就只要控制弹窗的显示与隐藏，只需要将isShow与各自显示控制字段绑定即可。

组件路由

layout.vue中

1 2 3 4

> <keep-alive> > <router-view></router-view> > </keep-alive> >

实现路由到不同的页面

index页面

数据填充

在创建的时候就通过请求获取数据

1 2 3 4 5 6 7 8 9

> created: function () { > this.$http.get('api/getNewsList') > .then((res) => { > this.newsList = res.data > }, (err) => { > console.log(err) > }) > }, >

然后利用for循环将数据装入

1 2 3 4 5 6 7 8 9 10 11 12 13

> <div > class="index-board-item" > v-for="(item, index) in boardList" > :class="[{'line-last' : index % 2 !== 0}, 'index-board-' + item.id]"> > <div class="index-board-item-inner" > > <h2>{{ item.title }}</h2> > <p>{{ item.description }}</p> > <div class="index-board-button"> > <router-link class="button" :to="{path: 'detail/' + item.toKey}">立即购买</router-link> > </div> > </div> > </div> >

这段特别之处在于循环中使用变量来控制class，也就是说可以利用表达式构造自定义的class从而实现不同的css效果，上述代码借此实现奇偶项margin的不同以及不同块背景背景的不同。

轮播图组件

轮播图组件实现的核心是使用一个nowindex变量控制哪一张显示以及isShow属性控制css动画。有一个runinv方法定时切换以及一个clearinv当鼠标悬停时不轮播切换。同时，它可以接收父元素给的inv和图像。

detail页面

左边列表栏

利用v-for循环插入，特别之处在于active-class的绑定，这个可以指明选定该链接时应有的样式。

1 2 3 4

> <router-link v-for="item in products" :to="{ path: item.path }" tag="li" active-class="active"> > {{ item.name }} > </router-link> >

同时列表上方的图像也要根据不同的url而改变，所以建立了一个 url到图像的map

1 2 3 4 5 6 7

> imgMap: { > '/detail/count': require("../assets/images/1.png"), > '/detail/forecast': require("../assets/images/2.png"), > '/detail/analysis': require("../assets/images/3.png"), > '/detail/publish': require("../assets/images/4.png") > } >

同时控制图像显示的计算属性也会跟着url变化而变化

1 2 3 4

> productIcon () { > return this.imgMap[this.$route.path] > } >

同时也要修改route的路由，这是一个嵌套的路由

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

> let router = new VueRouter({ > mode: 'history', > routes: [ > { > path: '/', > component: IndexPage > }, > { > path: '/orderList', > component: OrderListPage > }, > { > path: '/detail', > component: DetailPage, > redirect: '/detail/analysis', > children: [ > { > path: 'analysis', > component: DetailAnaPage > }, > { > path: 'count', > component: DetailCouPage > }, > { > path: 'forecast', > component: DetailForPage > }, > { > path: 'publish', > component: DetailPubPage > } > ] > } > ] > }) >

单选，多选与下拉组件

都是由now-index控制状态，最终发射onchange事件将数据传给父亲。

1 2 3 4 5

> onParamChange (attr, val) { > this[attr] = val > this.getPrice() > }, >

在父组件中这样赋值写的有点像表单了，这样可以实时更新选到的数据类似v-model.

checkOrder组件

这个组件思想和上面类似，注意之处是点击完成后的路由跳转

1 2 3 4

> toOrderList () { > this.$router.push({path: '/orderList'}) > } >

总结

Vue的思想有两个

• MVVM

  Vue将事件监听以及dom操作都封装到ViewModel里面去了，将视图和控制分离，实现了双向绑定，所以我们不需要直接操作dom，只要对数据进行控制。这意味着我们要把编程重心放在如何绑定变量，如何绑定事件，如何写v-for循环控制，如何写v-if条件控制上，以及将需要实时改变的数据写入watch或者computed。用变量来表征dom的状态。

• 组件化

  一个页面根据布局进行拆分，父组件调用子组件就像函数调用一样，可以传递参数(利用prop)，子组件像函数一样可以return一个变量（利用事件发射）。同时，使用vue-router可以将页面同一个地方展示不同的组件，从而做到页面切换的效果。

扩展

该项目中vuex使用

利用vuex可以把那些异步请求写在store里面，vux维护了一个state，我们只要调用getters获取状态即可

1 2 3 4

> tableData () { > return this.$store.getters.getOrderList > } >

每一次需要ajax更新数据源时，只要分发 一个action

1 2 3 4 5 6 7

> this.$store.commit('updateParams', { > key: 'startDate', > val: date > }) > this.$store.dispatch('refreshList') > }, >