前端
文章平均质量分 70
前端知识,包括html、css、javascript、jQuery、vue、react、elementui、vant、bootstrap等方面的之类汇总
程序员buddha2080
八零後程序员,技术过硬,诚信专业服务。主营:定制各类网站、app、小程序等企业信息化软件。联系微信:buddha2080
展开
-
vite+vue3+typescript+elementPlus前端实现电子证书查询系统
前端技术栈:vite+vue3+typescript+elementPlus证书查询首页实现,代码如下:证书查询首页实现,效果呈现如下:电子证书查询结果实现,代码如下:电子证书查询结果实现,效果呈现如下:小结:1、节省了存储电子证书图片的空间;2、后端负责数据,前端负责呈现,实现更加灵活原创 2024-09-07 10:42:04 · 785 阅读 · 0 评论 -
本地phpstudy部署算命系统,用户端是H5页面,支持微信支付宝支付,支持微信支付宝登录
前端:HTML+CSS+Jquery。原创 2024-08-12 23:24:12 · 364 阅读 · 0 评论 -
职业技能鉴定服务中心前端静态页面(官网+证书查询)
有个朋友想做职业技能培训,会发证书,证书可以在自己网站可查。想做一个这样的网站,而且要特别土,一眼看上去像xxx官方网站,像jsp .net技术开发的网站。用html+css+jquery还原了这样子一个前端页面,这里分享给有需要的。源码链接:https://gitee.com/3539949703/frontend-certificate-website.git。3、轮播图jquery定时器实现定时切换、手动切换。小结:前端样式很土、很官方!1、整体div+css布局。原创 2024-02-21 11:33:08 · 724 阅读 · 0 评论 -
html+css+jquery实现轮播图自动切换、左右切换、点击切换
代码如下:效果如下图:需要引入jquery;定时器实现4s自动切换轮播图步骤3:左右切换,左右点击事件手动切换实现代码如下:到目前存在自动切换轮播图,也存在手动切换轮播图。就可能存在手动切换时,又自动切换,客户体验就不太好,可以优化成,手动切换轮播图时,自动切换轮播图关掉,手动切换完成后,又开启自动切换轮播图。优化后,自动切换和左右切换js代码如下:步骤4:点击切换,点击圆点事件手动切换代码如下:html+css+jquery实现轮播图自动切换、左右切换、点击切换,代码如下:原创 2024-02-20 00:03:41 · 3502 阅读 · 0 评论 -
yarn包管理器在添加、更新、删除模块时,在项目中是如何体现的
yarn官网:https://yarn.bootcss.com,学任何技术的最新知识,都可以通过其对应的网站了解。无法直接访问,那就只能科学上网了。原创 2024-01-15 18:15:13 · 1336 阅读 · 0 评论 -
Less知识点整理学习笔记
Less是CSS预处理语言,可以使用变量、嵌套、运算等,便于维护项目CSS样式代码。原创 2023-07-22 15:55:15 · 289 阅读 · 0 评论 -
CSS入门教程
CSS,层叠样式表(Cascading Style Sheet),给网页中的HTML标签设置样式CSS写在一个单独的文件中,通过link标签在网页中引入2.2.2 内部样式CSS写在网页的head标签中,用style标签包裹2.2.3 行内样式CSS写在标签的style属性中三种CSS样式引入方式的区别选择器,就是选取(查找)需要设置样式元素的方式2.3.1 元素选择器通过元素名称,选取(查找)相同元素,然后对相同元素设置CSS样式小结:1、无论嵌套多少层,只要元素名称相同都会被找到通过类原创 2023-04-04 11:53:34 · 3247 阅读 · 2 评论 -
原生小程序开发,解决wx.request方法会产生回调地狱的问题
原生小程序开发,直接使用wx.request方法会产生回调地狱,解决回调地狱的两种方法原创 2023-01-12 14:04:38 · 1077 阅读 · 0 评论 -
前端JavaScript、JQuery、Vue、React开发所需要数组方法看这篇博客就可以了
js常用数组方法使用。push、pop、unshift、shift、join、sort、concat、slice、splice、indexOf、lastIndexOf、reverse、forEach、map、filter、some、every、reduce、reduceRight、Array.from、Array.of、find、findIndex、keys、values、enries、includes、flat、Array.isArray、copyWithin原创 2023-02-11 16:36:08 · 612 阅读 · 0 评论 -
html入门教程
dl > < dt > 名词 < dd > 描述 …… < dl > < dt > 名词 < dd > 描述 …… < dt > 名词 < dd > 描述 …… < dl > < dt > 名词 < dd > 描述 ……原创 2023-03-17 16:49:33 · 4258 阅读 · 0 评论 -
博客前端模板
采用bootstrap技术响应式实现博客首页和详情页。全部采用bootstrap自带样式。原创 2022-12-03 18:00:06 · 1157 阅读 · 1 评论 -
给页面加一个灰度的滤镜
给页面加一个灰度的滤镜效果功能原创 2022-12-01 11:06:10 · 185 阅读 · 0 评论 -
推流的方式播放视频
目录1 CentOS7安装ffmpeg1.1 升级yum1.2 安装Nux Dextop Yum源1.3 安装FFmpeg 和 FFmpeg开发包1.4 检验是否安装成功2 ffmpeg视频转ts切片并生成m3u8播放列表文件2.1 首先将视频文件转为视频编码h264,音频编码aac格式的mp4文件2.2 将mp4文件转为ts文件并生成m3u82.2.1 将mp4转为完整的ts2.2.2 将ts切片,并生成m3u8文件3 前端播放m3u8格式视频1 CentOS7安装ffmpeg1.1 升级yum原创 2021-09-18 16:56:06 · 273 阅读 · 0 评论 -
vue脚手架中引入echarts及使用
安装echartsnpm install echarts -S代码示例<!-- Echarts组件 --><template> <div class="container"> <div id="echart"></div> </div></template><script> import echarts from 'echarts' export d原创 2020-09-21 16:29:00 · 1141 阅读 · 0 评论 -
vue父子组件——作用域插槽
<!-- 子组件 --><template> <div class='container'> <div>子组件</div> <slot :data="list"></slot> </div></template><script> export default { data() { retu原创 2020-09-21 15:52:37 · 385 阅读 · 0 评论 -
vue父子组件——具名插槽
<!-- 子组件 --><template> <div class='container'> <div>子组件</div> <slot name="up"></slot> <slot name="down"></slot> </div></template><!-- 父组件 --><te原创 2020-09-21 15:32:18 · 429 阅读 · 0 评论 -
vue父子组件——匿名插槽
<!-- 子组件 --><template> <div class='container'> <div>子组件</div> <slot></slot> </div></template><!-- 父组件 --><template> <div class='container'> <原创 2020-09-21 15:25:33 · 101 阅读 · 0 评论 -
vue父子组件——$refs
<!-- 子组件 --><template> <div class='container'> <div>子组件</div> </div></template><script> export default { name: 'Child', methods: { btn() { c原创 2020-09-21 14:45:29 · 356 阅读 · 0 评论 -
vue父子组件——$emit()事件
<!-- 子组件 --><template> <div class='container'> <div>子组件</div> <button @click="btn">按钮</button> </div></template><script> export default { name: 'Child',原创 2020-09-21 14:26:38 · 730 阅读 · 0 评论 -
vue父子组件——传递数据
<!-- 子组件 --><template> <div class='container'> <div>子组件</div> {{ name }} </div></template><script> export default { name: 'Child', props: { name: {原创 2020-09-21 14:12:04 · 70 阅读 · 0 评论 -
SKU规格列表
商品详情添加,实现多销售属性的组合。比如添加衣服的商品详情,那么衣服的销售属性有颜色、尺寸。假如颜色有红色、白色,尺寸有S、M。那么就存在四种组合情况(红S、红M、白S、白M)下面是vuejs中,实现这种组合方式的demo<template> <div> 规格列表 </div></template><script> export default { data() { return {原创 2020-09-18 17:03:35 · 2233 阅读 · 0 评论 -
VUE3.0环境变量
环境变量,就是全局需要用到的变量,比如接口地址,项目名称等。项目又可能身处不同的环境,比如测试环境、开发环境不同,请求的接口地址不同。环境变量文件位置于项目根目录,文件名是.env、.env.development和.env.production.env 所有环境都会加载的配置文件.env.development 开发环境加载的配置文件(npm run serve启动会加载的配置).env.production 生产环境加载的配置文件(npm run build后dist项目会加载的配置).env原创 2020-09-18 11:44:48 · 2230 阅读 · 0 评论 -
axios二次封装,达到前端架构多人协同开发,很强扩展性
前言:此接口封装是借鉴多位牛人代码提炼出来的,但是还存在考虑不周的地方,请大家多多指教贴出代码前,解释下代码,用编号1、2、3等来说明编号1应用到axios、vuex、router以及element-ui的提示编号2罗列使用到的接口,满足多接口使用编号3是示例管理员的接口封装编号4是对很多个编号3接口的统一出口编号5是vue脚手架统一入口引入编号6是使用接口的示例1. http.js代码/** * src/utils/http.js *//** * axios封装 * 请求拦截、原创 2020-08-28 09:47:08 · 241 阅读 · 0 评论 -
vue做前端,thinkphp6做后台,项目部署
前后端分离开发完毕打包后,面临上线部署问题,一种做法是前后端分开来部署。前端nginx服务器配置反向代理;另外一种做法是把打包好的前端代码放置ThinkPHP框架Public目录下,默认访问index.html即可location /admin/ { proxy_set_header Host $proxy_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_原创 2020-08-25 14:10:32 · 2522 阅读 · 2 评论 -
vue前后端分离开发解决跨域的问题
开发时配置vue.config.js解决跨域module.exports = { devServer: { port: 8080, host: "0.0.0.0", https: false, // 协议 open: true, // false 启动服务时自动打开浏览器访问 proxy: { '/admin': { target: "http://admin原创 2020-08-25 13:59:23 · 455 阅读 · 0 评论 -
RBAC实现前后端分离菜单实现、角色、权限功能实现
实现效果如下图数据库设计原创 2020-08-24 18:36:07 · 760 阅读 · 0 评论 -
05-html实体
1. 常用实体 2. 案例说明<!DOCTYPE html><html><head> <title>html实体</title> <meta charset="utf-8"></head><body> 10 &原创 2018-06-10 05:34:58 · 91 阅读 · 0 评论 -
04-排版标签
1. 居中<center>居中</center>2. 段落<p>p是body中第一个元素,不会产生一个间距</p><p>会产生段前和段后的间距</p>3. 换行<br/>4. 水平分割线<hr width="80%" size=10 /原创 2018-06-10 05:24:37 · 121 阅读 · 0 评论 -
03-标题标签
1. 标题标签hnn:值是1-6,值越大字越小,是个块标签2. 案例说明&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;标题标签&lt;/title&gt; &lt;meta charset="utf-8&原创 2018-06-10 04:59:45 · 164 阅读 · 0 评论 -
02-全局标签
1. html&lt;html&gt;:表示html页面的开始&lt;/html&gt;:表示html页面的结束2. headtitle:网页的标题meta:对网页的介绍,对编码的设置,对网页的描述,设置关键字 name:规定我们的meta标签的作用 keywords description content:link:用于链接外部文件,css、...原创 2018-06-10 04:46:15 · 434 阅读 · 0 评论 -
01-HTML介绍
1. 一个页面只对应一个html标签2. 文件的后缀名:html3. html文件是由html标签组成的4. 标签有双标签和单标签,双标签是成对出现的,单标签只有一个5. 标签中可以添加属性&lt;标签名 属性="属性值"&gt;&lt;/标签名&gt;6. 标签分为:块标签和行标签...原创 2018-06-10 04:38:37 · 87 阅读 · 0 评论 -
06-图像标签
1. 图像标签<img src="" width="" height="" title="" alt="" border=""> src:目标文件的地址路径 路径的表示: 相对路径:相对于当前位置 绝对路径:从网站根目录开始 width:宽 height:高 ti原创 2018-06-10 05:46:45 · 90 阅读 · 0 评论 -
07-链接标签
1. 链接标签<a href="" target="" name=""></a> href:跳转的地址 target:跳转的方式 _self:在当前窗口打开(默认) _blank:新建一个窗口打开 _top:顶级窗口打开 _parent:父元素窗口 name:当前a标签的名字...原创 2018-06-10 06:05:54 · 127 阅读 · 0 评论 -
08-列表标签
1. 无序列表<ul type=""> <li></li></ul> type:表示列表前面的符合 square:实心方块 desc:实心圆 circle:空心圆2. 案例说明<body> <ul type="square"&a原创 2018-06-10 10:54:11 · 119 阅读 · 0 评论 -
09-表格标签
1. 表格<table bgcolor="" border="" bordercolor="" width="" height="" align="" cellspacing="" cellpadding=""></table> bgcolor:背景颜色 border:原创 2018-06-10 11:43:54 · 136 阅读 · 0 评论 -
10-表单标签
1. 表单<form action="" method="" enctype=""></form> action:提交数据到指定文件 method:提交数据的方式 post: get: enctype: multipart/form-data:提交文件时,必须有该属性2. 文本输入&...原创 2018-06-10 12:13:22 · 111 阅读 · 0 评论 -
11-多媒体标签
1. embed<embed src=""> src:引入外部文件2. audio<audio src="" controls></audio> src:引入外部文件 controls:控制条<audio controls> <source src=""&原创 2018-06-11 08:54:41 · 184 阅读 · 0 评论 -
12-框架标签
1. 框架frameset标签<frameset rows="x%,y%,*"> <frame noresize/> <frameset cols="z%,*"> <frame noresize/> <frame /> </frameset>原创 2018-06-11 08:56:14 · 136 阅读 · 0 评论 -
ajax异步请求的三种格式
以一个简单的的form表单提交样式为例<!DOCTYPE html><html><head> <title>ajax</title> <meta charset="utf-8">></head><body> <form> <input type="text" id="username"> <input type="password" i原创 2017-12-09 14:24:44 · 2006 阅读 · 0 评论