阿里百秀
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(对应模块的别名){
具体的实现代码。
});
|
|
收藏
淘帖
踩
