A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 李二大爷 初级黑马   /  2019-6-21 13:56  /  889 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

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


0 个回复

您需要登录后才可以回帖 登录 | 加入黑马