概况

  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. 020_go语言中的接口

    代码演示 package main import ( "fmt" "math" ) type geometry interface { area() float ...

  2. LDAP 使用记录

    LDAP 命令记录 工作中用到了 LDAP,做一个简单记录. 概念性的东西不做阐述,只是记录常用命令,以便将来回顾. 想多做了解可以参考这个系列文章: https://blog.csdn.net/li ...

  3. week4:周测错题

    4.如何在类外,给对象动态添加绑定方法 import types def qingtianzhu(obj,name): print("请我叫我一柱擎天,简称{},颜色是{}".fo ...

  4. Webpack file-loader 和 url-loader

    二者最好只选择一个来进行对文件的打包,防止有冲突出现导致图片加载失败 如果相对不同大小的问题选择不同的loader,可以在url-loader的fallback属性指定不满足条件时的loader { ...

  5. Vue 使用$createElement自定义文本

    有时候弹窗或者一些特殊的区域需要自定义一些html元素来显示(snabbdom) const h = this.$createElement this.$msgbox({ title: '提示', m ...

  6. # 火题小战 A.玩个球

    火题小战 A.玩个球 题目描述 给你 \(n\) 种颜色的球,每个球有 \(k\) 个,把这 \(n\times k\) 个球排成一排,把每一种颜色的最左边出现的球涂成白色(初始球不包含白色),求有多 ...

  7. GRE 协议 - 和 ISP 用的协议不一样怎么办

    GRE 出现的背景: 随着网络(公司)规模的增大,越来越多的公司需要在跨区域之间建设自己的分公司.但随之也就出现了这样的问题,考虑这样一个场景.公司 A 在北京和上海间开设了两家公司,由于业务的需要, ...

  8. win10下使用AIDA64建立副屏监控

    写在前面: 最近刚攒了一台台式机,但是苦于没有太喜欢的温度监控插件,在贴吧里面看到有人用AIDA64做了一个副屏监控,感觉非常6,于是就开始了折腾之路. 需要的设备和软件: windows系统电脑一台 ...

  9. day2 变量

    变量是在程序中表现为不重复的名字,只需定义一个名字,给这个名字变量赋值即可  作用  在内存中开辟一块空间.起了一个别名,用了访问和存储空间中的数据 在编写 Python 程序过程中, 经常需要给标识 ...

  10. 学习Python(新手教程链接)

    1.这个是地址: https://www.ggdoc.com/cHl0aG9uIG1zaeaYr_S7gOS5iA2/NTY4Nzc1MWQxMDJkZTJiZDk3MDU4OGE20/