前端
文章平均质量分 65
前端学习笔记
心刻
这个作者很懒,什么都没留下…
展开
-
emmet语法学习笔记
以下都是在支持emmet的环境下(如vscode)输入emmet结构形式后按Tab键生成html代码生成html模板结构(!)形式:输入 !(英文感叹号),然后按Tab键或按回车结果:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2021-04-10 22:29:03 · 114 阅读 · 0 评论 -
前端vue项目设置代理服务器解决跨域和利用Mock.js模拟接口
前端开发环境中暂时自我解决跨域问题方案1:要求后端在测试服务器环境开启允许跨域方案2:不需要后端处理,前端在开发者模式下,用代理解决跨域(一般正式部署上线都是由后端进行跨域的响应头的端对端的允许,不会在前端增加一层代理)例子:利用vue脚手架服务器进行代理访问 /api 的请求步骤:1.创建vue.config.js文件2.文件内容如下module.exports = { devServer: { proxy: { // 要进行代理的请求原创 2020-11-15 23:17:38 · 2947 阅读 · 0 评论 -
canvas学习笔记4--刮刮卡
globalCompositeOperation该属性设置或返回如何将一个源(新的)图像绘制到目标(已有的)的图像上。源图像 = 你打算放置到画布上的绘图目标图像 = 你已经放置在画布上的绘图<canvas id="canvas" width="800" height="600"></canvas><script> var canvas = document.querySelector("#canvas") var ctx = canvas.getCo原创 2020-10-25 23:25:05 · 173 阅读 · 0 评论 -
前端代码个人风格
项目1.项目名称、目录名称,文件名称全部采用kebab-case命名,即短横线命名法名称全部采用小写方式,以中划线分隔,有复数结构时,要采用复数命名法,缩写不用复数正例:styles / images / demo-scripts / img / doc反例:style / image / demoStyles / imgs /docsJavaScript1.语句结束分号;不能省略;据说这样子运行效率高点2.if 语句后就算只有一条语句也不能省略大括号{ },因为这样在以后维护的时候,或者在修原创 2020-10-12 21:17:27 · 956 阅读 · 0 评论 -
canvas学习笔记3--绘制时钟
translate移动canvas的translate相当于移动画布的坐标原点位置,而且在这之后画的东西也是按照移动后的坐标原点来画var canvas = document.querySelector("#canvas")var cxt = canvas.getContext("2d")cxt.translate(300,0)cxt.fillStyle = "deepskyblue"//填充一个矩形cxt.fillRect(100,100,300,100)rotate旋转参数是带π的原创 2020-10-07 17:12:33 · 135 阅读 · 0 评论 -
Canvas学习笔记2
画图片var canvas = document.querySelector("#canvas");var ctx = canvas.getContext("2d");//绘制图像// ctx.drawImage(图片对象,x位置,y位置)// ctx.drawImage(图片对象,x位置,y位置,宽度,高度)// ctx.drawImage(图片对象,图像裁剪的位置x,图像的裁剪位置y,裁剪的宽度,裁剪的高度,x位置,y位置,宽度,高度)var img = new Image()img.原创 2020-10-07 11:36:54 · 105 阅读 · 0 评论 -
Canvas学习笔记1
描述:HTML5的canvas标签用于绘制图像(通过脚本,通常是JavaScript)。不过,canvas元素本身没有绘制能力(它仅仅是图形的容器),必须使用脚本来完成实际的绘制任务。getContext()方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。提供完整的getContext(“2d”)对象的属性和方法,可用于在画布上绘制文本、线条、矩形、圆形等等。canvas三要素:id、width、height(这里的宽高跟style是有区别的)正常情况下,放在canvas标签内部的原创 2020-10-07 00:52:48 · 162 阅读 · 0 评论 -
前端打开单点登录的页面(post方式)
前端小菜鸟一名,用的框架多把form表单能够提交数据都给忘了哈哈,记录一下这里是原本自己一个系统,然后通过调用自己系统的后台获取到打开另一个系统页面所需的参数(token那些),将这堆参数通过post请求的方式发送给另一个系统的单点登录接口,另一个系统进行验证和重定向,这样就可以免登陆进入另一个系统的页面。而通过post请求的方式发送给另一个系统的单点登录接口,就是用form表单进行发送,下面是主要代码// 第一个参数是另一个系统的单点登录接口// 第二个参数是请求的方式// 第三个参数是携带的参原创 2020-09-19 11:27:52 · 2040 阅读 · 0 评论 -
Echarts初学使用
介绍常见的数据可视化库:D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)ECharts.js 百度出品的一个开源 Javascript 数据可视化库Highcharts.js 国外的前端数据可视化库,非商用免费,被许多国外大公司所使用AntV 蚂蚁金服全新一代数据可视化解决方案 等等Highcharts 和 Echarts 就像是 Office 和 WPS 的关系ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅原创 2020-06-12 23:29:08 · 202 阅读 · 0 评论 -
history的pushState和replaceState
pushState和replaceStateHTML5新接口,可以改变网址(存在跨域限制)而不刷新页面,这个强大的特性后来用到了单页面应用如:vue-router,react-router-dom中。注意:仅改变网址,网页不会真的跳转,也不会获取到新的内容,本质上网页还停留在原页面!window.history.pushState(data, title, targetURL);@状态对象:传给目标路由的信息,可为空@页面标题:目前所有浏览器都不支持,填空字符串即可@可选url:目标url,不会转载 2020-06-05 11:41:56 · 384 阅读 · 0 评论 -
HTTP状态码及其含义
1XX :信息状态码100 Continue 继续,⼀般在发送 post 请求时,已发送了 http header 之后服务端 将返回此信息,表示确认,之后发送具体参数信息2XX :成功状态码200 OK 正常返回信息201 Created 请求成功并且服务器创建了新的资源202 Accepted 服务器已接受请求,但尚未处理3XX :重定向301 Moved Perma...原创 2020-04-02 19:03:15 · 212 阅读 · 0 评论 -
浏览器私有前缀
浏览器私有前缀是为了兼容老版本的写法,比较新的浏览器无需添加。-moz- :代表firefox浏览器私有属性-ms- :代表ie浏览器私有属性-webkit- :代表safari、chrome私有属性-o- :代表Opera私有属性例子:-moz-border-radius: 10px;-webkit-border-radius: 10px;-o-border-radius: ...原创 2020-03-01 16:31:58 · 124 阅读 · 0 评论