概况

  1. 熟悉HTML5、CSS3、JavaScript、ES6规范
  2. 熟悉JQuery框架
  3. 熟悉BootStrap
  4. 熟悉Less、Sass
  5. 熟悉Vue
  6. 熟悉Git
  7. postman

Bootstrap

布局

  • container 固定容器
  • container—fluid 流体容器

栅格系统

  • .col- 针对所有设备
  • .col-sm- 平板 - 屏幕宽度等于或大于 576px
  • .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
  • .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
  • .col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

对其与排列

  • .align-items-star row垂直居上
  • .align-items-center 垂直居中
  • .align-items-end 垂直居下
  • .align-self-star col垂直居上
  • .align-self-center垂直居中
  • .align-self-end 垂直居下
  • .justify-content-star row水平居左
  • .justify-content-center 水平居中
  • .justify-content-end 水平居右
  • .justify-content-between 两端对齐
  • .offset-md-4 往右移动4个单位
  • .order-n 。。。。

表格类

  • .table 基础
  • .table table-sm 小表格
  • .table table-striped 条纹
  • .table table-hover 悬停变灰
  • .table table-dark 暗黑表格(不好看)
  • .table table-bordered 带边框
  • .table table-borderless 不带任何边框
  • .table-success 等等
  • 父类.table-responsive-sm 响应式滚动表格
  • th类 .thead-dark
  • tr类 .table-success

边框

  • .boder 基础类
  • .boder-success等
  • .boder-left 左边显示
  • .boder-left-0 左边不显示

图片

  • .rounded 圆角
  • .rounded-left 圆角左
  • .rounded-circle 椭圆
  • .img-thumbnail 缩略图带边框
  • .img-fluid 响应式

文本效果

  • .text-hide seo优化
  • .text-success
  • .bg-success
  • .text-center 水平居中
  • .text-nowarp 不换行
  • .text-break 不换行
  • .text-reset 不变色
  • .text-decoration-none
  • .font-weigth-bold 加粗

工具类

  • .align-middle 垂直居中
  • .display-1 .display-2, .display-3, .display-4 标题
  • .p-5 padding
  • .m-5 margin
  • .pb-5 下padding
  • .mb-5 下maigin
  • .px 左右
  • .py 上下
  • .mx
  • .my
  • .w-25 25%宽度 取值25 50 75 100
  • .h-25 25%高度 取值25 50 75 100
  • .d-block display设置类 d-md-none 响应式
  • .mw- .mh- 最大宽高
  • .muted 字体淡化
  • .shadow-md 阴影
  • .overflow-auto\hidden
  • .visible\invisible 显示隐藏
  • .close 关闭按钮类
  • .float-left 浮动
  • .claerfix 父级元素用于清除浮动

div提示框

  • .alert
  • .alert-success
  • .fade show 淡出
  • button .close data-dismiss-alert 关闭按钮

徽章与面包屑导航

  • .badge 【badge-primary】 可替换
  • .badge badge-pill badge-primary 药丸徽章
  • ul class="breadcrumb" li class="breadcrumb-item"

按钮

  • a,button,input 都可以使用
  • .btn 基本按钮
  • .btn btn-primary 主要按钮
  • .btn-outline-primary 主要边框
  • .btn btn-link
  • .btn-lg 大
  • .btn-block 100%宽度按钮
  • .btn-group- 创建按钮组
  • .btn-group-vertical 创建垂直按钮组
  • .btn-group btn-group-lg 定义按钮组大小

卡片与列表

  • 父级:.card 子级:.card-header .card-body .card-footer
  • .card-title .card-text .card-link 位于.card-body子元素内部
  • .card-img-top 图片插入卡片
  • .columns 祖父级 瀑布流卡片
  • 卡片中插入ul列表组
  • ul.list-group .list-group-flush
  • li.list-group-item .list-group-item-success .list-group-item-action .list-group-item-flush

导航与滑动门

  • ul .nav
  • .nav .flex-column 垂直导航
  • .nav .nav-tab tab标签选项卡
  • .nav .nav-pills 胶囊选项卡
  • .nav .nav-fill 水平布局
  • .nav .nav-justified 等宽
  • li .nav-item .nav-link
  • 滑动门
  • .nav .nav-tabs data-toggle=tab
  • .table-content
  • .tab-pane .fade show id

分页和进度条

  • ul.pagination pagination-lg
  • li.page-item .page-link
  • 父类.progress
  • 子类.progress-bar bg-success style="width:70%"
  • .progress-bar progress-bar-striped 带条纹
  • .progress-bar progress-bar-striped progress-bar-animated 带条纹动画

旋转特效与大块屏

  • .jumbotron 灰色背景容器
  • .jumbotron jumbotron-fluid 灰色背景容器
  • .spinner-boder text-info longding小图
  • .spinner-grow 圆形loading

图文混排

  • .media
  • img --- .media-body

颜色

  • info
  • warning
  • danger
  • primary
  • secondary
  • dark
  • light

JQuery

常用选择器

代码 说明
$(window) window选择
$(xx).("xx:eq()") 过滤选择
$(xx).("xx:odd") 奇数选择
$(xx).("xx:even") 偶数选择
$(xx)..parent() 父代选择
$(xx)..children() 子代选择
$(xx)..find() 后代选择
$(xx)..siblings() 兄弟选择
$(xx).eq() 索引选择
$(xx).first() 首个选择
$(xx).last() 末个选择
$(xx).filter() 存在选择
$(xx).not() 排除选择
$(xx).next() 下一个
$(xx).prev() 上一个
$(xx).nextAll() 下一堆
$(xx).prevAll() 上一堆

常用效果

代码 说明
hide(speed,callback()) show() toggle() 显示/隐藏
fadeIn(speed,callback()) fadeOut() fadeToggle() fadeTo(speed,opcaity) 淡出/淡出
slideDown(speed,) slideUp() slideToggle() 滑入/滑出
animate({attr:value},speed,swing) linnear,回调函数)动画

捕获与设置

代码 说明
text() 捕获文本
html() 捕获HTML
val() 捕获值
attr() prop() 捕获属性
css() 捕获样式

节点方式

代码 说明
$("

")

创建节点
get(0) 获取节点DOM对象
append() 追加
appendTo() 追加到
before() 在前添加
after() 在后添加
empty() 清空子元素
remove() 自杀元素

类的操作

代码 说明
addClass() 添加类
removeClass() 移除类
hasClass() 判断类
toggleClass() 切换类

常用尺寸

代码 说明
width() height() content的宽高
innerWidth() innerHeight() padding的宽高
outerWidth() outerHeight() padding+border+margin的宽高
offset() 相对于document偏移量 返回对象
position() 相对于父级元素偏移量 返回对象
scrollLeft() scrollTop() 滚轮

事件对象

代码 说明
e.screenX() e.screenY() 屏幕长宽
e.clientX() e.clientY() 可视长宽
e.pageX e.pageY 获取页面长宽
e.keycode 获取按键码
e.target 获取锚点对象
e.stopPropagation() 阻止冒泡
preventDefault() 阻止默认行为
return false; 阻止冒泡和默认行为

AJAX

  • $.ajax({url:xxx,data:{xx:xx},success:fun(){}})
  • $(xx).load(URL,data,callback)
  • $.post(url,date,callback)
  • $.get(url,date,callback)

补充

  • 委托注册:$(xx).on("event","selector",function(){this指向selector})
  • 解绑事件:$(xx).off("event")
  • 触发事件:$(xx).trigger("event")
  • 克隆节点:$(xx).clone()
  • 回到上一个状态:end()
  • 显示迭代:$(xx).each(function(index,element){})
  • 取消$使用权限,返回值可替代$$.noConflict()

插件

回顶部

let goTop;
goTop = {
top: 0,
exe: (time = 10) => {
goTop.makeButton('white');
goTop.getTop();
$('#gotop').click(() => {
goTop.run(time);
})
},
makeButton: bgc => {
let $btn = $('<div></div>');
$btn.attr('id', 'gotop')
.text('^')
.css({
display:'none',
width: 50,
height: 50,
backgroundColor: bgc,
textAlign: 'center',
fontSize: 40,
userSelect: 'none',
cursor: 'pointer',
position: 'fixed',
bottom: 100,
right: 100,
borderRadius: 5
}).appendTo('body');
},
getTop: () => {
let t=0;
$(window).scroll(() => {
if(goTop.top > 10){
$('#gotop').fadeIn('slow');
}else {
$('#gotop').fadeOut('slow');
}
goTop.top = $(window).scrollTop();
//console.log(goTop.top);
})
},
run: time => {
let timer = setInterval(() => {
if (goTop.top <= 0) {
goTop.top=0;
clearInterval(timer);
$('#gotop').fadeOut('slow');
return false;
}
goTop.top -= 50;
$(window).scrollTop(goTop.top);
}, time);
}
}; $(() => {
goTop.exe();
})

GIT

$ git config --global user.name 'botao'
$ git config --global user.email 2867970722@qq.com
  • git init 【name】
  • git clone url
  • git add .
  • git status
  • git rm
  • git remote add origin <远程仓库地址> //绑定远程仓库
  • git commit -m"测试版本1.0.0"
  • git remote -v
  • git push origin master
  • git pull origin master

webpack

--open//打开浏览器
--port 8848//设置端口
--hot//热部署(引入)
//初始化
npm init
cnpm i webpack webpack-cli -D
//自动打包
npm install webpack-dev-server -D
json配置:webpack-dev-server --open npm install css-loader -D
npm install style-loader -D
npm install url-loader -D
npm install file-loader -D npm install less -D
npm install less-loader -D npm install node-sass -D
npm install sass-loader -D npm install bootsrap@3 -S config配置:
model:{
rules:[
{
test:/\.css$/,
use:["style-loader","css-loader"]
},
{
test:/\.(png|jpg|git)$/,
use:["style-loader","url-loader"]
},
{
test:/\.less$/,
use:["style-loader","css-loader","less-loader"]
},
{
test:/\.sass$/,
use:["style-loader","css-loader","sass-loader"]
}
{
test:/\.(svg|eot|ttf|woff|woff2)$/,
use:"url-loader";
}
]
}

Vue

指令

  • v-cloak 设置该属性css的display:none即可解决插值表达式的闪烁问题{{}}
  • v-text 可以渲染文字内容
  • v-html 可以选择html标签
  • v-bind:attr 绑定属性 使得属性值可以从data中获取 缩写 :
  • v-model="msg" 双向绑定
  • v-on:event 绑定事件 缩写 @
  • v-for="item in arr" :key="item.id"
  • v-if="true/false" 删除或者添加元素 (单次切换)
  • v-show="true/false" 切换display (频繁切换)

事件修饰符

  • v-on:event.stop 阻止冒泡
  • v-on:event.prevent 阻止默认事件
  • v-on:event.capture 开启捕获
  • v-on:event.self 仅自己不响应,冒泡还会继续。
  • v-on:event.once 仅执行一次

vue组件化开发

基本操作

  1. 模板直接调用$xxx,实例中用this
  2. 掌握prop传值(注意驼峰改-)
  3. 掌握自定义事件$emit
  4. slot插槽和具名插槽v-slot
  5. watch监听

vueRouter

mode:history,
routes:[
{path:'xxxx/:xxx',redirect:'/'}, {path:'xxxx/:xxx',name:'name',component:xx,props:true}, {
path:'xxxxxx/:xxx',
name:'name',
component:xx,
props:true,
children: [
{
// 当 /user/:id/profile 匹配成功,
// UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
] }
]

前置中间件

router.beforeEach((to, from, next) => {
if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
// 如果用户未能验证身份,则 `next` 会被调用两次
next()
})
  • hash模式和history

    • mode:history(没有#,html5)
  • $router的两个方法相应路由
    • $router.go();
    • $router.push();
在方法中:
this.$router.push({
name:'xxx',
params:{},
}); this.$router.push({
path:'xxx',
query:{},
});
  • 获取路由参数

    • $route.params 获取/:username参数
    • $route.query 获取/?username=xxx参数
    • props:[""]
  • 命名路由和视图
<router-link :to="{name:'xx',params='xx'}"><router-link>
<router-link :to="{path:'xx',query='xx'}"><router-link> <router-view />
<router-view name="nav" /> components:{
default:xxx,
nav:Nav
}

vuex

  1. $stroe对象访问状态
  2. $stroe.commit('fun')调用方法

PHP

基础知识

  1. header("content-type:text/html;charset=utf-8")
  2. :header("location:url");
  3. date('Y年m月d日 H:i:s') date('w','N')
  4. setcookie()
  5. session_star() session_destroy

常用函数

strlen:获取字符串长度,字节长度

substr_count 某字符串出现的次数

substr:字符串截取,获取字符串(按照字节进行截取)

mb_strlenmb_substr

strchr:与substr相似,从指定位置截取一直到最后

strrchr(获取文件后缀名):与strchr一样,只是从右边开始查找字符

strtolower:所有的字符都小写(针对英文字母)

strtoupper:所有的字符都大写

strrev:字符串反转(只能反转英文:英文存储只有一个字节),按照字节进行反转

strpos:从字符串中找对应字符出现的位置(数字下标),从最左边开始找

strrpos:与strpos一样,只是从字符串的右边开始找

trim:去掉函数两边的字符,默认是空格

str_split 函数把字符串分割到数组中。

chunk_split() 函数把字符串分割为一连串更小的部分

str_repeat("Shanghai",5);把字符串 "Shanghai " 重复 5 次

str_replace('\', '/', dirname(DIR))); 替换

ucfirst 首字母大写

时间日期函数

time:得到当前时间的时间戳(整型:从格林威治时间1970年1月1日0时0分0秒开始)秒数

date:时间序列化函数,将指定的时间戳转换成规定时间日期的显示格式(随意的字符串:有专业的格式符规定),如果没有指定时间戳,系统默认使用当前时间的时间戳

strtotime:时间日期格式的字符串转换成对应的时间戳(只要是正确的英语时间表达方式,都可以进行转换)

microtime:微秒时间戳,根据不同的要求返回不同的结果 混合 microtime (布尔类型 ),可以返回一个浮点数的时间,也可以返回一个数组(时间戳和微秒数)

数学相关函数

abs:绝对值

floor:向下取整 floor(3.2) 结果等于3

ceil:向上取整

round:四舍五入

rand:取得一个指定范围内的随机整数

mt_rand:取得一个指定范围内的随机整数(效率更高)

min:PHP 会将非数值的 string 当成 0,但如果这个正是最小的数值则仍然会返回一个字符串。如果多个参数都求值为 0 且是最小值,min() 会返回按字母表顺序最小的字符串,如果其中没有字符串的话,则返回数值0;

max:PHP 会将非数值的字符串当成 0,但如果这个正是最大的数值则仍然会返回一个字符串。如果多个参数都求值为 0 且是最大值,max() 会返回其中数值的 0,如果参数中没有数值的 0,则返回按字母表顺序最大的字符串。对于多个数组,max从左到右比较;如果同时出现数组和非数组参数总把数组作为最大值返回;

数组相关函数

count() // 非数组返回1

key:获取当前数组当前指针所指向的元素的下标

current:获取的当前指针指向元素的数值

next:获取下一个元素的值,并且将指针下移

prev:获取上一个元素的值,并且将指针上移

end :将指针移到数组的最后一个元素,并返回最终指针位置的值

reset:将指针移到数组的第一个元素,返回最终指针位置的值

array_keys:获取一个数组的所有键名,返回一个索引数组

array_values:获取一个数组的所有值,返回一个索引数组

explode:爆炸,将一个字符串按照某个指定的规则(通常是特殊字符),将数组分成多个段,每一段都当做一个数组的元素,返回一个索引数组

split 类似 explode explode('.', 'abc.txt')等于split('.','abc.txt')

implode:粘合,将一个数组内部的所有元素按照某个指定的规则(特殊字符),将所有的元素拼接成一个字符串

join() 把数组元素组合为一个字符串

array_merge:合并,指的是将两个数组中的元素进行累计。如果后面的数组与前面的数组有下标(键名:关联)相同的,那么后面的元素的值会覆盖前面的;如果是索引的相同下标,会自动的修改下标叠加到前面的数组里。

array_reverse — 返回反转后的数组

array_flip — 交换数组中的键和值

数据结构模拟函数

array_shift:从数组的前面弹出元素,得到元素的值

array_pop:从数组的后面弹出元素,获得元素的值

array_unshift:从数组的前面压入元素,得到当前数组元素的个数

array_push:从数组的后面压入元素,得到当前数组元素的个数

判断变量

is_bool:判断是否是布尔类型

is_float:判断浮点型

is_integer:判断整型

is_object:判断对象

is_array:判断数组

is_string:判断字符串

is_resource:判断资源

is_scalar:scalar是标量的,判断是基本数据类型:整型,浮点型,布尔型和字符串型

is_null 检测变量是否为NULL 是返回TRUE 否则返回false。1.被赋值为NULL;2.变量没被赋值;3.被unset()

is_numeric:判断数字或者纯数字组成的字符串

gettype:获得数据类型

settype:改变数据类型

isset

unset() 如果在函数中 unset() 一个全局变量,则只是局部变量被销毁,而在调用环境中的变量将保持调用 unset() 之前一样的值,如果在函数中 unset() 一个通过引用传递的变量,则只是局部变量被销毁,而在调用环境中的变量将保持调用 unset() 之前一样的值。empty//array(),"",0,"0",NULL,FALSE 都返回true

文件操作函数

opendir(路径):打开一个路径资源(将路径内部的所有数据读入到内存)

readdir(路径资源):从文件夹资源中读取当前资源指针所指向的文件的名字,指针会向下移动一位

closedir(资源):释放对应的文件资源

scandir(路径):读取一个路径内部的所有文件名,返回一个数组,数组的每一个元素都是文件名。

file_exists:判断一个文件是否存在(文件是广义:路径和文件)

is_dir:判断一个指定路径是否存在(文件夹)

is_file:判断一个指定路径是否是文件(文件)

mkdir:创建一个路径,如果路径存在就会报错

rmdir:移除文件夹

file_get_contents:从一个指定的文件内读取数据内容。

file_put_contents:将指定的字符串写入到对应的文件

fopen:打开一个文件资源

fgetc:c代表character,一次读取一个字符

fgets:s代表string,代表可以读取多个字符,取决于指定的读取长度或者是否碰到换行(最多只能读取一行数据)

两个函数都是对当前资源指针进行操作,读取之后都会将指针下移

fread:获取指定长度的数据直到文件结束

fwrite:向文件资源指针所在的位置写入数据,写东西不会将当前位置已有的东西往后移,而是会覆盖

fseek:将指针指定到对应的位置

fclose:使用对应的文件资源

copy:复制

unlink:删除文件

rename:重命名文件

filemtime:m代表modify,文件最后被修改的时间

filesize:文件大小(字节)

fileperms:文件权限(Linux下的八进制)

排序

rsort() 函数用于对数组单元从高到低进行排序。asort() 函数用于对数组单元从低到高进行排序并保持索引关系。arsort() 函数用于对数组单元从高到低进行排序并保持索引关系。ksort() 函数用于对数组单元按照键名从低到高进行排序。krsort() 函数用于对数组单元按照键名从高到低进行排序。

报错

error_reporting(E_ALL)

ini_set('display_errors', 1)

常量

define() 定义常量defined() 检测常量是否定义

序列化

serialize

unserialize

json_encode 对变量进行 JSON 编码

json_decode 对JSON 格式的字符串进行编码

编码

base64_encode 本函数将字符串以 MIME BASE64 编码。在 BASE64 编码后的字符串只包含英文字母大小写、阿拉伯数字、加号与反斜线,共 64 个基本字符,不包含其它特殊的字符,因而才取名 BASE64。

base64_decode 解码

自定义代码片段

自己封装类:webtools

<?php

/**
* Interface webtoolsBase
*/
interface webtoolsBase
{
static function put($key, $values, $time = null); static function get($key); static function remove($key); static function removeAll();
} /**
* Class Cookie
* @package webtools
*/
class Cookie implements webtoolsBase
{
/**
* @param $key
* @param $values
* @param null $time
* @return bool
*/
static function put($key, $values, $time = null)
{
if (is_null($time)) {
$time = time() + 60 * 20;
}
return setcookie($key, $values, $time);
} /**
* @param $key
* @return mixed
*/
static function get($key)
{
return $_COOKIE[$key];
} /**
* @param $key
* @return bool
*/
static function remove($key)
{
return setcookie($key, null, time());
} static function removeAll()
{
} } /**
* Class Session
* @package webtools
*/
class Session implements webtoolsBase
{
static function sessionCheckStart()
{
if (session_status() == PHP_SESSION_NONE) {
session_start();
}
} /**
* @param $key
* @param $values
* @param null $time
* @return mixed
*/
static function put($key, $values, $time = null)
{
self::sessionCheckStart();
if ($time != null) {
session_set_cookie_params($time);
}
return $_SESSION[$key] = $values;
} /**
* @param $key
* @return mixed
*/
static function get($key)
{
self::sessionCheckStart();
return $_SESSION[$key];
} /**
* @param $key
*/
static function remove($key)
{
self::sessionCheckStart();
unset($_SESSION[$key]);
} /**
* @return bool
*/
static function removeAll()
{
self::sessionCheckStart();
return session_destroy();
}
} class Request
{
/**
* @param $parameter
* @return mixed
*/
static function get($parameter)
{
return $_REQUEST[$parameter];
} /**
* @param $parameter
* @return mixed
*/
static function getMethoed($parameter)
{
return $_SERVER['REQUEST_METHOD'];
} /**
* @return string
*/
static function getURL($t = false)
{
if ($t) {
return $_SERVER["REQUEST_URI"];
}
$url = 'http://' . $_SERVER['SERVER_NAME'] . $_SERVER["REQUEST_URI"];
return $url;
}
} /**
* Class Response
*/
class Response
{
/**
* @param $url
* @param array $date
*/
static function redirect($url, $date = [])
{
if ($date != null) {
foreach ($date as $k => $v) {
Session::put($k, $v);
}
}
header("location:{$url}");
}
} class TK
{
/**
* @param string $key
* @param string $file
* @return array|string
*/
static function envgetval($key = "", $file = "config.env")
{
$c = fopen($file, "r");
while (!(feof($c))) {
$pp = fgets($c);
if (preg_match("/{$key}=/i", $pp)) {
if (!(preg_match('/;/', $pp))) {
$rs = preg_split("/=/", $pp);
$r = $rs[1];
return $r;
break;
}
}
}
fclose($c);
}
}

mysqli连接数据库

$conn=new mysqli('127.0.0.1','root','root','sms');
if($conn){
echo "数据库连接成功!<br>";
}else{
echo '数据库连接失败!'.$conn->connect_error();
}
$rs=$conn->query('select * from user');
while ($r=mysqli_fetch_object($rs)){
echo $r->username.'<br>';
}

PDO连接数据库

try{
$pdo=new PDO('mysql:host=127.0.0.1;dbname=sms','root','root');
echo '数据库连接成功<br/>';
$result=$pdo->query('select * from user');
while ($tables = $result->fetch(PDO::FETCH_OBJ)) {
echo $tables->username . '<br>';
}
}catch (PDOException $e){
echo $e->getMessage();
}

Laravel框架

安装

composer create-project --prefer-dist laravel/laravel app

运行

php artisan serve

request对象

  • get()
  • only()
  • except()
  • all()
  • has()
  • isMethod()
  • getMethod()

DB

  • insert([])
  • update([])
  • delete()
  • increment()
  • deincrement()
  • get()
  • first()
  • value('字段')
  • select('','')->get()
  • oderBy()
  • limit()
  • offset()
  • where('xx','<=>','xx',)
  • join()
  • DB::select();
  • DB::statement();
  • all()

Seccion

  • put)
  • get()
  • all()
  • has()
  • forget()
  • flush()

路由

  • php artisan route:list 查看路由
  • Route::group(['prefix'=>'/admin'],function(){Route::get("index",function(){})})
  • Route::prefix('admin')->group(function(){Route::get("index",function(){})})
  • Route::domain('')
  • Route::name('')
  • Route::namespace('')
  • Route::middleware('','')
  • Route::get('url',callback(){})
  • Route::get('url','控制器@方法名')
  • Route::redirect('here','there')
  • Route::view('url','')
  • Route::get('url','控制器@方法名')->name('routerName')
  • Route::fallback(function(){})
  • Route::resource('blogs','控制器')
  • Route::resources(['blogs'=>控制器])
  • Route::apiResource('blogs','控制器')
  • Route:middleware('auth:admin')

模型

  • php artisan ide-helper:models
  • php artisan make:model TableName 创建模型
  • protected $table = "数据表";(不写就会找复数的表)
  • protected $primary key = 'id';(可选)
  • public $timestamps = false;(可选)
  • proteced $fill = [];(允许操作的字段)(可选)
  • use App\Home\Index 引入模型类
  • 注意复习:getter\setter访问器和修改器
  • 注意复习:注意复习:一对一、一对多、多对多模型关联!

视图

  • blade模板引擎
  • return view("welcome")->with([])
  • return view("welcome",['a'=>$a,'b'=>$b]) 视图中使用{{$a}};不推荐
  • return view("welcome",compact('a','b')) 视图中使用{{$a}};推荐
  • CSRF跨域保护:{{csrf_field()}} {{csrf_field('POST|PUT')}} @csrf @method('post)

控制器

  • php artisan make:controller NamController 创建控制器
  • php artisan make:controller NameController --invokable 创建单行为控制器
  • php artisan make:controller NameController --resource 创建资源控制器
  • php artisan make:controller NameController --api 创建api资源控制器

表单验证

  • $this->validate($request,['name'=>'required|age =>max:5|email => email|/confirmed|'])
  • $errors->all()报错对象

文件上传

  • 判断 $request->hasFile('name')&&$request->File('name')->isValid();
  • $request->file('name')->move('upload',md5(time().rand(1000,9999).'.'.jpg));
  • 查阅API

数据表的迁移与填充

  • php artisan make:migration create_user_table 迁移文件

  • $table->timestamps();

  • $table->rememberToken();

  • bcrypt() 加密

  • php artisan migrate:install 生成迁移流水账表(首次使用)

  • php artisan migrate 执行迁移文件创建表

  • php artisan migrate:rollback 删除表

  • php artisan make:seeder Name(大驼峰)+TableSeeder 创建种子文件

  • php artisan db:seed --class=种子文件名

  • $faker = \Faker\Factory::create('zh_CN');

  • $line = ['unsename'=> $faker->userName, 'password'=>bcrypt(123456)···]

captcha验证码

  • 'providers' => [Mews\Captcha\CaptchaServiceProvider::class,]
  • 'aliases' => ['Captcha' => 'Mews\Captcha\Facades\Captcha',]
  • captcha_src()

web前端笔记(包含php+laravel)的更多相关文章

  1. web前端笔记整理,从入门到上天,周周更新

    由于大前端知识点太多,所以一一做了分类整理,详情可见本人博客 http://www.cnblogs.com/luxiaoyao/ 一.HTML 1.注释 格式:<!-- 注释内容 --> ...

  2. Web前端笔记整理

    不使用Ajax无刷新提交: header('HTTP/1.1 204 No Content'); var a=document.createElement('img'); a.setAttribute ...

  3. WEB前端笔记

    HTML+CSS部分 IE6使用PNG的透明问题 解决关键字 DD_belatedPNG_0.0.8a.js Google或百度一下,下载之 <!--[if lte IE 6]> < ...

  4. web前端笔记整理一---HTML

    一 HTML标签1 页面及标记 1 HTML 文件结构 拓展名 .html或者.htm <!DOCTYPE html>// 声明 <html> html 主体 <head ...

  5. web前端笔记整理---CSS

    一   Css  文件 Css: 美化HTML的 4种选择器: 元素选择 类选择 ID选择 伪类选择 常用的布局方案 1 写在什么位置能好用. 1.1 元素里面 优先级是最高的 1.2 元素外,文件内 ...

  6. MOOC Web前端笔记(三):CSS样式

    CSS样式 CSS概述 CSS--Cascading Style Shees层叠样式表 HTML定义网页的内容,CSS定义内容的样式. 内容和样式相互分离,便于修改样式. CSS语法 p{ font- ...

  7. web前端学习笔记:文本属性

    今天的web前端笔记主要讲述文本属性,希望能帮助到正在学习web前端开发的初学者们,废话不多说了,一起来看看文本属性的相关内容吧. 文本属性 文本缩进 将Web页面上的一个段落第一行缩进,这是一种最常 ...

  8. 极客Web前端开发资源大荟萃

    前端开发已经成为当前炙手可热的技术之中的一个.本周我们除了给大家带技术相关资讯,另一些技术人员经常使用的站点.希望大家不要错过我们本周的内容.原文来自:极客标签 为神马说敲代码是非常艰难的 程序猿 做 ...

  9. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

随机推荐

  1. python flask构建小程序订餐系统--centos下项目开发环境的搭建

    1.项目开发环境的搭建(Linux环境) 1)软件的安装 我们搭建整个项目的过程中,我们需要用到下面的一些软件,但是这些软件的安装过程我们在这里不用说明.(因为windows软件的安装比较的简单,类似 ...

  2. Chrome简洁高效管理下载项

    每次要查看下载记录时,Chrome新建下载标签页的速度能让我抓狂 之前用的 Chrono 界面太过传统,而且还不能点击打开.所以一直在寻找好用的下载管理插件,经过多次在拓展商城搜索比对,找到了这款拓展 ...

  3. (转)交叉编译lrzsz

    交叉编译lrzsz 2016-03-20 1. 系统环境: Distributor ID:    Ubuntu Description:    Ubuntu 14.04.1 LTS Release:  ...

  4. 使用Python从PDF文件中提取数据

    前言 数据是数据科学中任何分析的关键,大多数分析中最常用的数据集类型是存储在逗号分隔值(csv)表中的干净数据.然而,由于可移植文档格式(pdf)文件是最常用的文件格式之一,因此每个数据科学家都应该了 ...

  5. Java日志框架(二)

    最流行的日志框架解决方案 按笔者理解,现在最流的日志框架解决方案莫过于SLF4J + LogBack.其有以下几个优点: LogBack 自身实现了 SLF4J 的日志接口,不需要 SLF4J 去做进 ...

  6. JS笔记 运算符 函数

    1.运算符 1.位运算符 将数字转换为二进制后进行运算 只做整数运算,如果是小数的话,则去掉小数位再运算 2.位运算 1.按位 与:& 语法:a&b; 2.按位 或| 语法:a|b 任 ...

  7. idea中GitPush失败问题

    首先是你的项目中有和和历史不符的东西 Push rejected: Push to *****/***** was rejected 推拒绝:推送到起源/主人被拒绝 直接是解决办法,直接打开你要上传代 ...

  8. axios的post请求返回状态码400

    设置拦截 axios.interceptors.request.use((config) => { if (config.method === 'post') { if (!config.isF ...

  9. Elasticsearch第二篇:基本概念和基础操作

    上一篇文章,我们已经是在Windows10 上搭建了 Elasticsearch 环境已经安装了相关的插件,现在我们就可以像操作webapi一样简单的操作 ElasticSearch 了,有园友说可以 ...

  10. Java—接口

    接口概念 接口是功能的集合,同样可看做是一种数据类型,是比抽象类更为抽象的”类”. 接口只描述所应该具备的方法,并没有具体实现,具体的实现由接口的实现类(相当于接口的子类)来完成.这样将功能的定义与实 ...