web前端笔记(包含php+laravel)
概况
- 熟悉HTML5、CSS3、JavaScript、ES6规范
- 熟悉JQuery框架
- 熟悉BootStrap
- 熟悉Less、Sass
- 熟悉Vue
- 熟悉Git
- 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组件化开发
基本操作
- 模板直接调用$xxx,实例中用this
- 掌握prop传值(注意驼峰改-)
- 掌握自定义事件$emit
- slot插槽和具名插槽v-slot
- 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
- $stroe对象访问状态
- $stroe.commit('fun')调用方法
PHP
基础知识
- header("content-type:text/html;charset=utf-8")
- :header("location:url");
- date('Y年m月d日 H:i:s') date('w','N')
- setcookie()
- 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验证码
- https://packagist.org/packages/mews/captcha;
- composer require mews/captcha
- php artisan vendor:publish 11
- 配置 config/app.php 下的providers aliases
- 'providers' => [Mews\Captcha\CaptchaServiceProvider::class,]
- 'aliases' => ['Captcha' => 'Mews\Captcha\Facades\Captcha',]
- captcha_src()
web前端笔记(包含php+laravel)的更多相关文章
- web前端笔记整理,从入门到上天,周周更新
由于大前端知识点太多,所以一一做了分类整理,详情可见本人博客 http://www.cnblogs.com/luxiaoyao/ 一.HTML 1.注释 格式:<!-- 注释内容 --> ...
- Web前端笔记整理
不使用Ajax无刷新提交: header('HTTP/1.1 204 No Content'); var a=document.createElement('img'); a.setAttribute ...
- WEB前端笔记
HTML+CSS部分 IE6使用PNG的透明问题 解决关键字 DD_belatedPNG_0.0.8a.js Google或百度一下,下载之 <!--[if lte IE 6]> < ...
- web前端笔记整理一---HTML
一 HTML标签1 页面及标记 1 HTML 文件结构 拓展名 .html或者.htm <!DOCTYPE html>// 声明 <html> html 主体 <head ...
- web前端笔记整理---CSS
一 Css 文件 Css: 美化HTML的 4种选择器: 元素选择 类选择 ID选择 伪类选择 常用的布局方案 1 写在什么位置能好用. 1.1 元素里面 优先级是最高的 1.2 元素外,文件内 ...
- MOOC Web前端笔记(三):CSS样式
CSS样式 CSS概述 CSS--Cascading Style Shees层叠样式表 HTML定义网页的内容,CSS定义内容的样式. 内容和样式相互分离,便于修改样式. CSS语法 p{ font- ...
- web前端学习笔记:文本属性
今天的web前端笔记主要讲述文本属性,希望能帮助到正在学习web前端开发的初学者们,废话不多说了,一起来看看文本属性的相关内容吧. 文本属性 文本缩进 将Web页面上的一个段落第一行缩进,这是一种最常 ...
- 极客Web前端开发资源大荟萃
前端开发已经成为当前炙手可热的技术之中的一个.本周我们除了给大家带技术相关资讯,另一些技术人员经常使用的站点.希望大家不要错过我们本周的内容.原文来自:极客标签 为神马说敲代码是非常艰难的 程序猿 做 ...
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
随机推荐
- python flask构建小程序订餐系统--centos下项目开发环境的搭建
1.项目开发环境的搭建(Linux环境) 1)软件的安装 我们搭建整个项目的过程中,我们需要用到下面的一些软件,但是这些软件的安装过程我们在这里不用说明.(因为windows软件的安装比较的简单,类似 ...
- Chrome简洁高效管理下载项
每次要查看下载记录时,Chrome新建下载标签页的速度能让我抓狂 之前用的 Chrono 界面太过传统,而且还不能点击打开.所以一直在寻找好用的下载管理插件,经过多次在拓展商城搜索比对,找到了这款拓展 ...
- (转)交叉编译lrzsz
交叉编译lrzsz 2016-03-20 1. 系统环境: Distributor ID: Ubuntu Description: Ubuntu 14.04.1 LTS Release: ...
- 使用Python从PDF文件中提取数据
前言 数据是数据科学中任何分析的关键,大多数分析中最常用的数据集类型是存储在逗号分隔值(csv)表中的干净数据.然而,由于可移植文档格式(pdf)文件是最常用的文件格式之一,因此每个数据科学家都应该了 ...
- Java日志框架(二)
最流行的日志框架解决方案 按笔者理解,现在最流的日志框架解决方案莫过于SLF4J + LogBack.其有以下几个优点: LogBack 自身实现了 SLF4J 的日志接口,不需要 SLF4J 去做进 ...
- JS笔记 运算符 函数
1.运算符 1.位运算符 将数字转换为二进制后进行运算 只做整数运算,如果是小数的话,则去掉小数位再运算 2.位运算 1.按位 与:& 语法:a&b; 2.按位 或| 语法:a|b 任 ...
- idea中GitPush失败问题
首先是你的项目中有和和历史不符的东西 Push rejected: Push to *****/***** was rejected 推拒绝:推送到起源/主人被拒绝 直接是解决办法,直接打开你要上传代 ...
- axios的post请求返回状态码400
设置拦截 axios.interceptors.request.use((config) => { if (config.method === 'post') { if (!config.isF ...
- Elasticsearch第二篇:基本概念和基础操作
上一篇文章,我们已经是在Windows10 上搭建了 Elasticsearch 环境已经安装了相关的插件,现在我们就可以像操作webapi一样简单的操作 ElasticSearch 了,有园友说可以 ...
- Java—接口
接口概念 接口是功能的集合,同样可看做是一种数据类型,是比抽象类更为抽象的”类”. 接口只描述所应该具备的方法,并没有具体实现,具体的实现由接口的实现类(相当于接口的子类)来完成.这样将功能的定义与实 ...