aoxin mobile project log

为什么80%的码农都做不了架构师？>>>   

伪静态配置

apache/httpd.conf

# Virtual hosts
Include conf/extra/httpd-vhosts.conf （去注释


<Directory />
    AllowOverride All
    Allow from all （添加代码
    Require all denied
</Directory>

extra/httpd-vhosts.conf

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "c:/wamp/www/brave/aoxin-shop-web/source" (修改
    ServerName aoxin.cn (修改
    ServerAlias www.aoxin.cn
    ErrorLog "logs/dummy-host.example.com-error.log"
    CustomLog "logs/dummy-host.example.com-access.log" common
</VirtualHost>

数据库导入

导入之前把站点config文件里的数据库配置先设好了，然后调出mysql console：

create database aoxin;
use aoxin;
source /PATH/aoxin.sql
source other.sql

注意导入sql文件的顺序，建表的先导，修改字段的后导入。

mobile页面修改

source/config/config.php

'pc' => 'mobile',

---

把注册界面嵌套进去了，设置了两个layout。

刚套宝贝详情界面……晕死，css总不对，还以为是自己的问题，……嗯嗯样式不对也可能是css文件有变动，所以直接再复制过去笨蛋……

git设置

git 做项目是要多commit多pull，不然到最后因为overwrite的warning不能提交很麻烦，前辈让做的设置

 git reset --hard FETCH_HEAD

然后记住账号密码！http://blog.csdn.net/xiangzi1113/article/details/9213667

项目/.git/config"文件 里增加两行：

[credential]    
    helper = store

---

CSS clearfix

接触到了很多frontend的东西，比如把很多定义好的东西放到common.css里很方便，

比如

.mag-top-10{margin-top:10px;}
.mag-left-10{margin-left:10px;}
.fl{float:left;}
.fr{float:right;}

然后class="mag-top-10 fl"

最后有一很重要的，使用了float属性后加个<div class='clearfix'></div>来清除属性，不然margin和padding都会失效。

.clearfix {clear: both;}

---

JS获取当前url,获取url参数

JS给人感觉很万能，使用函数要善用传参。比如function(this)

在做brand_zone.html时，销量和价格排序的tab切换，是用url传递到后台然后再把product传到前台，样式最开始想用Js切换，但是刷新后js就失效了，顺序：js改变样式，刷新，回到默认tab。

所以需要在window.οnlοad=function(){}这里改，但是页面中没有可以作为判断用的。所以想到了利用当前页面的url判断。

window.onload=function(){
		var url=document.URL;
		var es=url.split('=');
		if (es[1]=="price") {
			document.getElementById('sbg1').className='fl';
			document.getElementById('sbg2').className='on fl';
		}else{
			document.getElementById('sbg2').className='fl';
			document.getElementById('sbg1').className='on fl';
		}
}

log:前台数组unset无效，只能用{if:}判断

因为菜单foreach code的时候，有些是不用输出到前台，本来准备用unset取消，但是发现只是把值置为空，占位还在。所以只能用if来判断。

---

btn-back 标签绑定js

嵌套界面的时候发现固定的返回标志并没有加js，但是可以实现返回，在common.js下发现了如下代码：

$(function() {
	$('.btn-back').click(function() {
		window.history.go(-1);
	});
	$("li[id^='header-m-hd-li-'] a").click(function() {
		$(this).parent().addClass("on");
		var id = $(this).parent().attr("data-to");
		show_header_menu(id);
		$(this).parent().siblings().removeClass("on");
	});
});

iconfont 图形字体化    link

html界面用的是 &#xe60d;

在fonts/iconfont.svg中发现了这个字体：

   <glyph glyph-name="uniE60D" unicode="&#xe60d;" 
d="M342 295l406 393q18 17 18 41.5t-18 42t-43 17.5t-43 -17l-450 -435q-8 -8 -13 -19t-5 -22.5t5 -22.5t13 -20l450 -434q18 -17 43 -17q26 1 43 17q18 18 18 42.5t-18 41.5zM342 295z" />

svg[scalable vector graphics]优势：矢量图形，css定义颜色，图标集中在一个文件，节省http请求

<glygh>  

A glyph defines a single glyph in an SVG font.    ————SVG/MDN

---

2015.1.25  跨页面传值

在嵌套地址管理和编辑页面的时候，因为被要求尽量不动后台，所以很麻烦。

管理页面的数据要传到编辑页面，想的是可以用url，cookie，session。

最后实在是……js用session也不现实，主要页面用了{foreach}，后台语言和前端语言混用也不行。。。。

决定用js把id传过去，再在那个页面取信息：

function addrtrans(key){
	var url="{url:/ucenter/addr_edit}"+"/"+key
	location.href=url;
}

{echo:JSON::encode($item)}

↑感觉主要就坑在这儿了……，因为JS变量直接取var= {$item}然后alert(typeof var),类型居然是function，震惊了。

JS对象与数组与字符串转换，都要掌握。以为json就是字符串，才知道有json对象，因为{echo:JSON::encode($item)}得到的就是json对象。

location.href=url 跳转
strs=url.split("/");  字符串分割为数组

b = JSON.stringify(var); json对象转为json字符串

其他地方copy来的方法：

字符串转对象(strJSON代表json字符串)
  var obj = eval(strJSON);
  var obj = strJSON.parseJSON();
  var obj = JSON.parse(strJSON)；
json对象转字符串(obj代表json对象)
  var str = obj.toJSONString();
  var str = JSON.stringify(obj)
运用时候需要除了eval()以外需要json.js包（切记哦）

终于写完了，js自动填充表单代码：

//DOM加载完毕
$(function(){
	//初始化地域联动
	template.compile("areaTemplate",areaTemplate);
	// createAreaSelect('province',0,'');
	
	//自动填写表单
	var url=document.location.href;
	strs=url.split("/"); 
	var id = strs[strs.length-1];  
	if (id=="addr_edit") {
		 createAreaSelect('province',0,'');
	}else{
		var obj,b;
		{foreach:items=$_SESSION['addr'] key=$key}
			if (id=={$key}) {
				obj = {echo:JSON::encode($item)};
			};
		{/foreach}
		form.id.value=obj.id;
		form.accept_name.value=obj.accept_name;
		form.address.value=obj.address;
		form.zip.value=obj.zip;
		form.mobile.value=obj.mobile;
		createAreaSelect('province',0,obj.province);
		createAreaSelect('city',obj.province,obj.city);
		createAreaSelect('area',obj.city,obj.area);
		{set:$flag=true;}
	}

});

因为需要离开页面的时候清楚session，所以设置了一个flag:

//清除session
	window.beforeunload =function(){
		{if:$flag==true}
			{set:unset($_SESSION['addr'])}
		{/if}
}

    js总结：

• split()    //分割字符串

• array.length  //数组长度

• window.beforeunload =function(){}    //页面离开前事件

• document.location.href  //获取url

• location.href     //跳转url

• javascript:void(0)     //link

---

2016/1/16 ajax请求并更新页面

昨晚敲代码到2点，今天周六又工作了一天，这么勤奋的自己……

function defaultAddr(addrid){		
	{foreach:items=$this->address key=$key}
	if (addrid=={$item[id]}) {
	$.ajax({
		url: "{url:/ucenter/address_default/id/$item[id]/default/1}",
		method: 'post',
		async: false,
		success: function(content) {
		$("#main").html(content);
		},
		cache: false
		});
	};
	{/foreach}				
}

success后id为main的页面就被ajax请求返回的content更新了~

button提交表单：

onclick="$('#user_info').submit()"

<input>radio属性选中：

checked=checked    //html选中
$("#paym-1").attr("checked",true);  //js选中

AJAX局部更新：

 $("#content").load(location.href+" #content>*","");

js选中radio：

$("#id").attr("checked",true);

JS选中SELECT 的value：

$("#id").val("{$value}"）;

---

2016/1/19 apache forbidden

都是因为一句：require local

在<Directory "c:/wamp/www/">下把这句注释掉然后加Allow From All。

下面的确定：

<Directory />
    AllowOverride All
    Allow From ALl
</Directory>

LoadModule rewrite_module modules/mod_rewrite.so    // 一般这里的注释也要去掉

有一种设置alias conf的办法，可以直接在wamp根目录下的vhosts文件夹新建project.conf来单独为项目设置伪静态。

然后在http.conf里把    IncludeOptional "c:/wamp/vhosts/*" 这句的注释去掉

---

2015/1/21 生成缩略图

页面一些固定大小小图如果都要去数据库如果每次都去数据库请求是很浪费流量的，所以一般都会采用生成缩略的方法。

当然设置百分比的是需要响应式的就不用改。

图片的url格式：

<a href="{url:$item[url]}"><img src="{url:/pic/thumb/img/$item[img]/w/395/h/206}" alt="{$item['name']}" /></a>

加个<a>就可以实现点进去查看的是大图然后页面显示缩略图。

在controller文件夹下发现了pic.php中的thumb方法：

public function thumb()
	{
		//配置参数
		$mixData = IFile::dirExplodeDecode(IReq::get('img'));
		if($mixData)
		{
			preg_match("#/w/(\d+)#",$mixData,$widthData);
			preg_match("#/h/(\d+)#",$mixData,$heightData);

			if(isset($widthData[1]) && isset($heightData[1]))
			{
				$imgSrc = str_replace(array($widthData[0],$heightData[0]),"",$mixData);
				$width  = $widthData[1];
				$height = $heightData[1];

	    		if(is_file($imgSrc))
	    		{
		 			$thumbSrc   = Thumb::get($imgSrc,$width,$height);
		 			$fileExt    = pathinfo($thumbSrc, PATHINFO_EXTENSION);
	                $mtime      = filemtime($thumbSrc);
	                $gmdate_mod = gmdate('D, d M Y H:i:s',$mtime).' GMT';

					header('Last-Modified: '.$gmdate_mod);
		 			header('Expires: '.gmdate('D, d M Y H:i:s', time() + (60*60*24*30)) . ' GMT');
		 			header('Content-type: image/'.$fileExt);
		 			header('Content-Length: ' .filesize($thumbSrc));
					readfile($thumbSrc);
	    		}
			}
		}
        return '';
	}

dirExplodeDecode是在lib里路径转义方法，把'/'进行解义：

public static function dirExplodeDecode($dir)
	{
		$dir  = strtr($dir,array("@_@" => "/","@@_@@" => "+"));
		return ICrypt::decode($dir,IWeb::$app->config['encryptKey']);
	}

strtr

(PHP 4, PHP 5, PHP 7)     strtr — Translate characters or replace substrings

string strtr ( string $str , string $from , string $to )

string strtr ( string $str , array $replace_pairs )

设置default pic

  <img class="fl " src="{if:$tmpIMG} {url:/pic/thumb/img/$tmpIMG/w/100/h/100} {else:} {webroot:images/nopic.png} {/if}">

2016/1/28

这周正式开始测试，debug

js检查checkbox是否被选中：

if（document.getElementById("subPro").checked）

转载于:https://my.oschina.net/sikou/blog/595222