备考1+x前端证书

发表于 | 分类于

Bootstrap

Bootstrap3和Bootstrap4 栅格系统的区别

.container固定宽度

.container-fluid 100%宽度

Bootstrap3

1
2
3
4
.col-xs(<768px)  超小屏幕
.col-sm(>=768px) 小屏幕
.col-md(>=992px) 中等屏幕
.col-lg(>=1200px) 大屏幕

Bootstrap4

1
2
3
4
5
.col-(<576px) 超小屏幕
.col-sm(>=576px) 平板
.col-md(>=768px) 桌面显示器
.col-lg(>=992px) 大桌面显示器
.col-xl(>=1200px) 超大桌面显示器

Bootstrap4 分页

1
2
3
4
5
6
7
<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Previous</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item active"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
  <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

核心类名 class=pagination pagination pagination 重要的类名敲三遍

当前页可以使用 .active 类来高亮显示 效果如下:

QQ截图20191211192453.png

Bootstrap4 下拉菜单

1
2
3
4
5
6
7
8
9
10
<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Dropdown button
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Link 1</a>
    <a class="dropdown-item" href="#">Link 2</a>
    <a class="dropdown-item" href="#">Link 3</a>
  </div>
</div>

核心类名

.dropdown 类用来指定一个下拉菜单。

.dropdown-menu 类来设置实际下拉菜单。

1
2
dropdown dropdown dropdown
dropdown-menu dropdown-menu dropdown-menu

Bootstrap4 折叠

1
2
3
4
5
<button data-toggle="collapse" data-target="#demo">折叠</button>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

核心类名 collapse

1
collapse collapse collapse

Bootstrap4 导航

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

核心类名 nav

1
nav nav nav

响应式导航栏

1
.navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。

例如

.navbar-expand-lg 就是大于lg的宽度 展示全部导航栏 小于则展示面包屑菜单 折叠导航栏

实操题重点

导航栏组件

1
.navbar

表单

堆叠表单

1
form-group

内联表单

1
form-inline

按钮

1
2
3
4
5
6
7
.btn
.btn btn-info 信息
.btn btn-primary 主要按钮
.btn btn-success 成功
.btn btn-info 信息
.btn btn-danger 危险
.btn btn-link 链接

输入框组

1
.input-group

列表组件

1
.list-group

css

背景颜色渐变linear-gradient

1
background: linear-gradient(to bottom,black,white)

to bottom 表示从上到下

to right 表示从左到右

to bottom right 表示从左上角到右下角 渐变

字体倍数

以 rem为单位 例如:

1
font-size: 2.25rem;

过渡属性transition

1
transition:设置过渡的属性名称 规定过渡效果几秒完成 规定速度曲线 定义过渡何时开始(延迟几秒后开始过渡)

过渡属性同常结合伪类使用

例如:

1
2
3
4
#content h2:hover {
	font-size: 2.25（13）;/* 设置字体大小为根元素大小的2.25倍 */
	transition: font-size 1s;/* 使用过渡，1s内标题字号变大 */
}

意思为 鼠标经过以后 1秒内 字体变大2.25倍

盒子阴影box-shadow

1
box-shadow: 10px 5px 10px #f00;

x轴 y轴 阴影大小 阴影颜色

JavaScript

获取dom对象的几种方式

通过id名获取标签

1
document.getElementById('id名') //获取的唯一一个dom对象

通过类名获取标签

1
document.getElementByClassName('类名') //获取的是一个数组

通过标签名获取标签

1
document.getElementByTagName('标签名') //获取的是一个数组

操作DOM

创建DOM对象

1
var div = document.createElement('div'); //创建div标签

把标签放在某个页面或某个标签中

1
父节点.appendChild(子节点)

删除节点

1
2
div.empty() 清空div标签的所有子标签和内容
div.remove() 清空标签所有子标签和内容 以及清空自己

遍历对象

foreach

1
2
3
4
var obj = {'name':'Sch0lar','age':'19','sex':'男'};
    Object.keys(obj).forEach(function(key){
        console.log(key,obj[key]);
    })

for in

1
2
3
4
var obj = {'0':'a','1':'b','2':'c'};
    for(var i in obj) {
        console.log(i,":",obj[i]);
}

ajax

之前对ajax并不熟练 考试要考所以重新整理一下

ajax对象的创建

主流浏览器 通过 new XMLHttpRequest()获得

老版浏览器 通过 new ActiveXObject("Microsoft.XMLHTTP") 获得

我们可以通过window.XMLHttpRequest来判断浏览器是否支持XMLHttpRequest()

QQ截图20191215144444.png

window.XMLHttpRequest 判断浏览器是否支持XMLHttpRequest()

ajax请求服务 服务器返回数据

1
2
3
4
5
6
7
8
xhr = new XMLHttpRequest();
xhr.open('get','test.php') 
//open和服务器进行交互。参数1请求方式 参数2 服务器地址
xhr.send()//发出请求
xhr.onreadystatechange = function(){ //监听
	if(xhr.readyState ==4 && xhr.status==200)
    alert(xhr.responseText);
}

图片1.png

get post区别

POST与GET不同的是 POST方式需要设置头信息，并将数据通过send()方法发送 

1
2
文件头信息
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

QQ截图20191215152620.png

QQ截图20191215152654.png

数据传输时字符串转码

QQ截图20191215154311.png

例如我只想传一个参数 content参数值为Sch0lar&age 可以看到这里&符号将age也解析为了一个参数 解决办法就是url编码

1
encodeURIComponent 函数进行转码 之后在输入到服务器

因为get方式有自解码机制所以 也不会有任何错误

1
encodeURIComponent(content);

QQ截图20191215154208.png

PHP

封装mysqli

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<?php
    //定义一个类
    class Mysqldb{
        public $host;
        public $user;
        public $pwd;
        public $dbname;
        public $charset;
        public $con;
        public function  __construct($config){
            $this->host = isset($config['host'])?$config['host']:'localhost';
            $this->user = isset($config['user'])?$config['user']:'root';
            $this->pwd = isset($config['pwd'])?$config['pwd']:'root';
            $this->dbname = isset($config['dbname'])?$config['dbname']:'xss';
            $this->charset = isset($config['charset'])?$config['charset']:'utf8';
            $this->connect();
            $this->selectDb();
            $this->setchart();
            
        }
        //封装对象
        public function connect(){
            $con = mysqli_connect($this->host,$this->user,$this->pwd);
            if(!$con){
                die('链接失败');
            }
            $this->con = $con;
        }
        
        //封装选择数据库
        public function selectDb(){
            mysqli_select_db($this->con,$this->dbname);
        }
        //封装设置字符集
        public function setchart(){
            mysqli_set_charset($this->con,$this->charset);
        }
        //封装获取资源
        public function query($sql){
            $res=mysqli_query($this->con,$sql);//返回的资源
            if(!$res){
                return false;
            }
            return $res;
        }
        //查询全部数据
        public function selectall($sql){
            $res = $this->query($sql);
            $arr = [];
            while ($row = mysqli_fetch_assoc($res)){
                $arr[] = $row;
            }
            return $arr;
        }
        //查询单条语句
        public function selectone($sql){
            $res = $this->query($sql);
            
            $row = mysqli_fetch_assoc($res);
            return $row;
        }
        
    }
?>

包含上面文件以后 即可调用mysqldb类

1
2
3
4
5
6
7
8
9
10
11
12
<?php
    function __autoload($class_anme){
        require './'.$class_anme.'.class.php';        
    }
    $arr1 = array(
        'host'=>'localhost'
    );	//传入数组 
    $db1 = new Mysqldb($arr1); //将数组传入类里
    $sql = 'select * from admin where id=1'; //构造sql语句
    $res = $db1->selectone($sql);	//sql语句带入到 selectone方法进行单条查询
    print_r($res);
?>

laravel

运行laravel项目

1
php artisan serve

创建laravel项目

1
composer create-project --prefer-dist laravel/laravel=版本号 项目名称

创建控制器

1
php artisan make:controller 控制器名

创建验证器

1
php artisan make:request 验证器的名称

图片1.png

创建模型

1
php artisan make:model 模型名

创建中间件

1
php artisan make:middleware 中间件名称

自己定义验证规则

1
2
3
4
5
用validate关键字
	required 必填 不能为空
	present 必填 可以为空
	filled 可不填 填时不能为空
	nullable 验证字段值可以为null