阿里百秀
day1
再建立一个参考网站(已经完成):
1,用项目资料中的《04-参考代码》里的代码,通过phpstudy的vhosts.ini创建一个站点,比如:bx0.cn
2,在hosts文件中进行域名解析
3,用项目资料中的数据库脚本文件《01-sql》,创建数据库。
4,修改站点跟目录下的config.php文件中的数据库配置信息
5,浏览 http://bx0.cn
php中载入文件:
include_once ‘文件路径’;
include ‘文件路径’;
require_once ‘文件路径’;
require ‘文件路径’;
获取结果集中一行数据的3个方法:
mysqli_fetch_assoc( $结果集); //获得关联数组
mysqli_fetch_num( $结果集); //获得索引数组
mysqli_fetch_array( $结果集); //获两种都有的数组
day2
封装公共函数:
连接数据库的封装:
查询数据的封装:
1,字符串分割:
var categoryId = location.search.split(‘=’)[1];
2,函数调用:
function f1( $p1, $p2){
$result = $p1 + $p2;
return $result;
}
$re = f1( 1, 2);
(1) 参数:
(2) 返回值:
3,jquery中ajax的基本语法:
$.ajax({
url : ‘.....’,
//data : ‘categoryId=2&namejack&age=8’,
data : { categoryId:2, name:’jack’, age : 8 }
type : ‘post’,
dataType : ‘json’,
success : function ( result ){
}
});
4,接口传参与接收:
$id = $_GET[‘categoryId’];
$name = $_GET[‘name’];
或:
$id = $_POST[‘categoryId’];
$name = $_POST[‘name’];
5,jQuery中each方法的使用:
$.each(数组, function(i, item ){
i就是索引号
item就是数组的每一项(可能是对象,也可能是元素)
});
6,分页原理:
取出第1页,每页5条:limit 0, 5;
取出第2页,每页5条:limit 5, 5;
取出第3页,每页5条:limit 10, 5;
。。。。。。。
取出第n页,每页5条:limit (n-1)*5, 5;
7,ajax请求的接口文件中返回数据的合理形式:
$response = [
‘code’ => 0, //或者1(成功),0代表失败
‘msg’ => ‘返回的提示信息’,
‘data’ => 具体要返回的数据(如果有),
‘别的’ => 其他数据
];
echo json_encode( $response );
8,页面跳转传参:
(1) 分类导航
(2)详情链接:
day3
今日主要功能:
登录:
page1.php: $_SESSION[‘key1’] = ‘ok’;
page2.php: $v2 = $_SESSION[‘key1’];
抽离公共部分,
左侧导航的开关状态管理:
显示头像和昵称
显示分类列表。
跳转:
前端跳转:
location.href = 'page2.html';
后端跳转:
header("location: page2.html");
或:
header(“refresh: 3; url=page2.html”);
获取当前访问的文件名:
$finename = $_SERVER[‘PHP_SELF’]; //得到类似:”/admin/posts.php”
$filename = strrchr( $finename, ‘/’); //得到类似:”/posts.php”;
$filename = substr($filename, 1); //得到类似:’posts.php’;
Day4
添加分类:
1,使用ajax提交。
2,提交前的验证,需要考虑空白字符
es6中模板字符串:
var name = ‘jack’;
var age = 18;
var str1 = ‘我叫’ + name + ‘,年龄为:’ + age + ‘岁’; //传统拼接方式
var str2 = `我叫${name},年龄为${age}岁`; //模板字符串
var obj = {
name : ‘jack’,
age : 18
}
var str3 = `我叫${obj.name},年龄为${obj.age}岁`; //模板字符串
var arr = [
{
name : ‘jack’,
age : 18
},
{
name : ‘rose’,
age : 19
},
{
name : ‘tom’,
age : 20
}
];
var str4 = ``; //空字符串
for(var i = 0; i < arr.length; i++){
str4 += `我叫${arr[i].name},年龄为${arr[i].age}岁<br>`; //模板字符串拼接
}
两个php的数组处理函数:
array_keys:将数组的所有“键”取出,放到一个数组中,并返回该数组
array_values:将数组的所有“值”取出,放到一个数组中,并返回该数组
示例:
$_arr = [
'name'=>'jack',
'slug'=>'ss',
'classname'=>'fire'
];
$keys = array_keys($_arr); //结果$keys 为: ['name','slug','classname']
$vals = array_value($_arr); //结果$vals 为: [‘jack’, ‘ss’, ‘fire’]
数组和字符串的相互转换函数:
implode(): 将一个数组的所有值,用给定的字符串连接起来,得到一个字符串
示例:
$_arr = ['name'=>'jack','slug'=>'ss','classname'=>'fire'];
$str = implode( ‘ | ’,$_arr); //结果为:’jack|ss|fire’;
explode(): 将一个字符串,使用给定字符串“分割”出来,得到一个数组
示例:
$str = ‘aa,bb,cc’;
explode(‘,’ ,$str); //结果得到数组:[‘aa’, ‘bb’, ‘cc’];
explode(‘bb’, $str); //结果得到数组:[‘aa,’ , ‘,cc’];
explode(‘b’,$str); //结果得到数组:[‘aa,’, ‘’, ‘,cc’];
事件委托:
当一个页面中的元素不是在页面打开的时候就存在,而是在之后通过js动态生成,那么此时该元素就不能直接绑定事件,而应该用事件委托的方式进行绑定。
所谓事件委托,就是委托某元素的“一开始就存在的上级元素”原来绑定事件,然后,该元素触发了事件的时候,事件冒泡到该上级元素上,然后去触发事件处理函数。
形式:
$(上级元素).on(‘事件’, ‘实际触发事件的元素’, function(){ ... } );
Day5
1,jQuery操作属性的2个方法:
(1) $(xx).attr(): 用于操作一般性属性(含自定义属性),可以取值,也可以赋值。
(2) $(xx).prop(): 用于操作“状态属性”,可以取值,也可以赋值,值为true或false
大致有这些状态属性: checked, selected, disabled, readonly等。
2,mysql中的 in 语法:
语法形式: xx字段 in ( 值1,值2,.... )
基本函数以: 表示xx字段如果是in 后括号里罗列出来的值之一,就算满足了条件。
举例:
delete from categories where id in (3, 8, 10); //会删除id为3,8和10的数据。
3,js中对象属性的访问形式有两种:
var obj = {
name : ‘jack’,
age : 18
}
方式1: var v1 = obj.name //’jack’
方式2: var v2 = obj[‘name’]; //’jack’
4,多条件查询的最佳代码模式:
$where = “ where 1= 1 ”
//如果有第一个条件:
if( 有条件1 ){
$where .= $where . “ and 字段1=xxx ”
}
if( 有条件2 ){
$where .= $where . “ and 字段2=xxx ”
}
if( 有条件3 ){
$where .= $where . “ and 字段3=xxx ”
}
$sql = “select .... from xx表 “ . $where . “ limit {$offset}, {$pageSize}”;
Day6
1,$.ajax上传文件基本做法:
var file = 文件域.files[0];
var data = new FormData() //构建一个 FormData对象
data.append("file", file); //将文件添加到FormData中
$.ajax(
url : "xxx.php",
type : "POST",
data : data,
contentType : false,
processData : false,
success : function() { ... }
);
2,富文本编辑器的使用:
1,表现(展示)富文本编辑器
1.1引入 CKEditor.js插件
1.2, 有一个textarea文本域,id假设为:content
1.3,var myCkeditor = CKEDITOR.replace("content");//初始化编辑器
2,获得富文本编辑器中的内容恢复(更新)到textarea中:
$("保存按钮").on("click", function(){
myCkeditor.updateElement(); //更新数据到文本域
//剩下的工作,就是常规的$.ajax提交表单数据的工作了。。。
});
模板引擎的使用:
================================
1. 现在的做法:
================================
特别注意:此时,$data直接就代表传过来的数据本身(整体)
<script id="xxID" type="text/template">
模板中可以这样:{{$data}} //代表整体数据
也可以这样:{{name}} //代表数据中的name这项的值
</script>
var obj1 = {name: 'jack',age:18}
var html = template("xxID", obj1 );
----------------------------------------------------
<script id="xxID" type="text/template">
{{each $data val}} //$data代表整体,这里是一个数组
。。。。{{val.name}}.....{{val.age}}
{{/each}}
</script>
var obj2 = [ {name: 'jack',age:18} , {...} , {...} ]; //是一个数组
var html = template("xxID", obj2);
================================
2. 之前的做法:
================================
<script id="xxID" type="text/template">
{{each aa val}} //这个dd代表传过来的数据的dd这一项的值,即该数组
姓名:{{val.name}}
年龄:{{val.age}}
{{/each}}
</script>
var obj3 = [{name: 'jack',age:18} , {...} , {...} ]
var html = template("xxID", { aa: obj3 });
分页插件的使用:
凡是分页,都有:currentPage, pageSize, pageCount 这3个全局变量
$(function(){
getCommentsData();
function getCommentsData(){
$.ajax({
url : '...',
data : { currentPage : currentPage, pageSize : pageSize }
type : 'POST',
success : function(){
pageCount = res.pageCount;
.......模板引擎渲染数据.....
$('.pagination').twbsPagination(
first : "首页",
last : "末页",
next : "下一页",
prev : "上一页",
totalPages : pageCount, //总页数
visiblePages : 7, //显示的页码按钮数
onPageClick : function(event, page){
currentPage = page; //当前页
getCommentsData();
}
);
}
});
}
});
模块化管理工具的使用:
1,网页主文件中引入工具并设定入口js文件:
<script src="../static/assets/vendors/require/require.js" data-main="../static/assets/js/comments.js"></script>
2,设定入口js文件的代码:
(1) 配置模块:
require.config({
paths: {模块定义....},
shim: {依赖设定}
});
(2) 使用(引入)模块:
require( [模块数组], function(对应模块的别名){
具体的实现代码。
});
|
|