大前端
关注
分享
扫一扫
大前端
醒不了的星期八
种一棵树最好的时间是十年前，其次就是现在
展开
-
一文学会HTML速写Emmet语法
Emmet: 高级的代码补全，让我们写代码更快。话不多说，开干！1.写某个标签然后按tab键自动补全【缩写补全】2. 嵌套的缩写其中 嵌套中有这些字符：> + ^ * ()> 代表父子关系* 代表重复+所以，+代表同级元素^ 代表所以^ 代表网上爬升一级。()代表让逻辑关系更加清晰：3. 属性：特殊符号：# .# 代表id. 代表class关于自定义属性:[]4. 带有数...原创 2020-08-16 11:43:39 · 1056 阅读 · 0 评论 -
Netlify: 前端Vue/React自动化部署服务
Netlify在我以前的博文有介绍。这里打包这个“群聊”项目，这里只演示前端怎么部署，后端是用express写的，部署同理。1. 上传vue项目到Github上：vscode中提交并推送到Github上：这时需要添加远程：2. 打开Netlify：这将让我们打包后的dist目录上线：自动化部署，就是本地对Github上的任何修改都会触发Netlify重新执行Build command。上面的域...原创 2020-06-21 13:22:14 · 853 阅读 · 0 评论 -
浏览器的渲染机制、提升页面性能、错误监控上报
js运行机制：微任务队列、事件循环、单线程错误监控：CSRF防范：css盒模型：Dom事件：原型链：原创 2020-05-25 20:58:24 · 480 阅读 · 1 评论 -
css3：发光按钮、漂亮的登录框、满意的404、带动画的输入框
1.发光按钮<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>发光按钮</title> <link href="https://cdn.boo.原创 2020-05-24 21:20:48 · 1894 阅读 · 0 评论 -
TypeScript: 使用ts-node加速开发
普通的运行ts的方式，需要先通过tsc编译为js文件然后运行node xx.js：一共花了2条命令,使用繁琐：而使用ts-node:npm install -g ts-node只需要ts-node xxxx.ts即可：...原创 2020-04-28 09:57:12 · 12690 阅读 · 2 评论 -
阿里云OSS跨域
如果不考虑CDN回流的话。对于跨域，需要请求协议、域名、端口3者有1个不同，即是跨域。那么怎么解决跨域，原始方法是JSONP,那个时代技术有限,现在都是Cors技术。现在，前端发给后端，后端例如golang可以如下配置：当然，具体用法见官方文档。然后就是vue开发阶段，我的访问url是localhost:3000.前端直传oss，为了分布式考虑，跨域访问了。...原创 2020-04-12 15:30:33 · 1777 阅读 · 0 评论 -
腾讯云：从0到1手把手带你Web开发个人网站及其线上部署 (阿里云同理)
部署到云服务器上的原因：本地开发完一个web项目是可以用本地电脑作为服务器的。但是本地电脑可能因为电脑的环境、硬件等原因导致电脑处于关机状态。此时部署到本机电脑的项目外界就无法通过网络访问了。云服务相对于本地电脑来说，可以保证无时无刻都不处于关机状态，用户可以时刻访问做好的web项目查看效果。项目上线流程：本地开发web项目（这里以go为例） 本地环境搭建 本地web项目代...原创 2020-04-08 22:49:50 · 1112 阅读 · 0 评论 -
Flutter: 学习指南
Flutter让跨平台更加高效。原创 2020-03-31 12:10:19 · 531 阅读 · 1 评论 -
JS打造一个简单的TODO案例到底有多难？
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JS: Todo...原创 2020-03-23 11:31:19 · 652 阅读 · 2 评论 -
前端小demo：星星闪烁
小demo:星星闪烁+自定义滚动条样式当鼠标放上去就会有星星：考虑了星星的重生判断和位移等。index.html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" con...原创 2020-03-13 20:22:49 · 490 阅读 · 0 评论 -
chrome: 调试获取数据篇
其实就是在chrome中的console中使用类似jquery的语法获取想要的数据。例如：那么就可以在console中使用类似jquery的语法：这样就简单调试获取到了数据,然后就可以写相关的代码了。...原创 2020-03-09 10:03:07 · 803 阅读 · 0 评论 -
雪碧图/精灵图： 精准定位
对于一张雪碧图/精灵图来说，是可以帮助我们前端减少资源请求数目的，将需要的图片都归纳在一个网络请求中，这样就减少了请求数，即提高了性能。但是，对于雪碧图的定位来说也是比较头疼的，常常需要打开PS去算。这里推荐一个网站：http://www.spritecow.com/假设有一张雪碧图：假设要获取其中一个图标的位置，那么打开http://www.spritecow.com/网站后...原创 2020-03-08 15:38:16 · 11492 阅读 · 0 评论 -
nvm for windows: 切换node版本
偶尔有些时候，跑别人的项目可能跑不起来是因为node版本的不同。所以,对于 windows用户：安装：点击上面的download now:https://github.com/coreybutler/nvm-windows/releases若系统原先已安装过node，这里会请求是否纳入NVM管理里，点击“是”就可以了简单使用:命令就不赘述了。...原创 2020-03-05 09:31:11 · 334 阅读 · 0 评论 -
Android : 混合开发整理指南
混合开发：是一种开发模式Hybrid App.混合开发 = Native + Web.另一篇博文：Kotlin与H5通信场景应用：例如:微信公众号通过JSSDK连接Native端和Web端微信小程序通过内置框架连接Native端和Web端混合开发的核心技术：JSBridge桥接器实现Native端和Web端双向通信的一种机制。 以JS引擎或WebVie...原创 2020-02-15 13:49:13 · 1290 阅读 · 0 评论 -
vuecli3.0: 开发接口转换上线接口及跨域的简单示例
开发时候的接口pai是不想改的，我们可以通过代理转发，在vue.config.js里设置。【具体讲解】vue-cli 3.0之跨域请求代理配置及axios路径配置问题：在前后端分离的跨域请求中，报跨域问题vue.config.js：module.exports = { runtimeCompiler: true, publicPath: '/', // 设置打包文件相...原创 2020-02-04 10:49:33 · 506 阅读 · 0 评论 -
vue:使用keep-alive提升性能
不使用keep-alive时候：第一次进入首页发起一次后台请求接口第一次跳转，也第一次发起请求关键来了， 当按下返回键，返回到上一个单文件组件的时候，又请求了一次接口：2个页面的反复跳转：可以看到有时候这是十分没有必要的。本案例发生的原因是首页组件每一次路由重新切换到该组件的时候，首页组件都会重新渲染，钩子mounted会重新执行所以就会获取...原创 2020-02-03 23:55:41 · 394 阅读 · 0 评论 -
css样式穿透第三方 >>>
vue中使用了第三方的组件，其定义了一个css，需要在当前的单文件组件改变第三方组件里面的css:第三方的css样式class名通过chrome调试查看：这样做是没有效果的。这个class是第三方组件里面定义的css，而我们这里即使使用权重也无法修改，‘应该使用css穿透:意思是swipper组件下的该class会响应background #fff。从而打破了s...原创 2020-02-03 11:54:34 · 1630 阅读 · 0 评论 -
vue: @符号和style中@import引入其他的css产生的问题
@ 是src的别名。会解决方法：原创 2020-02-03 11:02:56 · 1406 阅读 · 0 评论 -
CSS3: 快速制作页面加载动画
介绍3个简单的案例：案例1：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...原创 2020-01-21 22:05:18 · 461 阅读 · 0 评论 -
Web: Auth权限认证
Http中的Auth：分2种：authorization：针对权限。e.g:后端非管理员接口的调用403(权限不足) authentication:针对用户名密码登录的身份认证。错误码是401.(没有登录)HTTP中如何认证身份：http是无状态的，会导致一个问题：第一次请求中进行了登录，第2次请求执行一些操作的时候，在这次请求是不知道上一次请求是已经登录的，所以第2次请求也是...原创 2020-01-20 23:54:40 · 5083 阅读 · 0 评论 -
前端的存储：websql和indexedDB
关于存储，我们大多都知道存储的老伙计localStorage和sessionStorage、cookie等今天就继续了解下websql和indexedDB的使用(js的红宝书上有详细介绍)WebSQL:(不再维护，当扩展看看就好)其弥补前端的关系型存储。底层实现是通过sqlite这个轻量级的数据库。只有极少数的浏览器支持(chrome等)【其他浏览器不去实现是因为webSQL这...原创 2020-01-16 15:29:33 · 1900 阅读 · 0 评论 -
pm2 : 阿里云部署Node.js
示例程序：将上面的demo部署到阿里云服务器上，通过公网访问：使用pm2工具在本地，先用安装一下pm2:项目下先初始化项目启动和运维的脚本，：管理：查看日志交给运维的命令：1. pm2 start ecosystem.config.js // 通过项目的配置文件后台启动2. pm2 log //查看日志3. pm2...原创 2020-01-07 16:38:37 · 410 阅读 · 0 评论 -
PWA渐进式Web应用
文末附上全部源码。PWA是什么？Progressive Web App，即 渐进式网络应用。可以循序渐进的实现它，每次实现一部分业务。降低了业务的部署成本、适应了Browser厂商的更新节奏。PWA组成技术：Service Worker Promise fetch cache API Notification API1. Service Worker:（PWA最重...原创 2019-12-27 17:53:33 · 479 阅读 · 0 评论 -
Websocket：前端的实时性
http的请求过程：客户端主动发起请求到服务端，服务端根据请求发起相应的处理后给客户端一个响应。前提： 客户端必须先发起请求，服务端才能发起响应。非常依赖客户端的主动性。客户端不主动的发起请求的话，服务端是不能主动推送响应的。Socket:Socket通常意义上是指的TCP的socket。也是客户端和服务端，只不过客户端和服务端上来2方就建立一个长连接通道，在这个长连接...原创 2019-12-26 12:52:40 · 861 阅读 · 0 评论 -
轻量级web框架三部曲(2): flask
1.安装pipenv虚拟环境：1.1 用豆瓣源安装pipenv.pip install pipenv-i http://pypi.douban.com/simple --trusted-host pypi.douban.com虚拟环境是隔离不同i项目所需要的依赖。类似npm安装好pipenv后，切换到虚拟环境下：不幸的是：这是多次请求这个 pypi...原创 2019-12-08 17:33:21 · 200 阅读 · 0 评论 -
轻量级web框架三部曲(1): express
安装：滚粗。。。~用npm步骤：1.require()与实例化全局app对象：2.写controller：(以get请求为例子)3.监听端口：4.运行：【需要npm装nodemon实时热加载】nodemon xx.js4种参数的上传形式：路径参数、查询字符串、表单、json1.路径参数：2.查询字符串：3.表单：需要先添加中...原创 2019-12-08 16:40:32 · 211 阅读 · 0 评论 -
nrm : 切换源[前端包安装镜像]
1.安装nrm:2.查看当前源：可以看到当前源在npm官方镜像下。3.切换国内的源：(例如淘宝镜像):以前写过一篇文章：https://blog.csdn.net/qq_39969226/article/details/95930361是用cnpm命令.用了nrm后，就不用那么麻烦了：然后这样就可以让以后安装npm包的时候变得更快.4.使用：（同npm一样...原创 2019-12-08 16:06:53 · 326 阅读 · 0 评论 -
PhotoShop: PSD精准切图
PS传统切图：(误差难以避免)切图与切片 切片的基本操作及其技巧 导出操作（存储为web所用格式）PSD来源：https://365psd.com/orhttps://dribbble.com/shots从cc版本开始改进了切图流程：利用ps脚本进行自动化切图.打开ps，并选择打开我们的psd文件。选择“将图层导出到文件”（找不到选项的时候就使用ps的智能搜索）...原创 2019-11-02 14:28:05 · 408 阅读 · 0 评论 -
Web安全之SQL注入(初级知识)
SQL注入：SQL注入是一种将SQL代码添加到输入参数中，传递到SQL服务器解析并执行的一种攻击手段比如查询前端向后台传送的url中：xxxxx?id=1查询某个id为1的user，然后后台会返回json数据。sql服务器对应执行的sql语句为：SELECT * FROM users WHERE id = 1如果恶意构造输入参数：xxxxx?id=-1 OR ...原创 2019-10-15 16:30:49 · 416 阅读 · 0 评论 -
VBScribt语法
Visual Basic Script 微软开发的解释性脚本语言。其可以运行在Windows系统、浏览器上。有点像Node.js的设计思路。1.定义变量：VBS中，变量只能先声明再赋值。变量是动态类型的，VBS根据上下文赋值推断数据类型。dim city,namecity = "绵阳"name = "尹磊"2.条件语句例如：dim lovelove = 50...原创 2019-08-13 23:28:15 · 261 阅读 · 0 评论 -
JavaScript：回到顶部效果
回到顶部，可以通过设置锚点，或者使用JavaScript实现：// 页面加载完毕后触发window.onload=function(){ var obtn = document.getElementById("btn"); var timer = null;//定时器 var isTop = true;//判断中途想要停下来 var clientHeight...原创 2019-08-20 22:25:53 · 275 阅读 · 0 评论 -
模拟接口：Easy Mock && RAP2
Easy Mock：https://www.easy-mock.com/Github:https://github.com/easy-mock/easy-mock/blob/dev/README.zh-CN.md这个网站可以给我们创建接口并使用写前端的时候，当后端数据还没出来的时候，可以自己模拟写一个接口供开发。【也可以使用抓包工具进行本地的模拟，但没有网络模拟好】也可以使用淘...原创 2019-09-24 16:13:31 · 3953 阅读 · 25 评论 -
WebStorm: Emmet语法快速创建无意义的文字
lorem 其后加上数字就会生成对应数量的无意义的文字，补全文本，方便排版例如：输入lorem100原创 2019-09-27 16:32:46 · 1371 阅读 · 0 评论 -
npm国内慢，使用淘宝cnpm镜像(安装与卸载)
NPM 是随同 NodeJS 一起安装的包管理工具，我们经常使用它来下载第三方包到本地。淘宝 NPM 镜像，它是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。1.使用淘宝 NPM 镜像定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:npm install -g cnpm --regi...原创 2019-07-14 22:03:56 · 3270 阅读 · 1 评论