最近一直在做一个有关于ThinkPHP的前后分离的移动报表项目。记录从建彬师傅那里学到的知识以及自己遇到的一些问题

涉及到的知识点包含:jQuery、Vue、PHP、Echarts、Bootstrap、HTML+CSS+JavaScript。。。

js的push(),clone()
ThinkPHP的变量输出
memcached缓存机制
ThinkPHP通用项目结构

ThinkPHP3.2 笔记

1.js的clone()与push函数的一些生活纠纷

push()函数:向数组的末尾添加一个或多个元素,并返回新的长度。返回值是把指定的值添加到数组后的新长度
语法:arrayObject.push(newelement1,newelement2,….)

push() 方法可把它的参数顺序添加到 arrayObject(数组对象)的尾部。它直接修改 arrayObject,而不是创建一个新的数组,而是在原数组基础上修改。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能,该方法会改变数组的长度。

案例1:push()

1
2
3
4
5
6
7
var arr = new Array(3);
arr[0] = "chd";
arr[1] = "sjb";
arr[2] = "sgx";

console.log(arr);//输出原素组 ['chd','sjb','sgx']
console.log(arr.push("badwoman")); // 输出 4

PS:来了,push添加元素之后没有直接输出添加元素之后的数组,只显示了数组的个数(长度)

1
2
3
4
5
6
7
8
// 展示push后的新数组
var arr = new Array(3);
arr[0] = "chd";
arr[1] = "sjb";
arr[2] = "sgx";
arr.push('badwoman');
console.log(arr);
//输出结果为:['chd','sjb','sgx','badwoman']

js的clone()函数

js对象之间的赋值,如果直接用”=”会发现来两个对象还是同一个对象,改变其中一个另外的一个也会做出对应的改变。为了解决这个问题,可以利用java里面的clone的原理。
假设有这样一个场景:当存在一个公共数组(对象型)时,一个需要加{“name”:”chd”,”age”:18}另一个需要在数组尾加上{“name”:”sgx”,”age”:108}

1
2
3
4
5
let commonCondition=[{"id":15}];
let a={"name":"chd","age":18};
let b={"name":"sgx","age":108};
// 当我们利用a = commonCondition.push(a)时,此时原来的commonCondition也会跟着改变
// 赋值b = commonCondition.push(b)。此时,b中也会包含a的数据,此刻js的clone函数就出现了

js的clone()函数源代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function clone(Obj){
var o;
if (typeof obj == "object") {
if (obj === null) {
o = null;
} else {
if (obj instanceof Array) {
o = [];
for (var i = 0, len = obj.length; i < len; i++) {
o.push(this.clone(obj[i])); // 有可能不要this
}
} else {
o = {};
for (var j in obj) {
o[j] = this.clone(obj[j]); // 有可能不要this
}
}
}
} else {
o = obj;
}
return o;
}

即此刻,我们才有如下最正确的式子

1
2
3
4
let new_a = clone(commonCondition);
a = new_a.push(a);
let new_b = clone(commonCondition);
b = new_b.push(b);

2. thinkphp项目调用Vue扩展函数方式

2.1 导入vue扩展包.js文件

1
<script src="./cf.js"></script>

2.2 声明方法:新建一个与项目名同名的js文件,新增如下内容

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

Vue.prototype.项目名 = {
// 这里表示扩展函数
函数名一:function(obj){
...
},
函数名二:function(obj){
...
},

...
}

2.3 调用方法:Vue实例化名. 项目名.函数名()
Vue实力化名即:let app = new Vue({})中的app,经过测试后,调用方法为 项目名.函数名()

3.thinkPHP的变量输出知识<{:函数名/变量名}> 中的冒号":"表示引用调用函数,获取变量值

<{:U(query)}>:URL生成http://serverName/projectName/当前模块/当前控制器/声明的方法

1
2
3
默认的模板标签为:在config.php文件下更改设置
'TMPL_L_DELIM'=>'<{',
'TMPL_R_DELIM'=>'}>',

<{:I(‘name’,’chd’)}>中的I方法获取自定义参数值,不存在时,自定义默认值

I(‘get.name’); // 相当于 $_GET[‘name’]支持默认值:

2019-12-8 新增:
查看thinkphp3.2手册存在变量输出方式二:
在模板(即HTML文件)中输出变量的方式很简单,只需要我们在控制器给模板变量赋值:

1
2
3
4
5
6
7
$name = "ThinkPHP";
/*
@param $this->assign() 绑定,分配数据
@param ('name',$name)参数一:表示要在模板中引用的变量名,在不加$符号时,也要使用引号括起来
*/
$this->assign('name',$name);
$this->display(); // 将分配的数据在HTML页面展示

然后再模板中使用(注意模板标签的{和$之间不能有任何的空格,否则标签无效,普通标签默认开始标记是{,结束标记是 }。也可以通过设置TMPL_L_DELIM和TMPL_R_DELIM进行更)

1
2
3
4
5
hello,<{$name}>
<!-- 在模板编译后结果为:-->
Hello,<?php echo($name);?>
<!--这样就在HTML页面显示为:-->
hello,ThinkPHP

4. ThinkPHP的memcached缓存机制

4.1 下载安装memcached,并启动其服务

参考docker创建memecached容器
windows下ThinkPHP3.2.3使用memcache缓存

4.2thinkphp3.2中其实已经加入了memcached缓存机制,只需要在Conf/config.php配置数据缓存类型即可使用Memcache:

1
2
3
4
5
6
7
<? php 
return array(
'DATA_CACHE_TYPE' => 'Memcache', // 数据缓存类型
'MEMCACHE_HOST' => 'tcp://127.0.0.1:11211',
'DATA_CACHE_TIME' => '3600'
)
?>

5.ThinkPHP项目模块结构,参考此文章

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
project项目名:
|---Application:应用模块
|Admin后台模块
|Home前台模块
|---Controller控制器
|---IndexController.class.php
|---Model模型
|---IndexModel.class.php
|---View视图
|---index.html
|Common公共配置模块(不能直接访问)
|Runtime缓存模块
|---Public静态资源文件
|---ThinkPHP框架
|---index.php:入口文件
|---favicon.ico:网站图标
|---.htaccess:Apache配置文件(重写URL,修改访问权限)

未完待续。。。


 评论

联系我 | Contact with me

Copyright © 2019-2020 谁知你知我,我知你知深。此恨经年深,比情度日久

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议