![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 56
Supreme_lwl
这个作者很懒,什么都没留下…
展开
-
RSA公钥解密方法
使用RSA私钥加密、公钥解密的方法。借助vue框架开发,以下则是使用node-rsa的加密及解密过程:let NodeRSA = require("node-rsa");Vue.prototype.$nodersa = NodeRSA;const _pubKey = `-----BEGIN PUBLIC KEY----- MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCXCAjACBKL9BIkiawOJpy6Q3nr bI29b3tVxcRIEkr4DAkoG原创 2021-04-08 13:09:13 · 4090 阅读 · 1 评论 -
canvas常用方法总结
一、渲染上下文var canvas = document.getElementById('tutorial');//获得 2d 上下文对象var ctx = canvas.getContext('2d');二、绘制形状绘制矩形fillRect(x, y, width, height):绘制一个填充的矩形。strokeRect(x, y, width, height):绘制一个矩形的边框。clearRect(x, y, widh, height):清除指定的矩形区域,然后这块区域会变的原创 2020-08-01 15:15:46 · 3830 阅读 · 0 评论 -
React组件生命周期
旧版本一、挂载阶段组件将要挂载:componentWillMount组件挂载完成:componentDidMountconstructor(构造函数)–>componentWillMount(组件将要挂载)–>render(数据渲染)–>componentDidMount(组件挂载完成)二、更新阶段父组件中改变了props传值时触发的函数:componentWillReceiveProps是否要更新数据:shouldComponentUpdate将要更新数据:comp原创 2020-06-19 17:02:37 · 239 阅读 · 0 评论 -
Vuex状态管理入门看完这篇就会了
一、Vuex概述概念 Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的使用组件之间数据的共享。在组件的外部定义了一个全局的空间STORE用来存储数据,所有组件都可以访问这些数据,不需要复杂的数据传递。优点能够在vuex中集中管理共享的数据,易于开发和后期维护。能够高效地实现组件之间的数据共享,提高开发效率。存储在vuex中的数据都是响应式的,能够时时保持数据与页面的同步。什么数据适合存储到Vuex中一般情况下,只有组件之间共享的数据才有必要存储到vuex中。原创 2020-05-22 12:35:03 · 182 阅读 · 0 评论 -
vue-cli 代码格式化(去掉代码末尾分号以及把双引号改成单引号)
在项目根目录新建一个文件:.prettierrc新增内容:{ “semi”:false,//分号 "singleQuote":true,//单引号}原创 2020-05-16 21:36:02 · 2947 阅读 · 0 评论 -
浅析JS原型与原型链
一、原型原型的出现,就是为了解决构造函数只能添加属性而不能添加方法的缺点。通过构造函数可以动态地给对象添加属性,但是却不能添加方法,其实是有点不合理的。原型对象:在声明了一个函数之后,浏览器会自动按照一定的规则创建一个对象,这个对象就叫做原型对象。这个原型对象其实是储存在了内存当中。二、prototype构造函数:通俗的一句话说,就是你在script标签里面声明的那个函数。prototy...原创 2020-03-31 12:56:23 · 178 阅读 · 0 评论 -
使用html5的canvas绘制网格(详细注释,一看就会)
效果图:代码:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="./arrow.js"></script></head>...原创 2020-03-27 22:10:21 · 2933 阅读 · 0 评论 -
html5+css3案例——仿瓢城旅行网
一、主页二、机票订购页面三、index.html<!DOCTYPE html><html><head> <title>瓢城旅行网</title> <meta charset="utf-8" /> <link href="css/index.css" rel="stylesheet" type="tex...原创 2020-03-26 18:06:27 · 5420 阅读 · 4 评论 -
深入理解JavaScript闭包以及应用场景
一、什么是闭包?闭包就是一个函数,它处于另一个函数中,并且可以访问它的外部函数中的变量。function fun(){ var n=0; return function(){ //这就是一个闭包,它可以使用变量n n++; console.log("n="+n); }}var f=fun(); f(); //输出:n=1 f(); /...原创 2020-03-26 11:54:28 · 404 阅读 · 0 评论 -
vue-cli使用npm安装jquery第三方库报404解决方案
问题描述:jquery有很多第三方库很好用,但是在vue里面用npm安装时报404错误,于是只好把js库放在项目中,然后手动导入。本案例要在vue-cli中引入的是face-cursor.js。在Test.vue中导入jquery和jQuery-face-cursor.js插件,如下:<template> <div class="card"> ...原创 2020-03-25 23:12:51 · 535 阅读 · 0 评论 -
web前端开发工程师模拟面试面经(一)
h5和css3新特性vue.js和jquery各自优缺点vue.js在html代码中交互的底层原理js垃圾回收机制闭包的优势和使用场景v-model底层原理bs的布局是怎样的移动端布局方案jqueryjs原型链js对象一定能访问父节点的属性吗js事件监听vue解决跨域:怎么实现的xss防范ant-design-...原创 2020-03-25 10:16:50 · 710 阅读 · 0 评论 -
一文教你学会jQuery基础
一、jQuery语法基础语法: $(selector).action()文档就绪事件:$(document).ready(function(){ // 开始写 jQuery 代码... });简洁写法(与以上写法效果相同)$(function(){ // 开始写 jQuery 代码... });二、jQuery选择器元素选择器:$(“p”)...原创 2020-03-24 12:00:26 · 179 阅读 · 0 评论 -
Ant-Design-Vue走马灯自定义next() prev()goTo()切换按钮
内容区域:加一个ref=“varousel”,任意取 <a-carousel class="varousel" ref="varousel"> <div><h3>1</h3></div> <div><h3>2</h3></div> ...原创 2020-03-19 19:19:38 · 7363 阅读 · 1 评论 -
html5 required属性实现表单验证效果
界面:代码:<!DOCTYPE html><html><head> <title>注册</title> <style type="text/css"> .login-form{ width: 400px; height: 300px; margin:100px auto; border...原创 2020-03-11 23:45:04 · 1306 阅读 · 0 评论 -
html5实现商品拖拽到购物车效果/drag
描述:从商品列表拖动商品到购物车之后,购物车将会增加一个商品,同时这个商品在商品列表中不会消失。如果购物车列表已经存在这个商品,则此次操作无效。主界面:代码:<!DOCTYPE html><html><head> <title>购物车</title> <style type="text/css"> .dra...原创 2020-03-11 23:42:03 · 3671 阅读 · 0 评论 -
html5 localstorage模拟数据库+js实现表格增删改操作
界面:html代码:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>学生信息基本操作</title> <link href="css/index.css" rel="stylesheet" type="text/css"/&g...原创 2020-03-05 14:43:54 · 711 阅读 · 1 评论 -
css3 transition实现图片轮播百叶窗效果
css3 transition实现图片轮播百叶窗效果:<!DOCTYPE html><!DOCTYPE html><html><head> <title>css3百叶窗</title> <style type="text/css"> *{margin:0;padding:0;} .contain...原创 2020-03-04 19:14:03 · 1131 阅读 · 0 评论 -
2020黑马前端就业班(上)/ css3动画 / 响应式开发
原创 2020-02-07 21:39:11 · 2111 阅读 · 0 评论 -
css3 transform实现两张图片翻转动态效果
问题描述:实现最开始是一张图片面向我们,一张图片面向下面,当鼠标移入时,两张图片同时沿X轴旋转90度。实现原理:首先把两张图片的位置摆放好,即一张图片是初始状态不用管,另一张图片沿X轴旋转-90度,并且位于底部。当鼠标移入时,将他们的父盒子设置沿X旋转90度。代码:<!DOCTYPE html><!DOCTYPE html><html><hea...原创 2020-03-04 10:52:19 · 3534 阅读 · 1 评论 -
Vue-cli项目中用js实现表格滚动(超简单)
问题描述:在table中每次滚动一行数据,循环滚动。首先写一个table<table > <tr> <td> 编号</td> <td>时间段</td> <td>人数</td> </...原创 2020-03-03 20:45:59 · 1574 阅读 · 0 评论 -
web前端基础
HTML基础html不区分大小写。head包含:title、meta、base、link、script、style 3.font标签用face属性设置字体。html列表:有序列表(type定义编号样式)、无序列表(circle disc square)、定义列表(dl dt dd)align属性值:left right center justify(两端对齐)url包含:协议、主机地...原创 2020-02-24 16:38:26 · 253 阅读 · 0 评论 -
vue-cli3安装amcharts依赖报错
报错:试了很多种安装方法都失败,包括:npm install @amcharts/amcharts4最后试了下:cnpm install @amcharts/amcharts4就成功了到现在我还很懵逼,不过终于成功了,记录一下免得再犯同样的错误。...原创 2020-02-20 17:24:29 · 591 阅读 · 0 评论 -
TypeScript/ts知识总结
一、TypeScript简介TypeScript是JavaScript的一个超集,主要提供了类型系统和对ES6的支持。全局安装命令:cnpm install -g typescript编译文件:tsc 文件名二、TypeScript数据类型原始数据类型:string、number、boolean、null、undefined、enum、symbol 、any。空值一般采用void...原创 2020-02-14 19:41:43 · 394 阅读 · 0 评论 -
JavaScript高级程序设计
一、JavaScript简介组成一个完整的Javascript应由下列三部分组成:核心(ECMAScript)文档对象模型(DOM)浏览器对象模型(BOM)二、在HTML中使用Javascriptscript元素HTML5为script定义了下列6个属性async:可选。表示应立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本(异步执行...原创 2020-02-13 21:45:12 · 1097 阅读 · 0 评论 -
移动前端开发/移动端web开发
一、视口概念视口:浏览器显示页面内容的屏幕区域。分成3种:布局视口(layout viewport)、视觉视口(visual viewport)、理想视口(ideal viewport)meta视口标签实现理想视口二、二倍图物理像素&物理像素比移动端的物理像素与px并不是一一对应的关系,存在一个像素比,每款手机的像素比不一样。视网膜屏幕技术把更多的像素...原创 2020-02-10 22:20:14 · 295 阅读 · 0 评论 -
Ajax编程基础
一、Ajax运行环境Ajax需要运行在网站环境中才有效,不能直接双击html文件运行。二、Ajax实现步骤创建Ajax对象var xhr = new XMLHttpRequest();告诉Ajax请求地址和参数xhr.open('get',''http://www.example.com');发送请求xhr.send();获取服务器端给客户端的响应数据xhr...原创 2020-02-09 22:04:06 · 83 阅读 · 0 评论 -
使用yarn创建Vue.js项目
一.yarn的安装(win10)1.去官网下载yarn安装程序下载地址:https://yarnpkg.com/zh-Hans/docs/install#windows-stable2.双击安装->选择安装地址->打开cmd输入yarn --version,显示版本号,代表安装成功。如果没有显示版本号请查看环境变量是否设置正确。(yarn的使用也是和npm一样,之前要安装好n...原创 2020-02-13 21:48:39 · 666 阅读 · 0 评论