![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
大前端
文章平均质量分 67
工程化前端介绍和Vue框架使用,简单nodejs技术应用
死磕的斯坦张
Coding everyday。
展开
-
基于斗鱼的娱乐直播视频平台--Vue移动端页面
本次项目是移动应用网页课程的大作业,项目使用github上一开源项目学习开发而来。https://github.com/axhello/douyu-vue本项目基本就是斗鱼手机移动端的复刻,除了没有评论功能,以外功能都差不多,其后端也是对接的官方的api接口。源码压缩包地址https://download.csdn.net/download/david2000999/85656221然后进行相关依赖安装(前提本地安装好了npm 和 node)运行后就可以得到浏览器直接访问即可其中第原创 2022-06-16 11:14:27 · 1846 阅读 · 7 评论 -
浏览器JS控制台控制视频倍速
首先fn12打开开发者模式然后进入console控制台最后输入以下代码1.B站亲测有效,其他网站自测,后面的3代表倍数,可以修改。document.getElementsByTagName("video")[0].playbackRate = 32.以二倍速播放百度网盘视频,得是以网页形式播放的百度网盘视频videojs.getPlayers("video-player").html5player.tech_.setPlaybackRate(2)//以二倍速播放百度网盘视频3.获取到视频标原创 2021-11-16 19:49:32 · 8319 阅读 · 1 评论 -
解决Vue前端和后端对接的跨域问题
解决前端配置首先如果是开发环境下,直接在config文件夹下的index.js中的dev:{}中加入代理配置即可,我前端启动的路径是localhost:8080,后端访问路径是http://127.0.0.1:8081/overseas,这样就可以实现跨域的转发了。proxyTable: { '/overseas': { target: 'http://127.0.0.1:8081/overseas', // target: 'http://192.168.原创 2021-10-24 13:45:00 · 3998 阅读 · 0 评论 -
Error: Node Sass does not yet support your current environment: Windows 64-bit
报错信息Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (72)[app-scripts] For more information on which environments are supported please see:[app-scripts] https://github.com/sass/node-sass/releases/tag原创 2021-10-15 11:17:50 · 284 阅读 · 0 评论 -
Vue项目的打包和发布
npm run build进入项目目录的控制台,输入npm run build,进行打包,就可以看到原本的文件目录中出现了一个dist的打包文件夹,这里面就是打包好后的文件了使用静态服务器工具包发布打包的vue项目npm install -g serve安装serve组件serve dist发布成功使用动态 web 服务器(tomcat)发布打包的vue项目1、修改配置: webpack.prod.conf.js文件,如下图:目的是将打包后的文件夹进行自主命名,原来的dist就会原创 2021-10-13 23:53:53 · 291 阅读 · 0 评论 -
尚医通——前端搭建——改造模板02
目录标题1、基本改造流程1.1 定义路由模块1.2 定义api模块1.3 定义页面组件脚本1.4 定义页面组件模板1.5 测试数据通信1.6 跨域处理2、分页查询2.1 定义页面组件脚本2.2 定义页面组件模板3、删除3.1 定义api模块3.2 定义页面组件模板3.3 定义页面组件脚本4、axios响应拦截器4.1 关于code===2004.2 关于response4.3 关于error5、批量删除5.1 定义api模块5.2 定义页面组件模板5.3 定义页面组件脚本6、锁定与取消锁定6.1 定义api原创 2021-09-28 00:06:48 · 449 阅读 · 0 评论 -
尚医通——前端搭建——改造模板01
目录标题0、项目简介1、 临时登录接口1.1 前端登录问题1.2 登录页修改2、页面零星修改2.1标题2.2 国际化设置2.3 导航栏文字2.4 面包屑文字2.5 关闭校验2.6 复制icon图标3、路由分析3.1 入口文件中调用路由3.2 路由模块中定义路由0、项目简介vueAdmin-template是基于vue-element-admin的一套后台管理系统基础模板(最少精简版),可作为模板进行二次开发。GitHub地址:https://github.com/PanJiaChen/vue-admi原创 2021-09-27 23:52:52 · 505 阅读 · 0 评论 -
关于安装Vue前端项目npm安装后运行问题的处理
vue-element-admin1.1简介vue-element-admin是基于element-ui 的一套后台管理系统集成方案。GitHub地址:https://github.com/PanJiaChen/vue-element-admin项目在线预览:https://panjiachen.gitee.io/vue-element-admin1.2安装# 解压压缩包# 进入目录cd vue-element-admin-master# 安装依赖npm install# 启动。执行后原创 2021-09-27 23:40:59 · 269 阅读 · 0 评论 -
使用Vue-admin-template改造项目基本介绍
目录标题1、目录结构2、关键文件2.1 package.js2.2 build/webpack.dev.conf.js2.3 index.html2.4 src/main.js2.5 config/dev.env.js2.6 src/utils/request.js2.7 src/api/login.js1、目录结构vue-element-admin-master(拥有完整的功能的插件)2、关键文件vue-admin-template-master(源码相对简单,我们的后台管理系统基于这个版本)原创 2021-09-27 23:36:23 · 1994 阅读 · 0 评论 -
02_JavaScript的运算符和流程控制语句
目录1 - 运算符(操作符)1.1 运算符的分类1.2 算数运算符1.3 递增和递减运算符1.4 比较运算符1.5 逻辑运算符1.6 赋值运算符1.7 运算符优先级2 - 流程控制2.1 顺序流程控制2.2 分支流程控制2.3 三元表达式2.4switch分支流程控制1 - 运算符(操作符)1.1 运算符的分类运算符(operator)也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号。JavaScript中常用的运算符有:算数运算符递增和递减运算符比较运算符逻辑运算符赋值原创 2020-11-07 23:57:14 · 133 阅读 · 0 评论 -
05_JavaScript对象基础和基本内置对象
目录1、对象基础5.1 对象的相关概念1.2 创建对象的三种方式**使用对象字面量创建对象**:5.3 遍历对象2、内置对象2.1 内置对象2.2 查文档2.3 Math对象2.4 日期对象2.5 数组对象2.6 字符串对象1、对象基础5.1 对象的相关概念为什么需要对象?保存一个值时,可以使用变量,保存多个值(一组值)时,可以使用数组。如果要保存一个人的完整信息呢?例如,将“张三疯”的个人的信息保存在数组中的方式为:var arr = [‘张三疯’, ‘男', 128,154];上述原创 2020-11-10 19:57:14 · 257 阅读 · 0 评论 -
JavaScript——基础学习笔记
JS基础学习JavaScript的介绍JS语法基础1、变量2、JS的数组3、JS的函数4、JS 中的自定义对象5、JS 中的事件JavaScript的介绍Javascript 语言诞生主要是完成页面的数据验证。因此它运行在客户端,需要运行浏览器来解析执行 JavaScript 代码。 JS 是 Netscape 网景公司的产品,最早取名为 LiveScript;为了吸引更多 java 程序员。更名为 JavaScript。 JS 是弱类型,Java 是强类型。特点:交互性(它可以做的就是信息的动态原创 2020-09-20 13:32:29 · 130 阅读 · 0 评论 -
JQuery案例
1. 广告显示和隐藏 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>广告的自动显示与隐藏</title> <style> #content{width:100%;height:500px;background:#999} </style> <!--引入jqu原创 2021-01-20 13:44:34 · 146 阅读 · 0 评论 -
JQuery快速入门和选择器使用
JQuery 基础1. 概念:一个JavaScript框架。简化JS开发jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨 是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。JavaScript框架:本原创 2021-01-20 13:28:54 · 127 阅读 · 0 评论 -
JQuery的遍历和事件绑定以及插件使用
JQuery的遍历1. js的遍历方式 * for(初始化值;循环结束条件;步长)2. jq的遍历方式1. jq对象.each(callback) 1. 语法: jquery对象.each(function(index,element){}); * index:就是元素在集合中的索引 * element:就是集合中的每一个元素对象 * this:集合中的每一个元素对象 2. 回调函数返回值: * true:如果当前function返回为false,则原创 2021-01-20 13:41:41 · 290 阅读 · 0 评论 -
03_JavaScript数组和函数
目录1 - 数组1.1 数组的概念1.2 创建数组1.3 获取数组中的元素1.4 遍历数组1.5 数组中新增元素2 - 函数2.1 函数的概念2.2 函数的使用声明函数调用函数函数的封装2.3 函数的参数函数参数语法函数形参和实参数量不匹配时2.4 函数的返回值return 语句break ,continue ,return 的区别2.5 arguments的使用2.6 函数的两种声明方式1 - 数组1.1 数组的概念数组可以把一组相关的数据一起存放,并提供方便的访问(获取)方式。数组是指一组数据原创 2020-11-10 09:37:37 · 152 阅读 · 0 评论 -
JQuery 动画操作
JQuery 动画操作动画1. 三种方式显示和隐藏元素1. 默认显示和隐藏方式 1. show([speed,[easing],[fn]]) 1. 参数: 1. speed:动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如:1000) 2. easing:用来指定切换效果,默认是"swing",可用参数"linear" * swing:动画执行时效果是 先慢,中间快,最后又慢 * linear:动画执行时速度是匀原创 2021-01-20 13:36:51 · 109 阅读 · 0 评论 -
基于phaser引擎的JS打飞机闯关答题小游戏
目录标题游戏设计逻辑游戏截图开源项目下载源代码游戏设计逻辑主要是基于phaser游戏引擎做的打飞机游戏为主的闯关答题小游戏。通过打飞机获得积分,根据积分的多少设置了不同关卡,关卡的敌人难度会不断上升,同时一旦达到一定的积分就会触发必答题弹出,玩家必须答对必答题才能继续闯关。而主要目的是为了寓教于乐传播党史知识,所以对于被敌机击杀后,我们提供答题复活的机会,而且打错了可以继续答,直到答对为止。其中在游戏设计上,主要根据常规的phaser小游戏格式,先设计一个基本的游戏环境,然后将各个组件设计成类的形式原创 2021-06-07 14:13:21 · 842 阅读 · 2 评论 -
07_JavaScript自定义属性和节点操作
目录1. 排他操作1.1 排他思想1.2 案例:百度换肤2. 自定义属性操作2.1. 获取属性值2.2. 设置属性值2.3. 移出属性2.4. 案例:tab栏2.5. H5自定义属性3. 节点操作3.1. 节点概述3.2. 节点层级3.3. 父级节点3.4. 子节点3.6. 兄弟节点3.7. 创建节点3.8. 添加节点3.9. 案例:简单版发布留言1. 排他操作1.1 排他思想如果有同一组元素,我们想要某一个元素实现某种样式, 需要用到循环的排他思想算法:所有元素全部清除样式(干掉其他人)原创 2020-11-15 12:11:17 · 240 阅读 · 0 评论 -
01_JavaScript简介和数据类型
目录1、JavaScript简介1.1 JavaScript 是什么1.2 JavaScript的作用1.3 浏览器执行 JS 简介1.4 JS 的组成**ECMAScript****DOM——文档对象模型****BOM——浏览器对象模型**1.5 JS 嵌入html方式2、JavaScript注释2.1 单行注释2.2 多行注释3、 JavaScript输入输出语句4、JS的变量以及数据类型4.1 数字型4.2 字符型4.3 布尔型4.4 获取变量数据类型4.5 数据类型转换1、JavaScript简原创 2020-11-07 23:49:36 · 274 阅读 · 0 评论 -
06_JavaScript事件操作
目录1. Web API介绍1.1 API的概念1.2 Web API的概念2. DOM 介绍2.1 什么是DOM2.2 DOM树3. 获取元素3.1 根据ID获取3.2 根据标签名获取元素3.3 H5新增获取元素方式3.4 获取特殊元素(body,html)4. 事件基础4.1 事件概述4.2 事件三要素4.3 执行事件的步骤4.4 常见的鼠标事件5. 操作元素5.1 改变元素内容(获取或设置)5.2 常用元素的属性操作5.3 表单元素的属性操作5.4 样式属性操作方式1:通过操作style属性方式2:原创 2020-11-15 11:55:13 · 123 阅读 · 0 评论 -
04_JavaScript的作用域和预解析
目录1 - 作用域1.1 作用域概述1.2 全局作用域1.3 局部作用域1.4 JS没有块级作用域2 - 变量的作用域3 - 作用域链4 - 预解析1 - 作用域1.1 作用域概述通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。JavaScript(es6前)中的作用域有两种:全局作用域局部作用域(函数作用域)1.2 全局作用域作用于所有代码执行的环原创 2020-11-10 09:46:14 · 67 阅读 · 0 评论 -
JQueryDOM操作和CRUD操作
DOM操作1. 内容操作 1. html(): 获取/设置元素的标签体内容 <a><font>内容</font></a> --> <font>内容</font> 2. text(): 获取/设置元素的标签体纯文本内容 <a><font>内容</font></a> --> 内容 4. val(): 获取/设置元素的value属性值2. 属性操作 1.原创 2021-01-20 13:32:42 · 169 阅读 · 1 评论 -
JavaScript——进阶学习笔记
JavaScript进阶BOM:1. 概念:Browser Object Model 浏览器对象模型2. 组成:Window:窗口对象Location:地址栏对象History:历史记录对象DOM:概念: Document Object Model 文档对象模型核心DOM模型:HTML DOM事件监听机制:概念:常见的事件:BOM:1. 概念:Browser Object Model 浏览器对象模型 * 将浏览器的各个组成部分封装成对象。2. 组成: * Window:窗口对象 * Navig原创 2020-10-29 20:52:22 · 160 阅读 · 0 评论 -
CSS3新特性——2D转换技术
目录1、2D转换概念2、2D 转换 translate3、2D 转换 rotate设置元素旋转中心点(transform-origin)4、2D 转换之 scale5、2D 转换综合写法以及顺序问题1、2D转换概念2D 转换2D 转换是改变标签在二维平面上的位置和形状移动: translate旋转: rotate缩放: scale2、2D 转换 translatex 就是 x 轴上水平移动y 就是 y 轴上水平移动transform: translate(x,原创 2020-11-06 18:14:55 · 142 阅读 · 0 评论 -
HTML5的新特性——基本标签新增功能
目录一、什么是 `HTML5`二、新增语义化标签三、多媒体音频标签四、多媒体视频标签五、新增 input 标签六、新增表单属性一、什么是 HTML5HTML5 的概念与定义定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML两个概念:是一个新版本的 HTML 语言,定义了新的标签、特性和属性拥有一个强大的技术集,这些技术集是指: HTML5 、CSS3 、javascript, 这也是广义上的 HTML5HTML5 拓展了原创 2020-11-06 11:51:23 · 190 阅读 · 0 评论 -
CSS高级技巧——网页元素的隐藏与显示
元素的显示与隐藏1. 元素的显示与隐藏1.1 display 显示(重点)1.2 visibility 可见性1.3 overflow 溢出1.4 显示与隐藏总结1. 元素的显示与隐藏目的让一个元素在页面中消失或者显示出来(控制网页元素的渲染与否)场景类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现!1.1 display 显示(重点)display 设置或检索对象是否及如何显示。display: none 隐藏对象display:block 除了转原创 2020-11-06 00:01:15 · 513 阅读 · 0 评论 -
H5小游戏框架总结推荐
随着浏览器功能越来越强大,在网页端实现各种小游戏已经是家常便饭。微信小游戏出现后,游戏(特别是小型游戏)的开发已经进入了一个相当火爆的时期。那么作为一个普通的前端开发者,如何取选择一个合适的游戏开发框架来学习和提高开发效率呢? 当今国内外流行的游戏开发框架有哪些。每个框架的特点以及优缺点。怎样去选择一个适合的框架来学习和使用。使用框架的注意事项。 当今国内外流行的游戏开发框架有哪些开发动画和游戏,跟我们做数据交互不一样;游戏和动画开发起来比较复杂和耗时,是.转载 2021-05-11 11:39:39 · 4253 阅读 · 0 评论 -
移动端前端开发技术概况
目录移动web开发流式布局1.0 移动端基础1.1浏览器现状1.2移动端调试方法2.0 视口2.1 布局视口 layout viewport2.2视觉视口 visual viewport2.3理想视口 ideal viewport2.4meta标签3.0二倍图3.1物理像素&物理像素比3.2背景缩放background-size4.0 移动开发选择和技术解决方案4.1移动端主流方案4.2 移动端技术解决方案4.3 移动端大量使用 CSS3盒子模型box-sizing4.4移动端特殊样式5.0移动端常原创 2020-11-07 20:28:58 · 3573 阅读 · 0 评论 -
CSS层叠式样式表学习笔记
CSS和HTML分开的优点HTML负责基本的内容展示,而CSS负责样式的控制,制造效果。1、实现解耦合的作用2、使得协作更加明确3、开发效率得到提高CSS和HTML的结合方式内联:就是在想要控制样式的的标签内直接控制,只能作用于该部分,范围最小。内部:直接在head内部中控制该文件的样式。外部:通过link标签链接一个外部的css文件,而控制方式就直接书写在这个外部css文件中。...原创 2020-02-29 12:49:20 · 322 阅读 · 0 评论 -
Emmet语法
Emmet语法1.1 快速生成HTML结构语法1.2 快速生成CSS样式语法1.3 快速格式化代码Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法.快速生成HTML结构语法快速生成CSS样式语法1.1 快速生成HTML结构语法生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键, 就可以生成 <div></div>如果想要生成多个相同标签 加上 * 就可以了 比如 div*3原创 2020-11-04 15:24:00 · 239 阅读 · 0 评论 -
HTML学习笔记
文件标签<!DOCTYPE> 定义文档类型。 <html> 定义一个 HTML 文档<title> 为文档定义一个标题<body> 定义文档的主体<h1> to <h6> 定义 HTML 标题<p> 定义一个段落<br> 定义简单的折行。<hr> 定义水平线。...原创 2020-02-25 16:22:16 · 78 阅读 · 0 评论 -
移动端web——响应式布局和Bootstrap框架
目录移动端WEB开发之响应式布局1.0 响应式开发原理1.1 响应式开发原理1.2 响应式布局容器2.0 Bootstrap2.1Bootstrap简介2.2 bootstrap优点2.3 版本简介2.4bootstrap基本使用2.5 bootstrap布局容器2.6 bootstrap栅格系统移动端WEB开发之响应式布局1.0 响应式开发原理1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。设备的划分情况:小于768的为超小屏幕(手机)原创 2020-11-08 20:28:30 · 414 阅读 · 0 评论 -
HTML小结
HTML学习001标签html语言以一个又一个的标签相互嵌套,串联来表示网页和实现功能,所以标签是html中最最基础的组成部分和功能单元。而标签又分为单标签和双标标签,例如<head></head>和<br>元素元素就是1、标题六级标签2、段落3、链接这是一个链接4、图像5、水平线添加6、换行7、字体标签放大,缩小,粗体,粗体,...原创 2020-01-01 11:40:11 · 135 阅读 · 0 评论 -
html 基础标签
html 基础标签加粗:b(<b>内容</b>),strong(<strong>内容</strong>)倾斜:i(<i>内容</i>),em(<em>内容</em>)删除线:del(<del>内容</del>),s(<s>内容</s>)下划线:u...转载 2019-12-28 21:22:34 · 136 阅读 · 0 评论 -
移动端web——flex布局
目录1.0传统布局和flex布局对比1.1传统布局1.2 flex布局1.3 建议2.0 flex布局原理3.0 父项常见属性3.1 flex-direction设置主轴的方向3.2 justify-content 设置主轴上的子元素排列方式3.3 flex-wrap设置是否换行3.4 align-items 设置侧轴上的子元素排列方式(单行 )3.5 align-content 设置侧轴上的子元素的排列方式(多行)3.6 align-content 和align-items区别3.7 flex-flow原创 2020-11-08 13:13:28 · 112 阅读 · 0 评论 -
H5小游戏介绍
一. 前言 作者曾经一度的迷恋H5小游戏(好玩、收集、模仿、学习),是从2014年流行开始,到2015年朋友圈爆火。那时经常看到朋友圈好友转发分享H5小游戏,有时候自己也会点进去玩一下,简单的游戏情节设计以及操作方式让我们的碎片化时间有了消遣的方式。那么H5小游戏究竟是什么呢?然而H5小游戏因其休闲性受到广大用户喜爱,同样也受...转载 2021-05-11 11:55:35 · 3461 阅读 · 1 评论 -
CSS基本布局——浮动
浮动1.浮动(float)1.1 CSS 布局的三种机制1.2 为什么需要浮动?1.3 什么是浮动(float)1.4 浮动(float)小结1.5 浮动(float)的应用1.6 浮动(float)的扩展1. 浮动元素与父盒子的关系2. 浮动元素与兄弟盒子的关系2. 清除浮动2.1 为什么要清除浮动2.2 清除浮动的方法1).额外标签法(隔墙法)2).父级添加overflow属性方法3).使用after伪元素清除浮动4).使用双伪元素清除浮动2.3 清除浮动总结1.浮动(float)1.1 CSS原创 2020-11-05 23:27:30 · 287 阅读 · 0 评论 -
CSS3新特性——动画技术
目录动画(animation)动画常见属性动画简写方式速度曲线细节案例动画(animation)什么是动画动画是 CSS3 中最具颠覆性的特征之一,可通过设置多个节点来精确的控制一个或者一组动画,从而实现复杂的动画效果动画的基本使用先定义动画在调用定义好的动画语法格式(定义动画)@keyframes 动画名称 { 0% { width: 100px; } 100% { width: 200px }}原创 2020-11-06 19:14:46 · 320 阅读 · 0 评论 -
移动端web——rem布局和less语法
目录1、rem布局1.1 rem单位1.2 媒体查询什么是媒体查询媒体查询语法规范2、less 基础2.1 解决css弊端2.2 Less 介绍Less 使用之变量Less 嵌套Less 运算3、rem适配方案rem实际开发适配方案1案例:苏宁首页rem 适配方案21、rem布局1.1 rem单位rem (root em)是一个相对单位,类似于em,em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如,根元素(html)设置font-size=12px; 非根元素设置wi原创 2020-11-08 13:45:26 · 375 阅读 · 0 评论