Web前端
文章平均质量分 77
掌握Web前端,记录Web前端生涯
ZzzWClock
有规划的人生叫蓝图,没有规划的人生叫拼图
展开
-
PHP+Workerman即时通讯技术:在线聊天/客服/访客功能
PHP+Workerman即时通讯技术:在线聊天/客服/访客功能1:客服端2:客户端3:多访客4:聊天表情客服端http://videolaravel.zwzgjl.com/index.php/admin/login账号:kefu001密码: a123456客户端http://videolaravel.zwzgjl.com/Workerman/index访客无需账号/密码ps:先登录客服 在登陆访客 有任何bug可以发送邮件至:gz341500@163.com 周末更新!原创 2021-10-20 14:47:33 · 709 阅读 · 7 评论 -
Git:【Git】基础常用命令,【Linux】常用命令
Git:【Git】基础常用命令,【Linux】常用命令一.【Linux】常用命令目录操作命令命令cd目录cd /切换到根目录cd /usr切换到根目录下的usr目录cd …/切换到上一级目录 或者 cd …cd ~切换到home目录cd -切换到上次访问的目录目录查看命令ll目录查看ls查看当前目录下的所有目录和文件ls -a查看当前目录下的所有目录和文件(包括隐藏的文件)ls -l 或 ll原创 2021-10-19 17:47:17 · 229 阅读 · 0 评论 -
PHP:【商城后台管理系统】部署友情链接,网站基础设置
PHP:【商城后台管理系统】部署友情链接,网站基础设置一.友情链接①友情链接页面②友情链接编辑③友情链接添加二.网站基础设置①后台网站基础设置页面②网站基础设置效果三.部署流程部署流程后端采用thinkphp6.0,首先是网站基础设置,网站基础在数据库中可以建立一个单独的表,但是这个单独的表存放的信息很特殊,表里可以存商品规格,或者别的数据,因为这个网站设置就是设置网站的tdk,表字段的名称是这样的,id,names,values,就只有这两个字段,names的字段可以原创 2021-10-19 17:46:42 · 748 阅读 · 0 评论 -
PHP:【商城后台管理系统】部署角色管理,角色添加,菜单权限,删除角色功能
PHP:【商城后台管理系统】部署角色管理,角色添加,菜单权限,删除角色功能一.角色管理界面①首页②角色添加③角色编辑④角色删除二.部署流程部署流程后端采用thinkphp6.0框架,角色管理看似简单,但是在菜单权限这一块是很难得,为什么难呢?因为要设计菜单无限级构造树,还要将无限极菜单构造树递归遍历成二级菜单,这样才好将菜单渲染到视图层,在代码块注释中将有这些问题的解决方案。前端采用Layui框架HTML 代码块<!DOCTYPE html><原创 2021-10-18 11:51:01 · 2412 阅读 · 6 评论 -
PHP:【商城后台管理系统】部署管理员一级菜单和二级菜单列表添加功能
PHP:【商城后台管理系统】部署管理员一级菜单和二级菜单列表添加功能一.1级菜单和2级菜单列表添加页面一级菜单二级菜单二.部署流程数据库后台菜单列表,字段设置,pid 是 菜单列表级别,0代表1级菜单,>0的是二级菜单,并且二级菜单pid字段值需要对应mid字段值,这样才可以相互绑定。每个菜单对应的还有Controller控制器,action方法,都要一一记录,这样才能映射到thinkphp控制器层还有视图层,用来区分每一级菜单的前端视图框架采用ThinkPHP6.0原创 2021-10-18 11:50:06 · 1723 阅读 · 0 评论 -
PHP:【商城后台管理系统】部署管理员列表,添加/编辑/删除功能
PHP:【商城后台管理系统】部署管理员列表,添加/编辑/删除功能请点击->友情连接在线测试后台管理页面一.管理员列表界面二.部署流程部署流程thinkphp:使用thinkphp6.0 ,在数据库表里每个管理员都有相对应的id字段,我们点击编辑的时候,会自动获取管理员id字段,进行判断点击的是哪个管理员,当我们修改信息的时候,会判断所填的信息是否为空,如果不为空则添加或修改成功,会默认给一个修改和添加时间,删除就是判断当前点击的管理员字段id,进行where条件查找,然后进行删原创 2021-10-18 11:48:01 · 1334 阅读 · 1 评论 -
PHP:【商城后台管理系统】部署管理员未登录拦截,进行重定向
PHP:【商城后台管理系统】部署管理员未登录拦截,进行重定向一.未登录拦截界面二.部署流程部署流程thinkphp:使用thinkphp6.0 BaseController 里面的初始化控件进行重定向拦截,我们在管理员登陆成功后会进行存储session,然后我们进行判断session里面是否有用户的存储信息,如果没有则进行重定向到登录页面,如果有用户信息则返回json格式给前端HTML 代码块exit('<!doctype html> <h原创 2021-10-15 09:46:39 · 303 阅读 · 0 评论 -
PHP:【商城后台管理系统】admin超级管理员后台操作界面部署{无限级菜单}
PHP:【商城后台管理系统】admin超级管理员后台操作界面部署{无限级菜单}一.超级管理员后台操作界面二.部署流程界面部署流程页眉栏:采用layui 50px 经典蓝 自设置用户信息Session 进行输出用户名称和用户级别左侧导航栏{无限级菜单} :采用layui 手风琴和左侧导航框架进行样式设计,通过连接后台数据库导出数据表中数据渲染导航列表,分为一级菜单和二级菜单主操作区:采用传统 iframe 内联框架进行部署主操作区高度设置:采用css position 定原创 2021-10-15 09:45:55 · 3209 阅读 · 1 评论 -
PHP:【商城后台管理系统】admin超级管理员后台登录界面部署
PHP:【商城后台管理系统】admin超级管理员后台登录界面部署一.后台管理登录非空验证二.后台管理登录用户信息验证三.注意事项需要注意储存用户password的时候需要进行加密存储password的时候 优先选择password_hash 比 md5 更安全如果使用md5 加密 请加严处理HTML 代码块<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /原创 2021-10-15 09:45:20 · 3146 阅读 · 1 评论 -
PHP:文件上传上传限制,文件大小不超过5M,文件后缀设置,检查图片合法性,每一张图片处理散列名称,目标目录不存在,创建目录,设置错误日志接收系统错误
PHP:封装文件上传函数php 关于文件上传的配置文件上传项目项在php.ini中设置,常用的配置项有:序号配置项默认值描述1file_uploadsOn使 PHP 支持文件上传2upload_tmp_dir/tmp指示应该临时把上传的文件存储在什么位置3max_file_uploads20单次请求时允许上传的最大文件数量4max_execution_time30设置脚本被解析器终止之前PHP最长执行时间(秒) ,防止服务器资源原创 2021-10-08 16:25:47 · 1539 阅读 · 0 评论 -
PHP:oop->细说命名空间/命名空间类的自动加载
PHP:oop->细说命名空间/命名空间类的自动加载一.命名空间命名空间:namespace 有名称的空间namespace 需要写在脚本的顶部,必须是php的第一条指令(除了declare指令)全局成员: 常量,函数,类(接口),默认声明在全局空间中的优点:全局调用缺点:不能重复命名php5.3以后引入C Java中应用成熟的命名空间use 在命名空间中的作用/导入命名空间use app\admin\controller as app;引入别的原创 2021-10-07 21:30:32 · 171 阅读 · 0 评论 -
PHP:使用定界符输出九格宫表格,颜色各异,每个小格子宽高50px ,用php实现具有简单功能的计算器
PHP:使用定界符输出九格宫表格,颜色各异,每个小格子宽高50px 用php实现具有简单功能的计算器一.使用定界符输出九格宫表格,颜色各异,每个小格子宽高50px代码块<?php//输出颜色不一样的九宫格//随机颜色for ($i=0; $i <3 ; $i++){ $td=""; for ($a=0; $a < 3; $a++){ $r = mt_rand(0,255); $g = mt_rand(0,255);原创 2021-06-29 12:37:22 · 275 阅读 · 1 评论 -
PHP:变量的类型转换方式,变量值传递与值引用的区别,变量作用域和魔术常量
PHP:变量的类型转换方式,变量值传递与值引用的区别,变量作用域,魔术常量一.变量/常量命名①变量命名仅允许使用: 英文字母(a-z,A-Z),数字(0-9),下划线(\_)或他们的组合不允许使用数字开头必须使用"$"美元符为前缀严格区分大小写驼峰命名法②常量命名define(): 函数const: 关键字作为前缀通常,常量都用大写字母表示二.变量的类型转换方式转换方式函数临时转换(int),(string),(array),(object)…自原创 2021-06-29 12:36:52 · 164 阅读 · 0 评论 -
PHP:实例演示PHP模块加载和JavaScript和PHP中for/forEach两种语言不一样遍历数组的区别
PHP:实例演示JavaScript和PHP中for/forEach两种语言不一样遍历数组的区别一.JavaScript:for和forEach遍历数组①for循环遍历数组②forEach遍历数组代码块<script> let box = document.querySelector(".box"); //建立一个数组 let arr = ["宝马", "奔驰", "奥迪", "雷克萨斯"]; //用forEach遍历数组原创 2021-06-29 12:36:17 · 98 阅读 · 0 评论 -
JavaScript:鼠标事件,动态创建导航下拉列表
JavaScript:鼠标事件,动态创建导航下拉列表鼠标事件含义onmouseout鼠标移出onmouseover鼠标移入代码块,可看注释<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> &原创 2021-06-21 17:57:17 · 180 阅读 · 0 评论 -
JavaScript:数学对象,随机生成数字验证码并且随机添加字体颜色
JavaScript:数学对象,随机生成数字验证码并且随机添加字体颜色一.方法方法含义Math.floor()向下取整Math.celi()向上取整Math.random()随机生成0-1的数值二.随机生成数字验证码并且随机添加字体颜色三.代码块,可看注释<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> &l原创 2021-06-21 17:56:38 · 282 阅读 · 0 评论 -
JavaScript:时间对象,实例演示右下角广告图
JavaScript:时间对象,实例演示右下角广告图一.时间对象实例方法含义new Date()获取时间getDate()获取日数getMonth()获取月份getFullYear()获取年份getHours()获取小时getMinutes()获取分钟数getSeconds()获取秒数getDay()获取星期几代码块<!DOCTYPE html><html lang="en"> <原创 2021-06-21 17:55:55 · 93 阅读 · 0 评论 -
Vue:实例演示,v-if,v-for,v-model,v-bind,v-on,计算属性和侦听器属性
Vue:实例演示,v-if,v-for,v-model,v-bind,v-on,计算属性和侦听器属性 一.实例演示,v-if,v-for,v-model,v-bind,v-on方法含义v-bind自定义普通属性,快捷语法是一个":"号v-on事件属性,快捷语法是一个"@"符v-model双向绑定v-forv-for : (循环变量, 索引/键) in/of 数组/对象 :keyv-if条件渲染流程判断,有单分支和多分支①v-bind,自定义普原创 2021-06-20 18:03:01 · 287 阅读 · 0 评论 -
JavaScript: 购物车全选自动计算金额和取消全选清零金额
JavaScript: 购物车全选自动计算金额和取消全选清零金额代码块<script> //首先完成购物车的全选按钮和单个按钮进行绑定 //拿到全选按钮 let checkAll = document.querySelector("check-all"); //拿到单个按钮组 单个按钮只有name属性 所以用getElementsByName去拿 let checkItem = document.getElementsByName原创 2021-06-20 17:58:55 · 989 阅读 · 0 评论 -
JavaScript:1.图片懒加载演示;2.轮播图为翻页按钮添加功能;
JavaScript:1.懒加载演示;2.轮播图为翻页按钮添加功能;一.图片懒加载演示关于高度代码视口高度clientHeight滚动高度scrollTop距离父级高度offsetTop <script> //首先拿到所有的图片 const img = document.querySelectorAll(".box img"); //然后拿到视口高度 const clientHeight = doc原创 2021-06-20 17:58:15 · 253 阅读 · 0 评论 -
JavaScript:演示Ajax的get和post请求,练习选顶卡和换肤案例
JavaScript:演示Ajax的get和post请求,练习选顶卡和换肤案例Ajax 异步请求特别提示: 异步请求不要使用live server插件,必须创建一个本地服务器环境同步与异步以前端请求,后端响应为例同步: 前端发请求, 必须等到后端响应完成,才允许发送另一个请求异步: 前端发请求后不等待后端响应结果继续执行,后端响应完成通过事件通知前端处理XMLHttpRequest 对象XMLHttpRequest是浏览器对象,而非 JS 内置对象2.1 xhr 请求步骤原创 2021-06-19 23:05:22 · 331 阅读 · 3 评论 -
JavaScript:留言板添加字数实时统计与禁止超出功能,部分字符串和数组方法功能使用
留言板添加字数实时统计与禁止超出功能,部分字符串和数组方法功能使用1.字符串方法方法含义concat()字符串拼装slice()取子串,可以正负数取数trim()删除字符串两边的空白字符split()将字符打散成数组①concat字符串拼装②slice取子串③trim删除空白字符可以看到空格也算一个字符串,我们用trim方法删除/过滤掉空白字符串看看长度可以看到trim过滤掉了空白字符串,只剩下两个实体字符串了④split将字符打散原创 2021-06-19 23:04:41 · 644 阅读 · 0 评论 -
JavaScript:实例演示dom元素的增删改查操作
实例演示dom元素的增删改查操作1.类数组类数组类似数组,长得像数组,但它又不是数组,它有两个特征1.有length索引2.有递增的整数索引下面让我们来看看什么是类数组,请看下图大家可以看到,用document.querySelectorAll方法访问超链接和li都是一个类数组①先模拟一个类数组然后用 Array.from()方法把类数组转换成一个真正的数组,再用push()在尾部追加一个成员代码块 <body> <di原创 2021-06-19 23:04:06 · 290 阅读 · 0 评论 -
JavaScript:作用域和闭包,构造函数类与类的继承
javascript:作用域和闭包,类与类的继承1.作用域ES6中三种作用域含义全局作用域再全局也就是外部声明的变量或者常量函数作用域再函数内部声明的变量或者常量块级作用域再()/{}里面声明的变量或者常量①全局作用域全局作用域声明变量或者常量再函数内部可以直接引用②函数作用域大家可以看到,再函数里面声明的变量,在外部不能直接使用,浏览器会显示此数据未定义,这个就是函数作用域,如果我们想访问到里面的内容要创建一个高阶函数来获取它的值。高阶原创 2021-06-19 23:03:22 · 120 阅读 · 0 评论 -
JavaScript:实例ES6演示数组,对象,传参解构; 实例演示访问器属性的get,set操作
实例演示数组,对象,传参解构; 实例演示访问器属性的get,set操作1.数组解构①基本数组解构方式②ES6数组解构方式大家可以看到ES6的数组解构方式变得很简洁,没有之前版本的解构反思那么多行代码,新ES6解构添加了两个[][]方括号,等号左右边[][]里面的内容数量必须一致。2.对象解构①基本对象解构方式②ES6对象解构方式大家可以看到,ES6对象解构方式和数组解构方式差不多类似,但是再等号的左边{}一定要用()包住否则会报错,全部用()也可以的。3.参数解构①数组参原创 2021-06-19 00:11:42 · 402 阅读 · 2 评论 -
JavaScript:引入方式/变量与常量声明/函数与高阶函数/归并参数/箭头函数的语法/立即执行函数的语法
javascript:引入方式/变量与常量声明/函数与高阶函数/归并参数/箭头函数的语法/立即执行函数的语法1.引入方式方式元素含义行内脚本onclick事件属性内部脚本script将js代码写在这对标签中,建议位置放在前面外部脚本script src""在src中输入外部的js文件路径,引入外部脚本,效果和css外部样式一样①行内脚本<!DOCTYPE html><html lang="en"> <head>原创 2021-06-18 15:09:21 · 205 阅读 · 0 评论 -
Web:grid实现12列栅格布局的组件并且实例圣杯布局
grid实现12列栅格布局的组件并且实例圣杯布局1.建立12列栅格布局组件* { margin: 0; padding: 0; box-sizing: border-box;}/* 建立body是 grid主体 并且定义让多行容器居中 */body { /* border: 1px solid; */ width: 100vw; height: 100vh; display: grid; place-content: center;}.container {原创 2021-06-18 15:07:16 · 470 阅读 · 0 评论 -
Web:flex模拟移动商城首页页面布局/grid布局的相关属性
flex模拟移动商城首页页面布局1.布局页面导航大家可以看到图片上的红色边框,用了flex布局,布局了一个多行容器,采用的是无序列表ul。css代码块/* 设置导航样式,定义flex容器 */.main { background: rgba(223, 223, 223, 0.524);}.main .dh { display: flex; flex-flow: row wrap; padding: 1rem; text-align: center; backgro原创 2021-06-18 15:06:18 · 388 阅读 · 0 评论 -
Web:移动商城首页的页眉和页脚的布局和flex项目三个属性
移动商城首页的页眉和页脚的布局先来演示一下flex项目三个属性1.项目的缩放比例与基准宽度元素属性含义flex0 1 auto / initial默认的,禁止放大,允许收缩,宽度自动flex1 1 auto / auto允许放大和收缩flex0 0 auto / none禁止放大和收缩/pc布局①flex 0 1 auto / initial 演示flex项目flex 0 1 auto属性默认的就是可以禁止放大,允许收缩,宽度自动,动态图我们可原创 2021-06-18 14:02:14 · 262 阅读 · 0 评论 -
Web:移动商城首页的页眉和页脚的布局和flex项目三个属性
移动商城首页的页眉和页脚的布局先来演示一下flex项目三个属性1.项目的缩放比例与基准宽度元素属性含义flex0 1 auto / initial默认的,禁止放大,允许收缩,宽度自动flex1 1 auto / auto允许放大和收缩flex0 0 auto / none禁止放大和收缩/pc布局①flex 0 1 auto / initial 演示flex项目flex 0 1 auto属性默认的就是可以禁止放大,允许收缩,宽度自动,动态图我们可原创 2021-06-18 14:01:12 · 459 阅读 · 0 评论 -
Web:flex布局:flex容器中的四个属性的功能,参数,以及作用
flex容器中的四个属性的功能/参数flex容器是具有:display:flex的属性元素↓ 语法定义 <head> <style type="text/css"> #box{ display: flex; } </style> </head> <body> <div id="box"></div> </body&原创 2021-06-18 13:58:47 · 1080 阅读 · 0 评论 -
Web:演示box-sizing功能并实例/演示相对定位与绝对定位的区别与联系
演示box-sizing功能并实例1.首先了解盒模型在 CSS 中,所有的元素都被一个个的“盒子(box)”包围着,理解这些“盒子”的基本原理,是我们使用CSS实现准确布局、处理元素排列的关键。CSS中组成一个块级盒子需要:content box: 这个区域是用来显示内容,大小可以通过设置 width 和 height.padding box: 包围在内容区域外部的空白区域; 大小通过 padding 相关属性设置。border box: 边框盒包裹内容和内边距。大小通过 border 相关属原创 2021-06-18 13:54:04 · 543 阅读 · 0 评论 -
Web:选择器优先级/前端组件样式模块化原理与实现/常用伪类选择器的使用方式(模块化元素组件)
一.选择器优先级选择器语法id选择器语法是 #+di名称{} id选择器与元素属性选择器不同的是,id选择器选择id的时候需要在前面加上#号class选择器语法是 .+类名称{} class选择器的前缀名是英文句号.可以给不同的属性改变样式只要是类名一致就行标签/元素选择器语法是 元素名称+{}元素选择器是找到或选择到相同类型的元素去改变内部样式,如果不是同类元素则不会改变基本样式1.标签/元素选择器元素标签优先级: 标签选择器在style出现多个同名称元原创 2021-06-18 13:51:04 · 442 阅读 · 0 评论 -
Web:学生课程表表格/用户注册表单
一.学生课程表1.课程表模样2.课程表html代码块<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial原创 2021-06-18 13:46:23 · 2917 阅读 · 0 评论 -
Web:vscode编辑器和markdown/Emmet语法的使用
Vscode编辑器强大的Vscode编辑器vscode安装vscode插件安装vacode常用快捷键1.vscode下载地址:https://code.visualstudio.com/2.选择你自己的系统是哪种点击下载列如:windows x64安装好后我们来点击应用市场安装插件(界面默认是英文)3.在应用市场搜索chinese 安装中文字体把基础英文版更换成中文4.接着以下是需要安装的插件名称(建议安装)5.vscode常用快捷键Shift+A原创 2021-06-18 13:41:17 · 191 阅读 · 0 评论